Deklarować styl CSS poza elementem "HEAD " strony" HTML"?
Mój przypadek użycia jest następujący:
Komponuję stronę HTML używając części, które są poprawnymi fragmentami HTML ale nie poprawnymi stronami, podobnie jak Divs ; te elementy używają CSS do zarządzania swoim stylem.
Chciałbym, aby każdy fragment był odpowiedzialny za własne wymagania dotyczące stylów i nie polegał na deklaracjach arkuszy stylów w głównym fragmencie (tym z tagiem "HTML").
Więc tu pojawia się pytanie: czy jest jakiś (standardowy) sposób na dodanie stylizacji CSS poza elementem HEAD (z wyłączeniem stylizacji inline za pomocą atrybutu "style")?
Myślę, że mógłbym użyć ramek, ale wolałbym unikać tego rozwiązania.
Z góry dzięki za pomoc.
OSTATNIA EDYCJA:
Dzięki propozycjom zzzzBov, JMC Creative oraz moontear, i po kilku testach, oto odpowiedź:
- użycie JavaScript do dynamicznego ładowania niektórych arkuszy stylów CSS : HTML4 / XHTML i zgodne z HTML5 ,
- osadzanie elementów "style" bezpośrednio wewnątrz fragmentów: niezgodne z zHTML4/XHTML , ale wydaje się byćszeroko obsługiwane i jestzgodne z HTML5 .
Ponieważ muszę obsługiwać klientów poczty e-mail, użyłem drugiego rozwiązania, które jest ponadto prostsze.
Dziękuję wszystkim za zainteresowanie i udział.
3 answers
Tl;dr:
Jeśli nie czujesz się komfortowo używając funkcji HTML, które nie osiągnęły poziomu dojrzałości rekomendacji W3C , nie ma standardowego sposobu dodawania <style> do <body> strony.
Jeśli wygodnie jest korzystać z mniej dojrzałych funkcji, HTML5.2 wydaje się standaryzować <style> elementy, aby mogły być dozwolone wszędzie tam, gdzie spodziewana jest zawartość przepływu (tj. <body> i większość jego elementów).
Jeśli używasz już atrybutu [scoped], przestań używać atrybutu [scoped] atrybut, ponieważ nigdy nie został ustandaryzowany i traci obsługę przeglądarki.
Historia:
HTML 4.01
W HTML4. 01 element style był dozwolony tylko w <head>. Przeglądarki, dokładając wszelkich starań, aby renderować to, co autor chce, a nie to, co autor napisał , respektowały <style> elementy w <body> pomimo, że strony te są technicznie nieważne.
HTML 5
Element <style> nadal jest nieprawidłowy w <body>
HTML 5.1
W niektórych roboczych szkicach specyfikacji HTML5.1 element <style> miał pozwolić na atrybut [scoped], który pozwalałby <style> element być używany wzawartość przepływu (tj. w <body>).
Jako przykład tego, jak można by to wykorzystać, można by powiedzieć:
<!DOCTYPE html>
<title>Example of using the scoped attribute</title>
<div>
<style scoped>
p {
color: darkred;
}
</style>
<p>this text would be dark red</p>
</div>
<p>this text would be black</p>
W Firefoksie w wersji 21 Dodano obsługę funkcji scoped, a w Chrome za flagą w wersji 20. Funkcja nie otrzymała wystarczająco wsparcie, więc został później usunięty z HTML5.1 roboczy szkic .
Chrome jako pierwszy usunął tę funkcję w wersji 36 . Firefox ustawił tę funkcję za flagą w wersji 55.
HTML 5.2
W wersji roboczej HTML5.2 spec W lipcu 2017 r. dodano wsparcie dla elementu<style>, który ma być dozwolony w treści przepływu:
Konteksty, w których ten element może być użyty:
- gdzie oczekuje się zawartości metadanych.
- w elemencie
<noscript>, który jest potomkiem elementu<head>.- w organizmie, gdzie spodziewana jest zawartość przepływu.
Mine
[[23]}w momencie pisania tego dodatku pozostał w specyfikacji HTML5.2, która jest obecnie na poziomie dojrzałości rekomendacji kandydata .Podczas gdy to sprawia, że korzystanie z <style> elementów w <body> nadal stanowi pewne ryzyko, ten szczególny Zmiana to standaryzacja czegoś, co przeglądarki obsługują od wielu lat.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-15 14:09:55
Nie ma standard way (EDIT: od HTML5 najwyraźniej jest!) dodawania elementu <style> poza znacznikiem <head> - jest to dozwolone tylko tam, a nie wewnątrz znacznika <body> (Patrz DTD tutaj).
Jeśli chcesz stylizować fragmenty HTML indywidualnie i nie używać stylów CSS w swojej głowie, musisz uciekać się do stylizacji inline. Jednak: większość przeglądarek rozumie tagi <style> wewnątrz ciała, więc równie dobrze możesz ich używać, ale Twoja strona nie będzie zgodność ze standardami.
W jakikolwiek sposób:
- nie należy używać stylizacji inline
- powinieneś przestrzegać standardów
- powinieneś umieścić CSS w głowie, gdzie jego miejsce
Z tego, co rozumiem, używasz jakiegoś szablonu, w którym wstawiasz różne fragmenty HTML na stronę o różnych wzorach. Czy to takie złe, jeśli umieścisz wszystkie style w jednym dużym pliku CSS?
Czy nie byłoby możliwe dynamiczne ładowanie innego CSS pliku (poprzez Skrypty JS lub po stronie serwera), kiedy fragment HTML zostanie wstawiony na stronę (to byłaby preferowana metoda)?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-05 20:28:46
Znalazłem dwa hacki aby to zrobić. Oba z nich powinny być doskonale poprawne html.
Sposób SVG
Zawiń swój <style /> element wewnątrz <svg /> elementu.
<div class="foo">Red text</div>
<svg><style>.foo { color: red }</style></svg>Link Data-Uri
Sformatuj swój css jako Uri danych i użyj go w elemencie <link />.
<div class="foo">Red text</div>
<link rel="stylesheet" href="data:text/css,.foo%20%7B%20color%3A%20red%20%7D" />Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-01 15:02:09