Używanie znaczników <style> w <body> z innym HTML

195 
<html>
  <body>
    <style type="text/css">
      p.first {color:blue}
      p.second {color:green}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>

    <style type="text/css">
      p.first {color:green}
      p.second {color:blue}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>
  </body>
</html>

W jaki sposób przeglądarka ma renderować css, który nie jest ciągły? Czy ma generować strukturę danych przy użyciu wszystkich stylów css na stronie i używać jej do renderowania?

Czy też renderuje przy użyciu informacji o stylu w kolejności, w jakiej widzi?

html css Gagan
źródło
2
Powiedziałbym, że jest to niezdefiniowane zachowanie, ponieważ nie jest prawidłowym kodem HTML. Aby uzyskać więcej informacji, które elementy są prawidłowe, a które nie: en.wikipedia.org/wiki/HTML_element
Felix Kling
2
Odkładając na bok ten problem, złym rozwiązaniem jest mieszanie CSSi HTML.
0x2D9A3
1
@ 0x2D9A3 Niekoniecznie prawda. Żądanie zewnętrznej strony CSS zajmuje więcej czasu niż CSS zdefiniowany w <head>tagu
Kolob Canyon
@KolobCanyon Zgadzam się, ale z reguły CSS powinien znajdować się w osobnym pliku. Jeśli masz mnóstwo CSS, łatwiej jest nim zarządzać (utrzymywać, (post) przetwarzanie, minimalizacja, pakowanie) i służyć jako osobny plik, a twoja treść (HTML) może również ładować się szybciej, co prowadzi do lepszego UX. Jednak, jak zawsze w przypadku programowania, wszystko zależy od kontekstu, więc YMMW :)
0x2D9A3,
3
@KolobCanyon, to nie jest kwestia, czy CSS powinien znajdować się w osobnym pliku. W tym przypadku pytanie dotyczy CSS <body>zamiast w <head>.
Ray Butterworth

Odpowiedzi:

312

Jak już wspomniano inni, HTML 4 wymaga umieszczenia <style>znacznika w <head>sekcji (nawet jeśli większość przeglądarek zezwala na <style>znaczniki w obrębie body).

Jednak HTML 5 zawiera scopedatrybut (patrz aktualizacja poniżej), który pozwala tworzyć arkusze stylów, których zakres obejmuje element nadrzędny <style>znacznika. Umożliwia to również umieszczanie <style>znaczników w <body>elemencie:

<!DOCTYPE html>
<html>
<head></head>
<body>

<div id="scoped-content">
    <style type="text/css" scoped>
        h1 { color: red; } 
    </style>

    <h1>Hello</h1>
</div>

    <h1>
      World
    </h1>

</body>
</html>

Jeśli wyrenderujesz powyższy kod w przeglądarce obsługującej HTML-5, która obsługuje scoped, zobaczysz ograniczony zakres arkusza stylów.

Jest tylko jedno ważne zastrzeżenie ...

W chwili pisania tej odpowiedzi (maj 2013 r.) Prawie żadna przeglądarka głównego nurtu nie obsługuje obecnie tego scopedatrybutu. (Chociaż najwyraźniej kompilacje Chromium dla programistów obsługują to.)

JEDNAK istnieje ciekawa implikacja scoped atrybutu odnoszącego się do tego pytania. Oznacza to, że przyszłe przeglądarki są zobowiązane za pośrednictwem standardu, aby zezwalać na <style>elementy w <body>(dopóki zakres <style>elementów jest ograniczony).

Biorąc pod uwagę, że:

  • Prawie każda istniejąca przeglądarka obecnie ignoruje ten scopedatrybut
  • Prawie każda istniejąca przeglądarka obecnie pozwala <style> tagi w<body>
  • Przyszłe implementacje będą wymagane, aby umożliwić (zakresowe) <style>tagi w obrębie<body>

