CSS - CSS

Каскадные таблицы стилей (CSS)
Логотип CSS3 и wordmark.svg
Расширение имени файла
.css
Тип интернет-СМИ
текст / css
Единый идентификатор типа (UTI) public.css
Разработано Консорциум World Wide Web (W3C)
Первый выпуск 17 декабря 1996 г . ; 24 года назад ( 1996-12-17 )
Последний релиз
CSS 2.1: уровень 2, версия 1
(12 апреля 2016 г . ; 5 лет назад ) ( 2016-04-12 )
Тип формата Язык таблиц стилей
Контейнер для Правила стиля для HTML-элементов (тегов)
Содержится HTML-документы
Открытый формат ? да
Веб-сайт www .w3 .org / TR / CSS / #css

Каскадные таблицы стилей ( CSS ) - это язык таблиц стилей, используемый для описания представления документа, написанного на языке разметки, таком как HTML . CSS - это краеугольная технология всемирной паутины , наряду с HTML и JavaScript .

CSS разработан для разделения представления и содержимого, включая макет , цвета и шрифты . Такое разделение может улучшить доступность контента , обеспечить большую гибкость и контроль в спецификации характеристик представления, позволяет нескольким веб-страницам совместно использовать форматирование, указав соответствующий CSS в отдельном файле .css, что снижает сложность и повторение структурного контента, а также позволяет файл .css, который необходимо кэшировать, чтобы повысить скорость загрузки страницы между страницами, которые совместно используют файл, и его форматирование.

Разделение форматирования и содержимого также позволяет представлять одну и ту же страницу разметки в разных стилях для разных методов визуализации, таких как на экране, в печати, голосом (через браузер на основе речи или программы чтения с экрана ) и на основе Брайля. тактильные устройства. В CSS также есть правила для альтернативного форматирования, если доступ к контенту осуществляется на мобильном устройстве .

Каскадирование имен происходит из указанной схемы приоритета, чтобы определить, какое правило стиля применяется, если конкретному элементу соответствует несколько правил. Эта каскадная схема приоритетов предсказуема.

Спецификации CSS поддерживаются Консорциумом World Wide Web (W3C). Тип Интернет-носителя (тип MIME ) text/cssзарегистрирован для использования с CSS в RFC 2318 (март 1998 г.). W3C предоставляет бесплатную службу проверки CSS для документов CSS.

Помимо HTML, другие языки разметки поддерживают использование CSS, включая XHTML , простой XML , SVG и XUL .

Синтаксис

CSS имеет простой синтаксис и использует несколько английских ключевых слов для определения имен различных свойств стиля.

Таблица стилей состоит из списка правил . Каждое правило или набор правил состоит из одного или нескольких селекторов и блока объявления .

Селектор

В CSS селекторы объявляют, к какой части разметки применяется стиль, путем сопоставления тегов и атрибутов в самой разметке.

Селекторы могут применяться к следующему:

  • все элементы определенного типа, например, заголовки второго уровня h2
  • элементы, указанные атрибутом , в частности:
    • id : уникальный в документе идентификатор, идентифицируемый с помощью хеш-префикса, например#id
    • класс : идентификатор, который может аннотировать несколько элементов в документе, идентифицированный префиксом точки, например.classname
  • элементы в зависимости от того, как они размещены относительно других в дереве документа .

Классы и идентификаторы чувствительны к регистру, начинаются с букв и могут включать буквенно-цифровые символы, дефисы и подчеркивания. Класс может применяться к любому количеству экземпляров любых элементов. Идентификатор может быть применен только к одному элементу.

Псевдоклассы используются в селекторах CSS, чтобы разрешить форматирование на основе информации, которая не содержится в дереве документа. Одним из примеров широко используемого псевдокласса является определение содержимого только тогда, когда пользователь «указывает» на видимый элемент, обычно удерживая на нем курсор мыши. Он добавляется к селектору, как в или . Псевдокласс классифицирует элементы документа, такие как или , тогда как псевдоэлемент делает выбор, который может состоять из частичных элементов, таких как или . :hovera:hover#elementid:hover:link:visited::first-line::first-letter

Селекторы можно комбинировать разными способами для достижения большей специфичности и гибкости. Несколько селекторов могут быть объединены в разнесенный список для определения элементов по местоположению, типу элемента, идентификатору, классу или любой их комбинации. Порядок селекторов важен. Например, применяется ко всем элементам класса myClass, находящимся внутри элементов div, тогда как применяется ко всем элементам div, находящимся внутри элементов класса myClass. Это не следует путать с конкатенированными идентификаторами, например, которые применяются к элементам div класса myClass. div .myClass {color: red;}.myClass div {color: red;}div.myClass {color: red;}

В следующей таблице приводится сводка синтаксиса селектора с указанием использования и версии CSS, в которой он появился.

