👌🏻 7-мь состояний одной кнопки.

Проблема. Мы знаем, что кнопкой, может быть любой элемент, который выглядит как кнопка.

И не важно ссылка это, ведущая на другую страницу, или кнопка отправки формы.

Наш контрол должен иметь минимум 5 состояний.

Решение. Мы как хорошие верстальщики - специалисты, независимо от того, есть ли они в макете или нет, должны их предусмотреть!

1. По умолчанию (как есть).
2. При наведении (:hover).
3. При нажатии (:active).
4. При фокусировании (:focus-visible).
5. Выключенное состояние (:disabled).
6. В ожидании (loading).
7. Активна по умолчанию.

Пример кода:

🔗 Смотри тут


#css #button #stateOfButton

🙄Коротко о том, что такое проф. деформация.

Это когда вместо того, что бы начать пользоваться Discord, ты замечаешь, интересный blink эффект на кнопке, и думаешь: "Хм, а может заверстать, показать своим ребятам, как такой эффект сделать?".

Или наоборот: "Какое скучное модальное окно, ноль усилий, от команды из сотни developers, что бы сделать минимальную анимацию, для улучшения DX".

👉🏻 Конечно, не искушенный пользователь на это не обратит внимания.

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

Это грустно, и любопытно. Потому что понимаешь, на сколько мало внимания уделяют качеству анимации, взаимодействию с интерфейсом, при этом все восхищаются работой интерфейса от Apple, там где все "сливочно" и "воздушно", анимации органичные...

Парадокс, не находите? Могут, но не хотят? Что с ними не так?



#мыслиВслух #интерфейсы #ux #ui #dx

Советы DevTools: что такое исходные карты?

Разработчики Chrome for developer, решили рассказать о том, зачем нужны source map.

Их пост я воспринял скептически, типа зачем?) Но а с другой стороны его цель носит ознакомительный характер для "молодых" специалистов.

Я не буду делать рерайт, и рассказывать, как работать source map (можете почитать сами).

Но на всякий случай, скажу лишь, что source map нужны, чтобы видеть две версии исходного и скомпилированного кода.

Пример. Вы пишите на SASS, в браузере отлаживаете скомпилированный CSS,
и с помощью source map, можете видеть оба варианта(SASS и CSS) без необходимости смотреть в исходник.

Полезно для динамической составляющей в работе с CSS.

Вывод. Лично я не привык использовать source map, но знаю, что многие находят его удобным.

👉🏻 Любые инструменты, которые Вас ускоряют — изучайте!

👌🏻Все пути хороши, которые делают работу проще)!


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

🔗 Страничка блога
🔗 Сам пост



#css #chrome #sourceMap #devTools

🤓 Моё занудство на тему "Как я сделал 3d ball".


Решил попробовать сделать без дизайна, сразу на CSS отрисовать объёмную фигуру, вроде получилось)

Ссылка на пример:

🔗 3d ball

#css #cssObject #css3d

🤓 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