Раз в месяц я устраиваю команде дайджест новинок. В этот раз решила поделиться ею с вами, чтобы вы не прозябали в болоте, удивляясь каким-то диковинным свойствам.

[1]
Официально вышел черновик нового CSS. В котором есть полностью обновленный transition. Если кратко, то возможности обычного CSS становятся значительно шире.

Очень важной новинкой считаю триггерную анимацию {когда навел на пункт меню, а подсветилась карточка товара. сейчас такое делается с помощью javascript}. Анимация перестает быть историей только одного элемента без связи с другими.

[2]
Scroll-driven анимации. По названию понятно, что это анимации, привязанные к перемотке.

Примеры показывают:
🔘 что можно сделать блок с горизонтальной перемоткой без участия javascript.
🔘 определять, когда элемент с position: sticky прилип к экрану и добавлять анимацию
🔘 делать активным элемент в горизонтальной прокрутке просто с помощью стилей {просто горизонтальный скролл на css я уже делала тут}.

С примером можно ознакомиться по ссылке {chrome на windows подвезли обновления в тестовом режиме}.

[3]
Величины lvh, svh, dvh рекомендованы к использованию. Если вы когда-то сталкивались с тем, что на телефоне шум при исчезновении строки поиска сместился и не возвращается на место, то поймете насколько бесили простые 100% {или 100vh}. В комментариях к посту будет картинка поясняющая эти величины.

[4]
Новые медиозапросы 4-уровня. Раньше мы писали так:

@media screen and (min-width: 960px)

Теперь будем писать так:

@media screen and (width > 960px)

[5]
Появилось в разработке свойство text-box-trim, дающее обрезать бесячий огромный текстовый контейнер по размеру текста.

[6]
Добавили свойство text-wrap: balance, которое при сужении экрана следит за строками текста так, чтобы они были примерно одинаковой длины. Свойство работает только в Сhrome Canary и я пока не разобралась в его работе. Кажется, это закос на перенос предлогов {который меня как разработчика не волнует совсем. и рядовых пользователей тоже}

[7]
Появились величины: cqw (1% от ширины контейнера), 1сqh (1% от высоты контейнера) и другие. Ранее я уже рассказывала о контейнерных запросах. Но надо, пожалуй, рассказать это снова и подробнее. Если кратко, то теперь у нас есть два пространства: ширина вьюпорта {или устройства, как удобнее} и ширина контейнера.

Простой пример: мы можем переносить карточки товаров на новую строку при сужении экрана. при переносе карточка останется одна и растянется на всю ширину экрана, что некрасиво. теперь мы можем при изменении ее ширины — перестроить в ней элементы.

#дайджест

Заметила вчера, что текст в нулевом блоке таки стал параграфом и это отлично (подробнее было в посте, который вы не оценили 😭). Но зачем-то разработчики добавили КО ВСЕМУ ТЕКСТУ В ZERO новое свойство text-wrap: balance и я опять словила facepalm 🤦‍♂️.

Что делает это свойство? Оно сбалансированно переносит слова на новую строку. Чтобы все строки текста были примерно одинаковой длины без резких переносов {еще не перенос предлогов, но помолимся и в 2030 сделают}.

У этого свойства есть пара особенностей:
⚪️чрезмерное использование влияет на скорость рендеринга страницы (потому что браузеру нужно все просчитать: количество строк, количество слов в строке);
⚪️свойство работает только для текста длиной 6 строк (10 в firefox)
⚪️рекомендуется использовать его для заголовков и крупных цитат. большие параграфы браузер пока перестроить не в состоянии. было бы оптимальнее, если бы такую опцию добавили для заголовков.


В общем, когда нашел новое свойство, не прочитал документацию и добавил везде. Теперь вы знаете больше, чем разрабы тильды :D

Оставляю вам статью с developer.chrome, на которой есть визуальные примеры и доказательство того, что я не звездю 🤔

#дайджест

🙂 🔡🔡🔡🔡🔡🔡🔡🔡🔡

За последнее время в канале появилось много новых постов и соответственно тегов. Я решила навести порядок в канале и организовать удобную навигацию.

#личное (жизнь, переживания, нытьё, семья, мысли)
#скотики (немного о жизни наших пятерых усатых 👊👊)
#работа (о проектах, кейсы, отзывы, переделки)

#уверстка (небольшие быстрые решения)
#переверстка (переделка стандартных блоков на тильде)
#халявное (решения для тильды)
#ссылки (полезные ссылки, подборки постов, агрегаторы и так далее)
#стрим (записи стримов, которые не находятся в открытом доступе)

#косметикос (посты про косметику от косметического задрота 😎)
#дайджест (обзоры нового в CSS, обнов тильды) {я обязательно продолжу этот тег как смогу}
#референсы (подборки интересных сайтов) {тоже продолжим, как сможем}
#бренныйфриланс (как продвигается мой фриланс честно и без мотивационных речей)

А давайте факты о webflow [много букв]

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

1️⃣ Это конструктор не для дизайнеров, а для разработчиков, которые не хотят превращаться в Fullstack.

Да, собирать простые аккуратные сайты можно и они будут на порядок выше, чем сайты с Tilda {давайте на всякий уточним, что тильду пора убирать из всех сравнений из-за отсталого кода}. Если дизайнер спокойно сам переделывает тильду, знает javascript и может переписать пример с codepen под себя, может по документации написать анимацию на GSAP — вот ему будет хорошо на webflow.

2️⃣ Несмотря на наличие CMS (аналога потоков) и её широкой кастомизации нужно знать пару библиотек и не бояться писать стили.

К примеру, для фильтрации выводимой коллекции (фильтр проектов, тарифов, услуг) нужно подключить Finsweet. А еще если хочется вывести коллекцию в необычную сетку — будьте добры написать стили и адаптивы.

3️⃣ Более удобные на первый взгляд анимации на самом деле не так удобны как кажется.

Все, что вы видите на awwwards не реализовано в стандартном интерфейсе, а сверстано с помощью GSAP {за который нужно заплатить 18к за год}.

4️⃣ Проблемы с загрузкой изображений в формате JPEG.

Webflow самостоятельно делает то, что я рассказывала на менторстве — грузит разный размер изображений в разных условиях. Именно для JPEG механизм ломается и на десктопе выводится картинка для телефона {размытая в говнину есесена}.

5️⃣ Как минимум три разных способа создания этичного "autoscale"

Можно верстать сайт в пересчете на vw/vh, можно использовать Finsweet Fluid Responsive, можно перезадавать базовый размер страницы и работать в rem c Wizardry. Что-то на сложном, да 😂

Тильда научила дизайнеров неправильно воспринимать процесс верстки. В котором участие разработчика совсем не нужно, но на webflow нужно быть больше разработчиком чем дизайнером.

#дайджест