... wtedy dosłownie nie ma żadnej szkody * w umieszczaniu <style>tagów w ciele, o ile w przyszłości udowodnisz je scopedatrybutem. Jedynym problemem jest to, że obecne przeglądarki faktycznie nie ograniczają zakresu arkusza stylów - zastosują go do całego dokumentu. Chodzi o to, że do wszystkich praktycznych celów możesz dołączyć <style>tagi pod <body>warunkiem, że:

  • Zabezpiecz swój kod HTML na przyszłość, dołączając ten scopedatrybut
  • Zrozum, że jak na razie arkusz stylów w <body>rzeczywistości nie będzie miał zasięgu (ponieważ nie ma jeszcze obsługi głównego nurtu przeglądarki)


* z wyjątkiem oczywiście sikania walidatorów HTML ...

Wreszcie, odnosząc się do powszechnego (ale subiektywnego) twierdzenia, że ​​osadzanie CSS w HTML jest słabą praktyką, należy zauważyć, że sednem tego scopedatrybutu jest dostosowanie typowych nowoczesnych ram programistycznych, które pozwalają programistom importować fragmenty HTML jako moduły lub zawartość syndykowaną . Bardzo wygodnie jest mieć osadzony CSS, który dotyczy tylko określonej części HTML, w celu opracowania zamkniętych, modułowych komponentów o określonych stylach.

Aktualizacja od lutego 2019 r., Zgodnie z dokumentacją Mozilli , scopedatrybut jest nieaktualny. Chrome przestał go obsługiwać w wersji 36 (2014) i Firefox w wersji 62 (2018). W obu przypadkach funkcja musiała zostać wyraźnie włączona przez użytkownika w ustawieniach przeglądarki. Żadna inna główna przeglądarka nigdy go nie obsługiwała.

Charles Salvia
źródło
3
@RobertMcKee: czy faktycznie to przetestowałeś? Spodziewałbym się, że zwykle cała strona HTML (w tym cały styl wstawiany) jest analizowana przed renderowaniem, ponieważ zazwyczaj nie jest duża, a przeglądarki czekają (bardzo krótko) przed renderowaniem, aby uniknąć flashowania niezstylowanej treści, które mogą się pojawić z powodu css połączonego w head. Jeśli jest to Twoja tylko css, i jeśli strona jest duża i jeśli połączenie sieciowe nie jest bardzo szybki, to może zobaczysz błysk pierwotnych ustawień treści, ale dziwi mnie to, że w większości praktycznych sytuacjach.
Eamon Nerbonne
4
Na dzień dzisiejszy tylko Firefox obsługuje element stylu o zasięgu (zgodnie z caniuse.com/#feat=style-scoped ). A ponieważ popularne przeglądarki obsługują po prostu element STYLE wewnątrz BODY, używałbym go, jeśli to konieczne. Jeśli CSS powinien być zastosowany w zakresie, możesz po prostu poprzedzić każdy selektor w źródle CSS identyfikatorem / klasą opakowania. Zrobiłem to w aplikacji internetowej, która ładowała raporty HTML po stronie serwera i renderowała je za pomocą AJAX. CSS może być następnie poprzedzony prostym wyrażeniem regularnym w JavaScript: cssString.replace (/ (^ | \}) ([^ {] +) (\ {) / g, '$ 1' + prefix + '$ 2 $ 3')
Adam Hošek
5
Wsparcie @scopedlub scopedwydaje się wymierać: tu i tutaj
Kiran Subbaraman
51
Wspieranie @KiranSubbaraman: Właśnie (lipiec 2016) przeczytałem na mozilla dev: „ Atrybut o zasięgu został usunięty ze specyfikacji po ograniczonym i eksperymentalnym przyjęciu przez Chrome i Firefox. Powinieneś go unikać , ponieważ prawie na pewno będzie on wkrótce usunięte z tych przeglądarek ”. >> developer.mozilla.org/en-US/docs/Web/HTML/Element/…
jave.web
9
scopedAtrybut został usunięty z aktualnych specyfikacji HTML5.
Albert Wiersch
61

Niepomyślnych wiadomości dla „ciała” w stylu lubiących W3C niedawno przegrali wojnę HTML przed WHATWG, którego versionless HTML „Living Standard” stała się obecnie oficjalny jeden, który, niestety, nie nie pozwalają STYLE w BODY. Krótkie szczęśliwe dni minęły. ;) Walidator W3C działa teraz również według specyfikacji WHATWG. (Dzięki @FrankConijn za heads-up!)

(Uwaga: jest to przypadek „na dzień dzisiejszy”, ale ponieważ nie ma wersji, łącza mogą w dowolnym momencie stać się nieważne bez powiadomienia lub kontroli. O ile nie chcesz połączyć się z poszczególnymi zatwierdzeniami źródła w GitHub, zasadniczo nie możesz nie wprowadzaj już stabilnych odniesień do nowego oficjalnego standardu HTML AFAIK. Popraw mnie, jeśli istnieje kanoniczny sposób, aby zrobić to poprawnie.)

OBSOLETED GOOD NEWS:

Tak, w STYLEkońcu obowiązuje BODYod wersji HTML5.2! (Iscoped nie ma.)

Ze specyfikacji W3C ( rozkoszuj się ostatnią linią! ):

4.2.6 Element stylu

...

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

Gdzie oczekiwana jest zawartość metadanych.

W elemencie noscript, który jest dzieckiem elementu head.

W ciele, gdzie oczekiwana jest zawartość przepływu.

UWAGA NA STRONIE META:

Sam fakt, że pomimo szkód związanych z „wojną przeglądarek” wciąż musieliśmy rozwijać się przeciwko dwóm śmiesznie konkurującym „oficjalnym” standardom „HTML” (cytaty 1 standard + 1 standard < 1 standard) oznacza, że ​​podejście „do normalnego rozsądku” tworzenie stron internetowych nigdy tak naprawdę nie przestało obowiązywać.

To może się wreszcie zmienić teraz, ale powołując się na konwencjonalną mądrość: autorzy / programiści stron internetowych, a tym samym przeglądarki powinny ostatecznie zdecydować, co powinno (a nie powinno) być w specyfikacjach, gdy nie ma żadnego dobrego powodu, aby to, co już zostało zrobione rzeczywistość. I większość przeglądarek dawna obsługiwane STYLEw BODY(w taki czy inny sposób, patrz np scoped. Attr) (który mimo swojej wrodzonej wydajności (i ewentualnie innych) kary my . Powinien zdecydować płacić czy nie, specyfikacje). Tak więc, po pierwsze, będę dalej na nie stawiać i nie rezygnuję z nadziei. ;) Jeśli WHATWG ma taki sam szacunek dla rzeczywistości / autorów, jak twierdzą, mogą po prostu zrobić to, co zrobiła W3C.

Sz.
źródło
3
Czytam specyfikacje, ale nie rozumiem. Czy możesz podać przykładowy kod stylebloku w bodywalidacji?
Frank Conijn
3
@FrankConijn: Dobra uwaga, wszystko się zmieniło, zaktualizowałem odpowiedź! To naprawdę mylące. Zarówno specyfikacje W3C 5.2, jak i 5.3 traktują STYLEjak metadane i treści, ale najnowsza specyfikacja WHATWG „żywa” opowiada starą, nudną historię „tylko metadanych” (dopuszczając ją tylko w HEAD). Aby dodać obrażenia do obrażeń, walidator W3C wydaje się podążać za smakiem WHATWG. Nie zdecydowałem jeszcze, czy się śmiać, czy płakać, ale na pewno osobiście zdecydowałem się „pomylić” z przypadkiem „przeglądarki + W3C - walidator” i pozwolić STYLE w BODY. (BTW, nie zapominaj: powinniśmy być ostatecznym źródłem standardu .)
Sz.
Naprawdę myślę, że przeskoczyli rekina za pomocą tego badziewia, w zasadzie nie pozostawiają innego wyboru niż użyć stylów linii, jeśli chcesz dynamicznie ustawić właściwość obrazu tła w systemie szablonów. O wiele mniej inwazyjne było upuszczenie programowo generowanego bloku stylu tuż nad twoją treścią HTML.
GovCoder
32

Kiedy widzę, że duże systemy zarządzania treścią rutynowo umieszczają niektóre elementy <style> (niektóre, nie wszystkie) w pobliżu treści, która opiera się na tych klasach, dochodzę do wniosku, że koń jest poza stodołą.

Przejrzyj źródła stron z cnn.com, nytimes.com, huffingtonpost.com, najbliższej gazety wielkomiejskiej itp. Wszyscy to robią.

Jeśli istnieje dobry powód, aby umieścić dodatkową sekcję <style> gdzieś w ciele - na przykład, jeśli dołączasz () różnorodne i niezależne elementy strony w czasie rzeczywistym, a każdy z nich ma własną <style> własną, i organizacja będzie czystsza, bardziej modułowa, zrozumiała i łatwiejsza w utrzymaniu - mówię, po prostu ugryź kulę. Na pewno byłoby lepiej, gdybyśmy mogli mieć styl „lokalny” z ograniczonym zakresem, np. Zmienne lokalne, ale idziesz do pracy z posiadanym HTML-em, a nie z HTML-em, który możesz chcieć lub chcieć mieć później.

Oczywiście istnieją potencjalne wady i dobre (jeśli nie zawsze istotne) powody, by postępować zgodnie z ortodoksją, jak to rozwinęli inni. Ale dla mnie wygląda to bardziej na przemyślane użycie <style> w <body> już weszło do głównego nurtu.

Timberline
źródło
1
Pragmatyzm FTW!
Waruyama,
1
Tak, masz rację. Jako przykład używam znacznika <style> w <body> wewnątrz mojej wtyczki. Dlaczego, ponieważ jest to najprostszy sposób na stylową zawartość wtyczek. Ale w pewnym momencie wszystkie klasy css są unikatowe dla moich danych wtyczek.
Avirtum
7

Niepoprawny HTML, w każdym razie wydaje się, że każda przeglądarka bierze pod uwagę tylko drugą instancję.

Testowane pod ostatnimi wersjami FF i Google Chrome pod Fedorą oraz FF, Opera, IE i Chrome pod XP.

Nico
źródło
6

Sądzę, że będzie się to różnić w zależności od przeglądarki: globalne reguły wyświetlania prawdopodobnie zostaną zaktualizowane wraz z przeglądaniem kodu.

Takie zmiany można zobaczyć w globalnych regułach wyświetlania czasami, gdy zewnętrzny arkusz stylów jest ładowany z opóźnieniem. Coś podobnego może się tu zdarzyć, ale w tak krótkim odstępie czasu, że tak naprawdę nie jest renderowane.

W każdym razie to nie jest poprawny HTML, więc powiedziałbym, że to daremna rzecz do przemyślenia. <style>tagi należą do headsekcji strony.

Pekka
źródło
5

Jak powiedzieli inni, nie jest to prawidłowy HTML, ponieważ znaczniki stylu należą do głowy.

Jednak większość przeglądarek tak naprawdę nie wymusza tej weryfikacji. Zamiast tego po załadowaniu dokumentu style są scalane i stosowane. W takim przypadku drugi zestaw stylów zawsze zastąpi pierwszy, ponieważ były ostatnimi napotkanymi definicjami.

Nie ja
źródło
5

<style>Tag należy w<head> części, oddzielone od wszystkich treści.

Odniesienia: W3C Specs i W3Schools

Josh Stodola
źródło
52
Nie dotyczy pytania. A te sztywne wytyczne zostały przekroczone przez rzeczywistość. Istnieje WIELE przypadków, w których autorzy nie mogą zdefiniować / uwzględnić swojego stylu w nagłówku HTML.
Javier,
3
Być może było to prawdą w 2010 r., Ale dziś daleka jest od akceptowalnej odpowiedzi.
Izaak Lubow
3

W twoim przykładzie przeglądarka nie powinna „nic robić”. HTML jest nieprawidłowy. Wyzwalane jest albo odzyskiwanie po błędzie, albo analizator składni robi to tak, jak chce.

W prawidłowym przypadku wiele arkuszy stylów jest po prostu traktowanych jako pojawiających się jeden po drugim, kaskada jest obliczana normalnie.

Quentin
źródło
2

Myślę, że może to być problem z ograniczonymi kontekstami, np. Edytory WYIWYG w systemie internetowym używanym przez użytkowników niebędących programistami , co ogranicza możliwości przestrzegania standardów. Czasami (jak TinyMCE) jest to biblioteka, która umieszcza twoją treść / kod wewnątrz textareatagu, który jest renderowany przez edytor jako duży divtag. Czasami może to być stara wersja tych edytorów.

Przypuszczam, że:

  1. ci użytkownicy niebędący programistami nie mają otwartego kanału z administratorami systemu (lub webdevami instytucji), aby poprosić o uwzględnienie niektórych reguł CSS w systemiestylesheets . W rzeczywistości byłoby to niepraktyczne dla administratorów (lub webdevów), biorąc pod uwagę liczbę żądań w tym sensie, jakie mieliby.
  2. ten system jest starszą wersją i nadal nie obsługuje nowszych wersji HTML.

W niektórych przypadkach bez stylezasad użytkowania może to być bardzo słaba jakość projektowania. Tak, ci użytkownicy potrzebują dostosowania. OK, ale jakie byłyby rozwiązania w tym scenariuszu? Biorąc pod uwagę różne sposoby wstawiania CSS na htmlstronie, przypuszczam, że te rozwiązania:

Pierwsza opcja: zapytaj swojego systemu

Poproś system o przyznanie się do włączenia niektórych reguł CSS w systemie stylesheets. To będzie zewnętrzne lub wewnętrzne rozwiązanie CSS . Jak już powiedziano, może to nie być możliwe.

Druga opcja: <link> wł<body>

Użyj zewnętrznego arkusza stylów na bodyznaczniku, tj. Użyj linkznacznika w obszarze, do którego masz dostęp (to znaczy w witrynie, wewnątrz bodyznacznika, a nie w headznaczniku). Niektóre źródła podają, że jest to w porządku, ale „nie jest dobrą praktyką”, np. MDN :

<link>Element może występować albo w <head>lub <body>elementu, w zależności od tego, czy ma ona rodzaj łącza, które jest ciałem ok . Na przykład stylesheettyp łącza jest odpowiedni dla treści i dlatego <link rel="stylesheet">jest dozwolony w treści. Nie jest to jednak dobra praktyka; sensowniej jest oddzielić <link>elementy od zawartości ciała, umieszczając je w <head>.

Niektóre inne ograniczają go do <head>sekcji, na przykład w3schools :

Uwaga: ten element występuje tylko w sekcji nagłówka, ale może pojawić się dowolną liczbę razy.

Testowanie

Przetestowałem to tutaj (środowisko pulpitu, w przeglądarce) i działa dla mnie. Utwórz plik foo.html:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <link href="bar.css" type="text/css" rel="stylesheet">
    <h1 class="test1">Hello</h1>
    <h1 class="test2">World</h1>
</body>
</html>

A następnie plik CSS, w tym samym katalogu, o nazwie bar.css:

.test1 { 
    color: green;
};

Cóż, będzie to tylko możliwe, jeśli masz jak załadować plik CSS gdzieś w systemie instytucji. Może tak by było.

Trzecia opcja: <style>wł<body>

Użyj internetowego arkusza stylów na bodyznaczniku, tj. Użyj styleznacznika w obszarze, do którego masz dostęp (to znaczy w witrynie, wewnątrz bodyznacznika, a nie w headznaczniku). O to właśnie tutaj odpowiadają odpowiedzi Charlesa Salvii i Sz . Wybierając tę ​​opcję, rozważ ich obawy.

