diff --git a/README.md b/README.md index 9b564553..fb97cb36 100644 --- a/README.md +++ b/README.md @@ -463,5 +463,5 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. * [Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES) * [Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR) * [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR) -* [русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU) +* [Русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU) * [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN) diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md index ac3743ce..371bd2a7 100644 --- a/translations/ru-RU/README.md +++ b/translations/ru-RU/README.md @@ -2,49 +2,49 @@

-# CSS профессиональные советы [](https://github.com/sindresorhus/awesome) +# Советы профессионалов CSS [](https://github.com/sindresorhus/awesome) -Коллекция советов, которые помогут принять ваш CSS навыки профи. +Коллекция советов, которые помогут вам стать лучше в CSS. -> Для других больших списков проверить [@sindresorhus](https://github.com/sindresorhus/~~HEAD=dobj) в Куратор список [удивительных списков](https://github.com/sindresorhus/awesome/). +> Вы найдете больше [классных списков](https://github.com/sindresorhus/awesome/) под кураторством [@sindresorhus](https://github.com/sindresorhus/).

## Содержание -* [профессиональные советы](#protips) -* [Поддержка](#поддержка) -* [Вклад Руководство](../../CONTRIBUTING.md) +* [Профессиональные советы](#protips) +* [Поддержка](#Поддержка) +* [Помощь проекту](../../CONTRIBUTING.md)

-## профессиональные советы - -1. [Использование `:not()` Применить / Границы на Исключить навигации](#use-not-to-applyunapply-borders-on-navigation) -1. [Добавить `line-height` в `body`](#add-line-height-to-body) -1. [Вертикально-центр Все](#vertically-center-anything) -1. [списки разделенных запятыми](#comma-separated-lists) -1. [Выбор предметов с использованием отрицательных `пth-child`](#select-items-using-negative-nth-child) -1. [Использование SVG для значков](#use-svg-for-icons) -1. [Используйте "лоботомию Сова" Выбор](#use-the-lobotomized-owl-selector) -1. [Используйте `max-height` для чистого CSS Слидерс](#use-max-height-for-pure-css-sliders) -1. [Наследование `box sizing`](#inherit-box-sizing) -1. [одинаковой ширины ячейки таблицы](#equal-width-table-cells) -1. [Избавиться от маржинальных Hacks С Flexbox](#get-rid-of-margin-hacks-with-flexbox) -1. [Использование селекторов атрибутов с пустой ссылки](#use-attribute-selectors-with-empty-links) -1. [Стиль "по умолчанию" ссылки](#style-default-links) -1. [Последовательная Вертикальный ритм](#consistent-vertical-rhythm) -1. [Внутренние коробки Соотношение](#intrinsic-ratio-boxes) -1. [Стиль изображения разорванные](#style-broken-images) -1. [Используйте `rem` для глобального Калибровке; Используйте `em` для локального Калибровке](#use-rem-for-global-sizing-use-em-for-local-sizing) -1. [Скрыть автозапуск видео, которые не Приглушенный](#hide-autoplay-videos-that-arent-muted) -1. [Использование `:root` для гибкого типа](#use-root-for-flexible-type) +## Профессиональные советы + +1. [Используйте `:not()` для добавления / удаления границ в меню навигации](#use-not-to-applyunapply-borders-on-navigation) +1. [Добавьте `line-height` в `body`](#add-line-height-to-body) +1. [Выровнять все по вертикали](#vertically-center-anything) +1. [Списки, разделенные запятыми](#comma-separated-lists) +1. [Выбирайте элементы с использованием отрицательных значений в `пth-child`](#select-items-using-negative-nth-child) +1. [Используйте SVG для значков](#use-svg-for-icons) +1. [Используйте селектор "Лоботомированная сова"](#use-the-lobotomized-owl-selector) +1. [Используйте `max-height` для ползунков на чистом CSS](#use-max-height-for-pure-css-sliders) +1. [Наследуйте `box-sizing`](#inherit-box-sizing) +1. [Ячейки таблицы равной ширины](#equal-width-table-cells) +1. [Используйте Flexbox вместо margin](#get-rid-of-margin-hacks-with-flexbox) +1. [Используйте селектор атрибутов для пустых ссылок](#use-attribute-selectors-with-empty-links) +1. [Стиль "по умолчанию" для ссылок](#style-default-links) +1. [Постоянный вертикальный ритм](#consistent-vertical-rhythm) +1. [Блок с собственным отношением сторон](#intrinsic-ratio-boxes) +1. [Задайте стили для поломанныx изображений](#style-broken-images) +1. [Используйте `rem` для глобальных размеров; Используйте `em` для локальных размеров](#use-rem-for-global-sizing-use-em-for-local-sizing) +1. [Отключите автовоспроизведение видео с включенным звуком](#hide-autoplay-videos-that-arent-muted) +1. [Используйте `:root` для шрифтов](#use-root-for-flexible-type)

