Отзывчивый размер шрифта
Содержание:
- CSS Properties
- CSS Advanced
- Видео Голосовой переводчик на основе Android
- Правовой вопрос использования шрифтов
- Как делать скриншоты с iPhone, iPad, Apple Watch, Apple TV и Mac
- Property Values
- Онлайн-курсы
- Семейства шрифтов в CSS
- Установка загруженных шрифтов
- Как подключить шрифт CSS?
- Font Family — Семейство шрифтов
- Enabling Font Effects
- Sofia on Fire
- Обложки для актуальных историй в Инстаграм
- О недостатках
- Сложный способ подключения веб-шрифта
- Different Font Formats
- Семейство Шрифтов
- CSS Reference
- CSS Properties
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
CSS Advanced
CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients
CSS Shadows
Shadow Effects
Box Shadow
CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries
CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive
Видео Голосовой переводчик на основе Android
Правовой вопрос использования шрифтов
Вопрос можно кратко cформулировать в следующих двух предложениях. Все шрифты делятся на платные или бесплатные.
Платные шрифты делятся на те, которые:
- можно использовать в Веб
- нельзя использовать в Веб
Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit, на которых собраны все шрифты, которые можно использовать в Веб. Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).
Краткий список источников бесплатных шрифтов, которые можно использовать в Веб:
- The League of Movable Type (https://www.theleagueofmoveabletype.com/)
- FontSquirrel (http://www.fontsquirrel.com/)
- Google Fonts (https://www.google.com/fonts)
- The Open Font Library (http://openfontlibrary.org/ru)
- Fontex.org (http://fontex.org/)
- Exljbris Font Foundry (http://www.exljbris.com/)
Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator, находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).
Единственное ограничение этого сервиса — он имеет свой собственный blacklist, в который помещены шрифты, запрещенные по лицензии для использования в Веб. Другими словам, если “подсунуть” этому генератору лицензионный шрифт, приобретенный пиратским способом, то он откажется от генерации последнего.
Генератор Generator — не единственный в Веб сервис подобного рода. Существуют подобные ему генераторы, которые, в тому же, обладают “неразборчивостью” по отношению к лицензии конвертируемого шрифта.
Порядок указания форматов шрифтов в директиве важен и должен быть следующим:
- EOT — формат только для Internet Explorer 8 и ниже
- WOFF — самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
- TTF — сравнительно большой по размеру шрифт и достаточно устаревший
- SVG — самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone)
Браузер читает тело директивы — каждую строку последовательно. Как только он обнаруживает понятный для него формат шрифта, то загружает его. Поэтому последовательность объявления форматов шрифтов в директиве является неслучайной и эмпирически выверенной на основе опыта предыдущих веб-разработчиков.
Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем — резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).
Внимательный читатель обратит внимание на вторую строку и скажет: это здесь лишнее, бред какой-то. На самом деле не совсем так
Браузеры всегда пытаются отрисовать заголовки полужирным начертанием, по умолчанию. Поэтому, здесь мы говорим, чтобы браузер просто этого не делал, и все.
Помимо букв, шрифты могут состоять из иконок или изображений. Ресурсы, посвященные теме шрифтовых иконок и значков:
- The Big List of Flat Icons & Icon Fonts
- HTML for Icon Font Usage
- Icon Fonts are Awesome
- Шрифтовые иконки и сервис IcoMoon
Как делать скриншоты с iPhone, iPad, Apple Watch, Apple TV и Mac
Property Values
| Property/Value | Description |
|---|---|
| font-style | Specifies the font style. Default value is «normal» |
| font-variant | Specifies the font variant. Default value is «normal» |
| font-weight | Specifies the font weight. Default value is «normal» |
| font-size/line-height | Specifies the font size and the line-height. Default value is «normal» |
| font-family | Specifies the font family. Default value depends on the browser |
| caption | Uses the font that are used by captioned controls (like buttons, drop-downs, etc.) |
| icon | Uses the font that are used by icon labels |
| menu | Uses the fonts that are used by dropdown menus |
| message-box | Uses the fonts that are used by dialog boxes |
| small-caption | A smaller version of the caption font |
| status-bar | Uses the fonts that are used by the status bar |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Онлайн-курсы
Семейства шрифтов в CSS
В CSS шрифты разделены на семейства, каждое семейство состоит из набора шрифтов, обладающих общими характеристиками. Существует всего пять семейств шрифтов:
- sans-serif — шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
- serif — семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки — декоративные штрихи и черточки по краям букв.
- monospace — семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
- cursive — шрифты, имитирующие рукописный текст.
- fantasy — художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.
Свойство font-family дает возможность изменить шрифт, заданный по умолчанию. Обычно оно содержит список взаимозаменяемых шрифтов, разделенных запятыми, принадлежащих одному семейству. Если имя шрифта состоит более чем из одного слова, то его нужно указывать в кавычках. В конце списка обычно указывается название семейства:
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
Рассмотрим, как браузер обрабатывает список шрифтов, заданный в нашем свойстве font-family:
- Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента <body>)
- Если Verdana не установлен, то ищет шрифт Helvetica. В случае успешного поиска использует его внутри <body>.
- Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри <body>.
- И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства sans-serif. Таким образом браузер сможет самостоятельно определить подходящий шрифт из семейства.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
p.exserif { font-family: "Times New Roman", Times, serif; }
p.exsansserif { font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
<body>
<h1>CSS свойство font-family</h1>
<p class="exserif">Абзац использующий шрифт Times New Roman.</p>
<p class="exsansserif">Абзац использующий шрифт Arial.</p>
</body>
</html>
Попробовать »
Примечание: при выборе только одного определенного шрифта важно понимать то, что браузер отобразит его только в том случае, если данный шрифт установлен на компьютере пользователя. Если шрифт не будет найден, то текст будет отображен шрифтом «Times New Roman», который задан по умолчанию во всех браузерах
С этой темой смотрят:
- Отступ текста в CSS
- Выравнивание текста в CSS
- Цвет и тень текста в CSS
- CSS стиль и размер шрифта
- Стандартные (безопасные) шрифты
Установка загруженных шрифтов
С помощью CSS-правила можно добавлять сторонние шрифты, которые не установлены в операционной системе по умолчанию.
Ознакомиться со списком стандартных шрифтов можно — cssfontstack.com
Для добавления нестандартных шрифтов, используйте правило , которое должно быть добавлено в самое начало CSS-файла.
В правиле необходимо добавить ссылки на все доступные форматы шрифта.
@font-face {
font-family: ‘MyAwesomeFont’; /* Придумайте название для шрифта */
src: url(‘fonts/MyAwesomeFont.eot’); /* IE9 */
src: url(‘fonts/MyAwesomeFont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘fonts/MyAwesomeFont.woff2’) format(‘woff2’), /* Самые современные браузеры */
url(‘fonts/MyAwesomeFont.woff’) format(‘woff’), /* Современные браузеры */
url(‘fonts/MyAwesomeFont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘fonts/MyAwesomeFont.svg#svgFontName’) format(‘svg’); /* iOS */
}
|
1 |
@font-face { font-family’MyAwesomeFont’;/* Придумайте название для шрифта */ srcurl(‘fonts/MyAwesomeFont.eot’);/* IE9 */ srcurl(‘fonts/MyAwesomeFont.eot?#iefix’)format(’embedded-opentype’),/* IE6-IE8 */ url(‘fonts/MyAwesomeFont.woff2’)format(‘woff2’),/* Самые современные браузеры */ url(‘fonts/MyAwesomeFont.woff’)format(‘woff’),/* Современные браузеры */ url(‘fonts/MyAwesomeFont.ttf’)format(‘truetype’),/* Safari, Android, iOS */ url(‘fonts/MyAwesomeFont.svg#svgFontName’)format(‘svg’);/* iOS */ } |
Теперь чтобы применить подключенный шрифт к текстовому элементу, в свойстве используйте имя, которое Вы указали в правиле
p {
font-family: ‘MyAwesomeFont’, sans-serif;
}
|
1 |
p { font-family’MyAwesomeFont’,sans-serif; } |
Как подключить шрифт CSS?
1.Заходим на сайт-каталог шрифтов. Их легко можно найти в поиске. Ниже я приведу пример одного довольно удобного сайта, который я обычно использую.
2.Выбираем и скачиваем любой понравившийся нам. Чаще всего вам предоставляется для скачивания несколько файлов с различными вариантами исполнения (жирный, курсив, и т.д.), а так же с различными расширениями.
Для наших целей лучше всего подойдет файл с расширением .ttf, так как он поддерживаться всеми браузерами. Так же файл может быть в форматах .eot, .woff, .svg. Для поддержки данного шрифта в старых версиях Internet Explorer и некоторых других браузеров желательно подключить и форматы .eot и .woff
3.Скачанный файл нам нужно загрузить в папку fonts в корневом каталоге сайта. Если же ваш сайт сделан на WordPress или другой CMS, то вам нужно загрузить файл в папку fonts, которая находится в папке с темой оформления.
4.Далее открываем css-файл стилей сайта или используемой темы. Это можно сделать, подключившись к сайту по FTP в текстовом редакторе NotePad++ или его аналоге.
5.Затем нам нужно подключить шрифт CSS-правилом font-face
Для этого в самом начале файла стилей style.css, после комментария, содержащего информацию о теме, вставляем следующий код:
PHP
@font-face {
font-family: ‘Font Name’;
src: url(‘fonts/ Font Name.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}
1
2
3
4
5
6
@font-face{
font-family’Font Name’;
srcurl(‘fonts/ Font Name.ttf’)format(‘truetype’);
font-weightnormal;
font-stylenormal;
}
Обратите внимание! Вместо текста «Font Name» вам нужно вставить название скачанного вами файла. И обязательно обращайте внимание на формат, так как у вас он может быть другой или их может быть несколько.
Вот примеры подключения в CSS наиболее популярных форматов:
PHP
src: url(‘fonts/ Font Name.woff’) format(‘woff’);
src: url(‘fonts/ Font Name.eot’) format(‘eot’);
src: url(‘fonts/ Font Name.svg’) format(‘svg’);
1
2
3
srcurl(‘fonts/ Font Name.woff’)format(‘woff’);
srcurl(‘fonts/ Font Name.eot’)format(‘eot’);
srcurl(‘fonts/ Font Name.svg’)format(‘svg’);
6.Теперь наш шрифт подключен, и мы можем его использовать
Для того, что бы применить его к определенному блоку, нам нужно в css-стилях для класса этого блока дописать свойство font-family:
PHP
font-family: ‘ JuraBook ‘;
1
font-family’ JuraBook ‘;
Например:
PHP
.main-navigation ul li a {
font-family: ‘JuraBook’;
font-size:18px;
}
1
2
3
4
.main-navigationullia{
font-family’JuraBook’;
font-size18px;
}
Font Family — Семейство шрифтов
Семейство шрифтов текста устанавливается с помощью свойства .
Свойство должно содержать несколько имен шрифтов в качестве «резервных». Если браузер не поддерживает первый шрифт, он пытается использовать следующий шрифт и т.д.
Начните со шрифта, который вам нужен, и завершите общим семейством шрифтов (generic family), чтобы браузер мог выбрать аналогичный шрифт в общем семействе, если другие шрифты недоступны.
Примечание: Если название семейства шрифтов содержит более одного слова, оно должно быть в кавычках, например: «Times New Roman».
В списке через запятую указано несколько семейств шрифтов:
Пример
p { font-family: «Times New Roman», Times, serif;}
Для наиболее часто используемых комбинаций шрифтов ознакомьтесь с нашими Веб-безопасными комбинациями шрифтов.
Enabling Font Effects
Google have also enabled different font effects that you can use.
First add to the Google API,
then add a special class name to the element that is going to use the special
effect. The class name always starts with
and ends with the .
Example
Add the fire effect to the «Sofia» font:
<head><link rel=»stylesheet»
href=»https://fonts.googleapis.com/css?family=Sofia&effect=fire»><style>body {
font-family: «Sofia», sans-serif; font-size: 30px;}</style></head>
<body><h1 class=»font-effect-fire»>Sofia on
Fire</h1></body>
Result:
Sofia on Fire
To request multiple font effects, just separate the effect names with a pipe character
(), like this:
Example
Add multiple effects to the «Sofia» font:
<head><link rel=»stylesheet»
href=»https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple»><style>body {
font-family: «Sofia», sans-serif; font-size: 30px;}</style></head>
<body><h1 class=»font-effect-fire»>Neon Effect</h1><h1 class=»font-effect-outline»>Outline
Effect</h1><h1 class=»font-effect-emboss»>Emboss
Effect</h1><h1 class=»font-effect-shadow-multiple»>Multiple
Shadow Effect</h1></body>
Result:
❮ Previous
Next ❯
Обложки для актуальных историй в Инстаграм
Прежде, чем заняться оформлением актуальных сторис в инстаграм, продумайте всю концепцию. Заранее подготовьте весь набор иконок, которые будете использовать. Также зайдите в архив и проанализируйте те публикации, которые могут дополнить разделы.
- Загрузите картинку в сториз из галереи;
- Найдите ленту своих публикаций и выберите большой знак плюса в кружочке или перейдите в готовую группу;
- Нажав, вы попадете в архив или раздел;
- Выберите stories, которая будет первой и главной;
- Теперь «Далее». Теперь вы можете редактировать все параметры;
- Если нужно изменить главную сториз, то нажмите «Редактировать обложку». Там вы сможете перемещать и трансформировать заставку, которая будет показываться в профиле;
- «Готово».
Позаботьтесь об обложках еще до публикации и выделения вечных сторис. Так как менять местами записи в разделах невозможно. Лицевую можно выбрать из архива или из галереи. После создания группы можно только добавлять новые публикации и удалять ненужные.
О недостатках
При всех преимуществах у подключения сторонних шрифтов на страницу есть 2 существенных недостатка:
- во-первых, дополнительный файл шрифта – это дополнительные килобайты, и лишние секунды на загрузку
- во-вторых, не во всех ОС есть хорошее сглаживание шрифтов (например в Windows XP оно просто ужасно), из-за чего по-настоящему красивый и качественный шрифт может выглядеть как-то не естественно и натянуто (особенно при больших кеглях). В таких случаях лучше подойдут векторные картинки SVG или растровые картинки, которые растягиваются средствами броузера, и выглядят достаточно гладко.
3 260
Сложный способ подключения веб-шрифта
К сожалению, IE8 не понимает способа подключения веб-шрифта, описанного выше. Точнее, этот браузер не понимает способа подключения различных начертаний шрифта к одному и тому же имени этого шрифта. Если создать правила, описанные выше и попробовать загрузить полученную HTML-страницу в IE8, то весь текст будет отображен как: .
В тех местах, где применены теги или , браузер IE8 будет сам делать из шрифта PTSans начертания и , а не подключать уже готовые шрифты в этих начертаниях. Результат такой “самодеятельности” будет плачевным.
Выходом из положения будет применение различных имен шрифта в директиве . Пример варианта подключения веб-шрифта, понятного для IE8, показан ниже:
Обратите внимание на отсутствие правил и во всех четырех директивах. Такой код выглядит даже более понятным и логичным, нежели первый вариант
И вроде бы все хорошо, но задавайте теперь рассмотрим простой пример параграфа с тегами и , к которому следует применить шрифт PTSans.
Оцените этого CSS -“крокодила” ниже. Какой он громоздкий и неуклюжий! А если учесть, что на HTML-странице нужно будет применить шрифт PTSans не только к элементу p, а еще к заголовкам , , ссылке ? Насколько же “раздуются” таблицы стилей в этом случае! А если вдруг (не дай Бог!) придется вносить изменения в такой код?
Применять или не применять второй способ подключения веб-шрифтов — это вопрос того, насколько необходима поддержка IE8 для конкретного сайта. Следует учесть, что доля IE8 падает и будет продолжать падать.
Different Font Formats
TrueType Fonts (TTF)
TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft
Windows operating systems.
OpenType Fonts (OTF)
OpenType is a format for scalable computer fonts. It was built on TrueType,
and is a registered trademark of
Microsoft. OpenType fonts are used commonly today on the major
computer platforms.
The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages. It was developed in 2009, and is
now a W3C Recommendation. WOFF is essentially OpenType or TrueType with
compression and additional metadata. The goal is to support font distribution
from a server to a client over a network with bandwidth constraints.
The Web Open Font Format (WOFF 2.0)
TrueType/OpenType font that provides better compression than WOFF 1.0.
SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1
specification define a font module that allows the creation of fonts within an
SVG document. You can also apply CSS to SVG documents, and the @font-face rule
can be applied to text in SVG documents.
Embedded OpenType Fonts (EOT)
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use
as embedded fonts on web pages.
Семейство Шрифтов
Семество шрифта устанавливается с помощью свойства font-family.
Свойство font-family должно содержать несколько имен шрифтов в качестве «запасных» вариантов.
Если браузер не поддерживает первый шрифт, он пробует применить следующий шрифт.
Начинайте со шрифта, который вы хотите использовать, и заканчивайте обобщенным семейством, чтобы позволить
браузеру выбрать схожий шрифт из обобщенного семейства, если ни один из указанных шрифтов не доступен.
Замечание: Если в имени семейства шрифта более одного слова, оно должно заключаться в кавычки,
например семейство шрифтов «Times New Roman».
Более одного семейства шрифтов указывается через запятую:
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
