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:
- 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 systemie
stylesheets . W rzeczywistości byłoby to niepraktyczne dla administratorów (lub webdevów), biorąc pod uwagę liczbę żądań w tym sensie, jakie mieliby.
- 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?
- 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?
(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