В недавнем проекте я наткнулся на изящный способ создания макета сетки, используя CSS Grid и немного javascript. Сначала я думал об использовании чего-то вроде Masonry.js или Isotope, но это было немного излишне. Что хорошего в этом подходе, он очень гибкий и не опирается ни на какие фреймворки! Я постараюсь сделать этот пост коротким и приятным, чтобы вы могли сами приступить к работе и насладиться этим трюком.

Ах да, CSS. Едва ли неделя проходит без того, чтобы это не стало темой жаркой онлайн-дискуссии. Это слишком тяжело. Это слишком просто. Это непредсказуемо. Она устарела.

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

Существуют разные способы создания диагональных сечений. В нашем случае мы полагаемся на свойство clip-path.

Свойство clip-path позволяет обрезать элемент, к которому он применяется, путем определения области, которая действует как маска. В частности, функция многоугольника позволит вам указать наборы координат, которые определяют форму многоугольника. Часть элемента, которая находится за пределами многоугольника, не будет видна.

Используйте псевдоэлемент ::placeholder для стилизации дефолтного текста в элементе input или textarea. Большинство современных браузеров поддерживают это, но для старых браузеров требуются префиксы.

Вы видели этот ужас в Фейсбуке?

"Why do I need a 4Ghz quadcore to run facebook?" This is why. A single word split up into 11 HTML DOM elements to avoid adblockers. pic.twitter.com/Zv4RfInrL0

— Mike Pan (@themikepan) February 6, 2019

Я заскочил в Facebook чтобы все проверить и то, что я увидел было другим, еще более вложенным беспорядком:

В последнее время проводились интересные эксперименты, связанные с типографикой. Я пытался придумать такую шутку, как «что-то в потомках», но я просто не могу найти что-то, что встанет на ноги, и мне будет легко противостоять.

Codrin Pavel cоздал увлекательный яркий шрифт CSSans, дизайн которого разработан его сестрой Изабеллой Андронаке!

В прошлом году, создавая страницу продукта FilePond, я наткнулся на API scrollIntoView. Это удобный метод указывает браузеру прокрутить элемент в окне просмотра.

CSS предоставляет возможность создавать потрясающую анимацию. Разработчики не только делают великолепные произведения цифрового искусства, но также дают нам возможность добавлять гибкие элементы дизайна прямо к нам на веб-страницы. Недавно я включил CSS-градиентную анимацию во многие ссылки на мои блоги, чтобы придать им живой, плавный вид. Смотрите как преобразился модуль «Recent essays» ниже на гифке

Типичный медиа-запрос состоит из медиа-типа (screen, print, speech и т.д.) и одного или нескольких выражений, включающих медиа-функции, которые могут принимать значения true или false.

Результат запроса равен true, если тип мультимедиа, указанный в медиазапросе, соответствует типу устройства, на котором отображается документ, и все выражения в медиазапросе имеют значение true. Соответствующие стили применяются, когда результат медиа-запроса равен true.

Если тип носителя не указан, по умолчанию используется тип all, т.е. соответствующие стили будут применимы для всех устройств.

Одним из первых плагинов, который появился в новом фреймворке на ранних этапах разработки на JavaScript, был placeholder плагин, поэтому мы так обрадовались приходу, атрибута placeholder в HTML5. Тогда любители CSS, вроде меня, были в восторге от того, что спецификация CSS позволила нам стилизовать плэйсхолдеры.

Не так давно я столкнулся с проблемой, когда хотел применить специфичный шрифт font-family  к элементу , только лишь тогда, когда он был заполнен (содержал) текст. Изначально я планировал установить шрифт font-family на , а затем повторно применить шрифт body's блока для  ::placeholder, но, идеально не вышло - выглядело как будто страницу должны закрыть на техническую доработку. 

Я запостил проблему в Твиттере, надеясь найти лучшее решение, и, к счастью, Факундо Коррадини предложил :placeholder-shown. Атрибут :placeholder-shown предоставлен элементу псевдокласса только тогда, когда он сам появляется, поэтому можно выбрать только placeholder , но не текст ввода: