diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index 88c024e..db8c533 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -27,7 +27,8 @@ 1. [Проверьте, установлен ли шрифт локально](#проверьте,-установлен-ли-шрифт-локально) 1. [Добавьте `line-height` в `body`](#Добавьте-line-height-в-body) 1. [Установите `:focus` для элементов формы](#Установите-focus-для-элементов-формы) -1. [Выровнять все по вертикали](#Выровнять-все-по-вертикали) +1. [Выровнять всё по вертикали](#Выровнять-всё-по-вертикали) +1. [Используйте `aspect-ratio` вместо задания ширины, высоты](#Используйте-aspect-ratio-вместо-задания-ширины-высоты) 1. [Списки, разделенные запятыми](#Списки-разделенные-запятыми) 1. [Выбирайте элементы с использованием отрицательных значений в `nth-child`](#Выбирайте-элементы-с-использованием-отрицательных-значений-в-nth-child) 1. [Используйте SVG для значков](#Используйте-svg-для-значков) @@ -36,6 +37,7 @@ 1. [Ячейки таблицы равной ширины](#Ячейки-таблицы-равной-ширины) 1. [Используйте Flexbox вместо margin](#Используйте-flexbox-вместо-margin) 1. [Используйте селектор атрибутов для пустых ссылок](#Используйте-селектор-атрибутов-для-пустых-ссылок) +1. [Управляйте специфичностью лучше, с помощью `:is()`](#Управляйте-специфичностью-лучше-с-помощью-is) 1. [Стиль "по умолчанию" для ссылок](#тиль-по-умолчанию-для-ссылокs) 1. [Блок с собственным отношением сторон](#Блок-с-собственным-отношением-сторон) 1. [Задайте стили для поломанныx изображений](#Задайте-стили-для-поломанныx-изображений) @@ -217,9 +219,9 @@ textarea:focus { [вернуться к оглавлению](#table-of-contents) -### Выровнять все по вертикали +### Выровнять всё по вертикали -Нет, это не черная магия, вы действительно можете расположить элементы по центру по вертикали: +Нет, это не чёрная магия, вы действительно можете расположить элементы по центру по вертикали: ```css html, @@ -255,6 +257,24 @@ body { [вернуться к оглавлению](#table-of-contents) +### Используйте `aspect-ratio` вместо задания ширины, высотыhttps://onelove-agency.ru/web/october2024 + +Свойство `aspect-ratio` позволяет легко изменять размеры элементов и поддерживать постоянное соотношение ширины и высоты. Это невероятно полезно в отзывчивом веб-дизайне для предотвращения смещения макета. Используйте `object-fit` вместе с ним, чтобы не нарушить верстку при изменении значений высоты/ширины изображений. + +```css +img { + aspect-ratio: 16 / 9; /* ширина / высота */ + object-fit: cover; +} +``` + +Подробнее о свойстве ` aspect-ratio` читайте в этой статье [web.dev post](https://web.dev/articles/aspect-ratio). + +#### [Демо](https://codepen.io/AllThingsSmitty/pen/MWxwoNx/) + +[вернуться к оглавлению](#table-of-contents) + + ### Списки, разделенные запятыми Сделайте список похожим на настоящий, разделенный запятыми список: @@ -421,6 +441,32 @@ a[href^="http"]:empty::before { [вернуться к оглавлению](#table-of-contents) +### Управляйте специфичностью лучше, с помощью `:is() + +Псевдокласс `:is()` используется для одновременного обращения к нескольким селекторам, что уменьшает избыточность и улучшает читаемость кода. Это невероятно полезно для написания больших селекторов в более компактной форме. + +```css +:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { + color: green; +} +``` + +Приведённый выше набор правил эквивалентен следующим правилам селектора чисел... + +```css +section h1, section h2, section h3, section h4, section h5, section h6, +article h1, article h2, article h3, article h4, article h5, article h6, +aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, +nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 { + color: green; +} +``` + +#### [Демо](https://codepen.io/AllThingsSmitty/pen/rNRVxdx) + +[вернуться к оглавлению](#table-of-contents) + + ### Стиль "по умолчанию" для ссылок Добавьте для ссылок стиль "по умолчанию":