Zwykle pliki css są umieszczane w środku <head></head>, a co jeśli wrzucę je do środka <body></body>, jaka to różnica?
155
Aby dodać do tego, o czym jdelStrother wspomniał o specyfikacjach w3 i ARTstudio o renderowaniu w przeglądarce.
Jest to zalecane, ponieważ jeśli masz zadeklarowany CSS przed <body>rozpoczęciem, Twoje style są już załadowane. Dzięki temu użytkownicy bardzo szybko zauważają, że coś pojawia się na ich ekranie (np. Kolory tła). Jeśli nie, użytkownicy zobaczą pusty ekran przez jakiś czas, zanim CSS dotrze do użytkownika.
Ponadto, jeśli zostawisz style gdzieś w programie <body>, przeglądarka będzie musiała ponownie wyrenderować stronę (nową i starą podczas ładowania) po przeanalizowaniu zadeklarowanych stylów.
linkistylenie mogą pojawiać się w treści, chyba że mają określony zakres (styl) lub mająitempropzadeklarowany atrybut (łącze).stylejest elementem przepływu w html5 i html4.1 (nawet jeśli nie ma zakresu) i można go umieścić w treści.scopedatrybut stał się przestarzały.W najnowszych wersjach specyfikacji HTML można teraz umieszczać
<style>znaczniki w elementach body. https://www.w3.org/TR/html5/dom.html#flow-content Równieżscopedatrybut, który był wymagany do umieszczeniastyletagu w tagu,bodyjest teraz przestarzały.Oznacza to, że możesz używać
styletagu wszędzie, gdzie chcesz, jedynymi konsekwencjami jest zmniejszona wydajność strony z powodu możliwego ponownego przemalowania / ponownego malowania, gdy przeglądarka trafi w style dalej w drzewie strony.Nieaktualna odpowiedź:
<style>Znacznik nie jest dozwolone w<body>zależności od specyfikacji W3. (Jeśli to konieczne, możesz oczywiście zastosować style wbudowane<div style="color:red">, ale ogólnie uważa się to za słabe rozdzielenie stylu i treści)źródło
<style>jest to element flow w HTML 5 i 4.1 i można go umieścić w treści (jak wszystkie inne elementy flow).Umieszczenie CSS w treści oznacza, że zostanie załadowany później. Jest to technika, której niektórzy używają, aby pozwolić przeglądarce na szybsze rozpoczęcie rysowania interfejsu (tj. Usuwa krok blokujący). Jest to ważne dla wygody użytkownika na smartfonach.
Robię co w mojej mocy, aby zachować jeden mały plik CSS na,
<head>a resztę przenoszę na dół. Na przykład, jeśli strona korzysta z JQuery UI CSS, zawsze przenoszę ją na dole strony<body>, tuż przed linkami do javascript JQuery. Przynajmniej wszystkie elementy inne niż JQuery mogą być już narysowane.źródło
Głowica przeznaczona jest do (cytowania z W3C):
Zobacz globalną strukturę dokumentu HTML . Ponieważ CSS nie jest treścią dokumentu, powinien znajdować się w głowie.
Również każdy inny programista oczekuje, że go tam zobaczy, więc nie myl rzeczy, umieszczając go w treści, nawet jeśli działa!
Jedyny CSS, który powinieneś umieścić w treści, to wbudowany CSS , chociaż zwykle unikam stylów wbudowanych.
źródło
Standardy ( HTML 4.01: element style ) jasno określają, że tag style jest dozwolony tylko wewnątrz tagu head. Jeśli umieścisz tagi stylu w tagu body, przeglądarki i tak będą starać się jak najlepiej go wykorzystać, jeśli to możliwe.
Możliwe, że przeglądarka zignoruje tag stylu w treści, jeśli określisz ścisły typ dokumentu. Nie wiem, czy jakakolwiek obecna przeglądarka to robi, ale nie liczyłbym na to, że wszystkie przyszłe wersje będą tak zrelaksowane, jeśli chodzi o umieszczenie elementu stylu.
źródło
styletagi są dozwolone w treści, jeśli mająscopedatrybut.Chociaż
styletag nie jest dozwolony w treści,linktag jest, więc dopóki odwołujesz się do zewnętrznego arkusza stylów, wszystkie przeglądarki powinny poprawnie renderować i używać CSS, gdy jest używany wbody.Źródło: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
źródło
Oprócz wcześniejszych odpowiedzi, chociaż umieszczenie bloku kodu stylu wewnątrz elementu może działać w nowoczesnych przeglądarkach (chociaż to nadal nie oznacza, że jest to poprawne), zawsze istnieje niebezpieczeństwo, szczególnie w przypadku starszych przeglądarek, że przeglądarka wyrenderuje kod jako tekst chyba że sekcja stylu znajduje się w sekcji CDATA.
Oczywiście inną rzeczą związaną z umieszczeniem go wewnątrz elementu, poza stylami wbudowanymi, jest to, że ponieważ nie spełnia on specyfikacji W3C HTML / XHTML, każda strona z tym elementem w treści zakończy się niepowodzeniem w walidatorze W3C. Zawsze łatwiej jest znaleźć błędy w nieoczekiwanych problemach z wyświetlaniem, jeśli cały kod jest prawidłowy, co ułatwia wykrycie błędów. Nieprawidłowy element HTML może niekorzystnie wpłynąć na renderowanie dowolnego elementu poza miejscem, w którym występuje w kodzie, więc możesz uzyskać nieoczekiwane efekty, mając elementy w miejscach, w których nie powinny być, ponieważ gdy przeglądarka znajdzie nieprawidłowy element, po prostu sprawia, że najlepiej zgadnąć, jak powinien go wyświetlić, a różne przeglądarki mogą podejmować różne decyzje dotyczące sposobu renderowania.
Niezależnie od tego, czy używasz przejściowego, czy ścisłego typu dokumentu, nadal będzie on nieprawidłowy zgodnie ze specyfikacją (X) HTML.
źródło
W rzeczywistości zniweczyłbyś cel używania CSS, umieszczając style w treści. Chodzi o to, aby oddzielić treść od prezentacji (i funkcji). W ten sposób wszelkie zmiany stylu można wprowadzić w arkuszu stylów, a nie w treści. Gdy użyjesz metody stylu wbudowanego, każda strona ze stylami wbudowanymi musi być zmieniana jedna po drugiej. Nużące i ryzykowne, ponieważ można przegapić jedną, trzy lub dziesięć stron.
Używając arkusza stylów, wystarczy zmienić arkusz stylów; zmiany rozprzestrzeniają się automagicznie na każdą stronę HTML, która zawiera linki do arkusza stylów.
Argument neonble'a to także kolejny ważny powód; Jeśli zepsujesz HTML, dodając CSS w tekście, renderowanie stanie się problemem. HTML nie zgłasza wyjątków do twojego kodu. Zamiast tego wychodzi i robi to najlepiej, jak potrafi, i idzie dalej.
Zgodność ze standardami sieciowymi za pomocą arkusza stylów zapewnia lepszą witrynę. A kiedy potrzebujesz pomocy, ponieważ rzeczy na Twojej stronie nie są dokładnie takie, jak chcesz, umieszczenie CSS w głowie, a nie w treści, znacznie ułatwia rozwiązywanie problemów samodzielnie i dla każdego, kogo poprosisz o pomoc.
źródło
Dwie sprzeczne odpowiedzi:
Ze strony MDN na tagu linku:
Z CSS The Definitive Guide (wydanie 4/2017) strona 10
źródło
Różnica jest taka. Ładowanie strony przebiega asynchronicznie, więc jeśli posiadasz zewnętrzny arkusz stylów, załaduje on plik css natychmiast po dotarciu do tagu linku, dlatego dobrze jest mieć na górze w głowie.
źródło
Co to za różnica?
Zalety: Czasami łatwiej jest zastosować określone atrybuty w określonych miejscach, zwłaszcza jeśli kod jest generowany w locie (na przykład tworzenie przez php, a każda lista o dynamicznym rozmiarze wymaga własnej klasy ... na przykład dla czasów elementów dla transformacji).
Wady: Nieco wolniej, może kiedyś nie działać w odległej przyszłości.
Moja ogólna opinia na ten temat: nie rób tego, nie musisz, ale jeśli musisz, nie trać z tego powodu snu.
źródło
Umieszczenie
<style>w treści działa dobrze we wszystkich nowoczesnych przeglądarkach.Używałem tego w serwisie eBay.
Jeśli to zadziała, nie kop.
źródło