Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 68 из 70 · 12 мин
Кнопки-команды commandfor, closedby у диалогов, настраиваемый select, прозрачность в выборе цвета, headingoffset и writingsuggestions.
Я обновился! Теперь умею открывать диалоги кнопкой без JavaScript.
HTML развивается каждый год. Пробуй новое, но проверяй поддержку.
commandforbutton: id элемента, которым она управляет.<button commandfor="d" command="show-modal">Открыть</button>
<dialog id="d">Привет!</dialog>commandshow-modal, close, request-close, show-popover, hide-popover, toggle-popover.<button commandfor="d" command="close">Закрыть</button>closedbyany — Escape и клик вне окна, closerequest — только Escape, none — только кнопкой.<selectedcontent>select повторяет выбранный вариант; сам select можно стилизовать полностью.<select>
<button><selectedcontent></selectedcontent></button>
<option>☕ Пенал</option>
<option>🥛 Ручка</option>
</select>alphainput type="color": можно выбрать прозрачность.<input type="color" alpha>colorspaceinput type="color": limited-srgb или display-p3.<input type="color" colorspace="display-p3">headingoffseth1 станет h3 и не сломает структуру.<section headingoffset="2">
<h1>Отзывы</h1>
</section>headingreset<dialog headingreset>
<h1>Бронь</h1>
</dialog>writingsuggestionsПеред использованием новинки: проверь поддержку в нужных браузерах и убедись, что без неё страница работает.
Без JavaScript: дай кнопке command="show-modal" и commandfor="hello", а диалогу — id="hello" и closedby="any", чтобы он закрывался кликом мимо.
command и commandfor — пока нетid="hello" — пока нетclosedby="any" — пока нетВыберите один ответ.
Как открыть <dialog id="d"> модально кнопкой без JavaScript?
Выберите один ответ.
Какое значение closedby разрешает закрыть диалог и Escape, и кликом вне окна?
Выберите все подходящие варианты.
Что нужно сделать перед использованием новой возможности HTML?
Проверяем состояние обучения…