🤓 Chrome 112 стал поддерживать nesting

На текущий момент глобальная поддержка на can i use всего 0.4%.

Постепенно CSS обрастает препроцессорными фитчами.

👉🏻 Для тех кто не знает, что такое nesting, это запись типа:

.parent {
  color: red;

  > .child {
    color: green;
  }
}

То есть возможность вкладывать одни селекторы в контекст другого, только теперь без SASS.

Вывод. Я буду следить за развитием этой фитчи, но пока не очевидно, заменит ли она препроцессорный вариант, который умеет конкатенировать строки...

Полезная ссылка:

🔗 https://developer.chrome.com/blog/new-in-chrome-112



#css #cssFuture

🎩 CSS Houdini

Это набор низкоуровневого API, которое расширяет возможности работы с CSS-переменными, позволяя определить для переменной её тип, значение по умолчанию, и наследуемость.

Пример записи:

@property --angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

property — имя переменой;
syntax — тип (диапазон допустимых значений), может быть: <color>, <integer>, <number>, <length>, <percentage>, <angle>;
inherits — должно ли свойство наследоваться;
initialValue — значение по умолчанию.

❗️В результате применения подобной записи, можно заанимировать то, что обычно в CSS ранее было не возможно.

Например градусы в градиенте!

👀 Смотреть анимацию


Выводы:

Houdini - это будущее, которое уже наступает. Но пока не поддерживается в FireFox.

Из минусов, уж очень громоздкая запись может получаться, если применять для каждой переменной.



Полезные ссылки:

🔗Статья на хабре
🔗Немного про API


#css #futureCss #houndini #animation #customPropreties

😲 AnimationBuilder, или как сделать удобней, анимацию между представлениями.

Аллен Бауэр рассказал, как использование слоёв поможет повысить производительность, и уменьшить количество выпадающих кадров из-за забитого потока на ЦП.

Он привел пример, как можно реализовать плавный переход
с помощью слоёв напрямую, и как с помощью классов AnimationBuilder.

Разница в плане удобства конечно колоссальная.

❗️ Их предложение уже можно использовать.

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

Особенно когда пишешь это на нативном языке.

Но все же, фитча которую я лично жду, это анимированное свойство display, тогда можно делать просто ух сценарии.


Полезные ссылки:

🔗 Ссылка на статью




#js #jsAnimation

👉🏻 Внешние ссылки. Оформи безопасно!

❗️Внешняя ссылка - ссылка, которая перенаправляет на другой сайт.


Задача:

Сделать максимально удобной, и безопасной навигацию для пользователя.


Решение:

1. Используем атрибут target со значением _blank, открываем сайт в новой вкладке, сохранив старую, пользователь сможет на неё вернуться.

2. Прописываем атрибут rel со значениями noreferrer noopener, последнее значение повышает безопасность (не передает объект window).

Cвойство объекта window opener - позволяет получить в текущем окне, ссылку на окно, с которого было открыто данное окно.

Это помогает предотвратить некоторые виды атак.

Пример правильного оформления ссылки:

<a
target="_blank"
rel="noreferrer noopener"
href="https://gkarev.github.io/html_mentor"
</a>


Выводы:

Буквально в два клика, мы улучшили пользовательский опыт, и безопасность нашего проекта.

Но также, увеличили баллы в lighthouse, и практически пассивно, улучшили СЕО.

Учим HTML, используем атрибуты правильно!



#html #attribute

👌🏻 Новые значения CSS Media Query

Adam Argyle - инженер по связям с разработчиками, работающий над Chrome CSS, UI и DevTools, опубликовал пост, где рассказал, о новых значения для Media Query.

Если коротко, то теперь нам доступна выборка устройства пользователя, на основе скорости обновления его монитора/экрана.

Нам на выбор предоставили три варианта:

@media (update: fast) {
  /* экраны с высокой герцовкой*/
}

@media (update: slow){
  /* экраны с низкой герцовкой, например электронные книги */
}

@media (update: none){
  /* интерфейс однократного вывода изображения(при печати) */
}

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

Первое что приходит в голову, это применение на страницах с большим количеством анимации, где нагрузка на ЦП/GPU выше среднего.


Полезные ссылки:

🔗 Сама статья
🔗 Офф. спека



#css #cssFuture

😎 CSS Relative colors (относительные цвета в CSS).