-### Использование `:not()` Применить / Границы на Исключить навигации +### Используйте `:not()` для добавления / удаления границ в меню навигации -Вместо того, чтобы на границе... +Вместо того, чтобы добавлять границу... ```css /* add border */ @@ -53,7 +53,7 @@ } ``` -...А затем снимая его последний элемент... +...а затем убирать её с последнего элемента... ```css /* remove border */ @@ -62,7 +62,7 @@ } ``` -...Используйте `:not()` псевдо-класс, чтобы применить только к элементам, которые вы хотите: +...используйте псевдокласс `:not()`, чтобы добавить только к нужным элементам: ```css .nav li:not(:last-child) { @@ -70,15 +70,15 @@ } ``` -Конечно, вы можете использовать `.nav li + li` или даже` .nav li:first-child ~ li`, но с `:not()` намерение очень ясно и селектор CSS определяет границу путь человека бы описать его. +Конечно, вы можете использовать `.nav li + li` или даже `.nav li:first-child ~ li`, но с `:not()` намерение понятнее, а селектор CSS определяет границу на человеческом языке. ^{[вернуться к оглавлению](#table-of-contents)}

-### Добавить `line-height` в` body` +### Добавьте `line-height` в `body` -Вам не нужно, чтобы добавить `line-height` к каждому `<р>`, ``, _et Al_. в отдельности. Вместо этого добавьте его в `body`: +Вам вовсе не требуется добавлять свойство `line-height` к каждому `<р>`, ``, _и т.д._. по отдельности. Вместо этого добавьте его в `body`: ```css body { @@ -86,15 +86,15 @@ body { } ``` -Таким образом, текстовые элементы могут наследовать от `body` легко. +Таким образом текстовые элементы легко могут наследовать свойство от `body`. ^{[вернуться к оглавлению](#table-of-contents)}

-### Вертикально-центр Все +### Выровнять все по вертикали -Нет, это не черная магия, вы действительно можете сосредоточить элементы по вертикали: +Нет, это не черная магия, вы действительно можете расположить элементы по центру по вертикали: ```css html, body { @@ -103,25 +103,25 @@ html, body { } body { - -webkit-align-items: center; - -ms-flex-align: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; } ``` -Хотите, чтобы центр что-то еще? Вертикально, горизонтально...что-нибудь, в любое время и в любом месте? CSS-трюками [хороший рецензия](https://css-tricks.com/centering-css-complete-guide/) делать все это. +Хотите разместить по центру что-то еще? Вертикально, горизонтально...что угодно, в любое время и в любом месте? У нас есть [хорошая статья](https://css-tricks.com/centering-css-complete-guide/) которая научит всему этому. -**Примечание:** Часы для некоторого [багги behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) с flexbox в IE11. +**Примечание:** Будьте осторожны с некоторыми [багами](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) flexbox в IE11. ^{[вернуться к оглавлению](#table-of-contents)}

-### списки разделенных запятыми +### Списки, разделенные запятыми -Сделать элементы списка выглядят как настоящий, разделенный запятыми список: +Сделайте список похожим на настоящий, разделенный запятыми список: ```css ul > li:not(:last-child)::after { @@ -129,47 +129,47 @@ ul > li:not(:last-child)::after { } ``` -Используйте `:not()` псевдо-класса не так запятой добавляется к последнему пункту. +Используйте псевдокласс `:not()` чтобы не добавлять запятую к последнему пункту. -**Примечание:** Этот наконечник не может быть идеальным для доступности, в частности, экран читателей. И копировать / вставить из браузера не работает с CSS-контента. Действовать с осторожностью. +**Примечание:** Этот совет не всегда даёт лучший результат, например, могут возникнуть проблемы у экранного диктора. Да и копирование / вставка из браузера не всегда работают со сгенерированным CSS контентом. Следует быть осторожным. ^{[вернуться к оглавлению](#table-of-contents)}

