Css селекторы

Псевдоклассы CSS2

В CSS2 определены 4 группы псевдоклассов (часть из которых перекочевала из CSS1).

Псевдокласс :first-child

Задает стиль для элемента, являющегося первым потомком своего родителя. Если тебе не очень понятно, что такое родитель и потомок, можно посмотреть подробную статью Дерево документа HTML.

Пример. Убираем маркер у первого элемента списка:

li:first-child{
	list-style: none;
} 

Замечание! IE6 не понимает этот псевдокласс. Но это не проблема, так как научить Осла выделять первый потомок можно с помощью приема, описанного в статье Псевдокласс :first-child для ИЕ6

Псевдоклассы ссылок

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

Пример. Задаем цвет для посещенных ссылок:

a:visited {
	color: #80bd34;
} 

Динамические псевдоклассы

Эти псевдоклассы применяются к элементам в зависимости от действий пользователя. CSS2 определяет три таких псевдокласса — :hover, :active и :focus.

1. :hover — элемент, над которым находиться указатель мыши. Как только указатель уходит за пределы элемента, стили, заданные этим псевдоклассом, отменяются.
2. :active — элемент, активированный пользователем (например, ссылка или кнопка в момент щелчка).
3. :focus — элемент, которому принадлежит фокус ввода.

Пример. При наведении мыши на ссылку убираем подчеркивание:

a:hover {
	text-decoration: none;
}

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

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

Псевдокласс :lang

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

При этом, согласно спецификации, информация о языке может быть получена и нескольких источников, таких как атрибут lang, метатег Content-language, информация из протокола (HTTP-заголовок).

Пример. Все французские надписи отобразим красным цветом:

p:lang(fr){
	color: red;
} 

Очевидная проблема: инвалидация стилей

Мы рассмотрели хорошие примеры зависимости скорости обработки CSS-селекторов от их сложности, однако это всё касается единоразового рендеринга. Но сегодняшние веб-сайты уже не являются статическими документами, а больше напоминают приложения с динамическим контентом, с которым пользователи могут взаимодействовать. Это всё немного усложняет, поскольку синтаксический анализ CSS-кода — это всего лишь один шаг в конвейере рендеринга браузера. Вот более детальный (рендеринг-ориентированный) взгляд на то, как браузер отображает кадр на экране (из статьи «Производительность визуализации» на developers.google.com):

Мы опустим вопрос производительности JavaScript и композитинг («Composite» на рисунке выше), а сосредоточимся на фиолетовой части — парсинге стилей («Style») и компоновке элементов («Layout»).

После построения DOM и CSSOM, браузеру необходимо объединить их в дерево рендеринга, прежде чем начать отрисовку на экране. На этом этапе браузеру необходимо вычислить окончательный набор CSS свойств и их значений для каждого найденного элемента. Вы сами можете это наблюдать в панели Elements > Styles инструментов разработчика браузера. Браузер берет все, соответствующие определенному элементу стили, включая специфические, свойственные самому браузеру (так называемые user agent stylesheet) для создания окончательного, вычисленного (computed) стиля элемента.

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

Наконец, на этапе отрисовки, браузер преобразует каждый узел дерева рендеринга в фактические пиксели на экране.

Теперь о том, что происходит, когда мы видоизменяем DOM, изменяя некоторые классы на странице, добавляя или удаляя некоторые узлы, изменяя некоторые атрибуты или каким-либо другим образом «балуясь» с HTML (или самими стилями)?

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

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

Другой способ — уменьшить область действия — например, количество отменяемых (требующих пересчёта стилей) элементов. Будьте конкретны в вашем CSS. Имейте это в виду, особенно при использовании анимации, где браузеру даётся всего ~10мс, чтобы выполнить всю необходимую работу.

Более детально изучить проблему инвалидации стилей можно прочитав статью Style Invalidation in Blink.

Псевдоэлемент ::first-letter

В CSS кроме псевдоклассов существуют и псевдоэлементы. К ним как раз относится псевдоэлемент ::first-letter. С его помощью можно стилизовать первую букву любого абзаца. Этот эффект часто применяется в печатных изданиях. Создать заглавную букву при помощи псевдоэлемента ::first-letter довольно просто:

p::first-letter {
  // стиль буквы
}

Если не хотите стилизовать первые буквы в каждом абзаце, можно выбрать только первый абзац во всем тексте. Для этого нужно использовать вместе псевдокласс и псевдоэлемент (:first-child и ::first-letter):

p:first-child::first-letter {
 // добавляем стили только к первой букве первого абзаца текста
}

Этот подход освобождает от необходимости использования JavaScript.

Псевдокласс :first-of-type

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

article:first-of-type {
  margin-top: 0;
}

Псевдокласс :last-of-type

:first-of-type не бывает без :last-of-type. Как вы уже наверное догадались, этот селектор работает противоположно селектору :first-of-type:

article:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

Приоритет css селекторов

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

Класс является более приоритетным селектором, чем селектор тега (p, table, ul). Псевдокласс имеет такой же вес, что и простой класс. p:first-line приоритетнее, чем.firstline , потому что во втором селекторе просто класс, а в первом — селектор тега + псевдокласс.

Еще одно полезное правило — чем конкретнее селектор, тем более приоритетными являются стили для него. Например, между body и p битву выигрывает абзац, поскольку это более конкретный селектор, чем body (потому что это вся страница, то есть не очень конкретно). А table p , в свою очередь, конкретнее, чем просто p . В общем, просто знайте о таких правилах.

Структурные селекторы

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

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

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

И так, если бы у нас был бы список элементов, то следующий селектор выбрал бы третий по списку.

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

 — Выберет второй дочерний элемент

 — Выберет каждый четвертый дочерний элемент (4, 8, 12, …)

 — Выберет каждый второй дочерний элемент, начиная с первого (1, 3, 5, …)

 — Выберет каждый третий дочерний элемент, начиная с минус первого (2, 5, 8, …)

 — Выберет нечетные элементы (1, 3, 5, …)

 — Выберет четные элементы (2, 4, 6, …)

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

Вы можете использовать простые выражения со следующими структурными селекторами:

 и  очень схожи с : и , кроме того, что они выбирают последний элемент, а не первый.

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

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

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

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

Для примера, вы можете удивиться почему And so on… текст синий внутри тега . На самом деле весь контент секции синий, как последний потомок главного дива — контейнера. Другие элементы секции имеют свои собственные цвета, переписанные другими селекторами, оставляя только один параграф разукрашенным в синий цвет.

27 ответов

В настоящее время нет способа выбрать родительский элемент элемента в CSS.

Если бы был способ сделать это, это было бы в любой из текущих спецификаций селекторов CSS:

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

Рабочий блок для выбора уровня 4 включает псевдокласс класса :has() , который работает аналогично реализации jQuery . По состоянию на 2018 год это все равно не поддерживается никаким браузером .

Используя :has() , исходный вопрос можно было бы решить с помощью этого:

Как уже упоминалось в парах других, нет способа стилизовать родительский элемент элемента, используя только CSS, но следующее работает с jQuery :

Короткий ответ НЕТ, у нас на этом этапе в CSS нет parent selector , но если вы все равно не хотите менять элементы или классы, второй вариант использует JavaScript, что-то вроде этого:

или более короткий путь, если вы используете jQuery в своем приложении:

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

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

Селектор CSS « General Sibling Combinator » может быть использован для того, что вы хотите:

Это соответствует любому элементу F , которому предшествует E ].

Я знаю, что OP искал решение для CSS, но его легко достичь с помощью jQuery. В моем случае мне нужно было найти родительский тег

• для тега , содержащегося в дочернем . В jQuery есть селектор :has , поэтому можно определить родителя с помощью его дочерних элементов:

выберет элемент ul , у которого есть дочерний элемент с id someId . Или, чтобы ответить на исходный вопрос, что-то вроде следующего должно сделать трюк (непроверенный):

По крайней мере, вплоть до CSS3, включая CSS3, вы не можете выбрать это

Но это может быть сделано довольно легко в настоящее время в JS, вам просто нужно добавить немного ванильного JavaScript, обратите внимание, что код довольно короткий

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

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

