До сих пор мы рассматривали основы HTML и CSS, обсуждали различные методы, позволяющие размещать элементы на веб-странице, и изучали концепцию адаптивного дизайна, которая позволяет создавать веб-страницы, автоматически адаптирующиеся к различным размерам экрана. В этой главе мы объединим все, что мы узнали до сих пор, чтобы воссоздать YouTube, используя только HTML и CSS.

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

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

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

Ваши изображения повсеместно отбрасываются на 404. Вы получили гневное письмо от клиента. Их сайт "сломан", изображения не загружаются, кумулятивная смена макета бунтует, и все в беспорядке. Толпы людей насмехаются над вашим сломанным кодом в Twitter. Забавный GIF, загруженный по URL-адресу Giphy, больше не существует. А кто-то случайно удалил изображение из CMS.

Хотя вы не можете контролировать сторонние URL-адреса или ошибки пользователей в CMS, вы можете предотвратить все это, обеспечив возврат изображений 404 тремя различными способами. Давайте посмотрим.

Ваши изображения выдают ошибку 404 повсюду. Вы получили гневное письмо от клиента. Их сайт «сломан», изображения не загружаются, совокупный сдвиг макета бунтует, и все перепутано. Толпа высмеивает ваш сломанный код в Твиттере. Забавный GIF-файл, загруженный через URL-адрес Giphy, больше не существует. И кто-то случайно удалил изображение из CMS.

Теперь, хотя вы не можете контролировать сторонние URL-адреса или ошибки пользователей в CMS, вы можете предотвратить все это, предоставив резервные варианты для изображений 404 тремя разными способами. Давайте взглянем.

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

Однако бывают ситуации, когда стоимость зависит от количества. Это известно как «tiered pricing» и обычно используется в хостинге, хранилище, API, SMS и других услугах. Примером этого является Brevo, где тарифные планы меняются в зависимости от количества электронных писем, отправляемых каждый месяц. Такие структуры ценообразования обычно представляются с помощью ползунка диапазона, позволяющего пользователям регулировать количество и видеть соответствующую цену.

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

Семантический HTML и aria

Оптимизировать ваш код для удобства чтения так же просто, как выбрать правильные HTML-теги. Рассмотрим это преобразование:

На этой неделе я очень обрадовался, когда наконец-то использовал :has. Проблема с ним заключалась в поддержке браузерами, которая пока недостаточно высока, чтобы использовать его в производственном коде. В частности, в Firefox его не будет до 121 версии (наконец-то!), а это мой любимый браузер...

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

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

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

Я покажу вам, как это сделать без использования JavaScript, а затем мы добавим немного JavaScript, чтобы сделать его еще лучше.

Эффект шифрования текста — это классная анимация, которая быстро раскрывает текст путем случайной смены символов — точно так же, как те сцены в фильмах, где хакеры расшифровывают строки текста! Вдохновленные блогом Evervault, мы создадим навигационное меню с таким эффектом, когда вы нажимаете на ссылки. Кроме того, мы предоставим вам как светлую, так и темную версии меню, так что вы сможете интегрировать этот пример в любой из наших шаблонов Tailwind.