-### Выбор элементов с использованием отрицательных `пth-child` +### Выбирайте элементы с использованием отрицательных значений в `пth-child` -Используйте отрицательное `п-child` в CSS для выбора элементов с 1 по п. +Используйте отрицательные значения в `nth-child` в CSS для выбора элементов с 1 по n. ```css li { display: none; } -/* select items 1 through 3 and display them */ +/* выбирает и отображает элементы с 1 по 3 */ li:nth-child(-n+3) { display: block; } ``` -Или, так как вы уже узнали немного о [с помощью `:not()`](#use-not-to-applyunapply-borders-on-navigation), попробуйте: +Или, так как вы уже немного познакомились [с `:not()`](#use-not-to-applyunapply-borders-on-navigation), попробуйте: ```css -/* select items 1 through 3 and display them */ +/* выбирает и отображает элементы с 1 по 3 */ li:not(:nth-child(-n+3)) { display: none; } ``` -Хорошо, что было довольно легко. +Что же, это было довольно легко. ^{[вернуться к оглавлению](#table-of-contents)}

-### Использование SVG для значков +### Используйте SVG для значков -Там нет причин не использовать SVG для значков: +Нет ни одной причины, чтобы не использовать SVG для значков: ```css .logo { @@ -177,9 +177,9 @@ li:not(:nth-child(-n+3)) { } ``` -SVG хорошо масштабируется для всех типов разрешения и поддерживается во всех браузерах [вернуться к IE9](http://caniuse.com/#search=svg). Так угробить ваш .png, .jpg или .gif-Jif-whatev файлы. +SVG хорошо масштабируется для всех разрешений и поддерживается во всех браузерах [включая IE9 и выше](http://caniuse.com/#search=svg). Так выбросите же ваши .png, .jpg или .gif-jif-что-угодно файлы. -**Примечание:** Если у вас есть SVG пиктограммами только кнопки для зрячих пользователей и SVG не удается загрузить, это поможет сохранить доступность: +**Примечание:** Если у вас есть кнопки, содержащие только SVG пиктограммы, и SVG не удается загрузить, то это поможет сохранить доступность кнопки: ```css .no-svg .icon-only:after { @@ -191,11 +191,11 @@ SVG хорошо масштабируется для всех типов раз

-### Используйте "лоботомию Сова" Selector +### Используйте селектор "Лоботомированная сова" -Это может иметь странное название, но используя универсальный селектор (`*`) с соседним селекторном одноранговых (`+`) может обеспечить мощные возможности CSS: +Название, безусловно, странное, но используя универсальный селектор (`*`) с соседним селектором (`+`), мы получаем мощное правило CSS: -``css +```css * + * {   margin-top: 1.5em; } @@ -203,15 +203,15 @@ SVG хорошо масштабируется для всех типов раз В этом примере все элементы в потоке документа, которые следуют другие элементы получат `margin-top: 1.5em`. -Более подробную информацию о селекторе "лоботомию сова", прочитать [сообщение Heydon Пикеринга](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) на *A List Apart*. +Более подробную информацию о селекторе "Лоботомированная сова", можно найти в [статье Heydon Pickering](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) на *A List Apart*. ^{[вернуться к оглавлению](#table-of-contents)}

-### Используйте `max-height` для чистого CSS Слидерс +### Используйте `max-height` для ползунков на чистом CSS -Реализация CSS только ползунки с помощью `max-height` с переливом скрытых: +Реализация ползунков на чистом CSS с помощью `max-height` и `overflow hidden`: ```css .slider { @@ -226,15 +226,15 @@ SVG хорошо масштабируется для всех типов раз } ``` -Элемент расширяется до значение `max-height` на парении и ползунок отображает в результате переполнения. +При наведении элемент расширяется до значения `max-height`, а всё что не влезло, можно прокрутить. ^{[вернуться к оглавлению](#table-of-contents)}

