diff --git a/css/active/practice/solarrust.md b/css/active/practice/solarrust.md index d3a146d375..92120cb2f1 100644 --- a/css/active/practice/solarrust.md +++ b/css/active/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Дизайнеры и верстальщики почему-то часто забывают про тот короткий промежуток времени, когда пользователь нажал кнопку мыши, но ещё её не отпустил. И не стилизуют состояние `:active`. Но «дьявол кроется в деталях», и если в вашем интерфейсе будут продуманы даже такие небольшие элементы, то он будет создавать ощущение опрятности и заботы о пользователе. 🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: `:link` — `:visited` — `:hover` — `:active`. diff --git a/css/after/practice/ezhkov.md b/css/after/practice/ezhkov.md index 584c7eace9..3fc9ed736f 100644 --- a/css/after/practice/ezhkov.md +++ b/css/after/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Псевдоэлементы [`::before`](/css/before/) и `::after` можно использовать и для более сложной стилизации: ```html diff --git a/css/align-items/practice/solarrust.md b/css/align-items/practice/solarrust.md index 90d36c4ff7..10fdf5f321 100644 --- a/css/align-items/practice/solarrust.md +++ b/css/align-items/practice/solarrust.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если флекс-элементы выстроены в несколько колонок, то выравнивание по поперечной оси будет применяться к каждой строке отдельно. diff --git a/css/appearance/practice/ezhkov.md b/css/appearance/practice/ezhkov.md index 53de3b9258..2c614b52ae 100644 --- a/css/appearance/practice/ezhkov.md +++ b/css/appearance/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Сброс стандартного отображения элементов может быть полезным при применении пользовательских стилей к элементам форм:

diff --git a/css/attr/practice/ezhkov.md b/css/attr/practice/ezhkov.md index 6b14c1a1e8..2cf85f74b5 100644 --- a/css/attr/practice/ezhkov.md +++ b/css/attr/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Самый распространённый случай использования функции `attr()` - отображение значения атрибута `href` после текста ссылки при печати страницы на принтере. ```html diff --git a/css/attribute-selector/practice/ezhkov.md b/css/attribute-selector/practice/ezhkov.md index ac36494e7a..3f84d9c8ee 100644 --- a/css/attribute-selector/practice/ezhkov.md +++ b/css/attribute-selector/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 При помощи селектора по атрибуту круто стилизовать ссылки, основываясь на значении атрибута `href`. Можно визуально разделять ссылки, ведущие на соседние страницы сайта, и ссылки, ведущие на другие сайты: ```html diff --git a/css/background-color/practice/solarrust.md b/css/background-color/practice/solarrust.md index d0c9b10635..9f930e00d8 100644 --- a/css/background-color/practice/solarrust.md +++ b/css/background-color/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если нужна красивая кнопка (`button`), то не забудь *сбросить* фон: укажи для `background-color: transparent`. Или тот цвет фона, который нужен по дизайну. По умолчанию у всех кнопок серый фон с приветом из девяностых. 🛠 Аналогичным способом можно сделать красивые прозрачные поля ввода (`input`) в формах. diff --git a/css/background-image/practice/furtivite.md b/css/background-image/practice/furtivite.md index e4c11fa2bc..c0c5b876a4 100644 --- a/css/background-image/practice/furtivite.md +++ b/css/background-image/practice/furtivite.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Стоит понимать разницу между `

` с фоновой картинкой и, собственно, картинкой ``. У картинки можно указывать только один параметр размера: высоту или ширину, и браузер сам рассчитает второй. У блока с фоном надо указывать оба параметра. Так происходит потому, что картинка `` — это контент, под который будут подстраиваться элементы вокруг и блок-родитель, а фоновое изображение у `
` — это простой декоративный элемент. diff --git a/css/background-image/practice/solarrust.md b/css/background-image/practice/solarrust.md index af2bf3d9f3..6736ef04fc 100644 --- a/css/background-image/practice/solarrust.md +++ b/css/background-image/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если задаёшь фоновую картинку для блока с текстом, то обязательно задавай фоновый цвет. Почему это важно: если при загрузке страницы картинка будет долго загружаться или вообще не загрузится, то белый текст будет совершенно не виден. Пользователь потеряет контекст и, вероятнее всего, интерес к вашей странице. diff --git a/css/background-image/practice/vladimir.md b/css/background-image/practice/vladimir.md index 45004773b3..113d535384 100644 --- a/css/background-image/practice/vladimir.md +++ b/css/background-image/practice/vladimir.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 `backgroung-image` хорош тем, что при правильном сочетании с `background-size` может встроить фоновую картинку как угодно. Получается порой более гибко, чем обычный ``, но не стоит увлекаться этим тегом: поисковик тебе за это спасибо не скажет. Имеет смысл ставить картинку как фон только тогда, когда `` использовать невозможно. diff --git a/css/background-position/practice/solarrust.md b/css/background-position/practice/solarrust.md index 77ff47eeed..44376785d0 100644 --- a/css/background-position/practice/solarrust.md +++ b/css/background-position/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 В работе редко требуется располагать маленькие фоновые картинки в больших блоках. Сейчас принято делать красивые фоны на всю ширину. Но для любых фонов принято указывать `background-position: center` или `background-position: 50% 50%`. В качестве подстраховки от фатальной поломки вёрстки. 🛠 Можно встретить такую запись `background-position: right 20px bottom 10px;`. В этом случае отступ будет отсчитываться не от верхнего левого угла, а от указанной при помощи ключевого слова стороны. В данном случае картинка будет расположена в 20 пикселях от правого края и в 10 пикселях от нижнего края. diff --git a/css/background-repeat/practice/solarrust.md b/css/background-repeat/practice/solarrust.md index da70143deb..1fe481f5a9 100644 --- a/css/background-repeat/practice/solarrust.md +++ b/css/background-repeat/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - `background-repeat` — свойство простое. Написано повторять — повторяем фон. Написано не повторять — не повторяем. 🛠 Чаще всего в работе встречается значение свойства `background-repeat: no-repeat`. diff --git a/css/background-size/practice/solarrust.md b/css/background-size/practice/solarrust.md index 27677a155c..3f0afc772d 100644 --- a/css/background-size/practice/solarrust.md +++ b/css/background-size/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если для задания фона используется шорткат `background`, то значение для `background-size` указывается последним, после слэша `/`. Пример: `background: url('example.jpg') no-repeat center / **cover**` 🛠 Свойство `background-size` очень пригодится, если хочется сделать фон с повторяющимся элементом. Так называемым паттерном. diff --git a/css/before/practice/ezhkov.md b/css/before/practice/ezhkov.md index ade48e531b..2558ced78c 100644 --- a/css/before/practice/ezhkov.md +++ b/css/before/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Псевдоэлемент `::before` очень часто используют для стилизации нестандартных маркеров списка: ```html diff --git a/css/border-image/practice/solarrust.md b/css/border-image/practice/solarrust.md index 3f50eaba46..8a07812a5f 100644 --- a/css/border-image/practice/solarrust.md +++ b/css/border-image/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Это свойство нечасто встречается в повседневной работе, но знать о нём стоит хотя бы из уважения к истории развития веба. Раньше не существовало свойства `border-radius` и для того, чтобы создать элемент с закруглёнными краями, приходилось нарезать картинки и задавать рамку именно при помощи изображения. А закруглённые края, как на зло, были тогда в большой моде 🤯 diff --git a/css/border-radius/practice/realetive.md b/css/border-radius/practice/realetive.md index fc9e0a543b..87381ea5cf 100644 --- a/css/border-radius/practice/realetive.md +++ b/css/border-radius/practice/realetive.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если вы не уверены, что блок всегда будет квадратным, то для подстраховки можно указывать закругление в абсолютных единицах. Причём указать значение, бо́льшая чем максимальная ширина и высота блока. Например, `border-radius: 9999px`. Если в этой ситуации указывать закругление в процентах, то значение будет считаться от ширины и высоты. Что приведёт к вытягиванию блока в _яйцо_:

diff --git a/css/border-radius/practice/solarrust.md b/css/border-radius/practice/solarrust.md index 09d5de8410..0cb7ccb7f5 100644 --- a/css/border-radius/practice/solarrust.md +++ b/css/border-radius/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Самый крутой лайфхак — это круглые элементы при помощи `border-radius`. Они часто нужны для всяких лейблов на странице. ```html diff --git a/css/border/practice/solarrust.md b/css/border/practice/solarrust.md index a4366548fb..470c9e973b 100644 --- a/css/border/practice/solarrust.md +++ b/css/border/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 При помощи `border` можно рисовать различные геометрические фигуры. Например, треугольник. Для этого потребуется задать прозрачную рамку с двух сторон и непрозрачную рамку с третьей стороны. ```html diff --git a/css/box-shadow/practice/solarrust.md b/css/box-shadow/practice/solarrust.md index 3776114a82..a95762b8d0 100644 --- a/css/box-shadow/practice/solarrust.md +++ b/css/box-shadow/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 С помощью тени можно создать блок с несколькими рамками! ```html diff --git a/css/box-sizing/practice/solarrust.md b/css/box-sizing/practice/solarrust.md index 455a70b324..6b3e36078b 100644 --- a/css/box-sizing/practice/solarrust.md +++ b/css/box-sizing/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Из-за стандартного механизма расчёта размера элемента многие начинающие разработчики получают не те размеры элемента, которые ожидали. При этом есть два решения: 1. Подгонять размер элемента под желаемый, высчитывая самостоятельно, какими должны быть внутренние отступы и рамка, чтобы в итоге получился нужный размер. diff --git a/css/calc/practice/solarrust.md b/css/calc/practice/solarrust.md index a5e8370b9e..1eba2be30d 100644 --- a/css/calc/practice/solarrust.md +++ b/css/calc/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Возьмём тот же пример с тремя колонками из начала статьи. Пусть у каждой из колонок будет внешний отступ по 40px с каждой из сторон. Если зададим свойства _в лоб_, то ничего не выйдет, последний блок _падает_ на новую строку. ```html diff --git a/css/cascade/practice/realetive.md b/css/cascade/practice/realetive.md index c6bb80e2e9..8ffd1eec0f 100644 --- a/css/cascade/practice/realetive.md +++ b/css/cascade/practice/realetive.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Понимание каскада — один из ключевых моментов в понимании работы CSS. С опытом вы научитесь так эффективно писать селекторы и группировать стили, что сам уровень каскада будет минимальным — это ускоряет «чтение» кода и упрощает поддержку. Ну и в идеале — исключить необходимость использования `!important`. diff --git a/css/checked/practice/solarrust.md b/css/checked/practice/solarrust.md index 7e75798c74..96ca5ebc03 100644 --- a/css/checked/practice/solarrust.md +++ b/css/checked/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Очень часто этот класс пригождается, когда вы делаете какой-то нестандартный элемент управления на основе чекбокса или радиокнопок. В этом случае стандартные элементы скрываются, но их поведение, в частности псевдокласс `:checked`, позволяет что-то переключать вообще без JavaScript. Например, вот это выпадающее меню реализовано на чистом HTML с использованием трюка в чекбоксом: diff --git a/css/class-selector/practice/ezhkov.md b/css/class-selector/practice/ezhkov.md index a2f8d083ed..de3e1762f8 100644 --- a/css/class-selector/practice/ezhkov.md +++ b/css/class-selector/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Селектор по классу является основным селектором для стилизации любой веб-страницы. Благодаря тому, что одному элементу можно задать несколько классов, а нескольким элементам — один и тот же класс, мы получаем очень гибкий способ стилизации страниц любой сложности. Например, мы можем уточнить один селектор по классу другим: diff --git a/css/color/practice/solarrust.md b/css/color/practice/solarrust.md index 97e86c4c67..4efebfc221 100644 --- a/css/color/practice/solarrust.md +++ b/css/color/practice/solarrust.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Цвет текста — наследуемое свойство. Если на странице преобладает какой-то цвет, то его можно задать для селектора `html`. В этот цвет будет автоматически окрашен весь текст на странице. diff --git a/css/combined-selectors/practice/realetive.md b/css/combined-selectors/practice/realetive.md index 10eb9ae5be..d2436e50a6 100644 --- a/css/combined-selectors/practice/realetive.md +++ b/css/combined-selectors/practice/realetive.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Лучше записывать селекторы по одному на строчку — так их легче читать и редактировать: ```css diff --git a/css/comments/practice/furtivite.md b/css/comments/practice/furtivite.md index 23f848da3b..d3faaed069 100644 --- a/css/comments/practice/furtivite.md +++ b/css/comments/practice/furtivite.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Иногда в процессе разработки нужно быстро проверять какую-то гипотезу. Не хочется сгоряча удалять блок кода, вымученного кровью и потом. Просто закомментируй подозрительные строки. Если причина не в них, то раскомментируешь. Удалить всегда успеешь. 🛠 Удаляй все закомментированные свойства перед деплоем — публикацией проекта. Комментарии — утилитарная штука. Они полезны, но сильно загружают код и затрудняют его чтение. Если это не информационные комментарии, а следы экспериментов — удаляй их. diff --git a/css/comments/practice/solarrust.md b/css/comments/practice/solarrust.md index f0d2b56642..286320468a 100644 --- a/css/comments/practice/solarrust.md +++ b/css/comments/practice/solarrust.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Как всегда, стоит удалить все те комментарии, которые не должен видеть заказчик или пользователь конечного продукта, перед деплоем. Все, что неактуально, решено, касается внутренних процессов в вашей компании и не будет использоваться в дальнейшем — смело под нож! diff --git a/css/content/practice/ezhkov.md b/css/content/practice/ezhkov.md index 0cd3f8c66d..4146022eff 100644 --- a/css/content/practice/ezhkov.md +++ b/css/content/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Свойство `content` со значением `counter()` активно применяется в случаях, когда нужно расставить автоматическую нумерацию элементов, не относящихся к спискам: ```html diff --git a/css/css-rule/practice/solarrust.md b/css/css-rule/practice/solarrust.md index d3c037df59..6f39fa8667 100644 --- a/css/css-rule/practice/solarrust.md +++ b/css/css-rule/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Браузер прочитает CSS как бы вы его не оформили. Хоть в одну строку. Но для простоты чтения и редактирования принято соблюдать простые правила оформления: - Если перечисляете несколько селекторов, ставьте каждый из них на новую строку. diff --git a/css/cursor/practice/solarrust.md b/css/cursor/practice/solarrust.md index 56dc8f754f..0d6d61732d 100644 --- a/css/cursor/practice/solarrust.md +++ b/css/cursor/practice/solarrust.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Чаще всего это свойство пригождается при вёрстке кнопок. По умолчанию браузер не меняет внешний вид курсора при наведении мыши на кнопку. Поэтому, если на кнопку можно нажать, ей следует прописать `cursor: pointer`, чтобы пользователь точно понял, что с элементом можно взаимодействовать. diff --git a/css/custom-properties/practice/ezhkov.md b/css/custom-properties/practice/ezhkov.md index a3083cbade..f6d43c241e 100644 --- a/css/custom-properties/practice/ezhkov.md +++ b/css/custom-properties/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Можно эффективно использовать кастомные свойства при разработке дизайн-системы:

diff --git a/css/disabled-enabled/practice/solarrust.md b/css/disabled-enabled/practice/solarrust.md index f10e2ea008..8d059f6488 100644 --- a/css/disabled-enabled/practice/solarrust.md +++ b/css/disabled-enabled/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 «Выключать» взаимодействие с кнопками или другими элементами формы удобнее именно атрибутом `disabled`, потому что он сразу же отключает возможность нажать на этот элемент без дополнительных стилей. И, ориентируясь на него, гораздо удобнее прописывать стили для неактивных элементов, используя псевдокласс `disabled`. Код для кнопки из моего последнего проекта: diff --git a/css/display/practice/solarrust.md b/css/display/practice/solarrust.md index a8eb8c2292..635917edbb 100644 --- a/css/display/practice/solarrust.md +++ b/css/display/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если пишешь `display: inline-block` с целью выстроить несколько блоков в строку, то обязательно указывай для родительского элемента `font-size: 0`. В противном случае между инлайн-блочными элементами будут небольшие отступы, как между словами — пробелы. 🛠 Многие начинающие разработчики сталкиваются с проблемой при выводе иконок соцсетей фоном для ссылок. Ссылки изначально являются строчными элементами. Для изменения размера ссылки и для возможности задать ей фон её, ссылку, нужно сделать блочной (`display: block`) или строчно-блочной (`display: inline-block`). diff --git a/css/empty/practice/ezhkov.md b/css/empty/practice/ezhkov.md index f57bfb1001..54cc185f8f 100644 --- a/css/empty/practice/ezhkov.md +++ b/css/empty/practice/ezhkov.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 В реальных проектах этот селектор сильно помогает, когда нет возможности управлять элементом, но точно знаешь, что иногда он может быть пустым. Использование псевдокласса `:empty` позволяет убрать лишние отступы или рамки, которые могут быть у пустого элемента. diff --git a/css/fill/practice/realetive.md b/css/fill/practice/realetive.md index 2ab287ec5e..f497b255cd 100644 --- a/css/fill/practice/realetive.md +++ b/css/fill/practice/realetive.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 CSS-свойство `fill` влияет на цвет заливки только при вставке всего SVG-кода непосредственно в HTML — SVG-изображение, вставленное через SVG-шрифт, `` / `` или `background` / `background-image` не «увидит» его. diff --git a/css/first-class__second-class/practice/solarrust.md b/css/first-class__second-class/practice/solarrust.md index 4b64bb8537..7d73591eed 100644 --- a/css/first-class__second-class/practice/solarrust.md +++ b/css/first-class__second-class/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Начинающие разработчики часто допускают ошибку при перечислении селекторов: по их логике первая часть составного селектора не требует повторения и её можно указать один раз в начале, а затем перечислить через запятую несколько условно вторых частей составного селектора. Пример: diff --git a/css/first-class_second-class/practice/solarrust.md b/css/first-class_second-class/practice/solarrust.md index bc81361c16..f0a67dddfc 100644 --- a/css/first-class_second-class/practice/solarrust.md +++ b/css/first-class_second-class/practice/solarrust.md @@ -1,8 +1,2 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Можно перечислять сколько угодно классов, спускаясь ниже и ниже по дереву вложенности элементов, но селекторы с более чем двумя составляющими сложно читать. И если нужен более сложный селектор, то это повод пересмотреть HTML-разметку и проверить её целесообразность. diff --git a/css/flex-direction/practice/solarrust.md b/css/flex-direction/practice/solarrust.md index e34ad8034c..46d3082839 100644 --- a/css/flex-direction/practice/solarrust.md +++ b/css/flex-direction/practice/solarrust.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Помните, что блочные элементы по умолчанию выстраиваются друг под другом, каждый в новом ряду. Если вы написали `display: flex`, а потом `flex-direction: column`, и при этом никаких других возможностей флексбоксов не используете, то убедитесь, точно ли вам тут нужен флекс-контейнер? diff --git a/css/flex-shrink/practice/solarrust.md b/css/flex-shrink/practice/solarrust.md index 104ef9f5b4..35ac52d0b0 100644 --- a/css/flex-shrink/practice/solarrust.md +++ b/css/flex-shrink/practice/solarrust.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Чаще всего в работе используется `flex-shrink: 0`. Это нужно чтобы элементы не сжимались, игнорируя заданные размеры. diff --git a/css/flexbox-guide/practice/furtivite.md b/css/flexbox-guide/practice/furtivite.md index 8d0f669752..e503c68144 100644 --- a/css/flexbox-guide/practice/furtivite.md +++ b/css/flexbox-guide/practice/furtivite.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - Во время работы стоит быть особенно внимательным со свойствами, которые меняют внешнее расположение элементов внутри flex-контейнера: например `flex-direction: row-reverse` или `column-reverse`, а также со свойством `order`. Дело в том, что контент меняет своё расположение только визуально, CSS-свойствами, а значит, в теле сайта элементы окажутся в том порядке, в котором вы их расположили в HTML-файле. Позаботьтесь о людях, которые пользуются скринридерами, и не меняйте положение элементов на странице CSS-свойствами без крайней необходимости. diff --git a/css/flexbox-guide/practice/solarrust.md b/css/flexbox-guide/practice/solarrust.md index 01bd4796ce..69db74478b 100644 --- a/css/flexbox-guide/practice/solarrust.md +++ b/css/flexbox-guide/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Раньше было затруднительно прижать футер к нижнему краю экрана вне зависимости от количества контента на странице. Приходилось идти на всякие ухищрения и городить костыли. Теперь с появлением флексов всё стало просто. Оборачиваем всю страницу в блок, делаем его флекс-контейнером, внутрь вкладываем хэдер, мейн и футер. Родителю задаём `flex-direction: column` чтобы блоки встали друг под другом, а не в ряд, и `min-height: 100vh`, чтобы он занимал как минимум всю высоту экрана. Мейну задаём `flex: 1`, и вуаля! Центральный блок страницы будет всегда растягиваться на всё доступное свободное пространство. Из-за этого футер всегда будет прижиматься к нижнему краю страницы. При этом, если контента в мейне будет больше чем на один экран, то он растянется и подстроится, ничего не сломается. diff --git a/css/focus/practice/solarrust.md b/css/focus/practice/solarrust.md index 580a198251..4ed185eb4f 100644 --- a/css/focus/practice/solarrust.md +++ b/css/focus/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 В какой-то момент разработчики так разозлились на обводку, появляющуюся при фокусе, что начали её полностью убирать, переопределяя стандартные стили. Какое-то время это было очень распространено, но довольно быстро пришло осознание, что тем самым мы портим опыт пользования интернетом — как минимум, некоторым людям. Например, на момент написания этой статьи на сайте «Алиэкспресс» отключена обводка на интерактивных элементах. И если вы попробуете походить по сайту, используя клавиатуру, то не сможете понять, где находится ваш курсор в данный момент. Не стоит думать, что абсолютно все, кто попадает в интернет, используют мышку для навигации. Есть люди с временно или постоянно ограниченными возможностями, которым гораздо комфортнее использовать для навигации по сайту клавиатуру. И они должны видеть, где именно в данный момент находится курсор. diff --git a/css/font-face/practice/solarrust.md b/css/font-face/practice/solarrust.md index f47f63a054..804df766cf 100644 --- a/css/font-face/practice/solarrust.md +++ b/css/font-face/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Дизайнеры очень любят всякие разные нестандартные шрифты. Если видите в макете несистемный шрифт — просите файл на шрифт или ссылку у дизайнера. Часто происходит так, что дизайнер отдаёт только ttf-файл, потому что для дизайнерских программ его достаточно. В этом случае вам нужно будет конвертировать шрифт в остальные форматы. diff --git a/css/font-family/practice/solarrust.md b/css/font-family/practice/solarrust.md index b79439ff23..ba8c1a00d0 100644 --- a/css/font-family/practice/solarrust.md +++ b/css/font-family/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если в макете используется один из нестандартных шрифтов, то вам потребуется подключить его в свою вёрстку при помощи свойства `@font-face`. 🛠 Всегда указывай несколько вариантов шрифтов в следующем порядке: diff --git a/css/font-family/practice/vladimir.md b/css/font-family/practice/vladimir.md index 6641f60d32..93c56a0056 100644 --- a/css/font-family/practice/vladimir.md +++ b/css/font-family/practice/vladimir.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Важно, чтобы было указано больше одного шрифта и всегда в конце стояло семейство, как последняя надежда. А то обязательно найдётся кто-то, у которого ни один из шрифтов не отображается. То есть: `Font-family: 'Open Sans'` — не правильно `Font-family: 'Open Sans', Arial, sans-serif;` — правильно diff --git a/css/font-size/practice/solarrust.md b/css/font-size/practice/solarrust.md index 847e35b3a7..4e2e53e152 100644 --- a/css/font-size/practice/solarrust.md +++ b/css/font-size/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Для использования относительных единиц измерения — `em`, `rem` или проценты — нужно чётко понимать, от чего будет отсчитываться 1 единица. На начальном этапе я бы не советовала использовать эти единицы для размера шрифта. Велика вероятность, что ты запутаешься в вычислениях. 🛠 Если в вёрстке используются строчно-блочные (`inline-block`) элементы, то не забывай задавать родителю свойство `font-size` со значением `0`. diff --git a/css/font-size/practice/vladimir.md b/css/font-size/practice/vladimir.md index d33d23a8b7..54dfc3aef4 100644 --- a/css/font-size/practice/vladimir.md +++ b/css/font-size/practice/vladimir.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Размер шрифта очень удобно указывать в пикселях. Но есть один косяк: шрифты хранятся в векторном формате, а значит родной размер для них — относительный. И если у твоего сайта много разных шрифтов и нагруженный фронт, то в конце концов будет заметно, что шрифты в пикселях тормозят больше, чем в `em` или процентах. diff --git a/css/font-style/practice/grachev.md b/css/font-style/practice/grachev.md index 3fa2251b36..256d76c8c5 100644 --- a/css/font-style/practice/grachev.md +++ b/css/font-style/practice/grachev.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Не стоит писать большие части текста курсивом — это сильно усложняет чтение. 🛠 Браузер Internet Explorer до версии 7.0 включительно не поддерживает значение `inherit`. diff --git a/css/font-weight/practice/solarrust.md b/css/font-weight/practice/solarrust.md index a0962e14fc..da501b2103 100644 --- a/css/font-weight/practice/solarrust.md +++ b/css/font-weight/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Большинство современных шрифтов имеет полный набор начертаний. Для более _тонкого_ управления отображением шрифта используются как раз таки цифровые значения для свойства `font-weight`. 🛠 Относительные значения `bolder` и `lighter` не используются почти никогда. Причина в том, что они относительные. Как итог если меняется вес шрифта родительского элемента — меняется вес шрифта ребёнка. Но это, чаще всего, не то что нужно. Совет: используй всегда абсолютный вес шрифта. diff --git a/css/font-weight/practice/vladimir.md b/css/font-weight/practice/vladimir.md index 31753e165d..b3af41de77 100644 --- a/css/font-weight/practice/vladimir.md +++ b/css/font-weight/practice/vladimir.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Как-то исторически сложилось, что мне проще указывать `font-weight` в цифрах, а не использовать названия а-ля `semi-bold`. Поэтому по умолчанию — 400, для жирных — 700, для тонких — 300 или 100. Я призываю всех так писать: цифры всегда понятнее слов. diff --git a/css/grid-guide/practice/solarrust.md b/css/grid-guide/practice/solarrust.md index c2f8ab17eb..371a7eb62d 100644 --- a/css/grid-guide/practice/solarrust.md +++ b/css/grid-guide/practice/solarrust.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Самый удобный инструмент для инспектирования вёрстки на гридах на сегодня в браузере FireFox! Даже если в остальное время вы сидите в другом браузере, то на время вёрстки я настоятельно советую вам переключиться. Ничего удобнее человечество ещё не придумало 🤩 diff --git a/css/grid-template/practice/solarrust.md b/css/grid-template/practice/solarrust.md index 2adf4de106..4bd0206607 100644 --- a/css/grid-template/practice/solarrust.md +++ b/css/grid-template/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 В этом же свойстве можно задавать значение и для `grid-template-areas`. Но, на мой взгляд, тогда код превращается в кашу и становится совершенно нечитабельным. Лучше всё же использовать это свойство отдельно: Лучше так? diff --git a/css/grid/practice/solarrust.md b/css/grid/practice/solarrust.md index 75c3b19ce3..a7b6bc3c44 100644 --- a/css/grid/practice/solarrust.md +++ b/css/grid/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Возможны и более сложные комбинации значений этого свойства. Например, можно сразу задать имена областям: ```css diff --git a/css/has/practice/realetive.md b/css/has/practice/realetive.md index 747a9cbb13..8ca4110342 100644 --- a/css/has/practice/realetive.md +++ b/css/has/practice/realetive.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 До появления псевдокласса `:has()` единственной возможностью управлять проверкой вложенного селектора был JavaScript. diff --git a/css/height/practice/solarrust.md b/css/height/practice/solarrust.md index 2abe81f34f..045636e557 100644 --- a/css/height/practice/solarrust.md +++ b/css/height/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Чаще всего не требуется задавать фиксированную высоту блокам с контентом. Можно обойтись внутренними отступами (`padding`). Вернёмся к примеру, который разбирали выше. Можно совсем убрать свойство `height` и заменить его на `padding: 25px`. Теперь, если контента внутри блока нет, то внутренние отступы сверху (25 пикселей) и снизу (25 пикселей) будут растягивать элемент на 50 пикселей. diff --git a/css/hover/practice/solarrust.md b/css/hover/practice/solarrust.md index 4bb6c66e3f..f9fe5ad18f 100644 --- a/css/hover/practice/solarrust.md +++ b/css/hover/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Пользователь может зайти на ваш сайт не только с десктопа, где есть мышка и её можно на что-то навести, но и с планшета или телефона, где мышкой выступает палец, а его нельзя на что-то навести, им можно только тапнуть. Хорошая практика — сбрасывать `:hover` стили для тач-устройств. Иначе при нажатии на какой-то элемент ховер-стили будут _залипать_ — телефон не знает, когда вы отводите палец в сторону. diff --git a/css/import/practice/solarrust.md b/css/import/practice/solarrust.md index 0a0e5d790c..68219c534c 100644 --- a/css/import/practice/solarrust.md +++ b/css/import/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Кроме импорта файлов внутри проекта можно встретить использование этой директивы для импорта шрифтов с сайта Google Fonts. Это один из предложенных на их сайте вариантов подключения. ```css diff --git a/css/in-range-out-of-range/practice/ezhkov.md b/css/in-range-out-of-range/practice/ezhkov.md index 7e97991d81..00aed5d223 100644 --- a/css/in-range-out-of-range/practice/ezhkov.md +++ b/css/in-range-out-of-range/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Псевдоклассы `:in-range` и `:out-of-range` можно использовать в более сложных селекторах, чтобы, например, показать ошибку ввода:

diff --git a/css/inheritance/practice/realetive.md b/css/inheritance/practice/realetive.md index 74d9181aa4..778744c470 100644 --- a/css/inheritance/practice/realetive.md +++ b/css/inheritance/practice/realetive.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Удобно делать всякие трюки, используя `currentColor`. Мы не меняем явно цвет рамки по наведению курсора, но он меняется вслед за `color`. ```html diff --git a/css/invalid-valid/practice/ezhkov.md b/css/invalid-valid/practice/ezhkov.md index 2d393b8abe..19c773e4de 100644 --- a/css/invalid-valid/practice/ezhkov.md +++ b/css/invalid-valid/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 В настоящий момент стили для псевдокласса `:invalid` применяются к невалидному полю сразу же, что не всегда удобно. Было бы круто, если бы валидация включалась, только если пользователь начал что-то вводить, но, к сожалению, пока нет такой возможности «из коробки». В будущих версиях спецификации CSS должен появиться псевдокласс `:user-invalid`, который задуман как раз для целей, описанных выше. То есть, он будет применяться, например, к полю ввода только после того, как пользователь начал там что-то писать. diff --git a/css/justify-content/practice/solarrust.md b/css/justify-content/practice/solarrust.md index 23f9f23a22..66ab279e7b 100644 --- a/css/justify-content/practice/solarrust.md +++ b/css/justify-content/practice/solarrust.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если внутри флекс-контейнера всего два элемента, то удобно использовать `justify-content: space-between`, чтобы прижать их к противоположным краям родителя. Это имитирует поведение свойства `float`, но без последствий. diff --git a/css/letter-spacing/practice/solarrust.md b/css/letter-spacing/practice/solarrust.md index 6ee57bed9b..00bce856c2 100644 --- a/css/letter-spacing/practice/solarrust.md +++ b/css/letter-spacing/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 При вёрстке макета, нарисованного в Фотошоп, у вас могут возникнуть проблемы с `letter-spacing`. Причина в том, что в Фотошопе используется другая логика для расчёта межбуквенного расстояния. ![Межбуквенное расстояние в Фотошопе](../images/letter-spacing.png) diff --git a/css/letter-spacing/practice/vladimir.md b/css/letter-spacing/practice/vladimir.md index a498fc0b78..0a9d49b38f 100644 --- a/css/letter-spacing/practice/vladimir.md +++ b/css/letter-spacing/practice/vladimir.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Свойство `letter-spacing` хорошо бы прописать для всех элементов, потому что браузеры могут делать разные расстояния между знаками: тогда текст начинает плыть. Особенно Safari, этим грешит. То есть делаем прямо так: diff --git a/css/line-height/practice/solarrust.md b/css/line-height/practice/solarrust.md index 8d668b6a58..a6b192de34 100644 --- a/css/line-height/practice/solarrust.md +++ b/css/line-height/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если при вёрстке макета ты видишь межстрочное расстояние, заданное в пикселях, то не стоит переносить его в точности. В случае, если размер шрифта элемента изменится, то абсолютно заданное межстрочное расстояние не подстроится. А хотелось бы больше гибкости. Используй следующую функцию для расчёта относительного интерлиньяжа: diff --git a/css/line-height/practice/vladimir.md b/css/line-height/practice/vladimir.md index 8ace1b195c..aca179659d 100644 --- a/css/line-height/practice/vladimir.md +++ b/css/line-height/practice/vladimir.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Часто новички сталкиваются с такой темой: например, надо зашить ссылку в картинку, типа логотип в шапке сайта, который при нажатии ведёт на главную. По умолчанию под картинкой появляется небольшой отступ, похожий на `padding-bottom`, хотя на самом деле отступы равны нулю. Если поставить к картинке и тегу `` `{line-height: 0;}`, то всё встанет на свои места, и картинка будет без отступов снизу. 🛠 Когда ты юзаешь иконки в виде текста (а-ля [Fontello](http://fontello.com/)), часто бывает что нужно какой-то квадратный блок сделать с иконкой внутри. Ты делаешь по стандарту, и у тебя квадрат не получается, а в разных браузерах он вообще разной высоты. diff --git a/css/linear-gradient/practice/ezhkov.md b/css/linear-gradient/practice/ezhkov.md index 401d750b03..53be3b69c2 100644 --- a/css/linear-gradient/practice/ezhkov.md +++ b/css/linear-gradient/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Используя возможность резких переходов между цветами, можно генерировать различные паттерны при помощи линейного градиента. Яркий пример — разлинованный под школьную тетрадь фон: diff --git a/css/linear-gradient/practice/solarrust.md b/css/linear-gradient/practice/solarrust.md index 9eccf65f27..4381ac56cf 100644 --- a/css/linear-gradient/practice/solarrust.md +++ b/css/linear-gradient/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если нужно создать линейный градиент, уходящий в прозрачность, то вы неминуемо столкнётесь с проблемой в Safari и iOS. Во всех браузерах ключевое слово `transparent` отрабатывает ожидаемо, плавно уводя градиент в прозрачность. А в Safari и iOS из-за особенностей реализации именно этого ключевого слова градиент будет уходить в грязный чёрный. ```css diff --git a/css/link/practice/realetive.md b/css/link/practice/realetive.md index 3258dcf5c3..029f05cea1 100644 --- a/css/link/practice/realetive.md +++ b/css/link/practice/realetive.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Классические ссылки — не стилизованные элементы меню, ссылки-кнопки, а просто ссылки в тексте — большая редкость, встречающаяся в основном в статьях и околонаучных документах типа Википедии. Но правильная стилизация посещённых ссылок может здорово помочь в навигации по таким документам. diff --git a/css/list-style-position/practice/ezhkov.md b/css/list-style-position/practice/ezhkov.md index dfdce3f279..d2d0e04d77 100644 --- a/css/list-style-position/practice/ezhkov.md +++ b/css/list-style-position/practice/ezhkov.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 В реальных проектах свойство используется очень редко, потому что работает только с «родными» маркерами списков. Дизайнеры в макетах повсеместно рисуют стилизованные маркеры, которые сверстать можно только с использованием псевдоэлементов [`::before`](/css/before/). diff --git a/css/margin/practice/furtivite.md b/css/margin/practice/furtivite.md index 69b320bd71..7c6ec5ecb2 100644 --- a/css/margin/practice/furtivite.md +++ b/css/margin/practice/furtivite.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Чтобы упростить работу с лучше всего использовать и `padding` (для внутренних отступов внутри блока) и `margin` для внешних отступов элемента внутри блока. Например, если у вас указаны корректные `padding`-отступы, то вам не придётся использовать `margin-top` для отступа от верхнего края для первого элемента. После того, как вы задали внутренние отступы, всегда используйте один и тот же `margin` для вертикальных отступов. Отступ сверху из-за установленных внутренних `padding`-отступов у блока вам больше не нужен, поэтому пользуйтесь `margin-bottom` для отступов между элементами. Вы же пишете сверху вниз, правда? Тогда вам всегда будет понятно, почему тот или иной элемент находятся не там, где вам хочется. diff --git a/css/margin/practice/grachev.md b/css/margin/practice/grachev.md index bb536d1adc..69b9805ef3 100644 --- a/css/margin/practice/grachev.md +++ b/css/margin/practice/grachev.md @@ -1,8 +1,2 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 `margin` тот ещё непредсказуемый чёрт. Слева и справа работает адекватно, даже в строчных элементах. Но стоит сделать `margin-top` — так будь готов к сюрпризам. К примеру, все строчные элементы, то есть `display: inline`, вообще не учтут твой отступ сверху и снизу. Блочные тоже могут сработать, а могут и нет: в зависимости от родителя. Единственное, где в `margin-top` и `margin-bottom` можно быть уверенным — это в элементах с `position: absolute` и `position: fixed` — уж там `margin` точно не сможет тебя обмануть. diff --git a/css/margin/practice/solarrust.md b/css/margin/practice/solarrust.md index b5a244d050..d37d033732 100644 --- a/css/margin/practice/solarrust.md +++ b/css/margin/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Очень частый приём, который используется в вёрстке — выравнивание блочного элемента по центру родителя при помощи `margin: 0 auto`. Предположим, есть основная колонка контента, которая должна находится по центру окна браузера. Для этого потребуется ограничить ширину колонки. Например, задать `width: 80%`. Зачем? Потому что все блочные элементы по умолчанию имеют ширину 100%. Если не будет _свободного места_, то отцентрировать элемент не получится. diff --git a/css/media/practice/lenaryan.md b/css/media/practice/lenaryan.md index 82b5e3bb46..d5eb2cad13 100644 --- a/css/media/practice/lenaryan.md +++ b/css/media/practice/lenaryan.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 медиавыражения можно вкладывать в медиавыражения и другие директивы: ```css diff --git a/css/not/practice/solarrust.md b/css/not/practice/solarrust.md index b99cad9af1..e290b6811c 100644 --- a/css/not/practice/solarrust.md +++ b/css/not/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 После того, как поддержка этого псевдокласса была внедрена во все браузеры, я стала использовать его повсеместно. Гораздо удобнее написать один селектор, чем два блока кода для такой тривиальной задачи, как сброс последнего отступа или выбор элемента за исключением какого-то класса. Из последнего: мне нужно было стилизовать все поля ввода, кроме тех, что были скрыты (_иногда в форму добавляют скрытые поля, чтобы отправить вместе с данными пользователя служебные данные_). Вместо того, чтобы писать составной селектор, выбирая отдельные поля или выдумывать отдельный класс только для тех полей, которые видны или не видны, я написала селектор `input:not([hidden="true"])`, и интерпретатор применил нужные мне стили только к тем инпутам, у которых нет атрибута `hidden`. diff --git a/css/nth-of-type/practice/realetive.md b/css/nth-of-type/practice/realetive.md index a0efd27085..77775417a2 100644 --- a/css/nth-of-type/practice/realetive.md +++ b/css/nth-of-type/practice/realetive.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Эти псевдоклассы используются реже, чем [ Псевдоклассы группы child`](/css/child), но иногда нужно выбрать именно из списка _однотипных_ элементов, а не из всех детей своего родителя. diff --git a/css/object-fit/practice/solarrust.md b/css/object-fit/practice/solarrust.md index b8f31674a3..53ba113c40 100644 --- a/css/object-fit/practice/solarrust.md +++ b/css/object-fit/practice/solarrust.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Самое полезное из всех доступных значений, на мой взгляд, значение `cover`. Оно позволяет имитировать поведение фонового изображения для элементов `` или `

diff --git a/css/pseudoelements/practice/solarrust.md b/css/pseudoelements/practice/solarrust.md index 9cb021bde2..3e3a242b9b 100644 --- a/css/pseudoelements/practice/solarrust.md +++ b/css/pseudoelements/practice/solarrust.md @@ -1,10 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - - 🛠 Очень интересный и полезный трюк — задавать кастомный счётчик спискам. Бывает необходимость добавить скобки после цифры вместо стандартной точки. ```html diff --git a/css/quotes/practice/solarrust.md b/css/quotes/practice/solarrust.md index 3d1981f60e..b8fae6a489 100644 --- a/css/quotes/practice/solarrust.md +++ b/css/quotes/practice/solarrust.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Это свойство может быть очень полезно когда вы разрабатываете большой сайт, который будут наполнять контентом другие люди. Чтобы созданный дизайн соблюдался во всех мелочах вы можете принудительно прописать тот вид кавычек, который будет расставляться в текстах. Но при других обстоятельствах это свойство редко пригождается 🤷‍♀️ diff --git a/css/radial-gradient/practice/ezhkov.md b/css/radial-gradient/practice/ezhkov.md index 02ae805c9c..d04109ffe0 100644 --- a/css/radial-gradient/practice/ezhkov.md +++ b/css/radial-gradient/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: -- practice -permalink: false ---- - 🛠 Радиальным градиентам можно задавать резкие переходы между цветами. Совместно со свойством `background-repeat` можно генерировать различные паттерны: diff --git a/css/rem-em/practice/realetive.md b/css/rem-em/practice/realetive.md index 8ee4af297b..252da64825 100644 --- a/css/rem-em/practice/realetive.md +++ b/css/rem-em/practice/realetive.md @@ -1,8 +1 @@ ---- -tags: - - practice -permalink: false ---- - - 🛠 Если размер страницы изменён глобально (через настройки операционной системы) или с помощью `Ctrl + '+'` / `Ctrl + '-'`, значение шрифта в `` также пропорционально изменится (даже если было задано явно). Если при вёрстке вы сможете найти закономерности размеров относительно размера шрифта (даже внешние `margin`-отступы или внутренние `padding`-отступы и высоты-ширины `width` / `height`), то такое масштабирование будет происходить более пропорционально. diff --git a/css/rem-em/practice/solarrust.md b/css/rem-em/practice/solarrust.md index dc46fda770..f77a34c861 100644 --- a/css/rem-em/practice/solarrust.md +++ b/css/rem-em/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 При помощи относительных единиц шрифта можно классно верстать адаптивные сайты. Например, если в мобильном и десктопном макетах пропорции одинаковые, меняются только фактические размеры, то можно сделать, например, так: ```css diff --git a/css/required/practice/ezhkov.md b/css/required/practice/ezhkov.md index ff912698a3..80178d9754 100644 --- a/css/required/practice/ezhkov.md +++ b/css/required/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Как правило, в реальных формах обязательные к заполнению поля выделяют не так явно, как в примерах выше. Обычно после текстового описания обязательного поля ставят звёздочку. В примере ниже, кроме того, показано, как можно стилизовать подсказку к полю. ```html diff --git a/css/sticky/practice/lenaryan.md b/css/sticky/practice/lenaryan.md index 9012c0bcbb..e346449f12 100644 --- a/css/sticky/practice/lenaryan.md +++ b/css/sticky/practice/lenaryan.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 С помощью такого позиционирования удобно делать закреплённую шапку — если она является непосредственным наследником `body`, то, указав шапке `position: sticky`, мы получим статичную шапку при загрузке экрана, а при скролле страницы — зафиксированную сверху. diff --git a/css/stroke/practice/realetive.md b/css/stroke/practice/realetive.md index 44150dd536..6973277f29 100644 --- a/css/stroke/practice/realetive.md +++ b/css/stroke/practice/realetive.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 CSS-свойство `fill` влияет на цвет заливки только при вставке всего SVG-кода непосредственно в HTML — SVG-изображение, вставленное через SVG-шрифт, `` / `` или `background` / `background-image` не увидит его. diff --git a/css/tag-selector/practice/ezhkov.md b/css/tag-selector/practice/ezhkov.md index 4ec293cd9b..8c0d0ea8b9 100644 --- a/css/tag-selector/practice/ezhkov.md +++ b/css/tag-selector/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Чаще всего этот селектор применяется в самом начале работы над страницей, чтобы переопределить встроенные стили браузера для некоторых тегов. Например, сразу определить стили для тегов заголовков или задать внешний вид для списков. ```css diff --git a/css/text-align/practice/solarrust.md b/css/text-align/practice/solarrust.md index ec07a255c1..fb9b3e803a 100644 --- a/css/text-align/practice/solarrust.md +++ b/css/text-align/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Свойство `text-align` можно использовать не только для выравнивания текста в строчных элементах, но и для выравнивания строчно-блочных (`inline-block`) элементов внутри родителя. _С появлением флексбоксов такое решение теряет свою популярность, но знать о нём стоит._ diff --git a/css/text-decoration/practice/furtivite.md b/css/text-decoration/practice/furtivite.md index 3780528c70..ffe9f0c216 100644 --- a/css/text-decoration/practice/furtivite.md +++ b/css/text-decoration/practice/furtivite.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - Иногда вам может потребоваться управлять расстоянием между текстом и линией ниже. Обычно это делается, через свойство `line-height`. Чем больше высота строки, тем ниже будет полоса подчёркивания. К сожалению, этот способ подходит не всегда. Например, когда дизайнер задумал элемент несколько иначе. На примере ниже отказываемся от `text-decoration` и используем `border-bottom`. diff --git a/css/text-decoration/practice/solarrust.md b/css/text-decoration/practice/solarrust.md index fc8125500a..945bc51fa2 100644 --- a/css/text-decoration/practice/solarrust.md +++ b/css/text-decoration/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 У ссылок по умолчанию задано подчёркивание. Если по дизайну оно не требуется, то нужно будет его _сбросить_ — задать свойство `text-decoration: none`. Это самый частый случай применения этого свойства. Перечёркивание или надчёркивание почти не встречаются в работе. 🛠 Отдельные свойства — `text-decoration-line`, `text-decoration-style` и `text-decoration-color` — редко встречаются в вёрстке, но знать о них нужно, чтобы при необходимости не переписывать свойство целиком только для изменения стиля или цвета линии. diff --git a/css/text-shadow/practice/solarrust.md b/css/text-shadow/practice/solarrust.md index cd3269e5b1..1210cd7b1b 100644 --- a/css/text-shadow/practice/solarrust.md +++ b/css/text-shadow/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Можно имитировать обводку букв при помощи этого свойства, задав нулевое смещение по осям и небольшое размытие. Но шириной обводки в этом случае управлять нельзя. Я бы предпочла использовать псевдоэлемент для этих целей. 🛠 На ретина-экранах тени могут выглядеть достаточно грязно. Обязательно проверяйте отображение текста с тенями на экранах с DPR ≥ 2. diff --git a/css/text-transform/practice/solarrust.md b/css/text-transform/practice/solarrust.md index 1c05cf77e9..dde3102fa0 100644 --- a/css/text-transform/practice/solarrust.md +++ b/css/text-transform/practice/solarrust.md @@ -1,10 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - - 🛠 Довольно часто в макетах встречаются пункты меню, написанные заглавными буквами. Не нужно в разметке набирать текст заглавными. Скопируй текст из макета и примени свойство `text-transform`. ```html diff --git a/css/transform-origin/practice/ezhkov.md b/css/transform-origin/practice/ezhkov.md index e2b23e9698..cf5e3fb6d0 100644 --- a/css/transform-origin/practice/ezhkov.md +++ b/css/transform-origin/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - `transform-origin` эффективно работает не только при повороте. Плавное масштабирование тоже может давать разный эффект в зависимости от положения точки трансформации.

diff --git a/css/transform-style/practice/ezhkov.md b/css/transform-style/practice/ezhkov.md index ed431c85e5..758d6970ee 100644 --- a/css/transform-style/practice/ezhkov.md +++ b/css/transform-style/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если нам нужно просто повернуть какой-то элемент в 3D-пространстве, то можно оставить `transform-style: flat` (либо вообще не задавать это свойство). Элемент всё равно будет поворачиваться, к нему будет применяться перспектива, всё будет выглядеть красиво. `transform-style: preserve-3d` нужно задавать, когда мы хотим применять 3D-трансформации и к родителю, и к потомкам, и при этом учитывать их визуальное взаимодействие. Классическим примером такой ситуации является куб, собранный из шести элементов-сторон.

diff --git a/css/transform/practice/author.md b/css/transform/practice/author.md index 8cb1576036..85742a8ecb 100644 --- a/css/transform/practice/author.md +++ b/css/transform/practice/author.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Благодаря тому, что трансформации элемента никак не затрагивают соседей, свойство `transform` в сочетании с [`transition`](/css/transition) активно используется для создания плавных анимаций элемента при наведении, либо при изменении состояния. diff --git a/css/transition-duration/practice/ezhkov.md b/css/transition-duration/practice/ezhkov.md index 20be29b697..998ea86b0f 100644 --- a/css/transition-duration/practice/ezhkov.md +++ b/css/transition-duration/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Лучше не экономить символы, и всегда делать количество времён равным количеству свойств. Но если все свойства должны меняться за одно и то же время, то можно и сэкономить 😈: ```css diff --git a/css/transition-property/practice/ezhkov.md b/css/transition-property/practice/ezhkov.md index a27e75d7ef..34245017d7 100644 --- a/css/transition-property/practice/ezhkov.md +++ b/css/transition-property/practice/ezhkov.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 В реальных проектах не так часто приходится плавно изменять более двух свойств одновременно, поэтому свойство `transition-property` используется довольно редко. В основном переходы стилизуются с использованием комплексного свойства [`transition`](/css/transition/). diff --git a/css/transition-timing-function/practice/ezhkov.md b/css/transition-timing-function/practice/ezhkov.md index 127879451f..9d99f653db 100644 --- a/css/transition-timing-function/practice/ezhkov.md +++ b/css/transition-timing-function/practice/ezhkov.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Самой часто используемой функцией анимации является `ease`. В основном, потому что верстальщикам лень писать значение функции, а по умолчанию в браузере используется именно `ease`. diff --git a/css/transition-timing-function/practice/furtivite.md b/css/transition-timing-function/practice/furtivite.md index 2cdc2ec62c..7b1a2a05e6 100644 --- a/css/transition-timing-function/practice/furtivite.md +++ b/css/transition-timing-function/practice/furtivite.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если вы хотите создать крутую анимацию и понимаете, как именно должна выглядеть ваша Кривая Безье, можно воспользоваться специальным сайтом, например [https://cubic-bezier.com/](https://cubic-bezier.com/#) ```css diff --git a/css/transition-timing-function/practice/solarrust.md b/css/transition-timing-function/practice/solarrust.md index 646003448e..7cab20e73d 100644 --- a/css/transition-timing-function/practice/solarrust.md +++ b/css/transition-timing-function/practice/solarrust.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если создаёте анимацию, имитирующую реальный мир, то очень важно правильно подбирать временную функцию анимации. Потому что в реальном мире ничего не двигается резко или линейно. diff --git a/css/vertical-align/practice/solarrust.md b/css/vertical-align/practice/solarrust.md index d12abb284b..2f41ae734d 100644 --- a/css/vertical-align/practice/solarrust.md +++ b/css/vertical-align/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Свойство `vertical-align` каверзное. Многие начинающие разработчики пытаются применить его к родительскому элементу, по аналогии с `text-align`. И ничего не выходит. Просто запомни, что его нужно применять к тому элементу, который хочется выровнять. 🛠 С появлением флексбоксов выравнивание по вертикали производится при помощи `align-items`. Поэтому на свойство `vertical-align` стоит обратить внимание, только если работаешь с вёрсткой на строчно-блочных элементах. diff --git a/css/visibility/practice/solarrust.md b/css/visibility/practice/solarrust.md index 0402a149ff..8f27c813bb 100644 --- a/css/visibility/practice/solarrust.md +++ b/css/visibility/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Обычно, когда я хочу точно-точно спрятать элемент, чтобы он не получал фокус ни при каких обстоятельствах и не был виден даже скринридерам, но при этом хочу плавно показать его по какому-то триггеру, то указываю одновременно несколько _скрывающих_ свойств и использую трюк с `transition`: ```css diff --git a/css/visited/practice/solarrust.md b/css/visited/practice/solarrust.md index bad9f7ca1e..3fd444862b 100644 --- a/css/visited/practice/solarrust.md +++ b/css/visited/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Если вы задаёте стили для разных состояний ссылок, следует придерживаться определённого порядка в объявлении: 1. `:link` diff --git a/css/vm-vh/practice/ezhkov.md b/css/vm-vh/practice/ezhkov.md index 98589ef061..55205eccce 100644 --- a/css/vm-vh/practice/ezhkov.md +++ b/css/vm-vh/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 В операционных системах Linux и Windows использование `100vw` может осложняться тем фактом, что вертикальный скроллбар является частью вьюпорта и уменьшает фактическую ширину страницы. Но ширина вьюпорта остаётся неизменной. Поэтому, если есть вертикальный скролл, то задание ширины блока `100vw` вызовет появление горизонтального скролла. На MacOS этот эффект не наблюдается, потому что там скролл располагается НАД содержимым страницы, а не рядом.

diff --git a/css/white-space/practice/ezhkov.md b/css/white-space/practice/ezhkov.md index 117a8c9625..31d7953f39 100644 --- a/css/white-space/practice/ezhkov.md +++ b/css/white-space/practice/ezhkov.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Довольно часто значение `white-space: pre` используется при вёрстке исходного кода:

diff --git a/css/width/practice/solarrust.md b/css/width/practice/solarrust.md index c7d162c048..d0b2d0e79c 100644 --- a/css/width/practice/solarrust.md +++ b/css/width/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - Свойство `width`, пожалуй, самое часто встречающееся свойство в коде. В работе ты будешь манипулировать шириной очень часто. 🛠 Поскольку строчные (`inline`) и строчно-блочные (`inline-block`) элементы подстраиваются по ширине под вложенный контент, то в ситуациях, когда контента внутри нет, ширина такого элемента будет равна нулю. Но часто случается, что нам нужен декоративный элемент. В этом случае без зазрения совести задавай ширину. И не забудь про высоту ([height](/css/height) ). diff --git a/css/z-index/practice/solarrust.md b/css/z-index/practice/solarrust.md index 14d118b22d..e869922ff5 100644 --- a/css/z-index/practice/solarrust.md +++ b/css/z-index/practice/solarrust.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Часто вижу такие записи `z-index: 99999`. Видимо, это нужно чтобы СОВЕРШЕННО ТОЧНО блок был поверх всего. Но обычно это избыточно и может привести к неожиданным последствиям в процессе поддержки сайта. Я обычно проставляю значения -1, 0 и 1. А если нужно что-то большее, то значения 10 будет вполне достаточно. diff --git a/html/a/practice/pepelsbey.md b/html/a/practice/pepelsbey.md index a92be32558..82cea21a45 100644 --- a/html/a/practice/pepelsbey.md +++ b/html/a/practice/pepelsbey.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Когда нужно сделать навигацию в пределах одной страницы, например, оглавление, удобно использовать якоря — то есть ссылки на отдельные элементы. При нажатии на ссылку, браузер мгновенно переместится к этому элементу. Чтобы создать такую ссылку нужно две вещи: diff --git a/html/a/practice/solarrust.md b/html/a/practice/solarrust.md index e8cbecfa8d..8d3b782fd5 100644 --- a/html/a/practice/solarrust.md +++ b/html/a/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 По умолчанию ссылка является строчным элементом. Поэтому, если нужно обернуть в неё целый блок, то задай для ссылки `display: block`. 🛠 Ссылку нельзя вкладывать в ссылки 🤷‍♀️ diff --git a/html/address/practice/ezhkov.md b/html/address/practice/ezhkov.md index fbc8c629fd..38890b3a34 100644 --- a/html/address/practice/ezhkov.md +++ b/html/address/practice/ezhkov.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 В реальных проектах этим тегом чаще всего размечают блок со ссылками на соцсети в подвале сайта, телефоны в шапке, контактную информацию в подвале и на отдельной странице. Если у вас блог, куда пишут разные авторы, то круто, если этим тегом вы будете размечать имена или контактную информацию авторов статей. diff --git a/html/aside/practice/realetive.md b/html/aside/practice/realetive.md index ddef77929a..f21433aa95 100644 --- a/html/aside/practice/realetive.md +++ b/html/aside/practice/realetive.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Самый простой вариант — наш сайт, имеющий две колонки (на десктопных и планшетных экранах): правую — с основным контентом, и боковую левую — с навигацией. Вот как раз эта область не имеет прямого отношения к самому содержимому статьи, но отлично дополняет пользовательский опыт: если вам нужно будет выбрать новый документ или что-то найти (т. к. в ней располагается навигация и поиск). diff --git a/html/audio/practice/vladimir.md b/html/audio/practice/vladimir.md index afe1c88b0e..e6bc6d6b87 100644 --- a/html/audio/practice/vladimir.md +++ b/html/audio/practice/vladimir.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Я не очень люблю этот тег в чистом виде, потому что каждый браузер воспринимает аудио по своему. Поэтому лучше юзать какой-нибудь плеер, но это уже не без помощи JavaScript: - [SoundManager 2](http://www.schillmania.com/projects/soundmanager2/) diff --git a/html/autocomplete/practice/lenaryan.md b/html/autocomplete/practice/lenaryan.md index 837ca0da57..120712a0bd 100644 --- a/html/autocomplete/practice/lenaryan.md +++ b/html/autocomplete/practice/lenaryan.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Значение атрибута может перебиваться значениями, прописанными в дочерних элементах. ```html diff --git a/html/blockquote/practice/solarrust.md b/html/blockquote/practice/solarrust.md index 703350434e..bd4f4829e2 100644 --- a/html/blockquote/practice/solarrust.md +++ b/html/blockquote/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Дизайнеры любят оформлять цитаты красивыми большими кавычками. Стоит помнить, что от одного лишь применения тега `

` эти самые кавычки не появятся. Нужно будет добавить их. Я обычно делаю это при помощи псевдоэлементов. Так разметка не засоряется лишними тегами, а внешний вид кавычек можно будет гибко менять через стили. ```css diff --git a/html/body/practice/pepelsbey.md b/html/body/practice/pepelsbey.md index 2262664f32..07595e9fd0 100644 --- a/html/body/practice/pepelsbey.md +++ b/html/body/practice/pepelsbey.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 По спецификации тег `` вроде как не обязательный, так что можно его и не писать — браузер сам поймёт, что выводить на странице по типу тега. Но на практике получается, что лучше явно обозначить, что идёт в ``, а что в `` — от места вывода тега может меняться его работа. Всегда явно открывайте и закрывайте тег `` и всё будет хорошо. diff --git a/html/body/practice/solarrust.md b/html/body/practice/solarrust.md index 369dd6df1f..79973f0812 100644 --- a/html/body/practice/solarrust.md +++ b/html/body/practice/solarrust.md @@ -1,9 +1,3 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 Поскольку тег `` уже является видимой частью страницы, у него есть стили по умолчанию. Многие начинающие разработчики забывают об этом и на выходе получают отступ вокруг всей страницы. Причина отступа в этих стандартных браузерных стилях: diff --git a/html/body/practice/vladimir.md b/html/body/practice/vladimir.md index d2abbb7b45..1777c4a3fc 100644 --- a/html/body/practice/vladimir.md +++ b/html/body/practice/vladimir.md @@ -1,7 +1 @@ ---- -tags: - - practice -permalink: false ---- - 🛠 `` задаёт внешний вид вашей страницы. Здесь же зашиваются скрипты. Если кто-то говорит вам «зашиваются скрипты» — это значит, что они прописываются внутри `` через `