Czy <STYL> musi znajdować się w nagłówku <HEAD> dokumentu HTML?

136

Ściśle mówiąc, czy styletagi muszą znajdować się wewnątrz headdokumentu HTML? Sugeruje to standard 4.01, ale nie jest to wyraźnie określone:

Element STYLE umożliwia autorom umieszczanie reguł arkusza stylów w nagłówku dokumentu. HTML dopuszcza dowolną liczbę elementów STYLE w sekcji HEAD dokumentu.

Mówię „ściśle mówiąc”, ponieważ mam aplikację, która umieszcza elementy stylu w treści, a wszystkie przeglądarki, z którymi testowałem, wydają się używać elementów stylu. Zastanawiam się tylko, czy to rzeczywiście legalne.

html coding-style html-head eaolson
źródło
1
Jeśli masz wątpliwości, walidator znaczników W3C zawsze pomaga :) http://validator.w3.org/
Lazlo
Jedynym wyjątkiem od reguły „wstaw <style> w <head>” jest poczta e-mail w formacie HTML, ponieważ wiele usług poczty internetowej po prostu usuwa wszelkie elementy head, co oznacza, że ​​nie ma już twoich stylów.
user132837
1
Specyfikacje wymagają od przeglądarek obsługi stylew programie body, więc jest to dla mnie wystarczająco dobre, niezależnie od tego, co sugerują sekcje ze wskazówkami autora.
WraithKenny

Odpowiedzi:

104

stylema znajdować się tylko na headdokumencie.

Oprócz punktu weryfikacji, jednym zastrzeżeniem, które może Cię zainteresować podczas korzystania stylez aplikacji na stronie, bodyjest flashowanie niestylizowanych treści . Przeglądarka otrzymywałaby elementy, które byłyby stylizowane po ich wyświetleniu, powodując ich zmianę rozmiaru / kształtu / czcionki i / lub migotania. Na ogół jest to oznaka złego rzemiosła. Generalnie możesz uciec od umieszczania w styledowolnym miejscu, ale staraj się tego unikać, gdy tylko jest to możliwe.

HTML 5 wprowadził scopedatrybut, który umożliwiał umieszczanie styletagów w każdym miejscu w treści, ale potem ponownie go usunął.

Esteban Küber
źródło
6
Do tej pory wydaje się, że tylko Firefox obsługuje ten scopedatrybut, patrz caniuse.com/#feat=style-scoped .
Jaime Hablutzel
2
Połączony artykuł zniknął w linku rot æther, więc oto najnowsza dostępna zarchiwizowana wersja: web.archive.org/web/20150525042412/http://bluerobot.com/web/css/ ...
Zachary Murray
@ZacharyMurray dzięki za ostrzeżenie! Zaktualizowałem link w treści do archiwum internetowego.
Esteban Küber
1
Specyfikacja wymaga, aby zgodne przeglądarki obsługiwały styletagi, bodywięc pomimo części specyfikacji dotyczącej autora, uważam style treści za prawidłowe. github.com/whatwg/html/issues/1605#issuecomment-235961103
WraithKenny
19

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

Kategorie :

Zawartość metadanych .

Konteksty, w których można użyć tego elementu :

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.

Mark Amery
źródło
18

Podczas gdy inne odpowiedzi są poprawne, jestem zaskoczony, że nikt nie wyjaśnił, gdzie standardy zabraniają stylów poza nimihead .

Właściwie jest to w sekcji o headelemencie (i w DTD ):

<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->

Tak, wiem. DTD są trudne do odczytania.

Jest to jedyne miejsce, w którym STYLEwystępuje element, więc domyślnie jest on nieprawidłowy w innym miejscu.

user123444555621
źródło
6
Jestem taki skołowany.
dav_i
1
Powinien używać teraz HTML5, który IIRC nie ma DTD. Sama specyfikacja HTML5 mówi, co jest, a czego nie.
Jan Kyu Peblik
14

Nie powinny wychodzić poza głowę, ale i tak działają; chociaż możesz zauważyć szybkie migotanie. Witryna nie powinna sprawdzać się za pomocą tagu stylu poza głową, ale czy to naprawdę ma znaczenie? Ponadto tagi linków działają również poza nagłówkiem, mimo że nie powinny.

geowa4
źródło
5
Powiedzenie „oni pracują” jest trochę trudne. W najlepszym przypadku można powiedzieć, że większość obecnych przeglądarek nadal będzie renderować style, ale w tym błędzie nie ma nic, co po prostu „działa”. Nie może działać w żadnej przyszłej wersji żadnej przeglądarki i nie robiliby nic złego.
Chuck
6
imo, style renderowane = działa; nic trudnego. to ostatnie zdanie trzeba przepisać; to nie ma sensu. Wspomniałem, że to nie było „właściwe”, kiedy powiedziałem, że to nie potwierdzi, więc nie mogę zrozumieć, co miałeś na myśli przez to zdanie.
geowa4
Problem polega na tym, że nawet jeśli są stylizowane, będziesz miał trochę migotania na treści, gdy te style
pojawią się
2
chyba że tag stylu jest pierwszy w treści
geowa4
Nie próbuj tego w domu.
TechNyquist
3

Tak jak w innych odpowiedziach, tak naprawdę nie musi tam być. Jednak nie zostanie zweryfikowana. W tym przypadku może to mieć znaczenie lub nie, ale należy pamiętać, że renderowanie html zależy wyłącznie od przeglądarek. Z tego co wiem, wszystkie używane dziś przeglądarki będą obsługiwały umieszczanie go poza głową, ale nie możesz tego zagwarantować w przyszłych przeglądarkach i przyszłych wersjach przeglądarek.

Trzymaj się normy, a będziesz bezpieczniejszy. O ile bezpieczniejsze jest wiele dyskusji.

Louis
źródło
3

Zalecenie HTML5.2 W3C, 14 grudnia 2017 (nie wcześniej projekt, o którym mowa powyżej) mówi teraz można dołączyć <style>.

„W ciele, gdzie oczekuje się przepływu treści”. (punkt 4.2.6)

Anahata
źródło
Chociaż teraz W3C oficjalnie stwierdza, że specyfikacja WhatWG unieważnia wszystkie poprzednie specyfikacje, a specyfikacja WhatWG nie zezwala stylew body, więc wracamy do tego, aby było to jednoznacznie zabronione. Zobacz moją odpowiedź, jeśli interesuje Cię kręta ścieżka, którą tu dotarliśmy.
Mark Amery,
2

Znacznik stylu w dowolnym miejscu poza tagiem <head>nie będzie sprawdzany z regułami W3C.

womp
źródło
-1

Możesz użyć tagu style wewnątrz sekcji head lub body lub także poza tagiem HTML (zewnętrzny HTML nie jest zalecany). W projektach czasu rzeczywistego wiele razy można zobaczyć, że używają one tagu stylu poza tagiem HTML

Adarsh ​​Joshi
źródło