Czwarta, piąta i szósta opcja: sposoby JS

Alert Te są związane z modyfikowaniem <head>elementu strony. Może to nie będzie administratorzy systemu pozwolą na to. Dlatego zaleca się, aby najpierw zapytać ich o zgodę.

Okej, zakładając, że udzielono pozwolenia, strategią jest dostęp do <head> . W jaki sposób? Metody JavaScript.

Czwarta opcja: nowa w <link>dniu<head>

To kolejna wersja drugiej opcji. Użyj zewnętrznego arkusza stylów na <head>znaczniku, tj. Użyj <link>elementu poza obszarem, do którego masz dostęp (to znaczy, że w witrynie nie będzie wewnątrz bodyznacznika, a tak wewnątrz headznacznika). To rozwiązanie jest zgodne z zaleceniami MDN i w3schools , jak cytowano powyżej, w sprawie rozwiązania drugiej opcji. Nowy Linkobiekt zostanie utworzony.

Aby rozwiązać problem za pomocą JS, istnieje wiele sposobów, ale w poniższych kodelinach pokazuję jeden prosty.

Testowanie

Przetestowałem to tutaj (środowisko pulpitu, w przeglądarce) i działa dla mnie. Utwórz plik f.html:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <h1 class="test1">Hello</h1>
    <h1 class="test2">World</h1>
    <script>
        // JS code here
    </script>
</body>
</html>

Wewnątrz scripttagu:

var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);

A następnie w pliku CSS, w tym samym katalogu, zwanym bar.css(jak w 2. opcji):

.test1 { 
    color: green;
};

Jak już powiedziałem: będzie to wyglądać tylko wtedy, gdy masz jak załadować plik CSS gdzieś w systemie instytucji.

Piąta opcja: nowa w <style>dniu<head>

Użyj nowego wewnętrznego arkusza stylów na <head>znaczniku, tj. Użyj nowego <style>elementu poza obszarem, do którego masz dostęp (to znaczy, że w witrynie nie będzie wewnątrz bodyznacznika, a tak wewnątrz headznacznika). Nowy Styleobiekt zostanie utworzony.

Rozwiązuje to JS. Poniżej przedstawiono jeden prosty sposób.

Testowanie

Przetestowałem to tutaj (środowisko pulpitu, w przeglądarce) i działa dla mnie. Utwórz plik foobar.html:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <h1 class="test1">Hello</h1>
    <h1 class="test2">World</h1>
    <script>
        // JS code here
    </script>
</body>
</html>

Wewnątrz scripttagu:

var newStyle = document.createElement("style");
newStyle.innerHTML = 
    "h1.test1 {"+
        "color: green;"+
    "}";
document.getElementsByTagName("head")[0].appendChild(newStyle);

6 opcja: użycie istniejącej <style> na<head>

Użyj istniejącego wewnętrznego arkusza stylów na <head>znaczniku, tj. Użyj <style>elementu poza obszarem, do którego masz dostęp (to znaczy w witrynie, nie wewnątrz bodyznacznika i tak wewnątrz headznacznika), jeśli taki istnieje. Nowy Styleobiekt zostanie utworzony lub CSSStyleSheetprzedmiot zostanie użyty (w kodzie rozwiązania przyjętego tutaj).

Jest to w pewnym punkcie ryzykowne. Po pierwsze , ponieważ może nie istnieć jakiś <style> obiekt. W zależności od sposobu wdrożenia tego rozwiązania możesz uzyskać undefinedzwrot (system może użyć zewnętrznego arkusza stylów ). Po drugie , ponieważ będziesz edytować prace autora projektu systemu (problemy z autorstwem). Po trzecie , ponieważ może to nie być dozwolone w polityce bezpieczeństwa IT Twojej instytucji. Zapytaj więc o pozwolenie (tak jak w innych rozwiązaniach JS) .

