Я думаю, це може бути проблемою щодо обмеженого контексту, наприклад, редакторів WYIWYG у веб-системі, що використовується користувачами , які не програмують , що обмежує можливості дотримання стандартів. Іноді (наприклад, TinyMCE), це lib, що вміщує ваш вміст / код всередині textareaтегу, який видається редактором як великий divтег. І іноді це може бути стара версія цих редакторів.
Я припускаю, що:
- ці непрограмістські користувачі не мають відкритого каналу з адміністраторами системи (або webdevs установи), щоб попросити включити деякі правила CSS у систему
stylesheets. Власне, для адміністраторів (або webdevs) було б недоцільно, враховуючи кількість запитів у тому сенсі, які вони мали б.
- ця система застаріла і досі не підтримує новіші версії HTML.
У деяких випадках без styleправил використання це може бути дуже поганим дизайнерським досвідом. Отже, так, ці користувачі потребують налаштування. Гаразд, але які рішення були б у цьому сценарії? Розглядаючи різні способи вставлення CSS на htmlсторінку, я думаю, що ці рішення:
1-й варіант: запитайте свою систему
Попросіть свого системного адміністратора включити деякі правила 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 , як зазначено вище, щодо рішення 2-го варіанту. Буде створено новий 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 наступні статті:
- Як працюють браузери: за кадром сучасних веб-браузерів
- Візуалізація конструкції, макет і фарба
- Що означає "візуалізація" веб-сторінки?
- Як працює візуалізація браузера - поза кадром
- Візуалізація - стандарт HTML
- 10 Візуалізація - HTML5