Но нам нужно ждать реализации браузеров: (

В css3 добавлен новый селектор, поэтому, если html выглядит так:

Фактически вы можете воздействовать на родителя элемента «a», который является «li» «

Нет, вы не можете выбрать родителя только в css.

Но поскольку у вас уже есть класс .active , не было бы легче перенести этот класс на li (вместо этого из a )? Таким образом, вы можете получить доступ только к li и a только через css.

Попробуйте переключить отображение a на block , а затем используйте любой желаемый стиль. Элемент a заполнит элемент li , и вы сможете изменить его внешний вид по своему желанию. Не забудьте установить li дополнение на 0.

Кто-нибудь предложил что-то подобное? Просто идея для горизонтального меню .

Другой пример , как использовать его с текстовыми вводами — выберите родительский набор полей

Я не думаю, что вы можете выбрать родителя только в css.

Но поскольку у вас уже есть класс .active , не было бы легче перенести этот класс на li (вместо a )? Таким образом, вы можете получить доступ только к li и a только через css.

Вот взломать с помощью pointer-events с hover :

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

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

Одна из вещей, которые добавляет EQCSS, является родительским селектором. Он работает во всех браузерах IE8 и выше. Вот формат:

Итак, здесь мы открыли запрос элемента для каждого элемента a.active , а для стилей внутри этого запроса такие вещи, как $parent , имеют смысл, потому что есть контрольная точка , Браузер может найти родителя, потому что он очень похож на parentNode в JavaScript.

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

Вы можете использовать этот скрипт .

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

или выбрать его, когда он активен:

Посмотрите этот HTML:

вы можете выбрать span.help , когда активен input и показать его:

Есть еще много возможностей; просто проверьте документацию плагина.

Псевдоэлементы

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Псевдоклассы селекторов

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

a:hover {}
a:active {}
a:focus {}
a:visited {}
:checked {}
:first-child {}
:last-child {}
// вы поняли

Это удобно, когда необходимо получить доступ к каким-либо элементам, находящимся в определенном состоянии.

Псевдокласс :not(x)

Селектор псевдокласса :not(x) удаляет из набора определенные элементы на основе переданного параметра. Это полезно при стилизации всех элементов:

<ul class="nav">
 <li>Blog</li>
 <li>About</li> 
 <li>Videos</li>
 <li class="highlight">Music</li>
 <li>Merch</li>
</ul>

С его помощью можно выбрать все элементы за исключением элемента с классом highlight, как в этом примере:

.nav li:not(.highlight) {
  margin: 0 1em 0 0;
  padding: 5px 16px;
  display: inline-block;
}

Можно пойти дальше и выбирать любые атрибуты.

Например:

input:not()

Создание и порядок слоев

Для создания каскадных слоев предназначено новое @-правило .

Самый простой способ создать слой — прямое объявление:

Мы создали слой с именем и сразу определили для него какие-то стили.

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

Кроме того, правило может использоваться для указания порядка слоев. Нужно просто перечислить имена слоев в нужной последовательности.

Эта строчка создаст три слоя, а стили на эти слои можно добавить позже в коде.

Это очень удобно: вы можете управлять взаимным расположением слоев в одном месте, без необходимости перемещать большие куски кода. Порядок слоев имеет большое значение, так как влияет на приоритет стилей. Здесь работает то же правило — последний побеждает.

В примере стили фреймворка bootstrap находятся на самом нижнем уровне (слой ), поверх них находятся базовые стили (слой ). И наконец на самом верху, с максимальным приоритетом расположен слой (основные стили приложения).

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

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

Вложенные слои

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

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

Имена вложенных слоев могут повторять имена слоев с верхнего уровня, конфликта не будет:

В этом примере создается новый слой , отличный от слоя .

Анонимные слои

На самом деле давать имя слою необязательно, вполне можно использовать анонимные слои.

Однако у такого подхода есть недостатки. Вы не сможете позднее добавлять в такой слой новые стили, так как не сможете к нему обратиться. И нет возможности явно указать порядок безымянного слоя, он будет зависеть только от «порядка появления» в коде.

Анонимные слои можно использовать в качестве “приватных” слоев, если вы намеренно не хотите, чтобы кто-то другой мог ими манипулировать.

4) X

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

