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

Вот твит:

Что приводит нас к…

# 1 CSS "+" Селектор смежного одноуровневого комбинатора

Пример использования: у вас есть список элементов с рамкой вокруг него. Вам также нужна граница между каждым элементом списка.

Решение. Посмотрите мою ручку здесь

# 2 HTML ‹summary› & ‹details› Теги

Пример использования: вам понадобится гармошка / складные секции.

Как вы это можете делать: использование компонента Bootstrap Collapse или написание собственного стиля javascript + для переключения разделов.

Как вы могли бы это сделать? Благодаря ‹summary› и ‹details› эта задача стала очень простой.

  • Примечание. Эти теги не подходят для IE. Разделы будут отображаться как открытые, если они используются в IE.

Решение / пример. Оформить заказ на мою ручку здесь

  • Хотите, чтобы раздел по умолчанию открывался / разворачивался? Просто установите для атрибута open логическое значение true в теге сведений.

  • Вам не нравятся значки курсора вправо и вниз, которые используются по умолчанию в сводном теге? Одно из решений - заменить их своими собственными svgs. Вы можете снова использовать здесь open bool, чтобы использовать другой значок при раскрытии деталей. (Обязательно используйте дочерний комбинатор ‘› ’при вложении тегов ‹details› & ‹summary›, чтобы изменение значка не передавалось детям)

# 3: Тег HTML ‹progress›

Пример использования: вам нужен индикатор выполнения для загрузки или скачивания файла.

Как вы это делаете: развертывание собственной библиотеки или использование сторонней библиотеки.

Как вы могли бы это сделать: просто используйте HTML-тег ‹progress›. Требуется два атрибута, зависящих от элемента, «значение» и «макс».

Пример. Оформить заказ на мою ручку здесь

Вы можете изменить стили по желанию. Вот несколько основных настроек, которые я сделал в своем примере.

___________________________________________________________________

Сталкивались ли вы с какими-либо другими малоиспользуемыми селекторами CSS или тегами HTML? Позвольте мне знать в комментариях ниже!

Все приведенные выше примеры также можно найти в моей Коллекции Codepen с недостаточно используемыми функциями CSS и HTML.

Спасибо за прочтение! Вы можете найти меня в Twitter и Codepen | Лиз Вендлинг