-### Наследование `box-sizing` +### Наследуйте `box-sizing` -Пусть `box-sizing` быть унаследованы от` html`: +Пусть `box-sizing` будет унаследован от `html`: ```css html { @@ -244,18 +244,17 @@ html { *, *:before, *:after { box-sizing: inherit; } - ``` -Это делает его легче изменить `box-sizing` в плагинов или других компонентов, которые используют другое поведение. +Так значительно проще изменять `box-sizing` в плагинах или других компонентах, которые задают иное поведение. ^{[вернуться к оглавлению](#table-of-contents)}

-### Равные Ширина ячейки таблицы +### Ячейки таблицы равной ширины -Таблицы могут быть боль, чтобы работать с таким попробуйте использовать `table-layout: fixed` держать клетки при одинаковой ширины: +Иногда работа с таблицами приносит боль, в таких случаях попробуйте задать `table-layout: fixed` чтобы ячейки были одинаковой ширины: ```css .calendar { @@ -263,15 +262,15 @@ html { } ``` -Безболезненное макеты таблиц. +Даешь макеты таблиц без боли! ^{[вернуться к оглавлению](#table-of-contents)}

-### Избавиться от маржинальных Hacks С Flexbox +### Используйте Flexbox вместо margin -При работе с желобами колонок вы можете избавиться от `пth,` `first-` и `last-child` взломы с помощью `space-between` свойство flexbox в: +При работе с пробелами между колонок вы можете избавиться от псевдоклассов `пth,` `first-` и `last-child` воспользовавшись свойством flexbox `space-between`: ```css .list { @@ -284,15 +283,15 @@ html { } ``` -Теперь столбец желобов всегда появляются равномерно разнесены. +Теперь пробелы между колонками будут одного размера. ^{[вернуться к оглавлению](#table-of-contents)}

-### Использование селекторов атрибутов с пустыми Ссылки +### Используйте селектор атрибутов для пустых ссылок -Отображать ссылки, когда `` элемент не имеет текстового значения, но `href` атрибут есть ссылка: +Отображайте ссылки, когда элемент `` пустой, но есть ссылка в атрибуте `href`: ```css a[href^="http"]:empty::before { @@ -306,9 +305,9 @@ a[href^="http"]:empty::before {

-### Стиль "по умолчанию" Ссылки +### Стиль "по умолчанию" для ссылок -Добавьте стиль "по умолчанию" ссылки: +Добавьте для ссылок стиль "по умолчанию": ```css a[href]:not([class]) { @@ -317,15 +316,15 @@ a[href]:not([class]) { } ``` -Теперь ссылки, вставленные через CMS, которая, как правило, не имеют `class` атрибут, будет иметь различие без обобщенно влияния на каскад. +Теперь ссылки, вставленные через CMS, которые, как правило, не имеют атрибута `class`, будут иметь отличительный признак без влияния на каскад. ^{[вернуться к оглавлению](#table-of-contents)}

-### Последовательная Вертикальный ритм +### Постоянный вертикальный ритм -Используйте универсальный селектор (`*`) внутри элемента, чтобы создать последовательную вертикальный ритм: +Используйте универсальный селектор (`*`) внутри элемента, чтобы создать постоянный вертикальный ритм: ```css .intro > * { @@ -333,15 +332,15 @@ a[href]:not([class]) { } ``` -В соответствии вертикальный ритм обеспечивает визуальную эстетику, которая делает гораздо более удобным для чтения контента. +Постоянный вертикальный ритм добавляет визуальную эстетику, благодаря которой читать текст гораздо проще. ^{[вернуться к оглавлению](#table-of-contents)}

-### Внутренние коробки Соотношение +### Блок с собственным отношением сторон -Для того, чтобы создать блок с собственным отношением, все, что вам нужно сделать, это применить верхний или нижний отступ к DIV: +Чтобы создать блок с собственным отношением сторон, все, что вам нужно сделать, это добавить верхний или нижний padding к DIV: ```css .container { @@ -351,7 +350,7 @@ a[href]:not([class]) { } .container div { - border: 2px dashed #ddd; + border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; @@ -360,18 +359,18 @@ a[href]:not([class]) { } ``` -Использование 20% для заполнения делает высоту параллелепипеда равной 20% от его ширины. Независимо от того, ширина окна просмотра, ребенок DIV будет держать его соотношение сторон (100% / 20% = 5: 1). +Использование padding 20% делает высоту параллелепипеда равной 20% от его ширины. Независимо от ширины окна, дочерний DIV будет сохранять соотношение сторон (100% / 20% = 5:1). ^{[вернуться к оглавлению](#table-of-contents)}

