Контент для последней версии garry’s mod

Определение и применение

CSS свойство justify-content определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси контейнера (горизонтально), или производит выравнивание всего макета сетки по оси строки grid-контейнера.

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

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

Это свойство может использоваться в тех случаях, когда для флекс элементов явно указана ширина, и если ширина всех элементов внутри контейнера не вызывает переполнение контейнера, иначе свойство justify-content не окажет на такой элемент никакого эффекта.

Более подробную информацию о работе с флекс элементами вы можете получить в статье учебника CSS «Верстка по Flexbox (работа с контейнерами)».

Схематичное отображение работы свойства justify-content отображено на следующем изображении:

* — для элементов сетки макета (grid-элементы) допускается использование сокращенных значений start и end, для флекс элементов необходимо использовать полные значения flex-start и flex-end.

Стрелки подсказки

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

В этом примере показано, как добавить стрелку в нижнюю часть подсказки:

Нижняя стрелка

.tooltip .tooltiptext::after {    content: » «;    position: absolute;    top: 100%;
/* At the bottom of the tooltip */    left: 50%;    margin-left: -5px;   
border-width: 5px;    border-style: solid;   
border-color: black transparent transparent transparent;}

Result:

Hover over me

Пример объяснено

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

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

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

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

Верхняя стрелка

.tooltip .tooltiptext::after {    content: » «;    position: absolute;   
bottom: 100%;  /* At the top of the tooltip */    left: 50%;    margin-left: -5px;   
border-width: 5px;    border-style: solid;   
border-color: transparent transparent black transparent;}

Result:

Hover over me
Tooltip text

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

Стрелка влево

.tooltip .tooltiptext::after {    content: » «;    position: absolute;   
top: 50%;    right: 100%; /* To the left of the tooltip
*/    margin-top: -5px;   
border-width: 5px;    border-style: solid;   
border-color: transparent black transparent transparent;}

Result:

Hover over me
Tooltip text

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

Стрелка вправо

.tooltip .tooltiptext::after {    content: » «;    position: absolute;
    top: 50%;    left: 100%; /* To the right of the
tooltip */    margin-top: -5px;   
border-width: 5px;    border-style: solid;   
border-color: transparent transparent transparent black;}

Result:

Hover over me
Tooltip text

Таблицы глобальных стилей

С

øûàþÿÃÂõôõûÃÂõÃÂÃÂàò ÃÂðüþü ôþúÃÂüõýÃÂõ ø þñÃÂÃÂýþ ÃÂðÃÂÿþûðóðõÃÂÃÂàò ÷ðóþûþòúõ òõñ-ÃÂÃÂÃÂðýøÃÂÃÂ.
ÃÂþ ÃÂòþõù óøñúþÃÂÃÂø ø òþ÷üþöýþÃÂÃÂÃÂü ÃÂÃÂþàÃÂÿþÃÂþñ øÃÂÿþûÃÂ÷þòðýøàÃÂÃÂøûàÃÂÃÂÃÂÃÂÿðõàÿÃÂõôÃÂôÃÂÃÂõüÃÂ,
ýþ ÃÂðúöõ ÿþ÷òþûÃÂõàÃÂð÷üõÃÂðÃÂàòÃÂõ ÃÂÃÂøûø ò þôýþü üõÃÂÃÂõ. àôðýýþü ÃÂûÃÂÃÂðõ, ÿÃÂÃÂüþ
ò ÃÂõûõ ôþúÃÂüõýÃÂð. ÃÂÿÃÂõôõûõýøõ ÃÂÃÂøûà÷ðôðõÃÂÃÂàÃÂõóþü
(ÿÃÂøüõÃÂà2).

ÃÂÃÂøüõà2. ÃÂÃÂÿþûÃÂ÷þòðýøõ ÃÂðñûøÃÂàóûþñðûÃÂýÃÂàÃÂÃÂøûõù

àôðýýþü ÿÃÂøüõÃÂõ ÿþúð÷ðýþ ø÷üõýõýøõ ÃÂÃÂøûà÷ðóþûþòúð

