Krótka odpowiedź
Zgodnie z aktualną specyfikacją tak, styleelementy muszą zawsze znajdować się w head. Nie ma wyjątków (z wyjątkiem styleelementu wewnątrz templateelementu , jeśli chcesz to policzyć).
Nie zawsze tak było w przeszłości. Jeśli zależy Ci na szczegółach specyfikacji i jej historii, czytaj dalej.
Bez względu na to, co mówi specyfikacja, używanie styleelementów w programie body działa mniej więcej we wszystkich głównych przeglądarkach. Jednak jest to uważane za złą praktykę, zarówno dlatego, że narusza specyfikację, jak i dlatego, że może powodować niepożądane konsekwencje, takie jak gorsza wydajność renderowania lub „flashowanie niestylizowanej treści”.
Historia specyfikacji
style elementy nie istniały w HTML 2 . Zostały wprowadzone w HTML 3.0, gdzie zostały uwzględnione na liście elementów, które mogły być zawarte w The Head Element , ale nie zostały uwzględnione na liście elementów, które mogą znajdować się w The Body Element . Tak więc w momencie pierwszej specyfikacji element można było uwzględnić tylko w plikuhead .
Tak było (choć wyrażono je przy użyciu innych sformułowań) do czasu HTML 5, który wprowadził (od czasu usunięcia) scopedatrybut dla styleelementów. Atrybut ten, jeśli jest obecny, miał na celu umożliwienie styleumieszczenia elementu w elemencie w treści w celu nadania stylu tylko potomkom tego elementu. Jednak ta funkcja nigdy nie dotarła do żadnej prawdziwej przeglądarki (przynajmniej nie bez konieczności włączenia jej flagą programisty) i została usunięta ze specyfikacji W3C i WhatWG „z powodu braku zainteresowania ze strony implementatora” . Odtąd styleelementy były dozwolone tylko w kontekstach, które dopuszczają zawartość metadanych, która jest tylko nagłówkiem. W ten sposób wróciliśmy do tych samych reguł, co przed HTML 5.
Jednak z powodu błędu popełnionego przez obie organizacje specyfikacyjne, nienormatywny indeks elementów zawartych jako załącznik w obu specyfikacjach nie został odpowiednio zaktualizowany, aby odzwierciedlić usunięcie scoped, co czyni go niezgodnym ze specyfikacją normatywną. Zwróciłem na to uwagę zarówno WhatWG, jak i W3C , a robiąc to nieświadomie uruchomiłem zdarzenia, które spowodowały rozbieżność dwóch specyfikacji.
Rozwiązaniem WhatWG na niespójność między specyfikacją normatywną a indeksem nienormatywnym było zaakceptowanie mojej poprawki korygującej indeks nienormatywny.
Z drugiej strony W3C odrzucił mój równoważny patch na korzyść aktualizacji specyfikacji normatywnej, aby umożliwić użycie styleelementów wbody , jednocześnie zastrzegając, że może to powodować problemy i powinno być wykonywane „ostrożnie”. Powodem tej zmiany było dostosowanie specyfikacji do rzeczywistego zachowania przeglądarki.
Tak więc od marca 2017 r. Oficjalna odpowiedź na to pytanie zależała od tego, której organizacji normalizacyjnej zdecydujesz się wysłuchać. Jeśli podałeś (aś) (ogólnie bardziej szanowaną) specyfikację WhatWG, astyle element nie był dozwolony w body. Jeśli podałeś specyfikację W3C, było to dozwolone, ale nie zalecane.
Ten głupi stan rzeczy został zakończony (być może podobnie jak wiele innych takich niespójności) traktatem pokojowym z kwietnia 2019 r. Między W3C a WhatWG , Który uzgodnił, że specyfikacja WhatWG stanie się jedynym prawdziwym żywym standardem HTML, a W3C po prostu wypuści migawki z niego jako ponumerowane Specyfikacje HTML zamiast równoległego opracowywania konkurencyjnej specyfikacji. Zatem zmiana z 2017 na widelec W3C, która zezwalała na styleelementy w elemencie, bodynie jest już częścią żadnej obecnej specyfikacji; to tylko ciekawostka historii.
Tak więc dzisiaj wystarczy spojrzeć na specyfikację WhatWG aby określić, co jest oficjalnie dozwolone. Ma to do powiedzenia:
4.2.6. Plikstyleelementem
Zawartość metadanych .
Gdzie oczekuje się zawartości metadanych .
W <noscript>elemencie, który jest dzieckiem <head>elementu.
CTRL-Fing w specyfikacji jednostronicowej ujawnia, że jedynym elementem, którego model zawartości zawiera zawartość metadanych, jest ten headelement.
Nienormatywny indeks elementów, o których wspomniałem wcześniej, ustalając również, potwierdza, że jedynymi dopuszczalnymi rodzicami styleelementu są a headlub noscriptelement.