Разделительные линии между option
А вы знали, что теперь вы можете добавлять элементы <hr> между элементами <option> внутри <select> для создания визуального разделения
Эта функция доступна в последних версиях всех основных браузеров, но может не работать в старых
Если вам нужна определенная группировка, с именами групп, используйте <optgroup>
➡️ @FrontendPortal | #HTML
А вы знали, что теперь вы можете добавлять элементы <hr> между элементами <option> внутри <select> для создания визуального разделения
Эта функция доступна в последних версиях всех основных браузеров, но может не работать в старых
Если вам нужна определенная группировка, с именами групп, используйте <optgroup>
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍54❤10🤯2
This media is not supported in your browser
VIEW IN TELEGRAM
Эта платформа предлагает более 500 вопросов, разбитых на 20 категорий, включая такие темы, как Git, CSS, JavaScript, React и многое другое.
Все вопросы отсортированы по категориям и курируются пользователями.
Вопросы на английском, но это отличная возможность подтянуть язык👍
👉 https://quizzes.madza.dev/
➡️ @FrontendPortal | #resourse
Все вопросы отсортированы по категориям и курируются пользователями.
Вопросы на английском, но это отличная возможность подтянуть язык
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23❤5🔥2🤯1
Please open Telegram to view this post
VIEW IN TELEGRAM
😁104👍5🔥2👨💻1
Вы могли не знать, что мы можем настроить вывод
JSON.stringify() По умолчанию
JSON.stringify(data) не сериализует Set, Map, BigInt и т. д. Но с помощью функции replacer можно управлять тем, какие данные попадут в итоговую строкуPlease open Telegram to view this post
VIEW IN TELEGRAM
👍45❤5🔥4😁1
Подборка небольших советов и трюков, которые вы можете использовать, используя современный синтаксис CSS
➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍53❤6🏆1
This media is not supported in your browser
VIEW IN TELEGRAM
Наткнулся на интересную библиотеку — Shepherd JS
Это мощная библиотека JS, предназначенная для создания интерактивных пошаговых туров и руководств на веб-страницах
Она поддерживает интеграцию с различными фреймворками, такими как React, Ember, Angular, Vue.js, а также может использоваться с чистым JavaScript
А минималистичный стиль оформления позволяет настроить внешний вид под свой дизайн без лишних заморочек. Плюс, полная поддержка клавиатурной навигации и соответствие стандартам доступности
Для WordPress существует плагин Simple Tour Guide на основе Shepherd.js
Если вы хотите увидеть Shepherd.js в действии, рекомендую посмотреть следующее видео
➡️ @FrontendPortal | #resourse
Это мощная библиотека JS, предназначенная для создания интерактивных пошаговых туров и руководств на веб-страницах
Она поддерживает интеграцию с различными фреймворками, такими как React, Ember, Angular, Vue.js, а также может использоваться с чистым JavaScript
А минималистичный стиль оформления позволяет настроить внешний вид под свой дизайн без лишних заморочек. Плюс, полная поддержка клавиатурной навигации и соответствие стандартам доступности
Для WordPress существует плагин Simple Tour Guide на основе Shepherd.js
Если вы хотите увидеть Shepherd.js в действии, рекомендую посмотреть следующее видео
Please open Telegram to view this post
VIEW IN TELEGRAM
👍30❤4🔥4🏆3
Мало кто знает этот крутой трюк для фавикона вашего сайта.
Вы можете загрузить другой фавикон для темного режима.
Как это работает:
🔸 Первый
🔸 Второй
Если вы используете SVG в качестве фавикона, вы также можете добавить CSS-стили прямо внутри, чтобы он адаптировался (2 картинка)
➡️ @FrontendPortal | #tip
Вы можете загрузить другой фавикон для темного режима.
Как это работает:
<link> указывает фавикон для светлого режима (обычный favicon)<link> загружает другой фавикон, если у пользователя включен темный режим. Это определяется с помощью media="(prefers-color-scheme: dark)"Если вы используете SVG в качестве фавикона, вы также можете добавить CSS-стили прямо внутри, чтобы он адаптировался (2 картинка)
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥54👍14❤6
Туториал по созданию перекрывающихся элементов c помощью Grid CSS
В Grid более одного элемента могут занимать одну и ту же ячейку сетки. Мы используем этот факт в демонстрации
➡️ @FrontendPortal | #CSS
В Grid более одного элемента могут занимать одну и ту же ячейку сетки. Мы используем этот факт в демонстрации
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍56🔥18❤5🤯1