Blog

<>
© 2019 shogenov.com


Тэг label

Я, действительно, был уверен, что все это знают, но многие удивляются тому факту, что тэг label можно связать с input и нажатие на label будет ставить фокус или активировать/деактивировать input

Эту особенность очень удобно использовать для стилизации чекбоксов и радиокнопок, а также для создания интересных эффектов при фокусировании на input.


Атрибут contentEditable

Этот атрибут позволяет делать содержимое блока изменяемым.

Тэг optgroup для select

Меня удивляет, что многие вообще не в курсе про optgrup. Этот тэг позволяет группировать options внутри

Апельсиновый
Лимонный
Персиковый
Светлый
Нормальный
Темный


Тэг base

Тэг base определяется внутри head и говорит о базовом пути.

Если мы на странице site.com/articles поставим ссылку

контакты

, то эта ссылка будет вести на site.com/articles/contacts

А если же мы в head добавим

, то та же самая ссылка будет вести уже на site.com/contacts

У этого элемента есть атрибут target. И если установить его в target=\"_blank\", то все ссылки будут открываться в новой вкладке.


Событие Onerror для тэга img

Onerror срабатывает перед тем как браузер покажет ваше изображение как битое. Можно на это событие повесить \"самоуничножение\" картинки из DOM. Для замены битой картинки на какую-то стандартную(noimage) или сообщение о \"битости\" всё же изящнее использовать :before и :after, но про это события я должен был упомянуть.


Тэг kbd

Этот тэг используется, в основном, для выделения названия компьютерных клавиш в тексте. Текст внутри такого тэга выделяется моноширным шрифтом.


Выделение удалённых частей текста

Для выделения части текста, которая со временем была удалена, используются тэги и . У них есть атрибуты cite и datetime. В первом указывается ссылка на причину удаления, а во втором дата удаления.

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


Гиперссылка для отправки e-mail

Я уверен, что все знают про

Написать мне

Если кто не знает, то эта ссылка открывает почтовый клиент по умолчанию, в котором открыто окно отправки нового письма и в поле \"кому\" уже вбит адрес, который указан после \"mailto:\" .

Но далеко не все знают, что можно пойти дальше:

href=\"malito:mail{at}yandex.ru?subject=Feedback&body=Тело20письма&cc=copy{at}yandex.ru&bcc=hiddencopy{at}yandex.ru\" title=\"Ссылка на какой-то сайт\">Сайт

Параметр subject - это тема письма,

body - текст письма,

cc - адрес, на который пойдёт копия

bc - адрес, на который пойдёт скрытая копия.

Зачем? Таким образом можно сформировать шаблон письма для обращения пользователей с сайта по email.


\">

В html5 появилось много разных типов для input, однако мало кто использует тип search. Как можно догадаться, он используется для создания поля поиска. Правда единственное его отличие от обычного input type='text' лишь в том, что при наличии текста внутри в правой части появляется крестик для очистки содержимого поля.


_

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


Если есть дополнения, возражения или комментарии, то можно обсудить в клубе программистов.

Если не подписан на \"Я - программист!\", то подписывайся, а если подписан, то расскажи другу!

","alias":"interesnye-osobennosti-html-kotorye-ty-vozmozhno-i-ne-znal","created":"2018-02-09 10:46:31","tags":null,"active":1,"excludeFromBlog":0},{"id":10,"title":"Вариативные шрифты","description":"Дизайн сайта, как правило, включает в себя несколько начертаний одного шрифта, а зачастую и несколько разных шрифтов. И на каждый шрифт и на каждое начертание шрифта приходится грузить свой шрифтовой...","header":"Вариативные шрифты","content":"

Дизайн сайта, как правило, включает в себя несколько начертаний одного шрифта, а зачастую и несколько разных шрифтов. И на каждый шрифт и на каждое начертание шрифта приходится грузить свой шрифтовой файл.

Вариативный шрифт - это куча начертаний в одном файле. Сколько конкретно? Бесконечно много!!!

Файл один, вариаций масса: насыщенность, пропорции, контраст, изменение размера строчных/выносных, анимация и т.п.

В спецификации OpenType Font Variations самые популярные вариации заложены в тэги из четырёх букв: насыщенность — wght, пропорция — wdth, курсив — ital, наклон — slnt и оптические размеры — opsz. Они включаются с помощью font-weight-, font-stretch- и font-style-свойств. CSS4 также обновился в соответствии с новыми значениями для поддержки OpenType Font Variations:

— font-weight — это любое целое число в диапазоне от 1 до 999 (вместо 100 в стандарте CSS3).

— font-stretch использует процент, где 100% — это нормальная пропорция, 50% — узкие начертания, а 200% — сверхширокие.

— font-style использует угол наклона между oblique –90deg и oblique 90deg.

— font-optical-sizing — новая опция, с синтаксисом либо auto, либо none,включающая ось оптических компенсаций, если она заложена в шрифте.

Шрифтовики могут использовать и свои собственные тэги — это позволяет им закладывать в шрифт бесконечную вариативность: контраст, размер строчных и выносных элементов, форму засечек, фактуры...

h1 { font-variation-settings: “wdth” 600, “wght” 200, “opsz” 48; }

Казалось бы вот оно будущее! И не надо больше тянуть кучу файлов. Получил один файл шрифта от дизайнера и радуешься жизни.

Но как всегда встает вопрос о поддержке данной технологии браузерами.

Оптимизм внушает тот факт, что разработка ведётся в том числе компаниями Apple, Google, Microsoft, Adobe. То есть в популярные браузеры, ОС, и программы, вероятно, скоро вариативные шрифты будут внедрены.

Останется только понять, насколько это быстро начнёт применяться в разработке.

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

____________________________________

Больше полезного на канале Я - программист

Общайся в чате Клуб программистов

Шутеечки и байки Дневник программиста

","alias":"variativnye-shrifty","created":"2018-02-09 10:45:45","tags":null,"active":1,"excludeFromBlog":0}],"loading":false,"error":null},"application":{"meta":{},"messages":[]},"user":{"loading":false,"error":null}}