Я предполагаю, что это может быть проблемой ограниченного контекста, например, редакторов WYIWYG в веб-системе, используемой пользователями, не являющимися программистами , что ограничивает возможности соблюдения стандартов. Иногда (например, TinyMCE), это библиотека, которая помещает ваш контент / код в textareaтег, который редактором представляется как большой divтег. А иногда это может быть старая версия этих редакторов.
Я полагаю, что:
- эти пользователи , не являющиеся программистами , не имеют открытого канала с системными администраторами (или веб-сайтами организации), чтобы попросить включить некоторые правила CSS в систему
stylesheets. На самом деле, это было бы нецелесообразно для администраторов (или веб-разработчиков), учитывая количество запросов в том смысле, что они будут иметь.
- эта система является устаревшей и до сих пор не поддерживает более новые версии HTML.
В некоторых случаях, без использования styleправил, это может быть очень плохой опыт проектирования. Так что да, эти пользователи нуждаются в настройке. Хорошо, но каковы будут решения в этом сценарии? Учитывая различные способы вставки CSS на htmlстраницу, я предполагаю, что эти решения:
1-й вариант: спросите у своего сисадма
Попросите вашу систему adm для включения некоторых правил CSS в систему stylesheets. Это будет внешнее или внутреннее решение CSS . Как уже было сказано, это может быть невозможно.
2-й вариант: <link>вкл<body>
Используйте внешнюю таблицу стилей для bodyтега, т. Е. Используйте linkтег внутри области, к которой у вас есть доступ (то есть на сайте, внутри bodyтега, а не в headтеге). Некоторые источники говорят, что это нормально, но «не очень хорошая практика», как MDN :
<link>Элемент может происходить либо в <head>или <body>элементе, в зависимости от того, имеет ли он тип связи, которое тело-ки . Например, stylesheetтип ссылки body-ok, и поэтому <link rel="stylesheet">разрешен в теле. Тем не менее, это не очень хорошая практика для подражания; имеет больше смысла отделять ваши <link>элементы от содержимого вашего тела, помещая их в <head>.
Некоторые другие ограничивают его <head>разделом, например, w3schools :
Примечание. Этот элемент присутствует только в разделе заголовка, но может появляться любое количество раз.
тестирование
Я проверил это здесь (окружение рабочего стола, в браузере), и оно работает для меня. Создать файл 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>
Затем CSS-файл в том же каталоге называется bar.css:
.test1 {
color: green;
};
Что ж, это выглядит просто возможным, если у вас есть способ загрузки файла CSS где-нибудь в системе учреждения. Может быть, это будет так.
3-й вариант: <style>вкл<body>
Используйте таблицу стилей Интернета для bodyтега, т. Е. Используйте styleтег внутри области, к которой у вас есть доступ (то есть на сайте, внутри bodyтега, а не в headтеге). Это то, о чем здесь отвечают Чарльз Сальвия и Сз . Выбирая этот вариант, учитывайте их опасения.
4-й, 5-й и 6-й варианты: JS способы
Оповещение Это относится к изменению <head>элемента страницы. Может быть, этого не допустят системные администраторы учреждения. Поэтому рекомендуется сначала спросить их разрешение.
Хорошо, если разрешение предоставлено, стратегия заключается в доступе к <head> . Как? Методы JavaScript.
4-й вариант: новый <link>на<head>
Это еще одна версия 2-го варианта. Используйте внешнюю таблицу стилей для <head>тега, т. Е. Используйте <link>элемент вне области, к которой у вас есть доступ (то есть на сайте, а не внутри bodyтега и да внутри headтега). Это решение соответствует рекомендациям MDN и w3schools , как указано выше, по второму варианту решения. Новый Linkобъект будет создан.
Чтобы решить эту проблему с помощью JS, есть много способов, но в следующих разделах кода я демонстрирую один простой.
тестирование
Я проверил это здесь (окружение рабочего стола, в браузере), и оно работает для меня. Создать файл 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>
Внутри scriptтега:
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
И затем в файле CSS, в том же каталоге, называется bar.css(как в 2-й вариант):
.test1 {
color: green;
};
Как я уже сказал: это будет выглядеть просто возможно, если у вас есть способ загрузки файла CSS где-нибудь в системе учреждения.
5-й вариант: новый <style>на<head>
Используйте новую внутреннюю таблицу стилей для <head>тега, т. Е. Используйте новый <style>элемент вне области, к которой у вас есть доступ (то есть на сайте, а не внутри bodyтега и да внутри headтега). Новый Styleобъект будет создан.
Это решается через JS. Один простой способ демонстрируется следующим.
тестирование
Я проверил это здесь (окружение рабочего стола, в браузере), и оно работает для меня. Создать файл 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>
Внутри scriptтега:
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
6-й вариант: использование существующего <style>на<head>
Использовать существующую внутреннюю таблицу стилей для <head>тега, т. Е. Использовать<style> элемент вне области, к которой у вас есть доступ (то есть на сайте, а не внутри bodyтега и да внутри headтега), если таковой существует. StyleБудет создан новый объект или будет использован CSSStyleSheetобъект (в принятом здесь коде решения).
Это в какой-то момент рискованно.
Во-первых , потому что не может существовать какой-то <style> объект. В зависимости от способа реализации этого решения вы можете получить undefinedвозврат (система может использовать внешнюю таблицу стилей ).
Во-вторых , потому что вы будете редактировать дизайн системы авторской работы (вопросы авторства).
В-третьих , потому что это не может быть разрешено политикой безопасности вашего учреждения. Итак, попросите разрешения сделать это (как в других решениях JS) .
Предположим, опять же, разрешение было предоставлено:
Вам нужно будет рассмотреть некоторые ограничения метода , доступного таким образом: insertRule(). Предлагаемое решение использует сценарий по умолчанию и операцию на первомstylesheet , если таковая существует.
тестирование
Я проверил это здесь (окружение рабочего стола, в браузере), и оно работает для меня. Создать файл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>
Внутри scriptтега:
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
Другой подход к этому решению - использование CSSStyleDeclarationобъекта (документы в w3schools и MDN ). Но это может быть неинтересно, учитывая риск переопределения существующих правил в CSS системы.
7-й вариант: встроенный CSS
использование встроенный CSS . Это решает проблему, хотя в зависимости от размера страницы (в строках кода) поддержание (самим автором или другим назначенным лицом) кода может быть очень трудным.
Но в зависимости от контекста вашей роли в учреждении или его политик безопасности веб-системы, это может быть единственным доступным решением для вас.
тестирование
Создать файл _foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
Отвечая строго на вопрос, заданный Гаганом
Как браузер должен отображать CSS, который не является смежным?
- Предполагается ли создать некоторую структуру данных, используя все стили CSS на странице, и использовать ее для рендеринга?
- Или он использует информацию о стиле в том порядке, в котором он видит?
(цитата адаптирована)
Для более точного ответа я предлагаю Google эти статьи:
- Как работают браузеры: за кулисами современных веб-браузеров
- Render-Tree Строительство, макет и краски
- Что значит «визуализировать» веб-страницу?
- Как работает рендеринг в браузере - негласно
- Рендеринг - Стандарт HTML
- 10 рендеринга - HTML5