В примере ниже мы присвоим всем тегам параграфа, которые есть на странице, наши стили:

p {
font-size: 14px;
color: #424242;
padding 5px;
margin: 0;
}

Если же мы хотим одни и те же стили присвоить разным тегам, например параграфу <p> и ссылке <a>? то это будет выглядеть вот так:

p, a {
font-size: 14px;
color: #424242;
padding 5px;
margin: 0;
}

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

Совместимость: 

* IE6+ | * Firefox | * Chrome | * Safari | * Opera

Три вида взаимоотношений в дереве элементов

1. Предки-потомки;
2. Родитель-ребенок;
3. Братья (соседи)

Рассмотри дерево элементов на примере:

1
2
3
4
5
6
7
8
9

<body>
<div>
   <h1>Заголовок<h1>
   <p><strong>Первый<strong> параграф в div<p>
   <p><strong>Второй<strong> параграф в div<p>
   <strong>Просто полужирный текст в div<strong>
<div>
<p><strong>Первый<strong> параграф в body<p>
<body>

Родительский элемент – тег, который содержит в себе рассматриваемый элемент.

В примере отношения родитель-ребенок:

• Элемент (2 строка) — родительский по отношению к тегу (3 строка), тогда как — напротив, дочерний элемент (ребенок)
• Элемент (4 строка) является родительским по отношению к (4 строка), тогда как — напротив, дочерний элемент (ребенок)
• Элемент (2 строка) является родительским по отношению к (6 строка), тогда как — напротив, дочерний элемент (ребенок)
• Элемент (8 строка) является родительским по отношению к (8 строка), тогда как — напротив, дочерний элемент (ребенок)
• Элемент (1 строка) является родительским по отношению к (2 строка) и (8 строка)

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

В примере отношение предок-потомок:

• Элемент является предком для элементов (3 строка), и (4 строка), и (5 строка), (6 строка) и (8 строка); в то время как все, перечисленные элементы являются потомками
• Элемент (2 строка) является предком для элементов (4 и 5 строка); в то время как является потомком для

Братский элемент (соседний) – элемент, который имеет общий родительский элемент с рассматриваемым.

В примере отношение соседи (братья):

• Элементы (3 строка), (4 строка), (5 строка) и (6 строка) являются братьями или соседними элементами.
• Элементы (2 строка) и (8 строка) являются братьями или соседними элементами.

Основы парсинга CSS

Во-первых, чтобы избежать непонимания в дальнейшем — эта статья не касается производительности CSS-свойств и их значений. Здесь мы рассматриваем эксплуатационные затраты самих селекторов. Я сосредоточусь на движке рендеринга Blink, а именно на браузере Chrome версии 62.

Селекторы можно разделить на несколько групп и (грубо) отсортировать их по возрастанию затрат на их обработку:

Означает ли это, что нужно использовать только ID и классы? Ну не совсем. Зависит от ситуации. Во-первых, давайте рассмотрим, как браузеры интерпретируют CSS-селекторы.

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

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

Заключение

Подводя итоги, можно сказать, что беспокоиться о производительности CSS-селекторов не стоит, если только вы действительно не переходите границы. Несмотря на то, что в 2012 году эта тема была актуальной, с тех пор браузеры стали намного быстрее и умнее. Даже Google больше не беспокоится об этом. Если вы посмотрите страницу PageSpeed Insights Rules, вы не увидите там правила «Use efficient CSS selectors» — «Используйте эффективные CSS-селекторы», которое было удалено оттуда в 2013 году.

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

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

* Имеется ввиду, что для гладкой анимации (с частотой 60 fps) на один кадр отводится 1000мс/60кадров ≈ 16,6мс. Отбросив время на саму отрисовку кадра, у браузера остаётся ~10мс для проведения всех вычислений. — прим. перев.

Перевел scorp13

Статья является свободным переводом материала сайта https://www.sitepoint.comАвтор Ivan Čurić