Подборка интересных CSS рецептов «Голые пятницы #3»

[ArtKom]

Обожаю ваши «Голые пятницы». Одно плохо — выходят не часто :(
Автору спасибо!

[Paul_King]

Вам спасибо) постараемся выходить чаще)

[magic4x]

По опыту: минимизировав количество псевдо-элеметнов, удалось добиться ощутимой прибавки в отрисовке страницы. Ну, т.е. вот этот гамбургер на практике лучше дивами, получится на 2 элемента больше, всего-то.

[Carduelis]

а у вас есть пример такой страницы? без псевдоэлементов и с ними. Особенно было бы актуальным это проверить на мобилках

[magic4x]

Вот прям чтобы так — нет. Я просто сверстал «большую» адаптивную страницу и открыл ее на слабом смарте. Скажем так, оно думало.
С псевдо-элементами особых тестов не нужно, их зачастую видно невооруженным глазом. Т.к. их нет в доме, браузер об их существовании узнает поздно и они прямо отрисовываются на глазах.
Еще (если интересно) тормозит конструкция font-size:0 (родителю) > font-size: X (детям). Часто используется для верстки инлайн объектов без «зазоров» между ними.
Также очень спасает абсолютная адресация к блокам.
О, вспомнил! У гугла есть тест скорости страницы. В ней удалось увеличить количество попугаев с 80 до 91 вышеперечисленными методами.

[Carduelis]

Еще (если интересно) тормозит конструкция font-size:0 (родителю) > font-size: X (детям).

Очень интересно) Часто так делал, так как довольно простой способ. Теперь, видимо, не буду.
Может статью напишите, чего можно, чего нельзя? Что дает тормоза, а что нет? Было бы интересно!

[StreetStrider]

Оно служит для определения поддерживаемых браузером свойств. Пока что его поддерживают не все браузеры.

На этом моменте внезапно рассмеялся.

[v_decadence]

:)

@supports (@supports)
{

}

[Bright]

По поводу юникод-гамбургера: есть прекрасный сайт unicode.johnholtripley.co.uk/ с подробной информацией о поддержке юникода в разных браузерах.

И там советуют:

Using the 3 horizontal line 'burger' icon for your navigation? Use 2261 (≡) (96%) instead of 2630 (☰) (58%)

[Vorchun]

Спасибо! Еще бы версии браузеров указали где это работает — цены бы вам не было )

[Golumenov]

С градиентами криво контент отображается см пример codepen.io/golumenov/pen/yyLzRG
Уж лучше тогда блок контента обернуть блоком обверткой. блоку обвертке выставить какой нам нужно градиент и задать толщину границ паддингами. У блока контента задаем другой бекграунд #fff для примера и получаем то-же самое что и в примерах, только гораздо более стабильно работающее

[Paul_King]

Спасибо, добавил в статью.