All css: 🤷🏽‍♀️ Page not found | MDN Web Docs

EDIT: мой вопрос относится к Drupal 6 & 7, хотя мой пример кода-Drupal 6. Люди предоставили ответы, полезные для обеих версий Drupal. В настоящее время я работаю в Drupal, создавая мобильную…

Что делать пересекли свойства стиля в Гугл Хром инструменты разработчика имеешь в виду? При проверке элемента с помощью инструментов разработчика в Chrome, в элементах вкладка, правая панель. ..

Кажется, я не могу перетащить элемент, который имеет свойство unset: all css. .my-component { all: initial; * { all: unset; } } Я использую эти правила внутри расширения chrome, на элементах,…

При использовании CSS reset like * { all: unset; } встроенные графики SVG отображаются неправильно, см. https://jsfiddle.net/593qysxp/1 / Я проверил это с помощью Safari 11 и Chrome 61. Я попытался…

Согласно MDN: Ключевое слово revert работает точно так же, как unset во многих случаях. Единственное различие заключается в свойствах, значения которых задаются браузером или пользовательскими…

У меня есть фиксированный div на моей странице, который позиционируется со следующими свойствами CSS: width: 320px; height: 160px; position: fixed; right: 15px; bottom: 15px; top: unset; z-index:. ..

I all: unset , чтобы отменить все свойства наследования, но разрешить таблицу стилей агента пользователя. Как я могу это сделать? Как вы можете видеть в коде, он отключает все стили, даже таблицы…

У меня есть очень простой HTML, который отлично работает на Chrome, но на Safari он этого не делает. По словам веб-инспектора, мой span должен показывать зеленый текст. Однако он отображается как…

Так что в основном я сделал эту ситуацию, у родителя есть css all: unset . Затем я замечаю, что когда я использую Safari(версия 12.1.1 (14607.2.6.1.1) ), все дочерние элементы этого цвета могут быть…

Почему я должен использовать таблицу стилей сброса, такую как Normalize, когда я могу просто написать следующее CSS * { all: unset; }

Объяснение ключевых слов initial, inherit, unset и revert в CSS — Веб-стандарты

В CSS есть несколько ключевых слов для задания значений свойств. Я собираюсь поговорить о нескольких из них: initial, inherit и об относительно новых — unset и revert.

В оригинальной статье в заголовке и во вступлении говорится только о трёх ключевых словах, но дальше в тексте идёт обсуждение четвёртого — revert. Мы решили добавить его во вступление для удобства читателя — прим. переводчика.)

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

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

Базовые стили для вебаСкопировать ссылку

Прежде чем мы начнем разбираться с ключевыми словами, важно понять, откуда берутся базовые стили в браузере.

Начальное значение для каждого свойства в CSSСкопировать ссылку

Каждое свойство в CSS имеет начальное (initial) значение. Оно никак не связано с типом HTML-элемента, к которому применяется.

Пример начального значения из MDN:

Браузерные стилиСкопировать ссылку

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

Пример браузерных стилей:

У HTML-элементов нет начальных значений для стилей! Базовые стили HTML-элемента, такого как <h2>, например, предоставляются стилями браузера, а не начальными значениями CSS-свойств.

Теперь начнем говорить о ключевых словах.

Ключевое слово

Ключевое слово inherit сообщает браузеру, что значение свойства нужно найти у ближайшего родительского элемента и унаследовать его для текущего элемента. Если у ближайшего родителя также задано значение inherit, то браузер продолжит подниматься по DOM, пока не найдет какое-нибудь значение. Если значения нет, то браузер применит свои стили, а если и браузерных стилей нет, то тогда будет применено значение initial.

Ключевое слово

Чтобы понять ключевое слово initial, мы должны помнить важный факт: у каждого свойства в CSS есть значение по умолчанию, которое не имеет ничего общего со значениями, которые устанавливаются браузером. Браузерные стили — это стили, которые применяются браузером к конкретным HTML-элементам. Мы часто думаем, что они автоматически приходят вместе с HTML, но это не так.

Ключевое слово initial говорит браузеру использовать значение по умолчанию для заданного CSS-свойства. Например, для свойства color значение initial всегда будет black.

Такое поведение может очень запутывать, потому что, как мы и говорили ранее, значение по умолчанию для CSS-свойства не всегда совпадает со значением, которое браузер задает конкретному элементу. Например, initial-значение для свойства display равно inline для всех элементов. Поэтому, если для элемента <div> будет задано свойство display со значением initial, то свойство будет вычислено как inline, а не block, как в стилях браузера.

Пример:

div.box {
    background-color: red;
    display: initial; /* примет значение `inline`, а не `block` */
}

Пример на CodePen значения initial для свойства display элемента <div>.

Ключевое слово

Ключевое слово unset является уникальным и работает в зависимости от типа свойства. В CSS есть два типа свойств:

1. Наследуемые свойстваСкопировать ссылку

Свойства, которые затрагивают дочерние элементы. Все свойства, которые влияют на текст, имеют такое естественное поведение. Например, если мы зададим font-size элементу <html>, то он будет применяться ко всем дочерним элементам, пока вы не зададите другой font-size какому-нибудь из них.

2. Ненаследуемые свойстваСкопировать ссылку

Все остальные свойства, которые влияют только на элемент, для которого они заданы. Это все свойства, которые не относятся к оформлению текста. Например, если вы зададите border на родительском элементе, то он не будет задан на дочернем.

Ключевое слово unset работает так же, как и inherit для наследуемых свойств. Например, для текстового свойства color оно будет работать как значение inherit, то есть будет искать ближайший родительский элемент с заданием нужного свойства, а если он не будет найден, то применится браузерное значение, а если и браузерных стилей нет, то применится значение initial.

Для ненаследуемых свойств unset ведет себя как initial, то есть применится значение по умолчанию. Например, для свойства border-color оно будет работать как initial.

.some-class {
    color: unset; /* будет равно `inherit` */
    display: unset; /* будет равно `initial` */
}

Зачем использовать

Если unset ведет себя как inherit и initial, то зачем оно может понадобиться? Если мы сбрасываем только одно свойство, то unset не нужен. Вместо него мы можем просто использовать inherit или initial. Но сейчас у нас есть свойство all, которое дает нам новую возможность — сбросить наследуемые и ненаследуемые свойства одновременно.

Таким образом, вам не нужно сбрасывать свойства по отдельности. Применение ключевого слова unset к свойству all приведет к сбросу всех наследуемых свойств к значению inherit и всех ненаследуемых свойств — к значению initial.

Это единственная причина существования нового ключевого слова unset! В противном случае мы могли бы вместо этого использовать inherit и initial.

Вместо сброса свойств по отдельности, к примеру:

/* Плохо */
.common-content {
    font-size: inherit;
    font-weight: inherit;
    border-width: initial;
    background-color: initial;
}

Мы можем использовать новое свойство all со значением unset, которое повлияет на все существующие свойства, например:

/* Хорошо */
.common-content {
    all: unset;
}

Я создал небольшой пример для демонстрации того, как свойства ведут себя, когда используется свойство all со значением unset. Некоторые ведут себя так, как будто к ним применено значение inherit, а некоторые так, как будто к ним применено значение initial. Пример на Codepen использования all: unset.

Ключевое слово

Но что, если мы хотим сбросить значение свойства до первоначально заданных браузером значений, а не до значений по умолчанию? Например, вернуть значение свойства display элемента <div> к значению block (это стили браузера), а не к значению inline (это базовые стили CSS).

Для этих целей мы скоро получим новое ключевое слово в CSS: revert. Оно очень похоже на unset, единственное отличие состоит в том, что оно предпочитает стили браузера базовым значениям свойств CSS. Например:

div {
    display: revert; /* = block */
}

h2 {
    font-weight: revert; /* = bold */
    font-size: revert; /* = 2em */
}

Таким образом, если мы хотим сбросить все стили HTML-элемента до базовых стилей браузера, мы можем сделать это так:

/* Хорошо */
. common-content {
    all: revert;
}

Соответственно, revert дает гораздо больше возможностей, чем unset. Правда, на данный момент revert работает только в Firefox и Safari. (В Chrome работает с версии 84 — прим. переводчика.)

ЗаключениеСкопировать ссылку

На этом всё. Надеюсь, вам понравилась эта статья, и вы чему-то научились из моего опыта.

Видео доклада по темеСкопировать ссылку

Я сделал короткий доклад на эту тему, смотрите видео целиком на YouTube:

CSS свойство all

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      body {
      font-size: 15px;
      color: #1c87c9;
      }
      . example1 {
      background-color: #8ebf42;
      color: #666;
      }
      .example2 {
      background-color: #8ebf42;
      color: #666;
      all: inherit;
      }
      .example3 {
      background-color: #8ebf42;
      color: #666;
      all: initial;
      }
      .example4 {
      background-color: #8ebf42;
      color: #666;
      all: unset;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства all</h3>
    <hr>
    <p>Без применения свойства all:</p>
    <div>
      Экстраверт - дружелюбный человек, который любит быть в окружении других людей. Экстраверты любят вечеринки, разговоры по телефону и новые знакомства.
    </div>
    <hr>
    <p>all: inherit:</p>
    <div>
      Экстраверт - дружелюбный человек, который любит быть в окружении других людей.  Экстраверты любят вечеринки, разговоры по телефону и новые знакомства.
    </div>
    <hr>
    <p>all: initial:</p>
    <div>
      Экстраверт - дружелюбный человек, который любит быть в окружении других людей. Экстраверты любят вечеринки, разговоры по телефону и новые знакомства.
    </div>
    <hr>
    <p>all: unset:</p>
    <div>
      Экстраверт - дружелюбный человек, который любит быть в окружении других людей. Экстраверты любят вечеринки, разговоры по телефону и новые знакомства.
    </div>
    <hr>
  </body>
</html>

все — CSS: каскадные таблицы стилей

 
все: начальные;
все: наследовать;
все: отключено;


все: вернуться;
  

Свойство all указано как одно из значений глобального ключевого слова CSS. Обратите внимание, что ни одно из этих значений не влияет на свойства unicode-bidi и direction .

Значения

начальные

Указывает, что все свойства элемента должны быть изменены на их начальные значения.

наследовать

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

снято

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

вернуться

Задает поведение, зависящее от источника таблицы стилей, к которой принадлежит объявление:

Источник агента пользователя

Эквивалент без учета .

Происхождение пользователя

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

Авторское происхождение

Откатывает каскад до уровня пользователя, чтобы указанные значения вычислялись так, как если бы для элемента не были указаны правила уровня автора. Для целей откат , происхождение автора включает источники переопределения и анимации.

 начальная | наследовать | отключено | вернуться 

HTML

  

  Lorem ipsum dolor sit amet, conctetur adipiscing elit.

Phasellus eget velit sagittis. 

CSS

  кузов {
  размер шрифта: маленький;
  цвет фона: # F0F0F0;
  цвет синий;
}

blockquote {
  цвет фона: голубой;
  красный цвет;
}
  

Результат

№

  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. 
 Phasellus eget velit sagittis.  

  body {font-size: small; цвет фона: # F0F0F0; цвет синий; }
цитата {цвет фона: голубой; красный цвет; }  

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

все: отключено

  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. 
 Phasellus eget velit sagittis.  

  body {font-size: small; цвет фона: # F0F0F0; цвет синий; }
цитата {цвет фона: голубой; красный цвет; }
blockquote {все: отключено; }  

не использует стиль браузера по умолчанию: теперь это встроенный элемент (начальное значение), его цвет фона прозрачный (начальное значение), но его размер шрифта по-прежнему остается маленьким (унаследованное значение), а его цвет — синий (унаследованное значение).

все: начальные

  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. 
 Phasellus eget velit sagittis.  

  body {font-size: small; цвет фона: # F0F0F0; цвет синий; }
цитата {цвет фона: голубой; красный цвет; }
blockquote {все: начальные; }  

не использует стиль браузера по умолчанию: теперь это встроенный элемент (начальное значение), его цвет фона — прозрачный (начальное значение), его размер шрифта нормальный (начальное значение), а его цвет — черный (начальное значение).

все: наследовать

  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. 
 Phasellus eget velit sagittis.  

  body {font-size: small; цвет фона: # F0F0F0; цвет синий; }
цитата {цвет фона: голубой; красный цвет; }
blockquote {все: наследовать; }  

не использует стиль браузера по умолчанию: теперь это элемент block (унаследованное значение от содержащего его элемента ), его background-color — # F0F0F0 ( унаследованное значение), его font-size — это small (унаследованное значение), а его color — blue (унаследованное значение).

Таблицы BCD загружаются только в браузере

CSS все свойство

Пример

Измените все свойства, применяемые к элементу или его родительскому элементу, на их начальное значение:

div {
цвет фона: желтый;
цвет: красный;
все: начальные;
}

Попробуй сам »

---

Определение и использование

Свойство all сбрасывает все свойства, кроме unicode-bidi и direction к их начальному или унаследованному значению.

Значение по умолчанию:	нет
Унаследовано:	№
Анимация:	нет. Прочитать о animatable
Версия:	CSS3
Синтаксис JavaScript:	объект .style.all = «начальный»

---

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
все	37,0	79,0	27,0	9,1	24,0

---

Синтаксис CSS

все: начальное | наследование | отключено;

Значения свойств

Значение	Описание
начальный	Изменяет все свойства, примененные к элементу или его родительскому элементу, на их начальное значение
унаследовать	Изменяет все свойства, применяемые к элементу или родительскому элементу, на их родительское значение
отключено	Изменяет все свойства, применяемые к элементу или родительскому элементу, на их родительское значение, если они наследуются, или на их начальное значение, если не

Список свойств CSS3 — Tutorial Republic

align-content	Задает выравнивание элементов гибкого контейнера внутри гибкого контейнера.
align-items	Задает выравнивание по умолчанию для элементов в гибком контейнере.
с выравниванием	Задает выравнивание для выбранных элементов в гибком контейнере.
анимация	Задает анимацию на основе ключевых кадров.
задержка анимации	Указывает, когда начнется анимация.
анимация-направление	Указывает, должна ли анимация воспроизводиться в обратном порядке поочередно или нет.
продолжительность анимации	Определяет количество секунд или миллисекунд, которое требуется анимации для завершения одного цикла.
режим анимации-заливки	Указывает, как CSS-анимация должна применять стили к своей цели до и после ее выполнения.
количество итераций анимации	Указывает, сколько раз цикл анимации должен быть воспроизведен перед остановкой.
имя-анимации	Задает имя @keyframes определенных анимаций, которые должны быть применены к выбранному элементу.
состояние воспроизведения анимации	Указывает, запущена или приостановлена ​​анимация.
функция синхронизации анимации	Определяет, как должна развиваться CSS-анимация в течение каждого цикла.
задняя видимость	Указывает, будет ли «обратная» сторона преобразованного элемента видна, если смотреть лицом к пользователю.
фон	Определяет множество свойств фона в одном объявлении.
фоновая насадка	Укажите, фиксируется ли фоновое изображение в области просмотра или прокручивается.
фоновая клипса	Задает область рисования фона.
цвет фона	Определяет цвет фона элемента.
фоновое изображение	Определяет фоновое изображение элемента.
фон-происхождение	Задает область расположения фоновых изображений.
фоновая позиция	Определяет источник фонового изображения.
фоновый повтор	Укажите, будет ли / как фоновое изображение выложено мозаикой.
размер фона	Задает размер фоновых изображений.
граница	Задает ширину, стиль и цвет для всех четырех сторон границы элемента.
край нижний	Задает ширину, стиль и цвет нижней границы элемента.
цвет нижней границы	Задает цвет нижней границы элемента.
граница, нижний левый радиус	Определяет форму нижнего левого угла границы элемента.
граница, нижняя правая, радиус	Определяет форму нижнего правого угла границы элемента.
с окантовкой снизу	Задает стиль нижней границы элемента.
ширина по краю снизу	Задает ширину нижней границы элемента.
граница-обрушение	Указывает, соединены ли границы ячеек таблицы или разделены.
цвет рамки	Задает цвет границы со всех четырех сторон элемента.
бордюр	Определяет, как изображение должно использоваться вместо стилей границ.
граница-изображение-исход	Задает величину, на которую область изображения границы выходит за пределы рамки.
повтор изображения границы	Указывает, следует ли повторять, округлять или растягивать границу изображения.
фрагмент изображения границы	Задает внутреннее смещение границы изображения.
источник изображения границы	Задает расположение изображения, которое будет использоваться в качестве границы.
ширина изображения границы	Задает ширину границы изображения.
граница слева	Задает ширину, стиль и цвет левой границы элемента.
цвет рамки слева	Задает цвет левой границы элемента.
с рамкой слева	Задает стиль левой границы элемента.
ширина рамки слева	Задает ширину левой границы элемента.
граница-радиус	Определяет форму краевых углов элемента.
граница правая	Задает ширину, стиль и цвет правой границы элемента.
цвет рамки справа	Задает цвет правой границы элемента.
с окантовкой справа	Задает стиль правой границы элемента.
ширина рамки справа	Задает ширину правой границы элемента.
расстояние между границами	Задает интервал между границами соседних ячеек таблицы.
с бордюром	Задает стиль границы со всех четырех сторон элемента.
с бордюром	Задает ширину, стиль и цвет верхней границы элемента.
цвет верхней границы	Задает цвет верхней границы элемента.
граница, верхний левый радиус	Определяет форму верхнего левого угла границы элемента.
граница верхняя правая радиус	Определяет форму верхнего правого угла границы элемента.
с бордюром	Задает стиль верхней границы элемента.
ширина до края	Задает ширину верхней границы элемента.
ширина рамки	Задает ширину границы со всех четырех сторон элемента.
низ	Укажите расположение нижнего края позиционируемого элемента.
тень коробки	Применяет одну или несколько теней к блоку элемента.
Размер коробки	Изменить стандартную блочную модель CSS.
сторона подписи	Укажите положение заголовка таблицы.
прозрачный	Задает размещение элемента по отношению к плавающим элементам.
зажим	Определяет область отсечения.
цвет	Укажите цвет текста элемента.
количество столбцов	Задает количество столбцов в элементе с несколькими столбцами.
заполнение колонки	Задает способ заполнения столбцов.
колонна-зазор	Задает промежуток между столбцами в многоколоночном элементе.
линейка-столбец	Задает прямую линию или «правило», которое нужно провести между каждым столбцом в многоколоночном элементе.
цвет столбца-правила	Задает цвет правил, нарисованных между столбцами в многоколоночном макете.
стиль столбца-правила	Задает стиль правила, нарисованного между столбцами в многоколоночном макете.
ширина столбца-линейки	Задает ширину линейки, нарисованной между столбцами в многоколоночном макете.
колонно-пролетная	Указывает, сколько столбцов занимает элемент в многоколоночном макете.
ширина столбца	Задает оптимальную ширину столбцов в элементе с несколькими столбцами.
столбца	Сокращенное свойство для установки свойств column-width и column-count .
содержание	Вставляет сгенерированный контент.
счетчик	Увеличивает одно или несколько значений счетчика.
сброс счетчика	Создает или сбрасывает один или несколько счетчиков.
курсор	Укажите тип курсора.
направление	Определите направление текста / направление письма.
дисплей	Задает способ отображения элемента на экране.
пустые ячейки	Показать или скрыть границы и фон пустых ячеек таблицы.
гибкий	Задает компоненты гибкой длины.
гибкая основа	Задает начальный основной размер гибкого элемента.
гибкое направление	Задает направление гибких элементов.
гибкий поток	Сокращенное свойство для свойств flex-direction и flex-wrap .
гибкий рост	Определяет, как гибкий элемент будет расти относительно других элементов внутри гибкого контейнера.
гибкая усадка	Указывает, как гибкий элемент будет сжиматься по сравнению с другими элементами внутри гибкого контейнера.
гибкая пленка	Указывает, должны ли гибкие элементы оборачиваться или нет.
с плавающей запятой	Указывает, должен ли блок плавать.
шрифт	Определяет множество свойств шрифта в одном объявлении.
семейство шрифтов	Определяет список шрифтов для элемента.
размер шрифта	Определяет размер шрифта для текста.
регулировка размера шрифта	Сохраняет удобочитаемость текста при замене шрифта.
растяжка шрифта	Выбирает обычное, сжатое или расширенное начертание шрифта.
стиль шрифта	Определяет стиль шрифта для текста.
вариант шрифта	Укажите вариант шрифта.
font-weight	Укажите толщину шрифта текста.
высота	Укажите высоту элемента.
justify-content	Указывает, как гибкие элементы выравниваются по главной оси гибкого контейнера после определения любых гибких длин и автоматических полей.
слева	Укажите расположение левого края позиционируемого элемента.
межбуквенный интервал	Задает дополнительный интервал между буквами.
высота строки	Задает высоту между строками текста.
в виде списка	Определяет стиль отображения для списка и элементов списка.
изображение в стиле списка	Задает изображение, которое будет использоваться в качестве маркера элемента списка.
позиция стиля списка	Задает положение маркера элемента списка.
тип списка	Задает стиль маркера для элемента списка.
маржа	Задает поля со всех четырех сторон элемента.
нижнее поле	Задает нижнее поле элемента.
поле слева	Задает левое поле элемента.
поле справа	Задает правое поле элемента.
верхний край	Задает верхнее поле элемента.
макс. Высота	Укажите максимальную высоту элемента.
макс. Ширина	Укажите максимальную ширину элемента.
мин. Высота	Укажите минимальную высоту элемента.
Мин. Ширина	Укажите минимальную ширину элемента.
непрозрачность	Задает прозрачность элемента.
заказать	Задает порядок, в котором гибкие элементы отображаются и размещаются внутри гибкого контейнера.
контур	Задает ширину, стиль и цвет для всех четырех сторон контура элемента.
контурный цвет	Задает цвет контура.
контур-офсет	Задайте расстояние между контуром и краем элемента.
контурный стиль	Задает стиль контура.
ширина контура	Задает ширину контура.
перелив	Задает обработку содержимого, которое выходит за пределы поля элемента.
переполнение-x	Задает обработку содержимого, которое выходит за пределы поля элемента по горизонтали.
переполнение	Задает обработку содержимого, которое выходит за пределы поля элемента по вертикали.
набивка	Задает отступ со всех четырех сторон элемента.
набивка нижняя	Устанавливает отступ по нижней стороне элемента.
прокладка левая	Устанавливает отступ слева от элемента.
прокладка правая	Устанавливает отступ справа от элемента.
утеплитель	Устанавливает отступ на верхней стороне элемента.
разрыв страницы после	Вставляет разрыв страницы после элемента.
разрыв страницы перед	Вставьте разрыв страницы перед элементом.
разрыв страницы внутри	Вставить разрывы страниц внутри элемента.
перспектива	Определяет перспективу, с которой просматриваются все дочерние элементы объекта.
в перспективе	Определяет исходную точку (точку схода для трехмерного пространства) для свойства перспективы.
позиция	Задает расположение элемента.
котировки	Задает кавычки для встроенных цитат.
изменить размер	Указывает, может ли пользователь изменять размер элемента.
правый	Укажите расположение правого края позиционируемого элемента.
размер табулятора	Задает длину символа табуляции.
стол-макет	Задает алгоритм компоновки таблицы.
выравнивание текста	Задает горизонтальное выравнивание встроенного содержимого.
text-align-last	Задает способ выравнивания последней строки блока или строки непосредственно перед принудительным разрывом строки, если выравнивание текста равно выравниванию .
оформление текста	Задает украшение, добавляемое к тексту.
цвет-текст	Задает цвет строки оформления текста .
текст-украшение-строка	Указывает, какие линии украшения добавляются к элементу.
стиль оформления текста	Задает стиль линий, заданных свойством text-decoration-line
текстовый отступ	Сделать отступ в первой строке текста.
с выравниванием текста по ширине	Задает метод выравнивания, который будет использоваться, если для свойства text-align установлено значение justify .
переполнение текста	Определяет, как будет отображаться текстовое содержимое при переполнении контейнеров блоков.
тень текста	Применяет одну или несколько теней к текстовому содержимому элемента.
преобразование текста	Преобразует регистр текста.
верхняя	Укажите расположение верхнего края позиционируемого элемента.
преобразование	Применяет к элементу преобразование 2D или 3D.
преобразование происхождения	Определяет исходную точку преобразования для элемента.
стиль преобразования	Задает способ визуализации вложенных элементов в трехмерном пространстве.
переход	Определяет переход между двумя состояниями элемента.
задержка перехода	Указывает, когда начнется эффект перехода.
продолжительность перехода	Задает количество секунд или миллисекунд, которое должно занять эффект перехода.
переходная собственность	Задает имена свойств CSS, к которым должен применяться эффект перехода.
функция времени перехода	Задает кривую скорости эффекта перехода.
с выравниванием по вертикали	Задает вертикальное расположение элемента относительно текущей базовой линии текста.
видимость	Указывает, является ли элемент видимым.
белое пространство	Указывает, как обрабатываются пробелы внутри элемента.
ширина	Укажите ширину элемента.
разрыв слова	Указывает, как разбивать строки внутри слов.
интервал между словами	Задает интервал между словами.
перенос слов	Указывает, следует ли разрывать слова, когда содержимое выходит за границы своего контейнера.
z-индекс	Задает порядок наложения или наложения для позиционированных элементов.

Все спецификации CSS

Все спецификации CSS

История

Тесты

Селекторы описывает селекторы элементов, используемые в CSS и некоторых других технологиях.Селекторы используются для выбора элементов в документе HTML или XML, чтобы прикрепить к ним (стилевые) свойства. Элементы могут быть выбираются на основе их имени, атрибутов, контекста и других аспекты.

Редакторы: Тантек Челик, Элика Дж. Этемад, Даниэль Глазман, Ян Хиксон, Питер Линсс , Джон Уильямс

История

Селекторы уровня 4 расширяет уровень 3 с новыми способами выбора элементы.основанные, например, на том, что они содержат, или на том, что следует за ними.

Редакторы: Элика Дж. Этемад, Таб Аткинс мл.

История

Тесты

CSS Level 2 Revision 1 исправляет ошибки в Рекомендациях CSS 1998 г. уровень 2 и добавляет несколько очень востребованных функций изначально планировалось для уровня 3, которые уже широко реализовано. Но больше всего CSS 2.1 представляет собой «снимок» CSS. использование: он состоит из всех реализованных функций CSS. совместимость для HTML и XML на дату публикации Рекомендация.

Редакторы: Берт Бос, Тантек Челик, Ян Хиксон, Хокон Виум Ли

История

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

Редакторы: Берт Бос

История

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

Редакторы: Элика Дж. Этемад

История

CSS Snapshot 2010 ссылок ко всем спецификациям, которые вместе представляют состояние CSS по состоянию на 2010 год. В этом документе CSS WG призван помочь разработчикам различать части CSS, готовые к производству и части, которые все еще являются экспериментальными.

Редакторы: Элика Дж. Этемад

История

CSS Snapshot 2015 ссылок ко всем спецификациям, которые вместе представляют состояние CSS по состоянию на 2015 год. В этом документе CSS WG призван помочь разработчикам различать части CSS, готовые к производству и части, которые все еще являются экспериментальными.

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

Редакторы: Элика Дж. Этемад

История

CSS Snapshot 2017 ссылок ко всем спецификациям, которые вместе представляют состояние CSS по состоянию на 2017 год. Это преемник аналогичных снимков за 2015, 2010 и 2007 годы. В этом документе CSS WG призван помочь разработчикам различать части CSS, готовые к производству и части, которые все еще являются экспериментальными.

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

Редакторы: Таб Аткинс мл., Элика Дж. Этемад / fantasai, Флориан Ривоал

История

CSS Snapshot 2018 ссылок ко всем спецификациям, которые вместе представляют состояние CSS по состоянию на 2017 год. Это преемник аналогичных снимков за 2017, 2015, 2010 и 2007 годы. В этом документе CSS WG ставит своей целью чтобы помочь разработчикам различать части CSS, которые готовые к производству и экспериментальные части.

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

Редакторы: Таб Аткинс мл., Элика Дж. Этемад / fantasai, Флориан Ривоал

История

CSS Snapshot 2020 ссылок ко всем спецификациям, которые вместе представляют состояние CSS по состоянию на 2017 год. Это преемник аналогичных снимков за 2018, 2017, 2015, 2010 и 2007 годы.В этом документе CSS WG призван помочь разработчикам различать части CSS, готовые к производству и части, которые все еще являются экспериментальными.

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

Редакторы: Таб Аткинс мл., Элика Дж. Этемад / fantasai, Флориан Ривоал

История

Макет шаблона сетки (ранее: Advanced Layout) описывает новый способ позиционирования элементы, использующие ограничения на их выравнивание друг относительно друга и на их гибкость.Элементы документа объединены в один или несколько шаблоны, напоминающие традиционную сетку макета, со строками и столбцы как в таблице. Его можно применить к странице или к отдельному элементы, например, для создания формы. Этот модуль и Grid Layout находятся в процессе слились.

Редакторы: Берт Бос, Сезар Асебаль

Таблицы стилей CSS Aural

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

Редакторы: Дэйв Рэггетт, Дэниел Глазман

История

Тесты

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

Редакторы: Берт Бос, Элика Дж. Этемад

Фоны и границы уровень 4 - это хранилище предлагаемых функций для следующих уровень фонов и границ модуль. Если (некоторые из) эти функции сохраняются, модуль в конечном итоге заменит модуль уровня 3.Черновиков не было опубликовано еще, но в настоящее время ожидаемые функции включают угловой формы, положение фона относительно режима письма (для автоматически вращать, зеркально отражать и / или позиционировать фон в зависимости от от того, содержит ли элемент вертикальное письмо справа налево или текст с направлением слева направо) и частичные границы (вырезание частей край).

Редакторы: Берт Бос, Элика Дж. Этемад, Брэд Кемпер, Леа Веру

История

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

Редакторы: Тантек Челик

История

Описание модели Box Модель макет блочного содержимого в нормальном потоке. Когда документы размещены на визуальном носителе (например, экране или бумаге), CSS представляет элементы документа в виде прямоугольных блоков, которые расположены один за другим или вложены друг в друга в таком порядке называется потоком . Течение может быть горизонтальным (типично для большинства языков) или вертикальным (часто используется для японского и китайского языков).

Редакторы: Элика Дж. Этемад Берт Бос

История

Описание модели Box Модель макет блочного содержимого в нормальном потоке. Уровень 4 расширяется уровень 3 с возможностью автоматического подавления поля первый или последний элемент внутри строки или блока (что часто иначе невозможно, потому что невозможно всегда знать какой элемент попадает на край).

Редакторы: Элика Дж.Etemad

CSS Extended Box Модель

Модель Extended Box обеспечивает дополнительный контроль над расположением поплавков и размером коробки.

Редакторы: Берт Бос

История

Marquee содержит свойства, управляющие скорость и направление эффекта «шатра». Шатры - это механизм прокрутки, не требующий вмешательства пользователя: переполнение контент сам по себе появляется и исчезает из поля зрения.Шатер в основном используется на мобильных телефонах. (До апреля 2008 г. свойства marquee были частью модуля Box.)

Редакторы: Берт Бос

История

Каскадирование и наследование описывает, как значения присваиваются свойствам. CSS позволяет несколько таблицы стилей, чтобы повлиять на рендеринг документа, и процесс объединения этих таблиц стилей называется "каскадным". Если никакое значение не может быть найдено с помощью каскадирования, значение может быть унаследовано из родительского элемента или используется начальное значение свойства.Кроме того, модуль описывает, как «заданные значения», что является таблица стилей содержит, преобразуется в «вычисленные значения» и «Фактические значения».

Редакторы: Элика Дж. Этемад, Таб Аткинс мл., Хокон Виум Ли

История

По сравнению с уровнем 3, уровень 4 добавляет ключевое слово default, чтобы переопределить нормальный порядок каскадирования и наследование, и возможность квалифицировать правило '@import' не только с медиа-запросом, но также с предложением supports () (подробности см. в условных правилах CSS).

Редакторы: Элика Дж. Этемад / fantasai, Таб Аткинс Младший

История

Каскадирование и наследование Уровень 5 расширяет уровень 4 с помощью возможность классифицировать таблицы стилей на произвольное количество «Слои»: базовые слои и замещающие слои. Это упрощает повторно использовать таблицы стилей и добавлять локальные переопределения без необходимости '! important' или очень специфические селекторы.

Редакторы: Элика Дж. Этемад / fantasai, Мириам Э.Сюзанна, Таб Аткинс мл.

История

Тесты

Цвет определяет связанные с цветом аспекты CSS, включая прозрачность и различные обозначения для типа значения <цвет> .

Редакторы: Л. Дэвид Барон, Тантек Челик, Крис Лилли

История

Color Module Level 4 расширяет Color level 3. Он определяет различные цветовые обозначения, в том числе RGB, HSL, шестнадцатеричный, именованные цвета, HWB, Lab, LCH и относительный цвета ('color-mod').Он определяет «цвет» и «непрозрачность». характеристики. И он предоставляет способы работы в цветовых пространствах, отличных от sRGB по умолчанию.

Редакторы: Таб Аткинс младший, Крис Лилли, Л. Дэвид Бэрон

История

Шрифты содержит свойства для выбора шрифтов, а также свойства для шрифта "Корректировки", например варианты глифов (например, наклонные буквы, мелкие заглавные буквы, цифры старого стиля) и кернинг. Выбор шрифта идентичен аналогичный раздел в CSS2.Свойства настройки шрифта являются новыми до уровня 3. Модуль также содержит правило @ font-face для загружаемые шрифты, которые ранее были в отдельном модуле.

Модуль со временем будет заменен на более крупные шрифты уровня 4

Редакторы: Джон Даггетт, Пол Нельсон, Джейсон Крэнфорд Teague, Michel Suignard , Крис Лилли

История

Созданный контент для постраничного Носитель содержит расширенные свойства для печати, помимо модуль Paged Media предоставляет.Имеет свойства для создания сноски, перекрестные ссылки («см. раздел X на странице Y») и построение бегущих заголовков из заголовков разделов.

Редакторы: Хокон Виум Ли

История

Плавающие страницы выделены из сгенерированного контента для страничных медиа. Это содержит свойства для размещения элементов сверху, снизу или сбоку от страницу в рендеринге с разбивкой на страницы, а также для размещения элементов в определенных позиции с переносом текста с обеих сторон.

Редакторы: Йоханнес Вильм, Хокон Виум Ли

История

Создано и заменено Content определяет, как разместить контент до, после или в место элемента. Контент может быть текстом или внешним объектом, например изображение. Например, когда документ содержит элемент, ссылки на изображение, именно этот модуль позволяет дизайнеру выберите, будет ли изображение отображаться вместо элемента или нет. (Расчет размера замененных элементов равен определены в модуле CSS Image Values.)

Редакторы: Ян Хиксон

История

Гиперссылки Презентация рассматривает различные способы представления гиперссылок. CSS1 уже предоставил псевдоклассы ": посещено" и ": ссылка" на выберите гиперссылки. Этот модуль предоставит свойства для управления какие гиперссылки активны и где отображается цель, когда пользователь переходит по ссылке (например, в новом окне или в строке в текущий документ). Обратите внимание, что не все ссылки должны быть представлены как гиперссылки; некоторые могут обрабатываться как заменяемые элементы (см. модуль «Созданное и замененное содержимое») и некоторые из них выходят за рамки CSS (например, ссылки на скрипты, определения пространств имен, политики P3P и т. д.)

Редакторы: Тантек Челик, Берт Бос, Даниэль Глазман

История

Введение был удален и заменен серией Примечаний под названием «Снимки CSS». См., например, Снимок 2010 для описания.

Редакторы: Хокон Виум Ли, Эрик А. Мейер , Берт Бос

История

Списки содержат свойства для списков стилей, в частности различные типы пули и системы нумерации.

Редакторы: Таб Аткинс младший, Шинью Мураками , Ян Хиксон

Математика CSS

Math - предлагаемый модуль для свойств, предназначенных для стилизации математических формул, построения на макете макета «презентационных» элементов MathML. В настоящее время не работает на.

Редакторы: -

История

Многоколоночная компоновка содержит свойства для переноса содержимого в гибко определяемые столбцы.

Редакторы: Хокон Виум Ли

История

Тесты

Форматы на основе XML могут использовать «пространства имен» для различения нескольких использует одно и то же имя элемента друг у друга, и этот черновик объясняет, как можно расширить селекторы CSS для выбора этих элементов. на основе их «пространства имен», а также их локального имени.

Редакторы: Элика Дж. Этемад, Энн ван Кестерен, Крис Лилли, Питер Линсс

История

Модель DOM определяет функции, которые встречаются в нескольких библиотеки программирования (и браузеры) для управления HTML, XML и CSS документы.Программисты могут скорее вызывать их из своих программ. чем писать самостоятельно. Некоторые из этих функций связаны с добавлением & удаление правил и изменение свойств в таблицах стилей CSS. Эти API-интерфейсы образуют объектную модель CSS или CSS-OM . Они полезны для автономных программ, а также для скриптов и апплетов. ДОМ уровень 2 содержит две главы по CSS-OM (объектной модели CSS) и РГ CSS разработает CSS-OM уровня 3.

Редакторы: Анн ван Кестерен

История

API, представленные в этой спецификации, предоставляют авторам способ проверки и управления информацией о просмотре документа.Это включает в себя получение положения полей макета элемента, получение ширины области просмотра через скрипт, а также прокрутка элемента.

Редакторы: Анн ван Кестерен

История

Тесты

Paged Media расширяет свойства, которые уже были в CSS2, с новыми для управления такими такие вещи, как верхние и нижние колонтитулы и номера страниц.

Редакторы: Мелинда Грант, Элика Дж.Этемад, Хокон Виум Ли, Саймон Сапин, Джим Бигелоу

История

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

Редакторы: Аррон Эйхольц

История

Уровни представления вводит способ шагать вперед и назад через несколько визуализации одного и того же документа, что особенно полезно для слайд-шоу (выделяйте элементы списка по одному) и наброски (показать более или менее подробную информацию). Модель такова, что каждый элемент имеет уровень представления и три стиля (три состояния): один для случаев, когда браузер находится на более низком уровне представления, один для точное совпадение и одно, когда уровень представления браузера над элементом.Браузер должен предлагать пользователю простой способ повышения и понижения уровня браузера.

Редакторы: Хокон Виум Ли

История

Этот модуль был удален в марте 2008 года. Ключевое слово 'reader' - это тип мультимедиа для использования в медиа-запросах (аналогично «экран», «печать», «проекция» и т. д.). Устройства, которые могут выбрать для применения правил внутри '@media reader' такие устройства, как экран читатели, которые отображают страницу на экране и одновременно говорят на ней времени, или отображать страницу и одновременно отображать ее на динамическом устройство Брайля.К этому типу мультимедиа применяются следующие свойства: поэтому комбинация свойств экрана, речи и шрифт Брайля.

Редакторы: Берт Бос

История

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

Редакторы: Ричард Исида, Пол Нельсон, Мишель Сюиньяр

История

Модуль CSS Scoping уровень 1 определяет аналог CSS для HTML5 с областью действия стили, механизмы для стилизации псевдоэлементов («регионов») и селекторы для теневой модели DOM.’

Редакторы: Таб Аткинс мл., Элика Этемад

История

Grid Layout позволяет настроить гибкую сетку дизайна для элемент так, чтобы потомки элемента могли быть расположены относительно этой сетки и, таким образом, быть выровненными друг к другу в двух Габаритные размеры. Областям сетки можно присвоить имена как для удобства использования и создать уровень косвенности, который облегчает переупорядочивание элементов. Как и другие модули сетки / шаблона, этот модуль строится на основе фреймовой компоновки идеи, которые зародились в 1996 году и позволили, среди прочего, абсолютное позиционирование в CSS уровня 2.Таким образом, модуль Grid Layout имеет большое перекрытие с многоколоночным Макет, Макет шаблона, Гибкий макет коробки, Сетка Позиционирование и регионы, но не замените их. Однако ожидается, что шесть модулей могут в конечном итоге будет сокращено до трех: многоколоночный, гибкий блок, и третий для сеток / шаблонов / регионов.

Редакторы: Алексей Могилевский, Фил Купп, Маркус Мильке, Дэниел Глазман, Таб Аткинс мл., Элика Я. Этемад / fantasai, Россен Атанасов

История

Уровень 2 модуля Grid Layout расширяет возможности сетка, в частности с возможностью делать потомков элементы элемента сетки, кроме прямых дочерних элементов сетки Предметы.

Редакторы: Таб Аткинс мл., Элика Дж. Этемад / fantasai, Россен Атанасов

История

«Регионы» - это собирательное название некоторых видов областей на холст, который можно выбрать псевдоэлементами.Регионы создается некоторыми другими модулями, такими как Paged Media (который создает области, называемые «полями полей»), Selectors (который создает, например, область ':: first-line') и шаблон сетки Макет (который создает «слоты»).

Модуль регионов определяет два типа вещей, которые вы можете делать с регионами: Некоторые виды регионы могут быть объединены в цепочку, и контент перетекает в них, например этот текст, который слишком длинный для одной области, не переполняется, а автоматически продолжается в другом регионе; и, во-вторых, контент может быть стилизован в зависимости от того, в каком регионе он находится.Например, абзац который перетекает в две области, может иметь полужирный текст в первой области и обычный текст во втором, даже если нет элемента граница.

Редакторы: Винсент Харди, Россен Атанасов, Алан Stearns

История

Речь содержит свойства, чтобы указать, как документ воспроизводится речью синтезатор: громкость, голос, скорость, высота звука, реплики, паузы и т.д. уже был модулем ACSS (Aural CSS) в CSS2, но никогда не был правильно реализован и несовместим с синтезом речи Язык разметки (SSML), язык W3C для управления речью синтезаторы.Поэтому модуль ACSS CSS2 был разделен на две части: речь (для реальной речи, совместимая с SSML) и аудио (для звуковых эффектов на других устройствах). В свойства речи на уровне 3 будут такими же, как и на уровне 2, но имеют разные значения. (Старые свойства все еще можно использовать с устаревшим типом мультимедиа 'aural', но новые должны быть используется внутри нового носителя «речи», а также в таблицах стилей для 'все' СМИ.)

Редакторы: Дэниел Век, Дэйв Рэггетт, Клаудио Сантамброджо, Даниэль Глазман

История

Синтаксис правил CSS в атрибуте HTML "style" строго не является частью CSS, но упоминается здесь, потому что это подготовлено рабочей группой CSS.Это было необходимо, потому что XHTML 1.0, в отличие от HTML 4.0, не определяет синтаксис CSS правила в его атрибуте стиля. Однако спецификация действительно для всех похожих атрибутов (например, в SVG), а не только для HTML.

Редакторы: Элика Дж. Этемад, Тантек Челик, Берт Бос, Марк Аттинаси

История

Синтаксис содержит общая (прямая совместимость) грамматика, которой придерживаются все уровни CSS к.У каждого свойства также есть ограничения на синтаксис его value, но их можно найти в других модулях CSS.

Редакторы: Таб Аткинс младший, Саймон Сапин, Л. Дэвид Барон

Модуль таблиц CSS

В таблицах описывается макет таблиц: строки, столбцы, ячейки и подписи, с их границы и выравнивания. Модель уровня 3, вероятно, не будет иметь ничего нового по сравнению с уровнем 2, но это будет описано подробнее деталь.

Редакторы: Франсуа Реми, Грег Уитворт

История

Текст содержит связанные с текстом свойства CSS2 (выравнивание, перенос текста, и т. д.) плюс несколько новых свойств, многие из которых предназначены для работы с текстом в разные языки и скрипты (разрыв строки, кашида, расстановка переносов и т. д.). Он включает (и заменяет) предложение в Эскизный международный макет. Также смотрите модуль Line для вещей например, вертикальное выравнивание внутри линии, вычисление высоты строки и стили для первой строки / первой буквы.Текстовый модуль достиг CR статус 2003 года, но реализовано очень мало. Некоторые общие типографика требовала слишком много свойств, в то время как множество комбинаций ценности не были полезны. Переписывание началось в 2004 году и должно приводят к той же функциональности, но с меньшим количеством свойств и лучше по умолчанию. Текстовый модуль разделен на четыре части: Текст, режимы ввода, линейная сетка и текст Украшение.

Редакторы: Элика Дж. Этемад, Кодзи Исии, Шинью Мураками, Пол Нельсон, Мишель Суиньяр, Крис Лилли

История

Режимы записи (ранее: Text Layout) описывает свойства, которые управляют направление текста: горизонтальные строки текста, расположенные сверху вниз (нормально для большинства языков), вертикальные строки текста, складываются справа налево (часто используется для японского языка), или вертикальные линии, которые складываются слева направо (монгольский).Это также описывает порядок букв внутри строки (двунаправленность) и поворот, который может произойти для некоторых букв внутри вертикального текст.

Редакторы: Элика Этемад / fantasai, Кодзи Исии, Шинью Мураками, Пол Нельсон, Мишель Суиньяр

История

Уровень 4 расширяет уровень 3 несколькими дополнительными функции, такие как 'sideways-lr / sideways-rl', объединение цифр горизонтально внутри вертикального текста и автоматически помещает текст в столбцах, когда текст ортогонален (вертикальный или горизонтальный), чтобы окружающий текст (горизонтальный или вертикальный).'Sideways-lr' и 'sideways-rl' - это альтернативные режимы вертикального письма, которые очень полезно для вертикального написания текста в скриптах, которые обычно горизонтально, например, чтобы написать английский текст на корешках книг или вдоль край страницы.

Редакторы: Элика Этемад / fantasai, Кодзи Исии

История

Модуль CSS Line Grid level 1 определяет свойства, чтобы упростить выравнивание строки в соседнем столбце или на двух сторонах листа бумага, несмотря на изображения или заголовки, которые прерывают обычную сетку.Он также определяет механизмы для выравнивания букв по вертикали в серии. линий, что является обычным дизайном в идеографических шрифтах, таких как Японский. (Эти функции ранее были частью режимов записи.)

Редакторы: Элика Этемад, Коджи Исии, Алан Стернс

История

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

Редакторы: Хокон Виум Ложь, Таб Аткинс, фантазия, Крис Лилли

История

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

Редакторы: Таб Аткинс, fantasai,

История

Модуль Web Fonts был объединен с модулем Fonts. Веб-шрифты позволяют загружать шрифты для использования с документом. В технология также включена в SVG и, наоборот, можно создавать шрифты для скачивания в формате SVG. Раньше эта функция была частью CSS уровня 2, но с пересмотром уровня 2 он был перемещен до уровня 3.

Редакторы: Джон Даггетт, Крис Лилли , Мишель Suignard

История

Поведенческие расширения на CSS определяет свойство «привязки» для XBL. Имущество называлось «поведение» в первом черновике. Этот проект содержал ряд другие предложения, которые больше не рассматриваются. (В какой-то степени они были заменены на XBL.)

Редакторы: Ян Хиксон

История

Гибкая компоновка коробки Модуль определяет ключевые слова flex и inline-flex для 'display' свойство, которое заставляет элемент отображаться как либо столбец, либо ряд дочерних элементов.Дополнительные свойства определить порядок дочерних полей (слева направо, снизу сверху и т. д.) и как пространство распределяется между детьми и промежутки между ними. Модуль в первую очередь предназначен для принуждения ряды элементов управления в графическом интерфейсе пользователя равны высоте или ширине.

Редакторы: Таб Аткинс мл., Элика Дж. Этемад / fantasai, Россен Атанасов, Алексей Могилевский , Л. Дэвид Барон , Нил Дикин , Ян Хиксон , Дэвид Хаят

История

Модуль изображений CSS определяет, как свойства могут ссылаться на изображения по URL-адресу.Все свойства который может принимать изображения в качестве значения, например 'background-image' и 'list-style-image' используйте этот синтаксис. Он также определяет цвет градиенты. как встроенный тип изображения.

Редакторы: Элика Дж. Этемад, Таб Аткинс мл.

История

Значение изображения и заменено Контентный модуль определяет, как свойства могут ссылаться на изображения с помощью URL. Все свойства, которые могут принимать изображения в качестве значений, например 'background-image' и 'list-style-image' используйте этот синтаксис.Это также определяет цветовые градиенты. Модуль уровня 4 расширяет одноименный модуль уровня 3, среди прочее конические цветовые градиенты.

Редакторы: Таб Аткинс мл., Элика Дж. Этемад / фантасай, Леа Веру

История

Фрагментация CSS Модуль определяет свойства, чтобы принудительно или избегать страницы и столбца перерывы. Он сочетает в себе функции, которые ранее были в двух разных спецификации, CSS Paged Media и Multi-column Layout.

Редакторы: Россен Атанасов, Элика Дж. Этемад / фантазия

История

Модуль фрагментации CSS Уровень 4 расширяет Уровень 3 с помощью контроль над полями при разрывах страниц и другие улучшения.

Редакторы: Россен Атанасов, Элика Дж. Этемад / фантазия

История

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

Редакторы: Саймон Фрейзер, Дин Джексон, Дэвид Хаятт, Крис Маррин, Эдвард О'Коннор, Дирк Шульце, Арье Грегор

Уровень 2 из преобразований CSS Модуль расширяет уровень 1 с помощью 3D трансформируется.

Редакторы: Таб Аткинс мл., Саймон Фрейзер, декан Джексон, Тереза ​​О'Коннор

История

Преобразования 2D Модуль заменен на CSS. Модуль трансформирует.

Редакторы: Саймон Фрейзер, Дин Джексон, Дэвид Хаятт, Крис Маррин, Эдвард О'Коннор

История

3D-преобразования Модуль заменен на CSS. Модуль трансформирует.

Редакторы: Дин Джексон, Дэвид Хаятт, Крис Маррин

История

Модуль переходов определяет свойство для анимации переходов между псевдоклассы (например,g., когда элемент входит или покидает ': hover' государственный). В течение заданной задержки некоторые значения свойств постепенно перейти от старого значения к новому, а не мгновенно, как на уровне 2.

Редакторы: Дин Джексон, Дэвид Хаятт, Крис Маррин, Сильвен Галино, Л. Дэвид Барон

История

Модуль анимации указывает, какие свойства изменяют свои значения во время анимации, какие ценности они принимают последовательно и в течение какого времени.Это не определяет, что вызывает запуск конкретной анимации, только что происходит во время одного. (Сравните это с модулем переходов, который также анимирует свойства, но между изменениями состояния, то есть псевдоклассами.)

Редакторы: Дин Джексон, Дэвид Хаятт, Крис Маррин

История

Web Animations совместное спецификация рабочими группами CSS и SVG. CSS-переходы, CSS-анимация и SVG - все это обеспечивает механизмы, которые генерируют анимированный контент на веб-странице.Хотя три спецификации предоставляют много схожих функций, они описаны в разных терминах. В данной спецификации предлагается абстрактная анимационная модель, которая включает в себя общие черты все три спецификации. Эта модель обратно совместима с текущее поведение этих спецификаций, так что они могут быть определены в терминах этой модели без каких-либо заметных изменений.

Редакторы: Брайан Бертлз, Шейн Стивенс, Алекс Данило, Таб Аткинс

История

Тесты

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

Редакторы: Сванте Шуберт, Робин Бержон, Тед Вугофски, Дуг Доминик, Питер Старк, Тапас Рой

История

Тесты

Профиль печати CSS описывает подмножество CSS, подходящее для документов, напечатанных на недорогие принтеры. Это дополнение к профилю печати XHTML.

Редакторы: Элика Дж. Этемад, Мелинда Грант, Джим Бигелоу

История

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

Редакторы: Гленн Адамс, Тантек Челик, Шон Хейс, Хокон Виум Ли

История

Условные правила CSS определяет несколько способов сделать правила стиля зависимыми от факторов вне документа, например, на выходном носителе ('@media', для большая часть уже на уровне 2), возможности пользовательского агента, и URL-адрес документа.

Редакторы: Л. Дэвид Барон

История

Адаптация устройства CSS определяет (1), как исходный содержащий блок соотносится с область просмотра и (2) как единицы измерения CSS ('px', 'cm', 'pt', и т.п.) относятся к реальным единицам. Первоначальный содержащий блок - это гипотетический прямоугольник в модели рендеринга CSS, определяющий (0,0) позиция и значение процентов в корневом элементе. На уровне 2 CSS он равен области просмотра (т. Е. Окну или страница, на которой нарисован документ). Этот модуль определяет Правило '@viewport', которое позволяет исходному содержащему блоку быть больше или меньше окна просмотра. Он также может установить коэффициент масштабирования, для изменения сопоставления между единицами CSS и реальными единицами.('@viewport' обычно бесполезен для авторов, но позволяет читателям избавиться от эффекта любого элемента это может происходить в документах HTML5.)

Редакторы: Руне Лиллесвин

История

Исключения CSS определяет свойства, устанавливаемые для позиционированных элементов, чтобы они действовали как "Исключения" и заставляют текст обтекать себя, подобно как текст обтекает плавающие элементы.

Редакторы: Винсент Харди, Россен Атанасов, Алан Stearns

История

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

Редакторы: Винсент Харди, Россен Атанасов, Алан Stearns

История

Составление и смешивание позволяет коробкам не только быть непрозрачными или полупрозрачными, но и другими способами комбинировать с нижележащими блоками (разница в цвете, цветовая маска, сдвиг цвета и т. д.) для различных эффектов. Этот модуль сделано в сотрудничестве с SVG.

Редакторы: Рик Кабанье

История

Эффекты фильтра позволяет графические фильтры, применяемые к элементу (после того, как он был визуализирован, но до того, как он был составлен, см. Создание и смешивание). Фильтры могут размыть элемент, добавить тень, изменить цвета, увеличить контраст, добавить «текстуру» и т. д. Модуль определяет ряд общих графические эффекты, но также позволяет использовать фильтры, написанные на OpenGL (Язык затенения OpenGL ES).Этот модуль создан в сотрудничестве с SVG.

Редакторы: Винсент Харди, Дин Джексон, Эрик Дальстрём

История

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

Редакторы: Дирк Шульце, Брайан Бертлс, Таб Аткинс Младший

История

Анонимный блок, в котором заключено содержимое ячейки таблицы или сетки. слот, и один или несколько блоков внутри гибкого бокса имеют общее, что все они могут быть выровнены по каждому четырех краев контейнера или по центру между ними края. Если флексбокс содержит несколько боксов, их также можно разложить («по ширине») между двумя краями. Модуль Box Alignment определяет различные свойства для таких выравниваний.Это расследуется если свойства могут быть расширены для применения к ящикам в других контексты, в частности нормальный поток. Это позволило бы, например, содержимое плавающего поля должно быть выровнено по нижнему краю float, аналогично тому, как 'vertical-align: bottom' выравнивает содержимое ячейки таблицы. Еще одно возможное дополнение - контроль над выравнивание с помощью гибких полей (например, 'margin: auto' без его ограничения).

Редакторы: Элика Дж. Этемад / fantasai, Таб Аткинс Младший

История

Модуль оформления текста определяет свойства, управляющие стиль и расположение различных украшений вокруг текста, обычно чтобы подчеркнуть это, и это не влияет на макет текста сам по себе: 'text-decoration' (подчеркивание, надчеркивание, мигание и т.д.), 'выделение текста' (восточноазиатские знаки ударения поверх идеографов) и «тень текста». Эти свойства ранее были в текстовом модуле.

Редакторы: Элика Дж. Этемад, Кодзи Исии

История

Уровень 4 модуля оформления текста расширяет уровень 3 дополнительными контроль над различными аспектами декора, такими как стиль и положение подчеркиваний.

Редакторы: Элика Дж. Этемад, Кодзи Исии

История

Модуль определения размера определяет ключевые слова для использования в "ширине" и свойства 'height', чтобы указать, что размер элемента должен быть как можно более узким или максимально широким, а не ширина, унаследованная от родительского элемента. Эти ключевые слова разделены вне определения "ширина" и "высота" в базовой модели коробки и, вероятно, будут объединены обратно в этот модуль позже.

Редакторы: Таб Аткинс, Элика Дж. Этемад / fantasai

История

Уровень 4 расширяет уровень 3 дополнительными возможностями ключевые слова для выбора различных алгоритмов определения размера поле, а также определяет свойство "соотношение сторон", чтобы дать окнам фиксированное соотношение ширины и высоты, независимо от их размера.

Редакторы: Таб Аткинс, Элика Дж. Этемад / fantasai, Джен Симмонс

История

Модуль Counter Styles определяет Правило @ counter-styles, с помощью которого авторы могут определять свои собственные стили нумерации списков, заголовков разделов, рисунков и т. д.В стили нумерации с уровня 2 предопределены. Они включают десятичную дробь (1, 2, 3, 4…), верхний римский (I, II, III, IV…), нижний альфа (a, b, c, d…) и т. д., а также некоторые стили для маркированных списков, такие как disc (•).

Редакторы: Таб Аткинс мл.

История

Модуль Каскадных переменных позволяет произвольно данные (пары имя / значение), которые будут связаны с элементами. Данные в виде свойств вида var-NAME: VALUE.В свойства наследуются. Доступ к ним можно получить через DOM и также упоминается в других свойствах через функционал var (NAME) обозначение.

Редакторы: Люк Макферсон, Таб Аткинс мл., Дэниел Глазман

История

Модуль переполнения CSS уровень 3 определяет свойство «переполнение», которое определяет, как текст считается слишком широким или слишком высоким для своего поля. Текст можно оставить для переполнения, обрезки или прокрутки.См. Модуль выделения CSS для различных механизмы прокрутки и CSS модуль фрагментации уровня 3 для контроля над тем, как текст разбит на страницы.

Редакторы: Л. Дэвид Барон

История

Модуль переполнения CSS level 4 расширяет модуль level-3 механизмом взлома блок на несколько страниц с отображением одной или всех страниц показывать в то же время. Псевдоэлемент позволяет выбрать отдельные страницы и применить к ним некоторый стиль.

Редакторы: Л. Дэвид Бэрон, Флориан Ривоал

История

Модуль CSS Display level 3 переопределяет свойство 'display' как сокращение для три других свойства, каждое для более или менее независимого аспекта свойства 'display': запускает ли элемент новый блок или продолжается в строке; как оформлено содержимое элемента; и есть ли у элемента метка сбоку. Модуль также определяет новое свойство, которое делает то же самое, что и display: none (т.е., не отображать и не произносить элемент). Эти низкоуровневые свойства Ожидается, что они будут полезны в основном в сценариях.

Редакторы: Таб Аткинс мл.

История

Модуль загрузки шрифтов CSS level 3 определяет часть DOM API для '@ font-face' правило CSS. В частности, он определяет методы, позволяющие сценарию явно загрузить шрифт (например, чтобы загрузить его раньше, чем средство визуализации загрузит его сам) и будет проинформирован, когда шрифт будет загружен.

Редакторы: Таб Аткинс мл.

История

CSS изменит модуль Уровень 1 позволяет автору давать подсказки рендереру о какие элементы могут каким-либо образом изменить стиль (например, из-за анимации или переходов) и где скорость имеет решающее значение. Это может помочь рендереру решить, где ему следует поработать. досрочно.

Редакторы: Таб Аткинс мл.

История

Модуль безэлементных селекторов Уровень 1 определяет селекторы для других типов узлов в древовидный документ, чем элементы.В частности, он обеспечивает способы выбора атрибутов элементов.

Эти селекторы не действуют в CSS, поскольку стили только для CSS элементы. Они предназначены для других контекстов, в которых используются селекторы. используется для выбора частей дерева, таких как Selectors API и ЕГО 2.0. Таким образом, они предоставляют альтернативу XPath, когда XPath непригоден для использования или нежелателен.

Редакторы: Йирка Косек, Таб Аткинс мл.

История

Геометрические интерфейсы определяет API для скриптов, которые манипулируют точками, прямоугольниками, четырехугольники и матрицы преобразований.

Редакторы: Саймон Питерс, Дирк Шульце, Рик Кабанье

История

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

Редакторы: Анне ван Кестерен, Тантек Челик

История

Модуль встроенной компоновки CSS описывает макет в строке и наложение строк, и также стиль буквиц.Он заменяет модуль CSS Line Layout.

Редакторы: Дэйв Крамер, Элика Дж. Этемад / fantasai, Стив Зиллес

История

Модуль псевдоэлементов CSS определяет различные псевдоэлементы, то есть части документов, которые соответствуют чему-то визуализированному, но не непосредственно элементу в исходный документ. Некоторые из них уже определены в CSS2. ( :: первая строка , :: первая буква и т. Д.), несколько других являются новыми, например :: selection (selected текст) и :: заполнитель (текст-заполнитель в элемент ввода).

Модуль «Селекторы» описывает, как использовать псевдоэлементы как часть селекторов.

Редакторы: Дэниел Глазман, Элика Дж. Этемад / fantasai, Алан Стернс

История

Модуль Motion Path определяет дополнительный способ установить положение и вращение абсолютно позиционированные элементы. Положение задается траекторией (SVG shape) и смещение вдоль этой траектории от 0 до 100%. В в сочетании с анимацией, смещение также может быть анимировано.

Этот модуль является совместной работой рабочих групп SVG и CSS.

Редакторы: Дирк Шульце, Шейн Стивенс

История

Модуль CSS Scroll Snap определяет свойства для контролировать некоторые аспекты прокрутки переполняющегося элемента: когда прокручивая мышью или аналогичным устройством, элемент можно сделать для "привязки" к определенным позициям, например, к первой строке дочернего элемента элемент или центр изображения. Эти точки привязки могут быть либо по близости (элемент фиксируется в позиции только тогда, когда действие прокрутки закончилось рядом с этой позицией) или обязательное ( элемент всегда привязывается к ближайшей точке привязки при прокрутке действие заканчивается).

Редакторы: Мэтт Раков, Джейкоб Росси, Таб. Аткинс-Биттнер, Элика Дж. Этемад / fantasai

История

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

Редакторы: Хёджин Сон, Джихе Хон

История

Модуль CSS Basic User Interface Module описывает свойства и значения CSS для стилизации базового пользовательского интерфейса. элементы.Он включает и расширяет CSS Basic User Уровень интерфейса 3, среди прочего, со свойствами для стиль вставки каретки.

Редакторы: Флориан Ривоал

История

Текстовый модуль CSS , уровень 4 включает и расширяет текстовый модуль CSS уровня 3. Он определяет разрыв строки, выравнивание и выравнивание, пробелы обработка и текстовые преобразования.

Редакторы: Элика Дж. Этемад / fantasai, Кодзи Исии, Алан Стернс

История

Спецификации оперативной группы Houdini (совместное рабочая группа CSS WG и TAG) стремятся указать низкоуровневый доступ к механизму рендеринга CSS, например как в обычном браузере, включая e.g., синтаксический анализатор CSS, модель коробки, загрузка шрифтов, обработка переполнения и прокрутка. An приложение, использующее такой движок CSS, может, таким образом, переопределить или расширить некоторые его особенности.

CSS Painting API уровня 1 является одним из спецификации и определяет API для подключения к функциям, которые нарисуйте поле CSS на экране, включая его фон, границы и содержание. Его можно использовать, например, для рисования фона, заданного алгоритм, а не изображение.

Редакторы: Шейн Стивенс, Ян Килпатрик, декан Джексон

История

CSS Properties and Values ​​API Level 1 является частью спецификаций Houdini. Это определяет API для регистрации новых свойств с помощью механизма CSS. В отличие в модуль пользовательских свойств (который позволяет декларативно определять свойства), API позволяет свойства со специальным синтаксисом и свойства, которые не наследовать.

Редакторы: Таб Аткинс, Шейн Стивенс, Дэниел Глазман, Алан Стернс, Эллиот Спрен, Грег Уитворт

История

CSS Typed OM Level 1 является частью спецификаций Houdini.Он определяет API для эффективный доступ к значениям свойств в объектной модели CSS, т.е. обычно в виде чисел, а не в виде строк.

Редакторы: Шейн Стивенс

История

Worklets уровня 1 является частью спецификаций Houdini. Он определяет API для вставить код JavaScript в конвейер рендеринга.

Редакторы: Ян Килпатрик

История

CSS Layout API Level 1 является частью спецификаций Houdini.Он определяет JavaScript API для прикрепления скриптов, которые реагируют на вычисляемый стиль и дерево ящиков меняется.

Редакторы: Грег Уитворт, Ян Килпатрик, Таб. Аткинс-Биттнер, Шейн Стивенс, Роберт О'Каллахан, Россен Атанасов

Fonts Module Level 4 расширяет Fonts level 3. Он добавляет поддержку, среди прочего, цветные шрифты, вариативные шрифты и эмодзи.

Редакторы: Джон Даггетт, Майлз К. Максфилд

История

CSS Rhythmic Sizing Level 1 предоставляет свойство для установить расстояние между линиями, которое обычно задается линией высота, которая должна быть округлена до кратного заданного значения.Это позволяет линии должны оставаться выровненными по фиксированной сетке, даже если есть случайные строки, которым нужно больше места (например, потому что они содержат математическая формула или встроенное изображение). Этот модуль возможен дополнение к модулю Line Grid.

Редакторы: Кодзи Исии, Элика Дж. Этемад / fantasai

История

Модуль Fill and Stroke определяет свойства для установки цветов и узоров заливки SVG. формы и текста.Синтаксис CSS позволяет стилизовать формы SVG. с (внешней) таблицей стилей, а не с атрибутами на каждом форма сама. «Заполнение» относится к внутренней части форм, «Штрих» к краям. Оба могут быть простых цветов, но также узоры, градиенты или изображения.

Редакторы: Элика Дж. Этемад / fantasai, Tab Аткинс-Биттнер

История

Модуль содержания предоставляет свойство "содержать", которое особенно полезно в динамический GUI : Это заявляет, что элемент не влияет на отображение других элементы вне себя и не рисуют за пределами своего собственного ящика.Это означает, что элемент можно добавлять и удалять очень быстро, без пересчета стиля других элементов. Например., такой элемент не увеличивает размер своего родителя и не не увеличивать счетчики списка.

Редакторы: Таб Аткинс, Флориан Ривоал

История

2-й уровень содержания Модуль расширяет содержание уровень 1 с дополнительными значениями для свойства «содержать».

Редакторы: Таб Аткинс, Флориан Ривоал

История

Анимации и переходы используют временные функции для укажите, как скорость анимации меняется в течение анимация.(Анимация называет их «функциями замедления», отсюда и название модуля.) Наиболее распространенными видами являются предопределенный. Но можно определить и другие, в том числе некоторые которые пролетают мимо своей цели для эффекта отскока. Этот модуль определяет возможные значения для всех свойств времени.

Редакторы: Брайан Бертлз, Дин Джексон, Мэтт Рэкоу, Шейн Стивенс

История

Логические свойства и Модуль значений предоставляет способы косвенного задания свойств, в зависимости от направления и режима письма элемента или его содержащий блок.Например, косвенная установка margin-inline-start устанавливает одно из четырех свойств полей (margin-top, -right, -bottom или -left), в зависимости от того, написан ли текст элемента слева направо, справа налево, сверху вниз или снизу вверх. Это полезен в простых общих таблицах стилей, таких как стиль User Agent. листов, но иногда может также сокращать стили для документов, смешивать текст с письмом слева направо и справа налево, в частности, для элементы, макеты которых для текста с письмом справа налево и слева направо (в основном) зеркальное отображение.

Редакторы: Россен Атанасов, Элика Дж. Этемад / фантазия

История

Модуль CSS Shadow Parts определяет синтаксис селектора (а именно, псевдоэлемент ‘:: part ()’) для выбора «частей» «теневого дерева».

CSS знает о «замененных элементах», элементах в документе, которые не отображают собственное содержимое, а заменяются другим объект, например изображение или «теневое дерево». Теневое дерево - это объект, который, как правило, имеет один или несколько настраиваемых аспектов, называемые "частями", которые настраиваются путем установки свойств CSS на их.Например, теневое дерево может представлять календарь или встроенный видеоплеер и можно настроить фон цвет или шрифт на некоторых кнопках. Какие части существуют (и какие у них name is), какие свойства применяются к ним и каковы их точные эффект зависит от объекта. Этот модуль CSS определяет, как напишите селекторы, которые выбирают такую ​​деталь. (См. Также CSS Scoping.)

Редакторы: Таб Аткинс-Биттнер, Фергал Дейли

История

Спецификация CSS Spatial Уровень навигации 1 определяет общую модель направленного навигация: вверх, вниз, влево, вправо, внутри группы или между группами элементов; и он определяет функции и события JavaScript, которые реализовать эту модель.Он не определяет, какие нажатия клавиш или другие физические действия вызывают эти события. Это зависит от агента пользователя.

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

Редакторы: Джихе Хонг, Флориан Ривоал

История

Модуль CSS Color Adjust определяет способы, с помощью которых автор может адаптировать стиль к цвету пользователя. схема, и, в частности, «светлая» цветовая схема (т.е., темный текст на светлом фоне), «темная» схема (т. е. светлый текст на темный фон) или удобную для печати схему (т. е. использование меньшего чернила). Медиа-запрос позволяет узнать если система имеет определенную цветовую схему и свойство позволяет установите начальные значения цвета и фона на значения из схема системы.

Модуль также определяет, как пользователь может установить цветовую схему на страницу (по причинам доступности) и как автор может адаптировать стиль к такой вынужденной схеме.

Цветовой модуль определяет ключевые слова представляющие системные цвета. Они устарели, но они также следуйте цветовой схеме системы.

Редакторы: Элика Дж. Этемад / fantasai, Россен Атанасов, Руне Лиллесвин, Таб Аткинс мл.

История

Animation Worklet API определяет два API для создания анимации в JavaScript. Код для такие анимации можно запускать в отдельном потоке (фон процесс), так что основной поток не прерывается или может быть с учетом приоритета.

Редакторы: Маджид Валипур, Роберт Флэк, Стивен Макгрюер

История

Resize Observer определяет API для скриптов, которые должны реагировать на изменения в элементе размер.

Редакторы: Алекс Тотич, Грег Уитворт

История

Color Level 5 расширяет Color Level 4 обозначениями для относительных цвета: цвета между другими цветами, более светлые или темнее заданного цвета или дополнительных.

Редакторы: Крис Лилли, Уна Кравец, Леа Веру, Адам Аргайл

История

CSS Custom Highlight API Уровень 1 определяет библиотеку функций, которые могут быть вызваны из сценария для выбора (выделения) одного или нескольких диапазонов текста в документ и присвойте им имя. Он также определяет селектор CSS для стиль таких именованных диапазонов текста из таблицы стилей.

Например, если диапазон текста был выбран скриптом и присвоил имя «моя-ключевая-фраза», правило CSS ':: highlight (my-key-фраза) {color: blue} "делает этот текст синим.

Редакторы: Флориан Ривоал, Санкет Джоши, Меган Гарднер

История

Уровень 1 содержит только самые основные свойства CSS, такие как "поля", "отступы", "фон", "цвет" и "шрифт" с ограничения на допустимые значения. Это был первый уровень CSS должна быть завершена (в 1996 г.) и соответствовала возможностям реализации того времени. В настоящее время это только исторический интерес; все реализации должны поддерживать уровень 2 и вероятно, большие части уровня 3 тоже.

Редакторы: Хокон Виум Ли, Берт Бос

SVG

Некоторые свойства предназначены специально для стилизации SVG (или аналогичных графические языки) и определены в спецификации SVG, а не в модуль CSS. Их можно использовать вместе с другими свойствами в таблица стилей, но обычно не применяется к одним и тем же элементам. Они указать такие параметры, как цвет обводок и заливок, а также форма концов штрихов.

Все свойства CSS перечислены в алфавитном порядке

Все | Шрифты | Текст | Цвета / Фон | Полосы прокрутки | Контуры | Списки | Таблицы Классификация | Размеры | Позиционирование | Маржа | Прокладка | Границы Динамическое содержимое | Созданный контент | Международный | Печать | Слуховой | Расширения
А / Б	ускоритель азимут фон прикрепление фона цвет фона изображение фона положение фона положение фона-x положение фона-y повторение фона поведение	border border-bottom border-bottom-color border-bottom-style border-bottom-width border-collapse border-color border-left border-left-color border-left-style border -ширина слева	border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-style border-top- ширина ширина границы низ
С	сторона подписи прозрачный зажим цвет	содержимое инкремент счетчика сброс счетчика	cue cue-after cue-before курсор
Д / Е	направление отображение	отметка пустых ячеек
Факс	фильтр поплавок	font font-family font-size font-size-adjust	font-stretch font-style font-option font-weight
H / I	высота	ime-mode include-source
л	layer-background-color layer-background-image layout-flow layout-grid layout-grid-char layout-grid-char-spacing	layout-grid-line layout-grid-mode layout-grid-type слева межбуквенный интервал	разрыв строки высота строки стиль списка изображение стиля списка позиция стиля списка тип стиля списка
M	поле нижнее поле левое поле правое поле верхнее поле смещение маркера знаков макс. Высота макс. Ширина мин. Высота мин. Ширина	-moz-binding -moz-border-radius -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft - moz-border-top-colors -moz-border-right-colors -moz-border-bottom-colors -moz-border-left-colors	-moz-opacity -moz-outline -moz-outline-color -moz-outline-style -moz-outline-width -moz-user-focus -moz-user-input -moz-user -modify -moz-user-select
O	детей-сирот	контур цвет контура стиль контура ширина контура	переполнение переполнение-X переполнение-Y
П	обивка нижняя обивка левая обивка правая обивка верхняя обивка	страница разрыв страницы после разрыв страницы до разрыв страницы внутри пауза пауза-после пауза-перед	шаг диапазон шага зазор во время позиция
Q / R	котировки -заменить	богатство правое	выравнивание по рубину выступ с выступом рубина положение рубина
S	-set-link-source размер говорить говорить-заголовок говорить-цифра говорить-пунктуация скорость речи ударение	цвет стрелки полосы прокрутки основной цвет полосы прокрутки цвет темной тени полосы прокрутки цвет полосы прокрутки цвет подсветки полосы прокрутки цвет полосы прокрутки цвет полосы прокрутки дорожка полосы прокрутки -цвет
т	table-layout text-align text-align-last text-decoration text-indent	выравнивание текста по ширине переполнение текста тень текста преобразование текста	text-autospace text-kashida-space text-underline-position вверху
U / V	unicode-bidi -use-link-source	выравнивание по вертикали видимость	voice-family объем
W / Z	белое пространство вдов ширина	разрыв слов интервал слов перенос слов режим письма	z-index зум

Выровнять - свойства каскадных таблиц стилей

Выровнять по вертикали - свойства каскадных таблиц стилей

---

Значение по умолчанию: базовый уровень Применимые элементы: Встроенные элементы и элементы «таблица-ячейка» Наследовать от родительского элемента: Нет Применимые материалы: Visual Эквивалент HTML: < апплет | iframe | img | ввод | объект | проставка ALIGN>, < caption | col | colgroup | кузов | tfoot | thead | -й | td | тр VALIGN> Официальные документы: CSS1: Разд.5.4.4 CSS2: Разд. 10,8, CSS2.1: Раздел 10.8

Что это?

Содержимое элемента обычно центрируется по вертикали на отображаемой строке (с дополнительные значения высоты строки распределяются поровну сверху и снизу.) Это свойство позволяет выровнять встроенные блоки содержимого по вертикали с соблюдение нескольких различных критериев на отображаемой строке.

Допустимые значения

наследовать

[ CSS2 | CSS2.1 ] [ N6 | O4 | S1 ]

Тип: Явный

Описание:
Явно устанавливает значение этого свойства равным родительскому.

базовый | средний

[ CSS1 | CSS2 | CSS2.1 ] [ IE4 | N4 | O3.5 | S1 ]

Тип: Рассчитано

Описание:
базовая линия - выравнивает базовую линию текущего элемента с базовая линия родительского блока элемента.Если текущий элемент не имеет baseline, следует использовать нижнюю часть прямоугольника текущего элемента.
средний - выравнивает вертикальную среднюю точку текущего прямоугольника элемента. с базовой линией плюс половина x-высоты родителя.

верх | низ

[ CSS1 | CSS2 | CSS2.1 ] [ IE4 | N4 | O3.5 | S1 ]

Тип: Явный

Описание:
top - выравнивает верх текущего элемента по верхнему краю самый высокий элемент в текущей отображаемой строке.
bottom - выравнивает нижнюю часть текущего элемента по нижняя часть самого нижнего элемента в текущей отображаемой строке.

текст вверху | текст внизу

[ CSS1 | CSS2 | CSS2.1 ] [ IE4 | N4 | O3.5 | S1 ]

Тип: Рассчитано

Описание:
text-top - выравнивает верх текущего элемента по верхнему краю. шрифта родительского элемента.
text-bottom - выравнивает нижнюю часть текущего элемента по внизу шрифта родительского элемента.

super | sub

[ CSS1 | CSS2 | CSS2.1 ] [ IE4 | N6 | O3.5 | S1 ]

Тип: Рассчитано

Описание:
super - базовая линия текущего блока элемента выровнена по базовая линия других элементов с надстрочным индексом в поле родительского элемента.
sub - базовая линия текущего блока элемента выровнена по базовая линия других элементов с индексами в поле родительского элемента.

[длина]

[ CSS2 | CSS2.1 ] [ IE6 | N6 | O3.5 | S1 ]

Тип: Явный

Описание:
Указывает точное расстояние для подъема или опускания текущего элемента. от базового значения по умолчанию.Положительные значения выше базового уровня, а отрицательные значения ниже.

[в процентах]

[ CSS1 | CSS2 | CSS2.1 ] [ IE6 | N6 | O3.5 | S1 ]

Тип: Рассчитано

Описание:
Определяет расстояние для подъема или опускания текущего элемента от "базовое" значение по умолчанию.Положительные проценты выше базового уровня, в то время как отрицательные значения ниже. Процентное значение относительно текущего свойство элемента line-height.

Пример

Внешний / Док: изобр. Слева {vertical-align: top}

Встроенный: < img
SRC = "image.gif" ALT = "Это стильное изображение">

Примечания

• CSS2: «Когда это свойство используется с таблицами, значения немного разные значения."

Особенности браузера

• Internet Explorer

  4,0:

  - «sub» и «super» игнорируются для полей формы и изображений.

  4.x Mac:

  - Сообщается в другом месте: IE 4.x для Macintosh имеет в основном правильную поддержку (по крайней мере, один известный сбой) для значений 'sub | super | top | text-top | middle | text-bottom | bottom | baseline' для текста и изображения.Неизвестно, как это применимо к полям формы в этих версии.

  4.0+:

  - Для текстового содержимого учитываются только значения sub и super. "Базовая линия" также может поддерживаться, но не поддерживается вертикальное выравнивание. значения отображаются так, как должно быть.

  - Для полей формы и изображений "середина", "верхний текст" и значения 'text-bottom' имеют эффект, но результат не то, что ожидается («нижний текст» похож на «базовую линию», а «верхний текст» выше, чем верхняя часть самого высокого шрифта в строке.)

  5.0+:

  - «sub» и «super» применяются только к тексту в тексте формы поля (тип ввода = текст | пароль) и виджеты кнопок (ввод type = button | reset | submit.) Для элемента Button только значение «супер» имеет какой-либо видимый эффект.

• Netscape

  4.x:

  - это свойство влияет только на изображения.Значения top, 'text-bottom' и 'baseline', похоже, поддерживаются. Ценности 'text-top', 'middle' и 'bottom' распознаются, но кажутся быть неправильно рассчитан.

• Опера

  3,5+:

  - Это свойство не влияет на поля формы.

  - Для встроенных элементов и элементов изображения значение middle не вычисляется. правильно.

  - Для изображений "верхний текст" и "нижний текст" дают неожиданные результаты.

  - Расчет процента вертикального выравнивания вычисляется неправильно.

  - Сообщается в другом месте: Есть "проблемы с вертикальное выравнивание, когда текст и изображения смешиваются в строке текста ".

Расточка Авторские права ....

Видимость - свойства каскадных таблиц стилей

Видимость - свойства каскадных таблиц стилей

---

Что это?

Это свойство определяет, отображается ли содержимое блока элемента. (включая границы и фоны.) Если блок элемента невидим он по-прежнему влияет на макет документа, как если бы он был видимым (чтобы предотвратить элемент, чтобы не влиять на макет, свойство 'display' должно быть установлено значение "none".)

Допустимые значения

наследовать

[ CSS2 | CSS2.1 ] [ IE4 | N4 | O4 | S1 ]

Тип: Явный

Описание:
Явно устанавливает значение этого свойства равным родительскому.

видимый

[ CSS2 | CSS2.1 ] [ IE4 | N4.5x | O4 | S1 ]

Тип: Явный

Описание:
Поле элемента видно.

скрыто

[ CSS2 | CSS2.1 ] [ IE4 | N4.5x | O4 | S1 ]

Тип: Явный

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

коллапс

[ CSS2 | CSS2.1 ] [ N6 | O4 ]

Тип: Явный

Описание:
Если это значение не используется в контексте строк или столбцов таблицы, оно будет имеют тот же эффект, что и «скрытый». В контексте таблиц составные ячейки может быть обрезан и реагирует аналогично 'display: none' для элемента таблицы.

скрыть

[ N4-4.x ]

Тип: Явный

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

показать

[ N4-4.x ]

Тип: Явный

Описание:
Поле элемента видно.

Пример

Внешний / Док: p {видимость: скрыто}

Встроенный: < p > текст p >

Примечания

• До включения в CSS2 это свойство было впервые предложено в W3C. Рабочий проект «Размещение HTML-элементов с помощью каскадных таблиц стилей» (19.08.97, http://www.w3.org/TR/WD- позиционирование)
• В CSS2 это не было свойством «наследовать от родителя», а по умолчанию значение было "наследовать" (да, это немного странно =)).В CSS 2.1 по умолчанию изменяется на "видимое" и становится унаследованным от родителя свойством (в любом случае, браузеры уже относятся к этому так же.)

Особенности браузера

• Internet Explorer

  4.0+:

  - Использование значения "hidden" для этого свойства и "position" значение "absolute" будет вести себя точно так же, как и настройка для свойства 'display' значение «none»."

• Netscape

  4.x:

  - Это свойство не применяется к полям формы LI / DT / DD, ТАБЛИЦА и элементы IMG.

  - Использование значения "скрыть" для этого свойства и "позиции" значение "absolute" будет вести себя точно так же, как и настройка для свойства 'display' значение "none".