-### Стиль разорванные Изображения +### Задайте стили для поломанныx изображений -Сделайте сломанные изображения более эстетически приятны с немного CSS: +Сделайте поломанные изображения эстетически приятнее с CSS: ```css -img { +img { display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 300; @@ -383,31 +382,31 @@ img { } ``` -Теперь добавьте правила псевдо-элементы для отображения сообщения пользователя и URL-ссылки разбитого изображения: +Теперь добавьте правила псевдо-элементов для отображения сообщения пользователю и URL-ссылки поломаного изображения: ```css -img:before { - content: "We're sorry, the image below is broken :("; +img:before { + content: "Упс, изображение ниже поломалось :("; display: block; margin-bottom: 10px; } -img:after { +img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; } ``` -Подробнее о моделировании для этой модели в [Ire Aderinokun](https://github.com/ireade/) в [исходное сообщение](http://bitsofco.de/styling-broken-images/). +Подробнее об этой модели в [исходной статье](http://bitsofco.de/styling-broken-images/) [Ire Aderinokun](https://github.com/ireade/). ^{[вернуться к оглавлению](#table-of-contents)}

-### Используйте `rem` для Global Калибровке; Используйте `em` для локального Калибровке +### Используйте `rem` для глобальных размеров; Используйте `em` для локальных размеров -После установки базового размера шрифта в корневом каталоге (`html { font-size: 16px; }`), установите размер шрифта для текстовых элементов для `em`: +После установки базового размера шрифта всего проекта (`html { font-size: 16px; }`), установите размер шрифта для текстовых элементов через `em`: ```css h2 { @@ -419,7 +418,7 @@ p { } ``` -Затем установите размер шрифта для модулей до `rem`: +Затем установите размер шрифта для модулей через `rem`: ```css article { @@ -431,15 +430,15 @@ aside .module { } ``` -Теперь каждый модуль становится разобщенным и проще в стиле, более легким в обслуживании и гибкость. +Теперь каждый модуль становится разобщенным и проще в настройке, более легким в обслуживании и гибче. ^{[вернуться к оглавлению](#table-of-contents)}

-### Скрыть автозапуск видео, которые не Приглушенный +### Отключите автовоспроизведение видео с включенным звуком -Это отличный трюк для пользовательского пользователя таблицы стилей. Избегайте перегрузки пользователя со звуком из видео, которое воспроизводится автоматически при загрузке страницы. Если звук не приглушен, не показывают видео: +Это отличный трюк для пользовательских стилей. Избегайте раздражения пользователя звуком из видео, которое воспроизводится автоматически при загрузке страницы. Если звук не приглушен, то не показывайте видео: ```css video[autoplay]:not([muted]) { @@ -447,15 +446,15 @@ video[autoplay]:not([muted]) { } ``` -Еще раз, мы пользуясь помощью [`:not()`](#use-not-to-applyunapply-borders-on-navigation) псевдо-класс. +И снова мы воспользовались помощью псевдокласса [`:not()`](#use-not-to-applyunapply-borders-on-navigation). ^{[вернуться к оглавлению](#table-of-contents)}

-### Использование `: root` для гибкого типа +### Используйте `:root` для шрифтов -Размер тип шрифта в реагирующей макет должен иметь возможность регулировать с каждого видового экрана. Вы можете рассчитать размер шрифта, основанный на высоте видового экрана и ширины с помощью `:root`: +Размер шрифта должен подстраиваться под каждый возможный размер экрана. Вы можете рассчитывать размер шрифта, основываясь на высоте и ширине экрана с помощью `:root`: ```css :root { @@ -463,7 +462,7 @@ video[autoplay]:not([muted]) { } ``` -Теперь вы можете использовать `root em` блок на основе значения, рассчитанного с помощью `:root`: +Теперь вы можете использовать единицу `root em` на основе значения, рассчитанного с помощью `:root`: ```css body { @@ -476,4 +475,4 @@ body { ## Поддержка -Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11. \ No newline at end of file +Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11.