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; }
Теги
Theming