CSS tricks | Блог разрабочика

Live Templates

Список Live Templates которые я активно использую вместе с Emmet.

Чтобы увеличить скорость и снизить количество опечаток.


# BEM block based on file name.
# Abbreviation: "--"
# BEM_BLOCK: regularExpression(fileNameWithoutExtension(), "_", "")
--$BEM_BLOCK$

# BEM block based on file name.
# Abbreviation: "."
# BEM_BLOCK: regularExpression(fileNameWithoutExtension(), "_", "")
.$BEM_BLOCK$

# Field class name.
# Abbreviation: ".fn"
.field--name-field-

# After with content and display.
# Abbreviation: "::after"
::after{
content: '';
display: block;$SELECTION$
}

# Before with content and display.
# Abbreviation: "::before"
::before{
content: '';
display: block;$SELECTION$
}

# Abbreviation: ":notlast"
:not(:last-child) {$SELECTION$}

# Display grid.
# Abbreviation: "dg".
display: grid;

# Wide container.
# Abbreviation: "wc".
$SELECTION$
top: 0;
bottom: 0;
left: 50%;
margin-left: -50vw;
width: 100vw;

Grid на flexbox.

В flexbox отсутствует gap (расстояние между элементами).

Решение - для элементов использовать margin-top вместо margin-bottom.
Тогда можно без труда исключить отступ у первых элементов зная количество колонок.
А также исключить отступ справа у элементов последней колонки.

https://codepen.io/boolboost/pen/gOpWRrN


.parent {
  display: flex;
  flex-wrap: wrap;
  --gap: 20px;
}

.child {
  /* ширина колонки 1/4. */
  flex: 0 1 calc(25% - var(--gap)*3/4);
}

/* gap сверху начинается со второй строки (5 элемент). */
.child:nth-child(n+5) {
  margin-top: var(--gap);
}

/* gap с правой стороны присутствует везде кроме 4 колонки. */
.child:not(:nth-child(4n)) {
  margin-right: var(--gap);
}

Оформление checkbox и radio.

Раньше для оформления элементов приходилось использовать дополнительные обёртки.
Теперь если на input положить appearance: none; внезапно появляется возможность использовать псевдо-элементы (::after, ::before).

https://codepen.io/aaroniker/pen/ZEYoxEY


input[type='checkbox']::after,
input[type='radio']::after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  position: absolute;
}

Как сделать любой элемент не кликабельным.

Замечательное свойство pointer-events, которое можно случайно упустить из виду.

Позволяет делать декоративные элементы, которые не должны реагировать на события мышки (клики, наведение и тд).


.shadow {
  /* Элемент не реагирует на мышку, как тень. */
  pointer-events: none;
}

Особенность border-color.

Наследует цвет от свойства color.


a {
  text-decoration: underline;
  color: red;
  /* Красная полоска. */
  border-bottom: 1px dashed;
}

Особенность z-index.

Если написать z-index: -1; элемент уйдёт ниже родителя вплоть до html.
Но если на родителя добавить z-index: 0; тогда дочерний элемент ведёт себя, как фон родителя.

z-index не работает без использования position отличного от static.


.parent {
  position: relative;
  /* Останавливает элементы с отрицательным z-index. */
  z-index: 0;
}

.parent .background {
  position: absolute;
  /* Я фон. */
  z-index: -1;
}