.
ÃÂð òõñ-ÃÂÃÂÃÂðýøÃÂõ ÃÂõÿõÃÂàôþÃÂÃÂðÃÂþÃÂýþ ÃÂúð÷ðÃÂàÃÂþûÃÂúþ ÃÂÃÂþàÃÂõó ø ÃÂÃÂøûø ñÃÂôÃÂàôþñðòûõýÃÂ
ú ýõüàðòÃÂþüðÃÂøÃÂõÃÂúø.

Внутренние стили

В

½ÃÂÃÂÃÂõýýøù ÃÂÃÂøûàÃÂòûÃÂÃÂÃÂÃÂàÿþ ÃÂÃÂÃÂõÃÂÃÂòàÃÂðÃÂÃÂøÃÂõýøõü ôûàþôøýþÃÂýþóþ ÃÂõóð øÃÂÿþûÃÂ÷ÃÂõüþóþ
ýð òõñ-ÃÂÃÂÃÂðýøÃÂõ. ÃÂûàþÿÃÂõôõûõýøàÃÂÃÂøûàøÃÂÿþûÃÂ÷ÃÂõÃÂÃÂàðÃÂÃÂøñÃÂàstyle,
ð õóþ ÷ýðÃÂõýøàÃÂúð÷ÃÂòðÃÂÃÂÃÂààÿþüþÃÂÃÂàÃÂ÷ÃÂúð ÃÂðñûøÃÂàÃÂÃÂøûõù (ÿÃÂøüõÃÂà3)..

ÃÂÃÂøüõà3. ÃÂÃÂÿþûÃÂ÷þòðýøõ òýÃÂÃÂÃÂõýýøàÃÂÃÂøûõù

àõúþüõýôÃÂõÃÂÃÂàøÃÂÿþûÃÂ÷þòðÃÂàòýÃÂÃÂÃÂõýýøù ÃÂÃÂøûàôûàþôøýþÃÂýÃÂàÃÂõóþò
øûø þÃÂúð÷ðÃÂÃÂÃÂàþàõóþ øÃÂÿþûÃÂ÷þòðýøàòþþñÃÂõ, ÿþÃÂúþûÃÂúàø÷üõýõýøõ
ÃÂÃÂôð ÃÂûõüõýÃÂþò ÃÂÃÂðýþòøÃÂÃÂàÿÃÂþñûõüðÃÂøÃÂýÃÂü. ÃÂýÃÂÃÂÃÂõýýøõ ÃÂÃÂøûø ýõ ÃÂþþÃÂòõÃÂÃÂÃÂòÃÂÃÂÃÂ
øôõþûþóøø ÃÂÃÂÃÂÃÂúÃÂÃÂÃÂýþóþ ôþúÃÂüõýÃÂð, úþóôð ÃÂþôõÃÂöøüþõ ø õóþ þÃÂþÃÂüûõýøõ
ÃÂð÷ôõûõýÃÂ.

ÃÂÃÂõ þÿøÃÂðýýÃÂõ üõÃÂþôàøÃÂÿþûÃÂ÷þòðýøàCSS üþóÃÂàÿÃÂøüõýÃÂÃÂÃÂÃÂàúðú ÃÂðüþÃÂÃÂþÃÂÃÂõûÃÂýþ,
ÃÂðú ø ò ÃÂþÃÂõÃÂðýøø ôÃÂÃÂó àôÃÂÃÂóþü. àÃÂÃÂþü ÃÂûÃÂÃÂðõ ýõþñÃÂþôøüþ ÿþüýøÃÂàþñ øàøõÃÂðÃÂÃÂøø.
ÃÂõÃÂòÃÂü òÃÂõóôð ÿÃÂøüõýÃÂõÃÂÃÂàòýÃÂÃÂÃÂõýýøù ÃÂÃÂøûÃÂ, ÷ðÃÂõü ÃÂðñûøÃÂð óûþñðûÃÂýÃÂàÃÂÃÂøûõù
ø ò ÿþÃÂûõôýÃÂàþÃÂõÃÂõôàÃÂðñûøÃÂð ÃÂòÃÂ÷ðýýÃÂàÃÂÃÂøûõù. àÿÃÂøüõÃÂõà4 øÃÂÿþûÃÂ÷ÃÂÃÂÃÂÃÂÃÂ
ÃÂÃÂð÷àôòð üõÃÂþôð ôþñðòûõýøàÃÂðñûøàÃÂÃÂøûõù ò ôþúÃÂüõýÃÂ.

