4 грязных трюка в CSS, из-за которых на вас будут коситься другие разработчики

0
1264
views

Перевод статьи «4 CSS tricks that will get you dirty looks from other developers».

Грязные уловки в CSS очень полезны. Где были бы YouTube-плееры, если бы для создания пропорций 16:9 не использовался padding–bottom: 56.25%? Я собрала небольшой список своих любимых грязных уловок.

1. Min margins

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

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -2rem;
}

.column {
  margin: 10px 2rem 0; // ensures a 4rem gap between items
}

See the Pen Using min margins by Cyd Stumpel (@Sidstumple) on CodePen.

2. Расширение кликабельной зоны

Поскольку псевдоэлементы вроде ::before к тегу <a> наследуют кликабельность родителя, это можно использовать для расширения кликабельной зоны ссылки.

Обязательно добавляйте position: relative к элементу, который хотите сделать кликабельным.

В следующем примере я использовала position: relative для всего .list-item и position: absolute для псевдоэлемента, где top, left, right и bottom установлены в 0 или width: 100%; height: 100%;

See the Pen Extending clickable area with ::before pseudo element by Cyd Stumpel (@Sidstumple) on CodePen.

Некоторые разработчики ставят ссылку на весь list item, но это очень напрягает людей, использующих скринридеры. Это также вредит стилю, поскольку вам приходится устанавливать свойства text-transform и color, чтобы переписать стандартное поведение ссылки для всего текста.

Этот трюк работает и с кнопками!

3. Writing mode

Writing mode это свойство CSS, используемое для указания направления текста. Оно, безусловно, имеет большое значение для языков, где направление письма отличается от нашего традиционного «слева направо». Но это свойство также очень полезно для стилизации текста, повернутого на 90 градусов.

Когда для поворота текста на 90 градусов вы используете transform, padding-left оказывается сверху элемента. Это, вероятно, не является для вас неожиданностью. Но при этом контейнер также приобретает странную ширину (кликните текст в приведенном примере на codepen). Если применять writing-mode: vertical-lr;, такого не будет.

See the Pen Writing mode by Cyd Stumpel (@Sidstumple) on CodePen.

Но использование writing mode вместо transforms имеет и большой недостаток: не получится анимировать смену направления текста.

4. Padding bottom

По какой-то причине при использовании процентов для padding-bottom они рассчитываются не от высоты элемента (height), а от ширины (width). Это очень полезно для стилизации встроенного YouTube-видео, ведь вы, вероятно, хотите, чтобы видео занимало 100% доступной ширины, но не всегда можете точно сказать, какой должна быть эта ширина. Использование height: 56.25% (16/9) не сработает, а вот добавление padding-bottom: 56.25% — очень даже!

See the Pen Using padding bottom to create 16:9 by Cyd Stumpel (@Sidstumple) on CodePen.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here