...было бы круто, динамически управлять цветом на нативном CSS.

У нас есть такая возможность, благодаря кастомным свойствам, например:

:root {
 --color: 0 0 0;
}

.el {
 background-color: 
  rgb(var(--color) / .4);
}

⚠️ Но к сожалению данный подход имеет ограничение.

Например, значение цвета, должно быть всегда в формате пространства, которое поддерживает alfa канал.

А мы, как правило, работаем в основном с HEX.

Проблема. Необходим универсальный инструмент, который будет подходить для всех форматов цвета.

Решение:

:root {
 --color: red;
}

.el {
background-color: 
 rgb(from var(--color) r g b / .4);
}

👌🏻 Данная запись конвертирует цвет в rgb, и задаёт для неё прозрачность!


Вывод:
Таким образом мы освобождены от необходимости определенному формату при формировании цветовой схемы проекта!

Поддержка 0.15%. Только в Safari 😢


Полезные ссылки:

🔗 css color 5
🔗can i use


#css #cssFuture #colors

🫵🏻 Логотип. Как правильно сверстать?

Лого - часть брендового стиля, это то что позволяет идентифицировать компанию/продукт, среди других конкурентов.

Важная часть, не так ли?

Думаю он должен отвечать некоторым стандартам качества:

1. Корректно выглядеть без CSS.
2. Адекватно отображаться при печати.
3. Быть доступен для поисковой индексации.
4. Отвечать требованиям Accessibility.
5. Возможность сохранить лого с сайта.


Варианты реализации лого:

1. Обычный img;
2. Картинка в качестве CSS фона;
3. Инлайновый SVG.


Рассмотрим с конца:

Вариант 3

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

Что же по критериям. Оно соответствует практически всем критериям, но к сожалению, для поисковой выдачи наша SVG разметка будет невидима.

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

Сохранить как картинку такой вариант не получится - увы.

Итого: 3 критерия из 5

1. Работа без CSS;
2. Печать;
3. Accessibility.



Вариант 2

Вариант с фоном, используется реже, но все же его можно встретить. Мы сразу упираемся в полную зависимость от CSS, где вынуждены контролировать все.

При печати фоновые изображения не отображаются(требует ручной настройки при печати), так как считаются декоративными.

Не индексируется. Требует указания ARIA атрибутов (по аналогии с SVG вариантом).

Сохранить как картинку, также не выйдет.

Итого: 1 критерий из 5

1. Accessibility.



Вариант 1

Тег img полностью самодостаточен.

Он корректно отображается не зависит от CSS. Необходимо лишь убедиться, что все атрибуты (width, height, alt) заполнены правильно.

При печати не возникает проблем, все работает без доп. настроек.

Поисковая машина, воспринимает его как контентную составляющую, и учитывает в поисковой выдачи.

Отвечает требованиям доступности "из коробки".

Также у нас есть возможность сохранить лого, скопировав картинку прямо с сайта, вызвав контекстное меню.

Итого: 5 критериев из 5


Вывод.

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

👌🏻 Мы - профессионалы, должны выбирать лучшее.



#css #html #aria #adviсe

Бета-версия Chrome 115.

➡️ Переосмысление свойства display.

Ранее спецификация CSS Display была изменена, чтобы разрешать принимать два значения.

Первое (внешнее) - для определения display родительского блока.

Второе (внутреннее) - для установки display дочерним элементам.


➡️ Анимации, управляемые прокруткой.

ScrollTimeline и ViewTimeline - расширение спецификации веб-анимации, которое позволяют использовать ускоренную анимацию на основе прокрутки.

Они могут быть объявлены и созданы как с помощью CSS, так и с помощью JavaScript.



Полезные ссылки:

🔗 Chrome beta 115
🔗 Multi-keyword syntax of display


#css #cssFuture #chrome #animation #display

Bootstrap NES

😏 Любопытная попытка монетизации от команды herodevs (разработчиков bootstrap).

Herodevs утверждают, что версии Bootstrap 3, 4 имеют ошибки и ряд существенных уязвимостей.

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

Разработчики предлагают никогда не обновляться. Мол мы придём, все просканируем, исправим, и вы получаете 100% современную безопасную старую версию фрейморка.

Проще говоря, это будет индивидуальное локальное решение на заказ от команды Herodevs.

🙃 Интересно, станут ли клиентами другие команды, например, разработчики JS-фреймворков, где используются старые версии Bootstrap?