ÃÂÃÂøüõà4. áþÃÂõÃÂðýøõ ÃÂð÷ýÃÂàüõÃÂþôþò ÿþôúûÃÂÃÂõýøàÃÂÃÂøûõù

àÿÃÂøòõôõýýþü ÿÃÂøüõÃÂõ ÿõÃÂòÃÂù ÷ðóþûþòþú ÷ðôðõÃÂÃÂàúÃÂðÃÂýÃÂü ÃÂòõÃÂþü ÃÂð÷üõÃÂþü 36
ÿøúÃÂõûþò, ð ÃÂûõôÃÂÃÂÃÂøùàâ ÷õûõýÃÂü ÃÂòõÃÂþü ø ôÃÂÃÂóøü ÃÂÃÂøÃÂÃÂþü.

CSS хаки для Internet Explorer

Данный браузер является одним из тех, которые доставляют больше всего проблем верстальщикам, так как он не поддерживает некоторые свойства CSS3 или отображает их по своему.

Я нашла несколько CSS хаков для этого браузера и ни один из них у меня не сработал!

Если хотите, можете сами попробовать. Вот эти CSS хаки:

CSS

/**Вариант 1**/
*:first-child+html .block {
border:1px solid red;
}
/**Вариант 2**/
*+html .block {
border:1px solid red;
}
/**Вариант 3**/
html>body .block {
*border:1px solid red;
}
/**Вариант 4**/
*:first-child+html .block {
border:1px solid red;
}
/**Вариант 5**/
*:first-child+html .block {
border:1px solid red;
}
/**Вариант 6**/
@media \0screen .block {
border:1px solid red;
}
/**Вариант 7**/
:root .block {
border:1px solid red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/**Вариант 1**/

*:first-child+html .block {

border1pxsolidred;

}
/**Вариант 2**/

*+html .block {

border1pxsolidred;

}
/**Вариант 3**/

html>body  .block {

*border1pxsolidred;

}
/**Вариант 4**/

*:first-child+html .block {

border1pxsolidred;

}
/**Вариант 5**/

*:first-child+html .block {

border1pxsolidred;

}
/**Вариант 6**/

@media \0screen .block {

border1pxsolidred;

}
/**Вариант 7**/

:root .block {

border1pxsolidred;

}

Во всех этих вариантах вместо .block вы пишете название класса или ID того блока, для которого вы задаёте стили.
Вместо border:1px solid red; — пишете свои CSS стили

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

Для задания стилей только для браузера Internet Explorer лучше и надёжнее вместо CSS хаков использовать условные комментарии.

Код условных комментариев выглядит так:

XHTML

1
2
3
4
5
6
7

Данный код рассчитан на все версии Internet Explorer

1
2
3
4
5

Данные стили сработают для браузера Internet Explorer версии 7. Если вам нужно прописать стили для другой версии то вместо «7» вы ставит ту версию, которая нужна.

History

  • 04/2015: feature in css-loader (webpack) allows local scoped selectors (later renamed to ) by @sokra
  • 05/2015: feature in css-loader allow to compose local or imported class names by @sokra
  • 05/2015: First CSS Modules spec document and github organization with @sokra, @markdalgleish and @geelen
  • 06/2015: renamed to
  • 06/2015: PostCSS transformations to transform CSS Modules into an intermediate format (ICSS)
  • 06/2015: Spec for ICSS as common implementation format for multiple module systems by @geelen
  • 06/2015: Implementation for jspm by @geelen and @guybedford
  • 06/2015: Implementation for browserify by @joshwnj, @joshgillies and @markdalgleish
  • 06/2015: webpack’s css-loader implementation updated to latest spec by @sokra

Свойство content

22/12/2013

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

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

Спецификация тут: w3.org/TR/css3-content/

Снеговики в примере добавлены с помощью для псевдоэлементов, сами снеговики — символы юникода:

Возможные значения свойства:

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

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

— адреса картинок.

Практическое применение — иконки перед ссылкам на профили в соцсетях, иконка для обозначения внешней ссылки, различные варианты буллетов.

Правда, тут появляется проблема лишних запросов к серверу.

Варианты решений:

  • спрайт, иконки из которого вставляются фоном в саму ссылку или в псевдоэлемент. Второе предпочтительней, потому что тогда псевдоэлемент ограничит область видимости спрайта, таким образом иконки в спрайте могут быть расположены не только вертикально, но и рядами.
    Количество запросов к серверу уменьшается до одного, но при этом картинка кешируется у пользователя;
  • закодировать отдельные картинки в base-64 и вставлять через ;
  • закодировать весь спрайт в base-64 и использовать его как фон для псевдоэлемента.

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

Закодировать картинку в base64 можно с помощью онлайн-сервисов, например websemantics.co.uk/online_tools/image_to_data_uri_convertor/. Полученный код вставляется в с информацией о формате содержимого, например .

Вот так будет выглядеть код для иконки Instagram:

Код длинный и заканчивается где-то за горизонтом. Кроме того, по коду непонятно что за картинка в нём лежит, и, при необходимости отредактировать, картинку надо будет каждый раз кодировать и вставлять заново, хотя в случае с обычным изображением его надо будет просто перезалить. В то же время есть плагин для гранта, который автоматически кодирует картинки и заменяет в коде адреса картинок на base64.

Подобным же образом можно вставлять SVG.

Это очень удобно, но пока что работает не во всех браузерах. Например, Chrome такое поймет и отобразит, а Firefox — нет.

Upd: SVG в CSS будет работать во всех браузерах, если закодировать его как адресную строку. Это можно сделать с помощью URL Encoder.

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

задает имя счетчика.
увеличивает значение заданного счетчика.
выводит значение счетчика в качестве содержимого псевдоэлемента.

— это значение выводит содержимое заданного атрибута. Удобно использовать для вывода атрибутов в версии для печати и для разных интересных эффектов.

Много эффектов можно найти тут: tympanus.net/Development/CreativeLinkEffects/

, — значения для вывода открывающих и закрывающих кавычек. Символы, которые будут использованы, определяются свойством . Если оно не задано, будут использованы значения по умолчанию, которые зависят от браузера.

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

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

Применения

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

Виджеты

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

За экраном

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

Импорт CSS

В

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

После ключевого слова @import указывается путь
к стилевому файлу одним из двух приведенных способов — с помощью url или без него. В примере 3.6 показано,
как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.

Пример 3.6. Импорт CSS

HTML5CSS 2.1IECrOpSaFx

В данном примере показано подключение файла header.css,
который расположен в папке style.

Аналогично происходит импорт и в файле со стилем, который затем подключается
к документу (пример 3.7).

Пример 3.7. Импорт в таблице связанных стилей

В данном примере показано содержимое файла mysite.css,
который добавляется к нужным документам способом, показанным в примере 3.1,
а именно с помощью тега .

Вопросы для проверки

1. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего?

  1. Связанные стили.
  2. Глобальные стили.
  3. Блочные стили.
  4. Внутренние стили.
  5. Экспорт стиля.

2. В данном примере, какой цвет будет у текста на веб-странице?

  1. Чёрный
  2. Красный
  3. Зелёный
  4. Синий
  5. Оливковый

3. Какой HTML-код применяется для подключения внешнего CSS-файла?

  1. @import url(mystyle.css)
  2. mystyle.css

4. Какой атрибут используется для определения внутреннего стиля?

  1. style
  2. class
  3. styles
  4. font
  5. link

На что обратить внимание при использовании CSS хаков.

CSS хаки конечно часто решают проблему с одинаковым отображением элементов и стилей в разных браузерах, но это решение проблемы – не самое надёжное, так как вы не можете быть уверенными на 100% что данный CSS хак будет работать в новых версиях браузеров, кроме того если вы пишете CSS хак для Firefox, к примеру, то вполне вероятно что когда выйдет новая версия Chrome или Opera то они тоже будут видеть и отображать этот хак.

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

В качестве альтернативного решения проблемы могу посоветовать использование скрипта для определения браузера и подключения соответствующего файла стилей.

Более подробно об этом я напишу в моей следующей статье.

Надеюсь, что данная статья была для вас полезной и теперь вам будет немного проще подогнать свою вёрстку под разные браузеры. Желаю вам успешной вёрстки и хорошего настроения 🙂

С уважением Юлия Гусарь

Четыреста одиннадцать тысяч девятьсот тридцать девять

Сумма цифр
Произведение цифр
Произведение цифр (без учета ноля)
Количество цифр в числе (шестизначное число)
Все делители числа 1, 3, 9, 11, 19, 27, 33, 57, 73, 99, 171, 209, 219, 297, 513, 627, 657, 803, 1387, 1881, 1971, 2409, 4161, 5643, 7227, 12483, 15257, 21681, 37449, 45771, 137313, 411939
Наибольший делитель из ряда степеней двойки
Количество делителей
Сумма делителей
Простое число? Нет

Полупростое число?

Нет
Обратное число 0.0000024275438839245616
Индо-арабское написание ٤١١٩٣٩
Азбука морзе ….- .—- .—- —-. …— —-.

Факторизация

* * * * *
Двоичный вид 1100100100100100011
Троичный вид
Восьмеричный вид
Шестнадцатеричный вид (HEX)
Перевод из байтов килобайта байт
Цвет RGB(6, 73, 35) или #064923
Наибольшая цифра в числе(возможное основание) (10, десятичный вид)
Число Фибоначчи? Нет

Нумерологическое значение

доброжелательность, благородство, прощение, раскаяние, благодарность, исцеление, щедрость, великодушие
Синус числа 0.7207548760563541
Косинус числа 0.6931900234719118
Тангенс числа 1.0397652182678294
Натуральный логарифм 12.928630559117531
Десятичный логарифм 5.614832910390497
Квадратный корень 641.8247424336336
Кубический корень 74.40651607861768
Квадрат числа
Перевод из секунд дня часов минут секунд
Дата по UNIX-времени Mon, Jan 18:25:39 GMT
MD5 b2335ca9bf40b2a27920cb57fc27b402
SHA1 58a011f3514366209488dd57ea123f0a666912c0
Base64 NDExOTM5
QR-код числа 411939

Внутренние стили

нÑÑÑенний или вÑÑÑоеннÑй ÑÑÐ¸Ð»Ñ ÑвлÑеÑÑÑ Ð¿Ð¾ ÑÑÑеÑÑÐ²Ñ ÑаÑÑиÑением длÑ
одиноÑного Ñега иÑполÑзÑемого на ÑекÑÑей веб-ÑÑÑаниÑе. ÐÐ»Ñ Ð¾Ð¿ÑÐµÐ´ÐµÐ»ÐµÐ½Ð¸Ñ ÑÑилÑ
иÑполÑзÑеÑÑÑ Ð°ÑÑибÑÑ style,
а его знаÑением вÑÑÑÑÐ¿Ð°ÐµÑ Ð½Ð°Ð±Ð¾Ñ ÑÑилевÑÑ Ð¿Ñавил
(пÑимеÑ 3.4).

ÐÑÐ¸Ð¼ÐµÑ 3.4. ÐÑполÑзование внÑÑÑеннего ÑÑилÑ

HTML5CSS 2.1IECrOpSaFx

Рданном пÑимеÑе ÑÑÐ¸Ð»Ñ Ñега

задаÑÑÑÑ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ Ð°ÑÑибÑÑа style,
в коÑоÑом ÑеÑез ÑоÑÐºÑ Ñ Ð·Ð°Ð¿ÑÑой пеÑеÑиÑлÑÑÑÑÑ ÑÑилевÑе ÑвойÑÑва (ÑиÑ. 3.2).

РиÑ. 3.2. ÐÑполÑзование внÑÑÑÐµÐ½Ð½Ð¸Ñ ÑÑилей Ð´Ð»Ñ Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ð²Ð¸Ð´Ð° ÑекÑÑа

ÐнÑÑÑенние ÑÑили ÑекомендÑеÑÑÑ Ð¿ÑименÑÑÑ Ð½Ð° ÑайÑе огÑаниÑенно
или вообÑе оÑказаÑÑÑÑ Ð¾Ñ Ð¸Ñ Ð¸ÑполÑзованиÑ. Ðело в Ñом, ÑÑо добавление ÑакиÑ
ÑÑилей ÑвелиÑÐ¸Ð²Ð°ÐµÑ Ð¾Ð±Ñий обÑÑм Ñайлов, ÑÑо Ð²ÐµÐ´ÐµÑ Ðº повÑÑÐµÐ½Ð¸Ñ Ð²Ñемени Ð¸Ñ Ð·Ð°Ð³ÑÑзки
в бÑаÑзеÑе, и ÑÑложнÑÐµÑ ÑедакÑиÑование докÑменÑов Ð´Ð»Ñ ÑазÑабоÑÑиков.

ÐÑе опиÑаннÑе меÑÐ¾Ð´Ñ Ð¸ÑполÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ CSS могÑÑ Ð¿ÑименÑÑÑÑÑ ÐºÐ°Ðº
ÑамоÑÑоÑÑелÑно, Ñак и в ÑоÑеÑании дÑÑг Ñ Ð´ÑÑгом. Ð ÑÑом ÑлÑÑае
необÑодимо помниÑÑ Ð¾Ð± Ð¸Ñ Ð¸ÐµÑаÑÑии. ÐеÑвÑм Ð¸Ð¼ÐµÐµÑ Ð¿ÑиоÑиÑÐµÑ Ð²Ð½ÑÑÑенний
ÑÑилÑ, заÑем глобалÑнÑй ÑÑÐ¸Ð»Ñ Ð¸ в поÑледнÑÑ Ð¾ÑеÑÐµÐ´Ñ ÑвÑзаннÑй ÑÑилÑ. РпÑимеÑе 3.5 пÑименÑеÑÑÑ ÑÑÐ°Ð·Ñ Ð´Ð²Ð° меÑода
Ð´Ð¾Ð±Ð°Ð²Ð»ÐµÐ½Ð¸Ñ ÑÑÐ¸Ð»Ñ Ð² докÑменÑ.

ÐÑÐ¸Ð¼ÐµÑ 3.5. СоÑеÑание ÑазнÑÑ Ð¼ÐµÑодов

HTML5CSS 2.1IECrOpSaFx

Рданном пÑимеÑе пеÑвÑй заголовок задаÑÑÑÑ ÐºÑаÑнÑм ÑвеÑом ÑазмеÑом 36 пикÑелов
Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ Ð²Ð½ÑÑÑеннего ÑÑилÑ, а ÑледÑÑÑий â зелÑнÑм ÑвеÑом ÑеÑез ÑаблиÑÑ
глобалÑнÑÑ ÑÑилей (ÑиÑ. 3.3).

РиÑ. 3.3. РезÑлÑÑÐ°Ñ Ð¿ÑÐ¸Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ ÑÑилей

Итого

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

Как обычно — тесты, тесты и ещё раз тесты. И тестировать не только с быстрым интернетом и на дорогих компьютерах, но также и на старых компьютерах и медленным интернетом. Чтобы понять, как другие воспринимают ваш сайт, можно эмулировать скорость сети и процессора с помощью отладчика Chrome.

Примечание: на данный момент (апрель 2016) это свойство поддержвается только в Chrome.

Обновление 06.04.2016: чтобы протестировать CSS-изоляцию, включите флаг chrome://flags/#enable-experimental-web-platform-features в Chrome.

Обновление 20.05.2016: теперь включено по умолчанию в Chrome 52.

Обновление 02.08.2016: добавлены значения «» и «» из последнего обновления из спецификации.

Ссылка на основную публикацию