5 вещей, для которых вам не нужен Javascript

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

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

1. Анимация SVG

Вы, наверное, знаете, что HTML-элементы можно анимировать с помощью CSS. Однако знаете ли вы, что точно так же можно анимировать SVG? Один из наших любимых приемов — установить для stroke-dasharrayсвойства высокое значение, а затем анимировать stroke-dashoffset. Это приводит к тому, что путь «рисуется» с течением времени или линия движется вдоль пути, как в этой анимации некоторых фейерверков:

Для другого, более сложного примера того, как вы можете создавать анимированные диаграммы с помощью CSS, посетите нашу целевую страницу! Раздел « Как это работает » содержит подробную анимацию. Если вы хотите скопировать из него, Lexoral имеет открытый исходный код на GitHub .

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

• Незначительное использование полосы пропускания
• Улучшенная совместимость устройств
• Идеальное качество при любом разрешении
• Отзывчивый и масштабируемый
• Можно зарегистрировать в VCS

Если вы хотите больше узнать о CSS-анимациях, могу порекомендовать начать с руководства по MDN . Для создания SVG используйте либо визуальный редактор, такой как Inkscape , либо более ориентированный на разработчиков инструмент, такой как этот . Часто проще просто написать SVG-разметку вручную, и в этом случае на MDN есть отличная справочная страница .

2. Боковые панели

Вам нужна боковая панель навигации, которая скрывается, когда она не используется. Уберите этот файл скрипта, для этого у нас есть CSS. Мы будем использовать transformего для перемещения за пределы экрана по умолчанию, а затем переопределять его, когда пользователь наводит курсор на элемент. Важно отметить, что мы также должны отображать меню, когда вы используете Tabклавишу для выбора одной из ссылок в меню — важный шаг к тому, чтобы наш сайт оставался доступным:

Этот пример — просто умное использование псевдоклассов в CSS. Вы, вероятно, пропустили эту ссылку, но вернитесь и щелкните по ней. Даже если вы думаете, что знаете о CSS все, щелкните по нему и прочитайте этот список псевдоклассов. Посмотрите, сколько их. Подумайте, как вы могли бы их использовать.

Этот пример — просто умное использование псевдоклассов в CSS. Вы, вероятно, пропустили эту ссылку, но вернитесь и щелкните по ней. Даже если вы думаете, что знаете о CSS все, щелкните по нему и прочитайте этот список псевдоклассов. Посмотрите, сколько их. Подумайте, как вы могли бы их использовать.

Это слишком легко увидеть:hoverи предположить, что это просто для стилизации гиперссылок. Мы только что видели, как его использовали для создания боковой панели, но вот еще 9 способов, которыми вы можете его использовать:

1. Выпадающие меню
2. Подсказки
3. Отображение миниатюр видео
4. Увеличение предварительного просмотра изображения
5. Отображение предварительного просмотра места назначения ссылки, как в Википедии
6. Выделение важных частей сложного интерфейса
7. Стилизация наведенной строки в таблице
8. Предварительный просмотр того, что произойдет, если вы нажмете кнопку
9. Кнопка «Отклонить файлы cookie» убирается, когда люди пытаются ее щелкнуть.

Последнее было шуткой. Пожалуйста, не делай этого. 

Некоторым из этих идей потребуется задержка перед активацией эффекта наведения — было бы довольно сложно использовать Википедию, если бы всплывающее окно закрывало половину экрана каждый раз, когда вы наводите курсор мыши на ссылку. Возможно, в этом случае вам придется вернуться к использованию Javascript, но transition-delayсначала попробуйте свойство.

3. Sticky Positioning

PSA: position: sticky;существует сейчас. Пожалуйста, прекратите переопределять его с помощью Javascript. Некоторые из вас не понимают, почему мы упоминаем такую ​​базовую функцию. Если это вы, перейдите к следующему разделу.

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

Обратите внимание, что при прокрутке вниз синий квадрат всегда находится в одном и том же месте. Легко сказать, когда кто-то пытался сделать свое Sticky Positioning своими руками, потому что элемент всегда отстает на один кадр при прокрутке. Чем быстрее вы прокручиваете вниз, тем выше будет экран. Затем, когда вы прекращаете прокрутку, он переходит в правильное положение.

Липкое позиционирование — это комбинация relativeи fixedпозиционирования. Он в основном используется для навигационных меню, которые должны следовать за вами, когда вы прокручиваете страницу вниз. Он также используется на этой странице, если вы просматриваете ее на большом альбомном экране. Панель справа с лицом использует stickyпозиционирование, что означает, что всегда смотрят на вас, когда вы читаете блоги.

Чтобы использовать фиксированное позиционирование, сначала необходимо установить position: stickyи указать расстояния для некоторых (обычно только одного) из top, right, bottom, и left. Когда элемент прокручивается за эту позицию на экране, он переключается на fixedпозиционирование и начинает следовать за вами. Если вы прокрутите назад, он вернется в исходное положение и останется там. Однако они не следуют за вами вечно — Sticky элемент никогда не выйдет за пределы содержащего его элемента.

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

4. Accordion меню

Аккордеонные меню обычно используются для часто задаваемых вопросов, где у вас есть список заголовков, и каждый из них можно расширить, чтобы показать содержимое внутри. Это еще один случай, когда говорится о довольно простой функции HTML+CSS, но она <details>существует:

Не всегда хорошая идея использовать Accordion меню из-за множества проблем с удобством использования. Тем не менее, этот <details>элемент очень полезен, когда вы хотите скрыть какой-либо контент от пользователя, особенно если он очень длинный и большинство пользователей не захотят его читать.

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

Одним из недостатков подхода на чистом CSS здесь является то, что detailsсложно анимировать без Javascript. Можно анимировать открытие коробки с помощью transition, если вы знаете высоту коробки в открытом состоянии. В настоящее время браузеры изначально не поддерживают анимацию закрывающегося элемента, поэтому вам придется вернуться к Javascript или пользовательской анимации входа/выхода .

5. Темный режим

У вас может быть полностью функциональный темный режим на вашем веб-сайте без каких-либо Javascript, файлов cookie или отдельных URL-адресов — все в браузере. В этом есть 2 компонента. Во-первых, вы должны использовать prefers-color-scheme медиа-запрос . Это позволяет автоматически отображать версию сайта в светлом или темном режиме в зависимости от предпочтений пользователя.

Однако лучший способ сделать ваш сайт доступным — предоставить пользователю возможность выбора . Возможно, им обычно нравится темный режим, но на вашем сайте они предпочли бы светлый режим. Мы можем использовать :checked– селектор CSS, который соответствует только отмеченным флажкам. Возможно, вы сможете увидеть, куда это идет:

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

Хитрость заключается в том, чтобы объединить :checkedпсевдокласс с ~родственным комбинатором. Подобное правило CSS p ~ aприменяется ко всем <a>элементам, <p>перед которыми в HTML-документе есть родственный элемент.

Фактическое используемое правило #checkboxId:checked ~ .body– оно применяет некоторые стили к классу body только при установленном флажке. Поскольку затронутый элемент должен быть последующим родственным элементом, мы не можем установить флажок темного режима внутри элемента body. Вместо этого мы помещаем его перед элементом body, а затем используем, position: absoluteчтобы расположить его внутри.

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

Изучать все тонкости HTML/CSS сложно. Это может быть неприятно, когда вы точно знаете, что хотите, но не можете понять, как сообщить компьютеру. Тем не менее, сейчас проще, чем когда-либо, сделать веб-сайты великолепными. CSS разрабатывался 20 лет, и он полон новых функций, облегчающих жизнь. Если вы хотите продолжить чтение, проверьте:

• Флексбокс
• Сетка
• Позиция
• SVG
• Переход
• Анимация
• Псевдоклассы
• Комбинаторы
• Функции CSS (преобразование, минимум, максимум, расчет, градиенты)

Некоторые из вещей, которые мы упомянули, являются относительно новыми, а это означает, что если вам нужна поддержка Internet Explorer, эти методы, вероятно, не для вас. Например, position: stickyи :focus-withinне поддерживаются ни в одной версии IE. Надеюсь, вы сможете забыть, что когда-либо существовал Internet Explorer, и в этом случае все, что здесь использовалось, почти на 100 % поддерживается в браузерах!

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

Это как когда мы говорили о темном режиме. Рекомендуется вам включить небольшой фрагмент кода JavaScript для сохранения состояния флажка переопределения пользователя. Если бы они не включили JavaScript, веб-сайт по-прежнему работал бы нормально, но вы использовали этот код, чтобы сделать его немного лучше, когда доступен JS. Чисто JS-решение будет полностью сломано для любого, у кого нет JavaScript. А это очень много людей .

В любом случае, мы показали, насколько мощным инструментом может быть CSS. Цель этого поста не заключалась в том, чтобы вы просто копировали код примера, хотя вы можете свободно это делать. Ваша задача – исследовать, пробовать что-то новое.

Источник статьи: https://lexoral.com/