[Разработка веб-сайтов, CSS, Программирование, HTML] Вы можете создавать эти элементы, не используя JavaScript (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Мы привыкли создавать некоторые элементы пользовательского интерфейса с помощью JavaScript, например аккордеоны, всплывающие подсказки (тултипы), усечение текста и т. д. Но, поскольку HTML и CSS постоянно получают новые функции, а старые браузеры больше не нужно поддерживать, мы можем использовать намного меньше JavaScript-кода для создания элементов пользовательского интерфейса и больше фокусироваться на логической части (проверки, обработка данных и т. д.).Некоторые решения по-прежнему кажутся хакерскими и негибкими, но они полезны в небольших проектах и если это элементы для разового использования. Зачем писать JavaScript-функцию (или использовать jQuery, если вы ещё помните) для одного-единственного аккордеона на вашем веб-сайте? Это была моя мысль, когда я добавлял аккордеон в нижний колонтитул для мобильных устройств на моём личном веб-сайте.
Аккордеон без использования JavaScript!Вот несколько примеров создания элементов без JavaScript.Адаптивное усечение текстаУсечение текста с помощью CSS очень просто реализовать, поскольку мы редактируем не HTML-содержимое текста, а только его визуализацию. В то время как усечение однострочного текста хорошо поддерживается в старых браузерах, усечение многострочного текста поддерживается только в новых.Извините, данный ресурс не поддреживается. :( Компонент рейтингаРейтинг является обязательным элементом большинства форм. Есть много способов реализовать его с помощью CSS: использовать фоновое изображение, JavaScript, значки и т. д. Наиболее доступный способ — реализовать его с помощью значков и нативных радиокнопок.Недостатком этой реализации является то, что радиокнопки находятся в обратном порядке (от 5 до 1 рейтенгового значения), потому что нам нужно выбрать все звёзды, включая выбранную, которую невозможно выбрать с помощью CSS. Вот почему мы меняем порядок и закрашиваем звёзды в обратном порядке.Эта реализация очень гибкая и может быть легко кастомизирована.Извините, данный ресурс не поддреживается. :( Всплывающая подсказка (тултип) / раскрывающееся меню (dropdown меню)Это очень гибкий элемент, потому что его логика CSS может использоваться как для всплывающих подсказок, так и для раскрывающихся меню, поскольку они работают одинаково и оба поддерживают функции наведения и нажатия (касания).Проблемой этой реализации можно считать то, что из-за стилей фокуса всплывающая подсказка (раскрывающийся список) будет оставаться открытой при щелчке до тех пор, пока пользователь не уберёт курсор от элемента (элемент использует фокус).Извините, данный ресурс не поддреживается. :( Модальные окнаЭто немного хакерская реализация, которая полностью полагается на URL-адрес. Идентификатор в URL-адресе должен соответствовать модальному элементу, который нам нужно открыть.Извините, данный ресурс не поддреживается. :( Плавающий лейблЯ рассмотрел реализацию инпутов с плавающим лейблом в отдельной статье, поскольку эта реализация немного сложнее.Извините, данный ресурс не поддреживается. :( Тоггл / АккордеонНедавно в HTML появился нативный элемент «аккордеон» (тоггл) с элементами <details> и <summary>, но недостатком использования этих элементов является то, что у них не так много вариантов стилизации, поэтому разработчики по-прежнему продолжают использовать свои собственные реализации. К счастью, с помощью логики чекбокса или радиокнопки мы можем создавать тогллы и аккордеоны, не полагаясь на JavaScript.Обратной стороной использования этой реализации является то, что она полагается на HTML-элемент инпута и его логику, в результате которой требуется дополнительный HTML-код, но, с другой стороны, это приводит нас к очень доступному элементу.Извините, данный ресурс не поддреживается. :( ЗаключениеКак видите, эти реализации полагаются на логику селектора CSS, например :focus и :placeholder-shown, чтобы заменить логику JavaScript. Некоторые из этих решений можно считать хакерскими, но они быстрые, гибкие и не полагаются на JavaScript.Я использовал некоторые из этих решений в своих проектах, поэтому могу избежать добавления какого-либо дополнительного JavaScript-кода или полностью отказаться от его использования для интерфейса.Конечно, существует множество других решений, предназначенных только для CSS, но я посчитал эти наиболее интересными. Если вы используете какие-либо другие решения, дайте мне знать в комментариях.
Узнайте, как прокачаться в других специальностях или освоить их с нуля:
Другие профессии и курсыПРОФЕССИИ
- Профессия Fullstack-разработчик на Python
- Профессия Java-разработчик
- Профессия QA-инженер на JAVA
- Профессия Frontend-разработчик
- Профессия Этичный хакер
- Профессия C++ разработчик
- Профессия Разработчик игр на Unity
- Профессия Веб-разработчик
- Профессия iOS-разработчик с нуля
- Профессия Android-разработчик с нуля
КУРСЫ
- Курс по Machine Learning
- Курс "Machine Learning и Deep Learning"
- Курс "Математика для Data Science"
- Курс "Математика и Machine Learning для Data Science"
- Курс "Python для веб-разработки"
- Курс "Алгоритмы и структуры данных"
- Курс по аналитике данных
- Курс по DevOps
===========
Источник:
habr.com
===========
===========
Автор оригинала: Adrian Bece
===========Похожие новости:
- [Ненормальное программирование, Forth] Численный FORTH
- [Бизнес-модели, Производство и разработка электроники, Транспорт] Ford сокращает производство автомобилей на шести заводах в США из-за нехватки чипов
- [Ненормальное программирование, Я пиарюсь, C++, ООП] CDD — Cli Driven Development
- [Программирование, Анализ и проектирование систем, Проектирование и рефакторинг, IT-стандарты] Хороший, плохой, злой комментарий
- [Программирование, Rust] Макросы в Rust. macro_rules
- [Python, Программирование, Учебный процесс в IT, Data Engineering] Из филолога в Python-разработчики: как переучиться и чего ждать от новой профессии
- [Программирование микроконтроллеров, Интернет вещей] 10 плат для начала разработки IoT в 2021 (перевод)
- [Информационная безопасность, Тестирование IT-систем, DNS, Тестирование веб-сервисов] Путаница зависимостей. Как я взломал Apple, Microsoft и десятки других компаний (перевод)
- [Python, JavaScript, Программирование, HTML] Python & EEL. Делаем просто на Python’е и красиво на JS
- [Управление разработкой, Управление продуктом, Бизнес-модели, Производство и разработка электроники, IT-компании] Во все тяжкие: как Intel потеряла хватку и решила вернуть былое величие
Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_css, #_programmirovanie (Программирование), #_html, #_html, #_html5, #_css, #_css3, #_csstricks, #_programmirovanie (программирование), #_razrabotka (разработка), #_razrabotka_sajtov (разработка сайтов), #_skillfactory, #_blog_kompanii_skillfactory (
Блог компании SkillFactory
), #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_css, #_programmirovanie (
Программирование
), #_html
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 20:32
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
 Мы привыкли создавать некоторые элементы пользовательского интерфейса с помощью JavaScript, например аккордеоны, всплывающие подсказки (тултипы), усечение текста и т. д. Но, поскольку HTML и CSS постоянно получают новые функции, а старые браузеры больше не нужно поддерживать, мы можем использовать намного меньше JavaScript-кода для создания элементов пользовательского интерфейса и больше фокусироваться на логической части (проверки, обработка данных и т. д.).Некоторые решения по-прежнему кажутся хакерскими и негибкими, но они полезны в небольших проектах и если это элементы для разового использования. Зачем писать JavaScript-функцию (или использовать jQuery, если вы ещё помните) для одного-единственного аккордеона на вашем веб-сайте? Это была моя мысль, когда я добавлял аккордеон в нижний колонтитул для мобильных устройств на моём личном веб-сайте.  Аккордеон без использования JavaScript!Вот несколько примеров создания элементов без JavaScript.Адаптивное усечение текстаУсечение текста с помощью CSS очень просто реализовать, поскольку мы редактируем не HTML-содержимое текста, а только его визуализацию. В то время как усечение однострочного текста хорошо поддерживается в старых браузерах, усечение многострочного текста поддерживается только в новых.Извините, данный ресурс не поддреживается. :( Компонент рейтингаРейтинг является обязательным элементом большинства форм. Есть много способов реализовать его с помощью CSS: использовать фоновое изображение, JavaScript, значки и т. д. Наиболее доступный способ — реализовать его с помощью значков и нативных радиокнопок.Недостатком этой реализации является то, что радиокнопки находятся в обратном порядке (от 5 до 1 рейтенгового значения), потому что нам нужно выбрать все звёзды, включая выбранную, которую невозможно выбрать с помощью CSS. Вот почему мы меняем порядок и закрашиваем звёзды в обратном порядке.Эта реализация очень гибкая и может быть легко кастомизирована.Извините, данный ресурс не поддреживается. :( Всплывающая подсказка (тултип) / раскрывающееся меню (dropdown меню)Это очень гибкий элемент, потому что его логика CSS может использоваться как для всплывающих подсказок, так и для раскрывающихся меню, поскольку они работают одинаково и оба поддерживают функции наведения и нажатия (касания).Проблемой этой реализации можно считать то, что из-за стилей фокуса всплывающая подсказка (раскрывающийся список) будет оставаться открытой при щелчке до тех пор, пока пользователь не уберёт курсор от элемента (элемент использует фокус).Извините, данный ресурс не поддреживается. :( Модальные окнаЭто немного хакерская реализация, которая полностью полагается на URL-адрес. Идентификатор в URL-адресе должен соответствовать модальному элементу, который нам нужно открыть.Извините, данный ресурс не поддреживается. :( Плавающий лейблЯ рассмотрел реализацию инпутов с плавающим лейблом в отдельной статье, поскольку эта реализация немного сложнее.Извините, данный ресурс не поддреживается. :( Тоггл / АккордеонНедавно в HTML появился нативный элемент «аккордеон» (тоггл) с элементами <details> и <summary>, но недостатком использования этих элементов является то, что у них не так много вариантов стилизации, поэтому разработчики по-прежнему продолжают использовать свои собственные реализации. К счастью, с помощью логики чекбокса или радиокнопки мы можем создавать тогллы и аккордеоны, не полагаясь на JavaScript.Обратной стороной использования этой реализации является то, что она полагается на HTML-элемент инпута и его логику, в результате которой требуется дополнительный HTML-код, но, с другой стороны, это приводит нас к очень доступному элементу.Извините, данный ресурс не поддреживается. :( ЗаключениеКак видите, эти реализации полагаются на логику селектора CSS, например :focus и :placeholder-shown, чтобы заменить логику JavaScript. Некоторые из этих решений можно считать хакерскими, но они быстрые, гибкие и не полагаются на JavaScript.Я использовал некоторые из этих решений в своих проектах, поэтому могу избежать добавления какого-либо дополнительного JavaScript-кода или полностью отказаться от его использования для интерфейса.Конечно, существует множество других решений, предназначенных только для CSS, но я посчитал эти наиболее интересными. Если вы используете какие-либо другие решения, дайте мне знать в комментариях.  Узнайте, как прокачаться в других специальностях или освоить их с нуля: Другие профессии и курсыПРОФЕССИИ
=========== Источник: habr.com =========== =========== Автор оригинала: Adrian Bece ===========Похожие новости:
Блог компании SkillFactory ), #_razrabotka_vebsajtov ( Разработка веб-сайтов ), #_css, #_programmirovanie ( Программирование ), #_html |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 20:32
Часовой пояс: UTC + 5