Без спроса не было бы и предложения.

Я думаю, ребята из Herodevs превратили в услугу то, что делали бесплатно — устраняли собственные баги.

Хм, звучит как план? 👌🏻


🔗 Bootstrap NES


#css #js #bootstrap #framework

Создаем Popover "из коробки".
Изящно, производительно, доступно. 😎

Вы можете создавать popover двумя разными способами:

1. Декларативно, через набор новых атрибутов HTML.

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

2. Через API JavaScript. Например, HTMLElement.togglePopover().
Подробное руководство по использованию.

Юна Кравец решила осветить подробнее тему, упомянув о приятных возможностях ванильного popover.

Полезные ссылки:

🔗 Статья Юны
🔗 Popover API MDN

#html #css

Делайте ваш код лучше друзья!👌

🤔 Align-content: Supported in Block Layout

С приходом flex и grid, вертикальное выравнивание стало обычной задачей.

Лишь старожилы помнят, какой ценой достигался нужный результат =)

Свойство align-content прекрасно работает в grid и flex раскладках, но мало кто знает, что оно работает и без них, в обычном блоке.

Пример кода:

 
<div class="box">
  <div class="box__item"></div>
</div>

<style>
  .box {
    height: 100dvh;
    align-content: center;
  }

  .box__item {
    width: 40px;
    height: 40px;
    background-color: darkgray;
  }
</style>

Поддержка составляет 72%,
и продолжает расти.

P. S. Любопытно, что для того же горизонтального выравнивания поддержка свойства justify-content в блочной раскладке не работает.

🔗 Can i use. Align-content: Supported in Block Layout

#css #cssfuture

Делайте ваш код лучше друзья!👌

🤩 Перенос текста: можно сделать лучше!

Улучшайте переносы текста с помощью комбинации значений CSS свойства text-wrap.

Больше не будет одиноких слов в конце абзацев, а заголовки будут выглядеть гораздо лучше! 👌

Лови рецепт, красивых переносов:

* {
  text-wrap: pretty;
}

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

Поддержка свойств:
text-wrap: pretty - 71.46%
text-wrap: balance - 74.87%


🔗 Can i use. CSS property: text-wrap
🔗 Смотреть ДЕМО на CodePen

Делайте ваш код лучше друзья! ❤️

#css #text

CSS свойство pointer-events управляет тем, как элементы реагируют на события указателя, такие как клики мыши, или касания.

Чаще всего мы используем два значения, это none (отключаем вовсе), и auto (для отмены первого).

Но что если вам нужно, взаимодействовать с векторной фигурой, с его обводкой, или только заливкой?

На помощь придут значения, которые работают только с SVG.

Pointer-events: stroke и fill

Pointer-events: stroke  

Когда элементу задается значение pointer-events: stroke, это означает, что события указателя будут действовать только на контуры фигуры.

Это используется там где важно, чтобы пользователь мог взаимодействовать только с обводкой объектов.

Pointer-events: fill  

Данное значение работает наоборот, позволяет взаимодействовать только с заливкой фигуры. При этом контур (если он присутствует) не будет реагировать на события указателя.


🔗 Demo


Делайте ваш код лучше друзья! ❤️

#css #events #svg

😎Для тех, кто изучает гриды, или хочет подтянуть практические навыки в этом гайде по grid-area приводятся жизненные примеры использования, от Ahmad Shadeed


Рекомендую к изучению

#css

Политика безопасности контента (CSP): что должен знать каждый веб-разработчик.

CSP — это важная концепция, которую нужно знать, понимать и внедрять для защиты ваших пользователей от атак Cross-Site Scripting (XSS). В этой статье рассматривается (почти) все, что вам нужно знать о CSP.

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

👌 Делайте ваш код безопаснее друзья!)


#html #security #web #meta

👉 Продолжая тему про неочевидные возможности выравнивания для классического Block Layout:

<style>
  .box {
    justify-self: center;
  }
</style>

<h1 class="box">Hello</h1>

Свойство justify-self: center; под "коробкой" формирует явную ширину блока по его содержимому, и автоматически центрирует по горизонтали, и это без использования flex/grid и дополнительных обёрток/свойств.

Одно свойство, а столько радости 🤓

Поддержка на текущий момент минорная (только в последних версиях Chrome/Edge).


#css #cssFuture #chrome