Przypuśćmy, że ponownie udzielono pozwolenia:

Trzeba będzie wziąć pod uwagę pewne ograniczenia dotyczące sposobu dostępną ten sposób: insertRule(). Proponowane rozwiązanie wykorzystuje scenariusz domyślny i operację na początkustylesheet , jeśli takie istnieją.

Testowanie

Przetestowałem to tutaj (środowisko pulpitu, w przeglądarce) i działa dla mnie. Utwórz plik foo_bar.html:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 class="test1">Hello</h1>
    <h1 class="test2">World</h1>
    <script>
      // JS code here
    </script>
  </body>
</html>

Wewnątrz scripttagu:

function demoLoop(){ // remove this line
    var elmnt = document.getElementsByTagName("style");
    if (elmnt.length === 0) {
        // there isn't style objects, so it's more interesting create one
        var newStyle = document.createElement("style");
        newStyle.innerHTML =
            "h1.test1 {" +
                "color: green;" +
            "}";
        document.getElementsByTagName("head")[0].appendChild(newStyle);
    } else {
        // Using CSSStyleSheet interface
        var firstCSS = document.styleSheets[0];
        firstCSS.insertRule("h1.test2{color:blue;}"); // at this way (without index specified), will be like an Array unshift() method
    }
} // remove this too
demoLoop(); // remove this too
demoLoop(); // remove this too

Innym podejściem do tego rozwiązania jest użycie CSSStyleDeclarationobiektu (dokumenty w w3schools i MDN ). Ale może to nie być interesujące, biorąc pod uwagę ryzyko zastąpienia istniejących reguł CSS systemu.

7. opcja: wbudowany CSS

Użyj wbudowanego CSS . To rozwiązuje problem, chociaż w zależności od rozmiaru strony (w wierszach kodu) utrzymanie kodu (przez samego autora lub inną wyznaczoną osobę) kodu może być bardzo trudne.

Jednak w zależności od kontekstu roli w instytucji lub jej zasad bezpieczeństwa systemu internetowego może to być unikalne dostępne rozwiązanie.

Testowanie

Utwórz plik _foobar.html:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 style="color: green;">Hello</h1>
    <h1 style="color: blue;">World</h1>    
  </body>
</html>

Odpowiadając ściśle na pytanie zadane przez Gagana

W jaki sposób przeglądarka ma renderować css, który nie jest ciągły?

  1. Czy ma generować strukturę danych przy użyciu wszystkich stylów css na stronie i używać jej do renderowania?
  2. Czy też renderuje przy użyciu informacji o stylu w kolejności, w jakiej widzi?

(dostosowany cytat)

Aby uzyskać dokładniejszą odpowiedź, sugeruję Google następujące artykuły:

  • Jak działają przeglądarki: za kulisami współczesnych przeglądarek internetowych
  • Renderuj konstrukcję, układ i farbę drzewa
  • Co to znaczy „renderować” stronę internetową?
  • Jak działa renderowanie w przeglądarce - za kulisami
  • Renderowanie - HTML Standard
  • 10 Renderowanie - HTML5
Igor Santos
źródło
+1 Dobry pomysł w tym znaczniki skryptów i użyć javascript, aby dodać css, html doskonale prawną dla edytorów WYSIWYG niemych CMS
djolf
1

Ponieważ ten kod HTML jest niepoprawny, nie ma żadnego wpływu na wynik ... oznacza to po prostu, że HTML jest zgodny ze standardem (wyłącznie w celach organizacyjnych). Ze względu na ważność można to napisać w następujący sposób:

<html>
<head>
<style type="text/css">
  p.first {color:blue}
  p.second {color:green}
</style>
</head>
<body>
<p class="first" style="color:green;">Hello World</p>
<p class="second" style="color:blue;">Hello World</p>

Domyślam się, że przeglądarka stosuje ostatni styl, na jaki się natknie.

G. Bickham
źródło