Шаблон Матчи Впервые определено
на уровне CSS
E элемент типа E 1
E:link элемент E является исходным якорем гиперссылки, цель которой еще не посещена (: ссылка) или уже посещена (: посещена) 1
E:active элемент E во время определенных действий пользователя 1
E::first-line первая отформатированная строка элемента E 1
E::first-letter первая отформатированная буква элемента E 1
.c все элементы с class = "c" 1
#myid элемент с id = "23290197myid" 1
E.warning элемент E, класс которого - "предупреждение" (язык документа определяет, как класс определяется) 1
E#myid элемент E с идентификатором, равным "myid" 1
.c#myid элемент с class = "c" и идентификатором, равным "myid" 1
E F элемент F, потомок элемента E 1
* любой элемент 2
E[foo] элемент E с атрибутом "foo" 2
E[foo="bar"] элемент E, значение атрибута "foo" которого в точности равно "bar" 2
E[foo~="bar"] элемент E, значение атрибута "foo" которого представляет собой список значений, разделенных пробелами, одно из которых точно равно "bar" 2
E[foo|="en"] элемент E, атрибут "foo" которого содержит список значений, разделенных дефисами, начинающийся (слева) с "en" 2
E:first-child элемент E, первый дочерний элемент своего родителя 2
E:lang(fr) элемент типа E на языке "fr" (язык документа указывает, как определяется язык) 2
E::before сгенерированное содержимое перед содержимым элемента E 2
E::after сгенерированный контент после содержимого элемента E 2
E > F дочерний элемент F элемента E 2
E + F элемент F, которому непосредственно предшествует элемент E 2
E[foo^="bar"] элемент E, значение атрибута "foo" которого начинается точно со строки "bar" 3
E[foo$="bar"] элемент E, значение атрибута "foo" которого заканчивается точно строкой "bar" 3
E[foo*="bar"] элемент E, значение атрибута "foo" которого содержит подстроку "bar" 3
E:root элемент E, корень документа 3
E:nth-child(n) элемент E, n-й дочерний элемент своего родителя 3
E:nth-last-child(n) элемент E, n-й дочерний элемент своего родителя, начиная с последнего 3
E:nth-of-type(n) элемент E, n-й брат своего типа 3
E:nth-last-of-type(n) элемент E, n-й брат своего типа, начиная с последнего 3
E:last-child элемент E, последний дочерний элемент своего родителя 3
E:first-of-type элемент E, первый брат своего типа 3
E:last-of-type элемент E, последний брат этого типа 3
E:only-child элемент E, единственный дочерний элемент своего родителя 3
E:only-of-type элемент E, единственный родственник своего типа 3
E:empty элемент E, у которого нет дочерних элементов (включая текстовые узлы) 3
E:target элемент E, являющийся целью ссылающегося URI 3
E:enabled элемент пользовательского интерфейса E, который включен 3
E:disabled элемент пользовательского интерфейса E, который отключен 3
E:checked отмеченный элемент пользовательского интерфейса E (например, радио-кнопка или флажок) 3
E:not(s) элемент E, который не соответствует простому селектору s 3
E ~ F элемент F, которому предшествует элемент E 3

Блок объявления

Блок объявлений состоит из списка объявлений в фигурных скобках. Каждое объявление само по себе состоит из свойства , двоеточия ( :) и значения . Если в блоке несколько объявлений, ;необходимо вставить точку с запятой ( ), чтобы отделить каждое объявление. По желанию может быть использована с запятой после последней (или единственной) декларации.

Свойства указаны в стандарте CSS. У каждого свойства есть набор возможных значений. Некоторые свойства могут влиять на любой тип элемента, а другие применяются только к определенным группам элементов.

Значения могут быть ключевыми словами, такими как «центр» или «наследование», или числовыми значениями, например 200px(200 пикселей), 50vw(50 процентов ширины области просмотра) или 80% (80 процентов ширины родительского элемента). Значения цвета могут быть указаны с ключевыми словами (например, " red"), шестнадцатеричными значениями (например #FF0000, также сокращенными как #F00), значениями RGB по шкале от 0 до 255 (например rgb(255, 0, 0)), значениями RGBA, которые определяют как цвет, так и альфа-прозрачность (например rgba(255, 0, 0, 0.8)), или HSL или значения HSLA (например hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%)).

Единицы длины

Ненулевые числовые значения, представляющие линейные меры, должны включать единицу длины, которая представляет собой буквенный код или аббревиатуру, например, 200pxили 50vw; или знак процента, как в 80%. Некоторые единицы - cm( сантиметр ); in( дюйм ); mm( миллиметр ); pc( pica ); и pt( точка ) - абсолютны , что означает, что отображаемый размер не зависит от структуры страницы; другие - em( эм ); ex( ex ) и px( пиксель ) - относительны , что означает, что такие факторы, как размер шрифта родительского элемента, могут повлиять на отображаемое измерение. Эти восемь модулей были особенностью CSS 1 и сохранены во всех последующих редакциях. Предлагаемые значения CSS и единицы измерения модуля Уровень 3 будет, если он будет принят в качестве рекомендации W3C, обеспечивают семь дополнительных единиц длины: ch; Q; rem; vh; vmax; vmin; и vw.

Использовать

До появления CSS почти все атрибуты представления HTML-документов содержались в разметке HTML. Все цвета шрифтов, стили фона, выравнивание элементов, границы и размеры должны были быть явно описаны, часто многократно, в HTML. CSS позволяет авторам перемещать большую часть этой информации в другой файл, таблицу стилей, что значительно упрощает HTML.

Например, заголовки ( h1элементы), подзаголовки ( h2), подзаголовки ( h3) и т. Д. Структурно определяются с помощью HTML. В печати и на экране выбор шрифта , размера , цвета и выделения для этих элементов носит презентационный характер .

До появления CSS авторам документов, которые хотели присвоить такие типографские характеристики, скажем, всем h2заголовкам, приходилось повторять презентационную разметку HTML для каждого вхождения этого типа заголовка. Это сделало документы более сложными, крупными, подверженными ошибкам и сложными в обслуживании. CSS позволяет отделить представление от структуры. CSS может определять цвет, шрифт, выравнивание текста, размер, границы, интервал, макет и многие другие типографские характеристики и может делать это независимо для экранных и печатных видов. CSS также определяет невизуальные стили, такие как скорость чтения и акцент для чтения на слух. W3C теперь осуждается использование всех презентационного HTML - разметки.

Например, в HTML до CSS элемент заголовка, определенный красным текстом, будет записан как:

<h1><font color="red">Chapter 1.</font></h1>

Используя CSS, тот же элемент может быть закодирован с использованием свойств стиля вместо презентационных атрибутов HTML:

<h1 style="color: red;">Chapter 1.</h1>

Преимущества этого могут быть не сразу очевидны, но мощь CSS становится более очевидной, когда свойства стиля помещаются во внутренний элемент стиля или, что еще лучше, внешний файл CSS. Например, предположим, что документ содержит элемент стиля:

<style>
    h1 {
        color: red;
    }
</style>

h1После этого все элементы в документе автоматически станут красными, не требуя какого-либо явного кода. Если позже автор захотел сделать h1элементы синими, это можно было бы сделать, изменив элемент стиля на:

<style>
    h1 {
        color: blue;
    }
</style>

вместо того, чтобы кропотливо просматривать документ и менять цвет для каждого отдельного h1элемента.

Стили также могут быть помещены во внешний файл CSS, как описано ниже, и загружены с использованием синтаксиса, подобного следующему:

<link href="path/to/file.css" rel="stylesheet" type="text/css">

Это дополнительно отделяет стиль от документа HTML и позволяет изменять стиль нескольких документов, просто редактируя общий внешний файл CSS.

Источники

Информация CSS может быть предоставлена ​​из различных источников. Этими источниками могут быть веб-браузер, пользователь и автор. Информация от автора может быть дополнительно классифицирована по встроенным, типам мультимедиа, важности, специфичности селектора, порядку правил, наследованию и определению свойств. Информация о стиле CSS может быть в отдельном документе или может быть встроена в документ HTML. Можно импортировать несколько таблиц стилей. В зависимости от используемого устройства вывода могут применяться разные стили; например, экранная версия может сильно отличаться от печатной, так что авторы могут адаптировать презентацию для каждого носителя.

Таблица стилей с наивысшим приоритетом управляет отображением содержимого. Объявления, не установленные в источнике с наивысшим приоритетом, передаются источнику с более низким приоритетом, например, в стиле пользовательского агента. Этот процесс называется каскадным .

Одна из целей CSS - предоставить пользователям больший контроль над представлением. Тот, кому трудно читать красные курсивные заголовки, может применить другую таблицу стилей. В зависимости от браузера и веб-сайта пользователь может выбирать из различных таблиц стилей, предоставленных дизайнерами, или может удалять все добавленные стили и просматривать сайт, используя стиль браузера по умолчанию, или может заменять только красный курсивный стиль заголовка без изменения других атрибуты.

Схема приоритета CSS (от высшего к низшему)
Приоритет Тип источника CSS Описание
1 Важность Аннотация " " заменяет предыдущие типы приоритета. !important
2 В линию Стиль, применяемый к HTML-элементу с помощью атрибута HTML "style".
3 Тип носителя Определение свойства применяется ко всем типам мультимедиа, если не определен CSS, специфичный для мультимедиа.
4 Определяемые пользователем В большинстве браузеров есть функция доступности: определенный пользователем CSS.
5 Специфика селектора Конкретный контекстный селектор ( ) заменяет общее определение #heading p
6 Порядок правил Объявление последнего правила имеет более высокий приоритет
7 Родительское наследование Если свойство не указано, оно наследуется от родительского элемента.
8 Определение свойства CSS в документе HTML Правило CSS или встроенный стиль CSS перезаписывают значение браузера по умолчанию
9 Браузер по умолчанию Самый низкий приоритет: значение браузера по умолчанию определяется спецификациями начального значения W3C.

Специфичность

Специфика относится к относительному весу различных правил. Он определяет, какие стили применяются к элементу, если может применяться более одного правила. В зависимости от спецификации простой селектор (например, H1) имеет специфичность 1, селекторы классов имеют специфичность 1,0, а селекторы ID имеют специфичность 1,0,0. Поскольку значения специфичности не переносятся, как в десятичной системе, запятые используются для разделения «цифр» (правило CSS, имеющее 11 элементов и 11 классов, будет иметь специфичность 11,11, а не 121).

Таким образом, следующие селекторы правил приводят к указанной специфичности:

Селекторы Специфичность
h1 {color: white;} 0, 0, 0, 1
p em {color: green;} 0, 0, 0, 2
.grape {color: red;} 0, 0, 1, 0
p.bright {color: blue;} 0, 0, 1, 1
p.bright em.dark {color: yellow;} 0, 0, 2, 2
#id218 {color: brown;} 0, 1, 0, 0
style=" " 1, 0, 0, 0

Примеры

Рассмотрим этот фрагмент HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #xyz { color: blue; }
        </style>
    </head>
    <body>
        <p id="xyz" style="color: green;">To demonstrate specificity</p>
    </body>
</html>

В приведенном выше примере объявление в styleатрибуте переопределяет объявление в <style>элементе, потому что оно имеет более высокую специфичность, и, таким образом, абзац отображается зеленым.

Наследование

Наследование - ключевая особенность CSS; он полагается на отношения «предок-потомок». Наследование - это механизм, с помощью которого свойства применяются не только к указанному элементу, но и к его потомкам. Наследование основывается на дереве документа, которое представляет собой иерархию элементов XHTML на странице, основанную на вложенности. Дочерние элементы могут наследовать значения свойств CSS от любого элемента-предка, включающего их. Как правило, дочерние элементы наследуют свойства, связанные с текстом, но их свойства, связанные с блоком, не наследуются. Свойства, которые могут быть унаследованы: цвет, шрифт, межбуквенный интервал, высота строки, стиль списка, выравнивание текста, отступ текста, преобразование текста, видимость, пробелы и интервалы между словами. Свойства, которые не могут быть унаследованы: background, border, display, float and clear, height и width, margin, min- и max-height и -width, outline, overflow, padding, position, text-decoration, vertical-align и z. -показатель.

Наследование можно использовать, чтобы избежать многократного объявления определенных свойств в таблице стилей, что позволяет использовать более короткий CSS.

Наследование в CSS - это не то же самое, что наследование в языках программирования на основе классов , где можно определить класс B как «как класс A, но с изменениями». С помощью CSS можно стилизовать элемент с «классом A, но с модификациями». Однако невозможно определить такой класс CSS B, который затем можно было бы использовать для стилизации нескольких элементов без повторения изменений.

Пример

Учитывая следующую таблицу стилей:

h1 {
   color: pink;
}

Предположим, есть элемент h1 с подчеркивающим элементом (em) внутри:

<h1>
   This is to <em>illustrate</em> inheritance
</h1>

Если элементу em не назначен цвет, выделенное слово «illustrate» наследует цвет родительского элемента h1. Таблица стилей h1 имеет розовый цвет, следовательно, элемент em также розовый.

Пробел

Пробелы между свойствами и селекторами игнорируются. Этот фрагмент кода:

body{overflow:hidden;background:#000000;background-image:url(images/bg.gif);background-repeat:no-repeat;background-position:left top;}

функционально эквивалентен этому:

body {
   overflow: hidden;
   background-color: #000000;
   background-image: url(images/bg.gif);
   background-repeat: no-repeat;
   background-position: left top;
}

Один из распространенных способов форматирования CSS для удобства чтения - сделать отступ для каждого свойства и дать ему отдельную строку. Помимо форматирования CSS для удобства чтения, сокращенные свойства могут использоваться для более быстрого написания кода, который также быстрее обрабатывается при визуализации:

body {
   overflow: hidden;
   background: #000 url(images/bg.gif) no-repeat left top;
}

Позиционирование

CSS 2.1 определяет три схемы позиционирования:

Нормальный поток
Встроенные элементы располагаются так же, как буквы в словах в тексте, одна за другой в доступном пространстве, пока не останется места, а затем начинаются с новой строки ниже. Блочные элементы располагаются вертикально, как абзацы и как элементы в маркированном списке. Нормальный поток также включает относительное позиционирование блочных или встроенных элементов и полей ввода.
Плавает
Плавающий элемент выводится из обычного потока и смещается влево или вправо, насколько это возможно в доступном пространстве. Затем другой контент перемещается вместе с плавающим элементом.
Абсолютное позиционирование
Абсолютно позиционированный элемент не имеет места и не влияет на нормальный поток других элементов. Он занимает назначенное ему место в своем контейнере независимо от других элементов.

Свойство позиции

Возможны пять значений positionсвойства. Если элемент позиционируется в любом случае, кроме static, то дальнейшие свойства top, bottom, leftи rightиспользуются для определения смещения и positions.The элемент , имеющий позицию Статика не влияет на top, bottom, leftили rightсвойств.

Статический
Значение по умолчанию помещает элемент в нормальный поток
Родственник
Элемент помещается в обычный поток , а затем смещается или смещается от этой позиции. Последующие элементы потока располагаются так, как если бы элемент не был перемещен.
Абсолютный
Задает абсолютное позиционирование . Элемент позиционируется относительно своего ближайшего нестатического предка.
Фиксированный
Элемент абсолютно позиционируется в фиксированном положении на экране, даже когда остальная часть документа прокручивается.

Плавать и очищать

floatСвойство может иметь одно из трех значений. Абсолютно позиционированные или фиксированные элементы не могут быть перемещены. Другие элементы обычно обтекают плавающие элементы, если только им не препятствует их clearсвойство.

левый
Элемент плавает слева от строки, в которой он должен был появиться; другие предметы могут обтекать его правую сторону.
Правильно
Элемент плавает справа от строки, в которой он должен был появиться; другие предметы могут обтекать его левую сторону.
Чисто
Заставляет элемент появляться под ('clear') плавающими элементами слева ( ), справа ( ) или с обеих сторон ( ).clear:leftclear:rightclear:both

История

Хокон Виум Ли , технический директор компании Opera Software и соавтор веб-стандартов CSS

CSS был впервые предложен Хоконом Виум Ли 10 октября 1994 года. В то время Ли работал с Тимом Бернерс-Ли в CERN . Примерно в то же время было предложено несколько других языков таблиц стилей для Интернета, и обсуждения в общедоступных списках рассылки и внутри Консорциума World Wide Web привели к тому, что в 1996 г. была выпущена первая Рекомендация W3C CSS (CSS1). В частности, предложение Берта Боса был влиятельным; он стал соавтором CSS1 и считается соавтором CSS.

Таблицы стилей существовали в той или иной форме с момента появления Standard Generalized Markup Language ( SGML ) в 1980-х годах, а CSS был разработан для предоставления таблиц стилей для Интернета. Одно из требований к языку веб-таблиц стилей заключалось в том, чтобы таблицы стилей поступали из разных источников в Интернете. Поэтому существующие языки таблиц стилей, такие как DSSSL и FOSI, не подходили. CSS, с другой стороны, позволяет нескольким таблицам стилей влиять на стиль документа посредством «каскадных» стилей.

По мере роста HTML он стал включать в себя более широкий спектр стилистических возможностей, чтобы удовлетворить потребности веб-разработчиков . Эта эволюция дала дизайнеру больше контроля над внешним видом сайта за счет более сложного HTML. Различия в реализациях веб-браузеров , таких как ViolaWWW и WorldWideWeb , затрудняли единообразный внешний вид сайта, и пользователи имели меньше контроля над отображением веб-контента. Браузер / редактор, разработанный Тимом Бернерсом-Ли, имел таблицы стилей, жестко закодированные в программе. Поэтому таблицы стилей нельзя было связать с документами в Интернете. Роберт Кайо , также из CERN, хотел отделить структуру от презентации, чтобы разные таблицы стилей могли описывать разные презентации для печати, экранных презентаций и редакторов.

Улучшение возможностей веб-презентаций было темой, интересовавшей многих в веб-сообществе, и девять различных языков таблиц стилей были предложены в списке рассылки в стиле www. Из этих девяти предложений два особенно повлияли на то, что стало CSS: каскадные таблицы стилей HTML и предложение таблиц стилей на основе потоков (SSP). Два браузера служили тестовыми площадками для первоначальных предложений; Ли работал с Ив Лафон для реализации CSS в Dave Раггетт «s Арена браузера. Берт Бос реализовал собственное предложение SSP в браузере Argo . После этого Ли и Бос работали вместе над разработкой стандарта CSS (буква «H» была удалена из названия, потому что эти таблицы стилей также можно было применять к другим языкам разметки, помимо HTML).

Предложение Ли было представлено на конференции « Мозаика и Интернет » (позже названной WWW2) в Чикаго, штат Иллинойс, в 1994 году, и снова с Бертом Босом в 1995 году. Примерно в это же время W3C уже создавался и проявлял интерес к развитию. CSS. С этой целью он организовал семинар под председательством Стивена Пембертона . Это привело к тому, что W3C добавил работу над CSS к результатам работы редакционного совета HTML (ERB). Ли и Бос были основным техническим персоналом в этом аспекте проекта, с дополнительными членами, в том числе Томасом Рирдоном из Microsoft. В августе 1996 года Netscape Communication Corporation представила альтернативный язык таблиц стилей под названием JavaScript Style Sheets (JSSS). Спецификация так и не была завершена и устарела. К концу 1996 года CSS был готов стать официальным, и в декабре была опубликована рекомендация CSS уровня 1.

Разработка HTML, CSS и DOM велась в одной группе - Редакционном совете по HTML (ERB). В начале 1997 года ERB был разделен на три рабочие группы: рабочая группа HTML под председательством Дэна Коннолли из W3C; Рабочая группа DOM под председательством Лорен Вуд из SoftQuad ; и рабочая группа CSS под председательством Криса Лилли из W3C.

Рабочая группа CSS начала заниматься проблемами, которые не были решены с помощью CSS уровня 1, в результате чего 4 ноября 1997 года был создан CSS уровня 2. Он был опубликован как Рекомендация W3C 12 мая 1998 года. CSS уровня 3, который был начат в 1998 году, по состоянию на 2014 год все еще находится в стадии разработки.

В 2005 году рабочие группы CSS решили ужесточить требования к стандартам. Это означало, что уже опубликованные стандарты, такие как CSS 2.1, CSS 3 Selectors и CSS 3 Text, были перенесены с уровня Candidate Рекомендации на уровень рабочего проекта.

Трудности с усыновлением

Спецификация CSS 1 была завершена в 1996 году. В том же году был выпущен Microsoft Internet Explorer 3 с некоторой ограниченной поддержкой CSS. IE 4 и Netscape 4.x добавили дополнительную поддержку, но, как правило, она была неполной и содержала множество ошибок , мешавших полноценному применению CSS. Прошло более трех лет, прежде чем какой-либо веб-браузер достиг почти полной реализации спецификации. Internet Explorer 5.0 для Macintosh , выпущенный в марте 2000 года, был первым браузером, который имел полную (более 99 процентов) поддержку CSS 1, превзойдя Opera , которая была лидером с момента введения поддержки CSS пятнадцатью месяцами ранее. Вскоре последовали и другие браузеры, и многие из них дополнительно реализовали части CSS 2.

Однако даже когда более поздние веб-браузеры «версии 5» начали предлагать довольно полную реализацию CSS, они все еще были некорректны в определенных областях и были чреваты несоответствиями, ошибками и другими причудами . Microsoft Internet Explorer 5.x для Windows , в отличие от совершенно другого IE для Macintosh , имел некорректную реализацию « блочной модели CSS » по сравнению со стандартами CSS. Такие несоответствия и различия в поддержке функций затрудняли дизайнерам достижение единообразия внешнего вида в браузерах и платформах без использования обходных приемов, называемых хаками и фильтрами CSS . Ошибки блочной модели IE / Windows были настолько серьезными, что, когда был выпущен Internet Explorer 6 , Microsoft представила обратно совместимый режим интерпретации CSS (« режим причуд ») наряду с альтернативным, исправленным «стандартным режимом». Другие браузеры сторонних производителей также предоставляют такую ​​возможность переключения режима. Поэтому у авторов HTML- файлов возникла необходимость убедиться, что они содержат особый отличительный маркер «соответствующий стандартам CSS, предназначенный», чтобы показать, что авторы предполагали, что CSS будет интерпретироваться правильно, в соответствии со стандартами, в отличие от того, что он предназначен для давно уже существующего. устаревший браузер IE5 / Windows . Без этого маркера веб-браузеры, у которых есть возможность переключения режима причуд, будут изменять размеры объектов на веб-страницах, как IE5 / Windows, вместо того, чтобы следовать стандартам CSS.

Проблемы с неоднородным внедрением CSS, наряду с ошибками в исходной спецификации, вынудили W3C пересмотреть стандарт CSS 2 в CSS 2.1, который приблизился к рабочему снимку текущей поддержки CSS в браузерах HTML. Некоторые свойства CSS 2, которые ни один браузер не реализовал, были отброшены, а в некоторых случаях определенное поведение было изменено, чтобы привести стандарт в соответствие с преобладающими существующими реализациями. CSS 2.1 стал кандидатом в рекомендации 25 февраля 2004 года, но CSS 2.1 был возвращен в статус рабочего проекта 13 июня 2005 года и вернулся в статус кандидата в рекомендации только 19 июля 2007 года.

В дополнение к этим проблемам, то .cssрасширение использовался программный продукт , используемый для преобразования PowerPoint файлов в компактные Показ слайдов файлов, так что некоторые веб - серверы служили все , .cssкак тип MIME application/x-pointplus , а не text/css.

Префиксы поставщиков

Отдельные поставщики браузеров время от времени вводили новые параметры перед стандартизацией и универсализацией. Для того, чтобы не допустить вмешательства в реализации будущей, поставщики предваряются уникальными имена параметров, такие , как -moz-для Mozilla Firefox , -webkit-названных в честь от просмотра двигателя от Apple Safari , -o-для браузера Opera и -ms-для Microsoft Internet Explorer .

Иногда параметры с префиксом поставщика, такие как -moz-radial-gradientи, -webkit-linear-gradientимеют немного другой синтаксис по сравнению с их аналогами без префикса поставщика.

К моменту стандартизации свойства с префиксом становятся устаревшими. Доступны программы для автоматического добавления префиксов для старых браузеров и для указания стандартизованных версий параметров с префиксом. Поскольку префиксы ограничены небольшим подмножеством браузеров, удаление префикса позволяет другим браузерам увидеть функциональность. Исключением являются некоторые устаревшие -webkit-свойства с префиксом, которые настолько распространены и постоянны в сети, что другие семейства браузеров решили поддерживать их для совместимости.

Вариации

CSS имеет разные уровни и профили. Каждый уровень CSS основан на последнем, обычно добавляя новые функции и обычно обозначаемый как CSS 1, CSS 2, CSS 3 и CSS 4. Профили обычно представляют собой подмножество одного или нескольких уровней CSS, созданных для конкретного устройства или пользовательского интерфейса. . На данный момент существуют профили для мобильных устройств, принтеров и телевизоров. Профили не следует путать с типами мультимедиа, которые были добавлены в CSS 2.

CSS 1

Первой спецификацией CSS, которая стала официальной рекомендацией W3C, является CSS уровня 1, опубликованная 17 декабря 1996 года. Хокон Виум Ли и Берт Бос считаются первыми разработчиками. Среди его возможностей - поддержка

  • Свойства шрифта, такие как шрифт и выделение
  • Цвет текста, фона и других элементов
  • Атрибуты текста, такие как интервал между словами, буквами и строками текста.
  • Выравнивание текста, изображений, таблиц и других элементов
  • Поля, граница, отступы и позиционирование для большинства элементов
  • Уникальная идентификация и общая классификация групп атрибутов

W3C больше не поддерживает Рекомендацию CSS 1.

CSS 2

Спецификация CSS уровня 2 была разработана W3C и опубликована в качестве рекомендации в мае 1998 года. Надмножество CSS 1, CSS 2, включает ряд новых возможностей, таких как абсолютное, относительное и фиксированное позиционирование элементов и z-index , концепция типы мультимедиа, поддержка звуковых таблиц стилей (которые позже были заменены речевыми модулями CSS 3) и двунаправленного текста, а также новые свойства шрифта, такие как тени.

W3C больше не поддерживает рекомендацию CSS 2.

CSS 2.1

Версия 1 CSS уровня 2, часто называемая «CSS 2.1», исправляет ошибки в CSS 2, удаляет плохо поддерживаемые или не полностью совместимые функции и добавляет в спецификацию уже реализованные расширения браузера. Чтобы соответствовать процессу W3C стандартизации технических спецификаций, CSS 2.1 в течение многих лет переходил от статуса рабочего проекта к статусу кандидата в рекомендации. CSS 2.1 впервые стал кандидатом в рекомендацию 25 февраля 2004 г., но 13 июня 2005 г. он был преобразован в рабочий проект для дальнейшего рассмотрения. Он вернулся в рекомендацию кандидата 19 июля 2007 года, а затем дважды обновился в 2009 году. Однако, поскольку были внесены изменения и уточнения, он снова вернулся в рабочий проект последнего объявления 7 декабря 2010 года.

CSS 2.1 перешел к Предложенной рекомендации 12 апреля 2011 года. После рассмотрения Консультативным комитетом W3C, он был наконец опубликован как Рекомендация W3C 7 июня 2011 года.

CSS 2.1 планировался как первая и последняя редакция уровня 2, но в 2015 году началась низкоприоритетная работа над CSS 2.2.

CSS 3

В отличие от CSS 2, который представляет собой большую единую спецификацию, определяющую различные функции, CSS 3 разделен на несколько отдельных документов, называемых «модулями». Каждый модуль добавляет новые возможности или расширяет функции, определенные в CSS 2, с сохранением обратной совместимости. Работа над уровнем CSS 3 началась примерно во время публикации исходной рекомендации CSS 2. Самые ранние черновики CSS 3 были опубликованы в июне 1999 года.

Из-за модульности разные модули имеют разную стабильность и статусы.

Некоторые модули имеют статус кандидата в рекомендации ( CR ) и считаются умеренно стабильными. На этапе CR реализациям рекомендуется отказаться от префиксов поставщиков.

Краткое изложение основных характеристик модуля
Модуль Название спецификации Положение дел Дата
css3-фон Модуль CSS Backgrounds and Borders, уровень 3  Кандидат Рек. Декабрь 2020
css3-коробка Базовая блочная модель CSS Кандидат Рек. Декабрь 2020
css-каскад-3 Каскадирование и наследование CSS уровня 3  Рекомендация Февраль 2021 г.
css3-цвет Цветовой модуль CSS, уровень 3 Рекомендация Июн 2018
css3-контент Модуль сгенерированного и замененного содержимого CSS3  Рабочий проект 2 Август 2019 г.
css-шрифты-3 Модуль CSS Fonts Уровень 3 Рекомендация Сен 2018
css3-gcpm Сгенерированный CSS контент для страничного медиа-модуля Рабочий проект Май 2014 г.
css3-макет Модуль макета шаблона CSS Примечание Март 2015 г.
css3-mediaqueries  Медиа-запросы Рекомендация Июн 2012
mediaqueries-4  Медиа-запросы, уровень 4 Кандидат Рек. Июль 2020
css3-мультикол  Модуль макета с несколькими столбцами, уровень 1 Рабочий проект Февраль 2021 г.
css3-страница CSS Страничный медиа-модуль, уровень 3 Рабочий проект Октябрь 2018
селекторы-3 Селекторы уровня 3 Рекомендация Ноя 2018
селекторы-4 Селекторы уровня 4 Рабочий проект Ноя 2018
css3-ui Модуль базового пользовательского интерфейса CSS, уровень 3 (CSS3 UI) Рекомендация Июн 2018

CSS 4

Джен Симмонс обсуждает состояние CSS в 2019 году, когда несколько  модулей CSS 4 находились в стадии разработки.

Не существует единой интегрированной спецификации CSS4, потому что спецификация разделена на множество отдельных модулей, уровни которых независимы.

Модули, основанные на элементах CSS уровня 2, начались на уровне 3. Некоторые из них уже достигли уровня 4 или уже приближаются к уровню 5. Другие модули, определяющие совершенно новые функции, такие как Flexbox , были обозначены как уровень 1, а некоторые из них. они приближаются к Уровню 2.

Рабочая группа CSS иногда публикует «Снимки состояния», набор целых модулей и частей других проектов, которые считаются достаточно стабильными, чтобы их могли реализовать разработчики браузеров. На данный момент пять таких документов о «передовой текущей практике» были опубликованы в виде Примечаний в 2007, 2010, 2015, 2017 и 2018 годах.

Поскольку эти снимки спецификаций в первую очередь предназначены для разработчиков, растет спрос на аналогичные справочные документы с версиями, ориентированные на авторов, которые будут представлять состояние совместимых реализаций, как тем временем документировано такими сайтами, как Can I Use… и Mozilla Developer Network. Группа сообщества W3C была создана в начале 2020 года для обсуждения и определения такого ресурса. Фактический вид управления версиями также является предметом обсуждения, а это означает, что однажды созданный документ не может называться «CSS4».

Поддержка браузера

Каждый веб-браузер использует механизм компоновки для отображения веб-страниц, и поддержка функциональности CSS между ними не согласована. Поскольку браузеры не анализируют CSS идеально, было разработано несколько методов кодирования для нацеливания на определенные браузеры с помощью обходных приемов (обычно известных как хаки CSS или фильтры CSS). Принятию новых функций в CSS может препятствовать отсутствие поддержки в основных браузерах. Например, Internet Explorer не спешил добавлять поддержку многих функций CSS 3, что замедляло внедрение этих функций и наносило ущерб репутации браузера среди разработчиков. Чтобы обеспечить единообразие взаимодействия с пользователями, веб-разработчики часто тестируют свои сайты в нескольких операционных системах, браузерах и версиях браузеров, что увеличивает время и сложность разработки. Такие инструменты, как BrowserStack , были созданы для упрощения обслуживания этих сред.

В дополнение к этим инструментам тестирования многие сайты поддерживают списки поддержки браузерами определенных свойств CSS, включая CanIUse и Mozilla Developer Network . Кроме того, CSS 3 определяет запросы функций, которые предоставляют @supportsдирективу, которая позволяет разработчикам настраивать целевые браузеры с поддержкой определенных функций непосредственно в их CSS. CSS, который не поддерживается старыми браузерами, также иногда можно исправить с помощью полифилов JavaScript , которые представляют собой фрагменты кода JavaScript, разработанные для обеспечения согласованного поведения браузеров. Эти обходные пути - и необходимость поддержки резервных функций - могут усложнить проекты разработки, и, следовательно, компании часто определяют список версий браузеров, которые они будут и не будут поддерживать.

Поскольку веб-сайты принимают новые стандарты кода, несовместимые со старыми браузерами, эти браузеры могут быть отключены от доступа ко многим ресурсам в Интернете (иногда намеренно). Многие из самых популярных сайтов в Интернете не только визуально ухудшаются в старых браузерах из-за плохой поддержки CSS, но и вообще не работают, в значительной степени из-за развития JavaScript и других веб-технологий.

Ограничения

Некоторые отмеченные ограничения текущих возможностей CSS включают:

Селекторы не могут подняться
В настоящее время CSS не предлагает способа выбрать родителя или предка элемента, удовлетворяющего определенным критериям. CSS Selectors Level 4, который все еще находится в статусе рабочего проекта, предлагает такой селектор, но только как часть полного профиля селектора «моментального снимка», а не быстрого «живого» профиля, используемого в динамических стилях CSS. Более продвинутая схема выбора (например, XPath ) позволит использовать более сложные таблицы стилей. Основные причины, по которым рабочая группа CSS ранее отклоняла предложения по родительским селекторам, связаны с производительностью браузера и проблемами инкрементного рендеринга .
Невозможно явно объявить новую область видимости независимо от позиции
Правила области действия для свойств, таких как z-index, ищут ближайший родительский элемент с атрибутом position: absolute или position: relative. Эта странная связь имеет нежелательные эффекты. Например, невозможно избежать объявления новой области видимости, когда кто-то вынужден корректировать положение элемента, не позволяя использовать желаемую область видимости родительского элемента.
Неуправляемое динамическое поведение псевдокласса
CSS реализует псевдоклассы, которые позволяют получить обратную связь с пользователем путем условного применения альтернативных стилей. Один псевдокласс CSS, " ", является динамическим (эквивалент JavaScript "onmouseover") и имеет потенциал для неправильного использования (например, реализация всплывающих окон приближения курсора), но CSS не имеет возможности для клиента отключить его (нет "отключить" -подобное свойство) или ограничить его эффекты (не изменять значения для каждого свойства).:hover
Не могу назвать правила
Невозможно назвать правило CSS, которое позволило бы (например) клиентским скриптам ссылаться на правило, даже если его селектор изменится.
Невозможно включить стили из правила в другое правило
Стили CSS часто должны дублироваться в нескольких правилах для достижения желаемого эффекта, что вызывает дополнительное обслуживание и требует более тщательного тестирования. Для решения этой проблемы были предложены некоторые новые функции CSS, но впоследствии от них отказались. Вместо этого авторы могут получить эту возможность, используя более сложные языки таблиц стилей, которые компилируются в CSS, такие как Sass , Less или Stylus .
Невозможно настроить таргетинг на конкретный текст без изменения разметки
Помимо псевдоэлемента, невозможно настроить таргетинг на определенные диапазоны текста без использования элементов-заполнителей.:first-letter

Бывшие проблемы

Кроме того, в предыдущих версиях стандарта CSS присутствовало еще несколько проблем, но они были устранены:

Ограничения вертикального контроля
Хотя горизонтальное размещение элементов всегда было легко контролировать, вертикальное размещение часто было не интуитивно понятным, запутанным или совершенно невозможным. Простые задачи, такие как центрирование элемента по вертикали или размещение нижнего колонтитула не выше нижней части области просмотра, требовали либо сложных и неинтуитивных правил стиля, либо простых, но широко не поддерживаемых правил. Модуль Flexible Box значительно улучшил ситуацию, а вертикальное управление стало намного проще и поддерживается во всех современных браузерах. В старых браузерах все еще есть эти проблемы, но большинство из них (в основном Internet Explorer 9 и ниже) больше не поддерживаются их поставщиками.
Отсутствие выражений
Не было стандартной возможности задавать значения свойств в виде простых выражений (например, ). Это было бы полезно во множестве случаев, например, при вычислении размера столбцов с учетом ограничения на сумму всех столбцов. Internet Explorer версий 5–7 поддерживает собственный оператор выражения () с аналогичной функциональностью. Этот закрытый оператор выражения () больше не поддерживается начиная с Internet Explorer 8, за исключением режимов совместимости. Это решение было принято из соображений «соответствия стандартам, производительности браузера и безопасности». Однако рекомендация кандидата со значением calc () для устранения этого ограничения была опубликована рабочей группой CSS и с тех пор поддерживается во всех современных браузерах.margin-left: 10% 3em + 4px;
Отсутствие объявления столбца
Хотя это возможно в текущем CSS 3 (с использованием column-countмодуля), макеты с несколькими столбцами могут быть сложными для реализации в CSS 2.1. В CSS 2.1 процесс часто выполняется с использованием плавающих элементов, которые часто по-разному отображаются в разных браузерах, разных формах экрана компьютеров и разных соотношениях экрана, установленных на стандартных мониторах. Все современные браузеры в той или иной форме поддерживают эту функцию CSS 3.

Преимущества

Отделение контента от презентации
CSS облегчает публикацию контента в нескольких форматах представления на основе номинальных параметров. Номинальные параметры включают явные предпочтения пользователя, различные веб-браузеры, тип устройства, используемого для просмотра контента (настольный компьютер или мобильное устройство), географическое местоположение пользователя и многие другие переменные.
Согласованность по всему сайту
Когда CSS используется эффективно, с точки зрения наследования и «каскадирования», можно использовать глобальную таблицу стилей, чтобы влиять на элементы и стилизовать их по всему сайту. Если возникает ситуация, когда стиль элементов должен быть изменен или скорректирован, эти изменения могут быть внесены путем редактирования правил в глобальной таблице стилей. До появления CSS такое обслуживание было более сложным, дорогим и трудоемким.
Пропускная способность
Таблица стилей, внутренняя или внешняя, определяет стиль один раз для диапазона элементов HTML, выбранных по classтипу или по отношению к другим. Это намного эффективнее, чем повторение информации о стиле в строке для каждого вхождения элемента. Внешняя таблица стилей обычно хранится в кеше браузера и поэтому может использоваться на нескольких страницах без перезагрузки, что еще больше снижает передачу данных по сети.
Переформатирование страницы
Простым изменением одной строки можно использовать другую таблицу стилей для той же страницы. Это дает преимущества с точки зрения доступности, а также дает возможность адаптировать страницу или сайт к различным целевым устройствам. Более того, устройства, не способные понять стиль, по-прежнему отображают контент.
Доступность
Без CSS веб-дизайнеры обычно должны размещать свои страницы с помощью таких приемов, как таблицы HTML, которые затрудняют доступность для пользователей с ослабленным зрением (см. Веб-дизайн без таблиц # Доступность ).

Стандартизация

Каркасы

Фреймворки CSS - это предварительно подготовленные библиотеки , которые предназначены для упрощения и большего соответствия стандартам стилей веб-страниц с использованием языка каскадных таблиц стилей. Фреймворки CSS включают Blueprint , Bootstrap , Foundation и Materialize. Подобно библиотекам языков программирования и сценариев, фреймворки CSS обычно включаются в виде внешних листов .css, на которые имеются ссылки в HTML . Они предоставляют ряд готовых вариантов дизайна и верстки веб-страницы. Хотя многие из этих фреймворков были опубликованы, некоторые авторы используют их в основном для быстрого создания прототипов или для обучения, и предпочитают «вручную создавать» CSS, который подходит для каждого опубликованного сайта, без затрат на проектирование, обслуживание и загрузку из-за наличия множества неиспользуемых функций. в стилистике сайта. <head>

Методики проектирования

По мере увеличения размера ресурсов CSS, используемых в проекте, команде разработчиков часто приходится выбирать общую методологию проектирования, чтобы поддерживать их организованность. Целями являются простота разработки, простота совместной работы во время разработки и производительность развернутых таблиц стилей в браузере. Популярные методологии включают OOCSS (объектно-ориентированный CSS), ACSS (атомарный CSS), oCSS (органическая каскадная таблица стилей), SMACSS (масштабируемая и модульная архитектура для CSS) и BEM (блок, элемент, модификатор).

использованная литература

дальнейшее чтение

Смотрите также

внешние ссылки