Объединение ДНК HTML с помощью селекторов атрибутов CSS
Опубликовано: 2022-03-10На протяжении большей части моей карьеры селекторы атрибутов были скорее магией, чем наукой. Я ошеломленно смотрел на CSS для вывода ссылки в таблице стилей печати, ничего не понимая. Я добросовестно копировал и вставлял его в свою таблицу стилей для печати, а затем убегал, чтобы погасить любой проект, который был бы самой большой горящей кучей мусора.
Но вам больше не нужно смотреть с отвисшей челюстью на селекторы атрибутов CSS. К концу этой статьи вы будете использовать их для диагностики вашего сайта, исправления неразрешимых проблем и создания технологических возможностей, настолько продвинутых, что они кажутся волшебством. Вы можете подумать, что я слишком много обещаю, и вы правы, но как только вы поймете силу селекторов атрибутов, вам может показаться, что вы преувеличиваете.
На самом базовом уровне вы заключаете атрибут HTML в квадратные скобки и называете его селектором атрибута следующим образом:
[href] { color: chartreuse; } Текст любого элемента, который имеет href и не имеет более конкретного селектора, теперь волшебным образом превратится в шартрез. Специфичность селектора атрибутов такая же, как у классов.
Примечание . Для получения дополнительной информации о совпадении клеток, которое является специфичностью CSS, вы можете прочитать «Специфика CSS: вещи, которые вы должны знать» или, если вам нравятся «Звездные войны»: «Войны специфичности CSS».
Но вы можете сделать гораздо больше с помощью селекторов атрибутов. Как и ваша ДНК, они имеют встроенную логику, помогающую вам выбирать всевозможные комбинации и значения атрибутов. Вместо точного совпадения, как это делает селектор тегов, классов или идентификаторов, они могут сопоставлять любые атрибуты и даже строковые значения в атрибутах.
Выбор атрибута
Селекторы атрибутов могут жить сами по себе или быть более конкретными, например, если вам нужно выбрать все теги div , у которых есть атрибут title .
div[title]Но вы также можете выбрать дочерние элементы div, у которых есть заголовок, выполнив следующие действия:
div [title]Чтобы было ясно, отсутствие пробела между ними означает, что атрибут находится в одном и том же элементе (точно так же, как элемент и класс без пробела), а пробел между ними означает селектор потомков, т. е. выбор дочерних элементов элемента, у которых есть атрибут.
Вы можете получить гораздо более детальный выбор атрибутов, включая значения атрибутов.
div[title="dna"]В приведенном выше примере выбираются все элементы div с точным названием «dna». Заголовок «ДНК — это круто» или «Днамутация» не будет выбран, хотя существуют алгоритмы выбора, которые обрабатывают каждый из этих случаев (и многое другое). Мы доберемся до них в ближайшее время.
Примечание . В большинстве случаев кавычки не требуются в селекторах атрибутов, но я буду использовать их, поскольку считаю, что это повышает ясность и обеспечивает правильную работу пограничных случаев.
Если вы хотите выбрать «ДНК» из списка, разделенного пробелами, например, «Моя прекрасная ДНК» или «Мутировать ДНК — это весело!» вы можете добавить тильду или «волнистую линию», как я люблю это называть, перед знаком равенства.
div[title~="dna"]Вы можете выбрать такие заголовки, как «dontblamemeblamemydna» или «его-глупость-это-из-воспитания-не-ДНК», а затем вы можете использовать знак доллара $, чтобы соответствовать концу заголовка.
[title$="dna"]Чтобы сопоставить начало значения атрибута, такого как заголовки «dnamutants» или «dna-splicing-for-all», используйте знак вставки.
[title^="dna"]Хотя наличие точного совпадения полезно, оно может быть слишком узким, а совпадение вставки может быть слишком широким для ваших нужд. Например, вы можете не выбирать заголовок «генеалогия», но все же выбрать и «ген», и «ген-данные». Символ вертикальной черты (или вертикальная черта) — это именно то, что нужно; это делает точное совпадение, но включает, когда за точным соответствием следует тире.
[title|="gene"]Наконец, есть оператор атрибута полного поиска, который будет соответствовать любой подстроке.
[title*="dna"]Но используйте его с умом, так как приведенное выше будет соответствовать «мне нравится моя ДНК, нравится мое мясо, редкое», а также «эдне», «похищению» и «ехиднам» (чего Эдна действительно не должна делать. )
Что делает эти селекторы атрибутов еще более мощными, так это то, что они складываются, что позволяет вам выбирать элементы с несколькими факторами совпадения.
Но вам нужно a тег с заголовком и классом, оканчивающимся на «гены»? Вот как:
a[title][class$="genes"]Вы можете не только выбрать атрибуты HTML-элемента, вы также можете распечатать их мутировавшие гены, используя псевдо-«науку» (имеется в виду псевдоэлементы и объявление содержимого).
<span class="joke" title="Gene Editing!">What's the first thing a biotech journalist does after finishing the first draft of an article?</span> .joke:hover:after { content: "Answer:" attr(title); display: block; }Приведенный выше код покажет ответ на одну из худших шуток, когда-либо написанных о наведении курсора (да, я написал ее сам, и, да, назвать ее «шуткой» — великодушие).
Последнее, что нужно знать, это то, что вы можете добавить флаг, чтобы сделать поиск по атрибуту нечувствительным к регистру. Вы добавляете i перед закрывающей квадратной скобкой.
[title*="DNA" i]И, таким образом, это будет соответствовать «днк», «ДНК», «днк» и любому другому варианту.
Единственным недостатком этого является то, что i работает только в Firefox, Chrome, Safari, Opera и небольшом количестве мобильных браузеров.
Теперь, когда мы увидели, как выбирать с помощью селекторов атрибутов, давайте рассмотрим некоторые варианты использования. Я разделил их на две категории: General Uses и Diagnostics .
Общее использование
Стиль по типу ввода
Вы можете по-разному стилизовать типы ввода, например, электронная почта или телефон.
input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }Показать телефонные ссылки
Вы можете скрыть номер телефона в определенных размерах и вместо этого отобразить ссылку на телефон, чтобы упростить вызов по телефону.
span.phone { display: none; } a[href^="tel"] { display: block; }Внутренние и внешние ссылки, безопасные и небезопасные
Вы можете по-разному обрабатывать внутренние и внешние ссылки и оформлять безопасные ссылки иначе, чем небезопасные ссылки.
a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon; } a[href^="https://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content: url(lock-icon.svg); }Скачать иконки
Одним из атрибутов HTML5 был «загрузить», который, как вы уже догадались, говорит браузеру загрузить этот файл, а не пытаться его открыть. Это полезно для файлов PDF и DOC, к которым вы хотите, чтобы люди имели доступ, но не хотите, чтобы они открывались прямо сейчас. Это также упрощает рабочий процесс загрузки большого количества файлов подряд. Недостатком атрибута download является отсутствие визуального элемента по умолчанию, отличающего его от более традиционной ссылки. Часто это то, что вам нужно, но когда это не так, вы можете сделать что-то вроде приведенного ниже.
a[download]:after { content: url(download-arrow.svg); }Вы также можете сообщать типы файлов с помощью различных значков, таких как PDF, DOCX, ODF и так далее.
a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg); } a[href$="odf"]:after { content: url(open-office-icon.svg); }Вы также можете убедиться, что эти значки были только на загружаемых ссылках, сложив селектор атрибутов.
a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }Переопределить или повторно применить устаревший/устаревший код
Мы все сталкивались со старыми сайтами с устаревшим кодом, но иногда обновление кода не стоит того времени, которое потребовалось бы для его выполнения на шести тысячах страниц. Возможно, вам придется переопределить или даже повторно применить стиль, реализованный как атрибут до HTML5.
<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }Переопределить определенные встроенные стили
Иногда вы столкнетесь с встроенными стилями, которые портят работу, но они исходят из кода, который вы не контролируете. Следует сказать, что если вы можете изменить их, это было бы идеально, но если вы не можете, вот обходной путь.
Примечание . Это работает лучше всего, если вы знаете точное свойство и значение, которое хотите переопределить, и если вы хотите, чтобы оно переопределялось везде, где оно появляется.
В этом примере поле элемента задается в пикселях, но его необходимо расширить и установить в em , чтобы элемент мог правильно настроиться, если пользователь изменит размер шрифта по умолчанию.
<divTeenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; } Примечание . Этот подход следует использовать с особой осторожностью, так как если вам когда-либо понадобится переопределить этот стиль, вы попадете в !important войну, и котята умрут.
Отображение типов файлов
Список допустимых файлов для файлового ввода по умолчанию невидим. Как правило, мы использовали бы псевдоэлемент для их отображения, и, хотя вы не можете использовать псевдоэлементы для большинства input тегов (или вообще в Firefox или Edge), вы можете использовать их для ввода файлов.
<input type="file" accept="pdf,doc,docx"> [accept]:after { content: "Acceptable file types: " attr(accept); }HTML-аккордеонное меню
Не очень широко разрекламированные details и дуэт summary тегов — это способ сделать расширяемые/аккордеонные меню только с помощью HTML. Детали охватывают как тег summary , так и контент, который вы хотите отобразить, когда аккордеон открыт. Щелчок по сводке расширяет тег detail и добавляет открытый атрибут. Атрибут open позволяет легко оформить открытый тег details иначе, чем закрытый тег details .
<details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details> details[open] { background-color: hotpink; }Печать ссылок
Отображение URL-адресов в стилях печати привело меня к пониманию селекторов атрибутов. Теперь вы должны знать, как построить его самостоятельно. Вы просто a все теги с помощью href , добавляете псевдоэлемент и печатаете их, используя attr() и content .
a[href]:after { content: " (" attr(href) ") "; }Пользовательские подсказки
Создание настраиваемых всплывающих подсказок с помощью селекторов атрибутов — это весело и легко (ладно, весело, если вы такой же ботаник, как я, но в любом случае легко).
Примечание . Этот код должен привести вас к общему окружению, но могут потребоваться некоторые настройки интервалов, отступов и цветовой схемы в зависимости от среды вашего сайта и от того, лучше ли у вас вкус, чем у меня, или нет.
[title] { position: relative; display: block; } [title]:hover:after { content: attr(title); color: hotpink; background-color: slateblue; display: block; padding: .225em .35em; position: absolute; right: -5px; bottom: -5px; }AccessKeys
Одна из замечательных особенностей Интернета заключается в том, что он предоставляет множество различных вариантов доступа к информации. Одним редко используемым атрибутом является возможность установить accesskey доступа, чтобы к этому элементу можно было получить доступ напрямую с помощью комбинации клавиш и буквы, заданной accesskey доступа (точная комбинация клавиш зависит от браузера). Но нет простого способа узнать, какие ключи были установлены на веб-сайте.
Следующий код покажет эти клавиши на :focus . Я не использую при hover , потому что в большинстве случаев accesskey нужен тем, у кого проблемы с использованием мыши. Вы можете добавить это как второй вариант, но убедитесь, что это не единственный вариант.
a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }Диагностика
Эти параметры помогают выявлять проблемы либо в процессе сборки, либо локально при попытке исправить проблемы. Если вы разместите их на рабочем сайте, ваши пользователи увидят ошибки.
Аудио без элементов управления
Я не слишком часто использую тег audio , но когда я его использую, я часто забываю включить атрибут controls . Результат: ничего не отображается. Если вы работаете в Firefox, этот код может помочь вам выяснить, скрывается ли у вас аудиоэлемент или синтаксис или какая-то другая проблема препятствует его отображению (это работает только в Firefox).
audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }Нет замещающего текста
Изображения без альтернативного текста — это кошмар логистики и доступности. Их трудно найти, просто взглянув на страницу, но если вы добавите это, они сразу же появятся.
Примечание . Я использую outline вместо border , потому что границы могут увеличить ширину элемента и испортить макет. outline не добавляет ширины.
img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }Асинхронные файлы Javascript
Веб-страницы могут быть конгломератом систем управления контентом, плагинов, фреймворков и кода, который Тед (сидящий через три кабинета) написал в отпуске, потому что сайт не работал, и он боится вашего босса. Выяснение того, что JavaScript загружает асинхронно, а что нет, может помочь вам сосредоточиться на том, где повысить производительность страницы.
script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }Элементы событий Javascript
Вы также можете выделить элементы, которые имеют атрибут события JavaScript, чтобы преобразовать их в свой файл JavaScript. Здесь я сосредоточился на OnMouseOver , но он работает для любого атрибута события JavaScript.
[OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }Скрытые предметы
Если вам нужно увидеть, где живут ваши скрытые элементы или скрытые входы, вы можете показать их с помощью:
[hidden], [type="hidden"] { display: block; }Но со всеми этими удивительными возможностями вы думаете, что должна быть загвоздка. Конечно, селекторы атрибутов должны работать, только если они помечены в Chrome или в ночных сборках Fiery Foxes на краю Safari. Это слишком хорошо, чтобы быть правдой. И, к сожалению, есть подвох.
Если вы хотите работать с селекторами атрибутов в самом любимом из браузеров — то есть в IE6 — у вас не получится. (Все в порядке, пусть слезы прольются. Никаких суждений.) Почти везде, куда вы можете пойти. Селекторы атрибутов являются частью спецификации CSS 2.1 и поэтому используются в браузерах уже большую часть десятилетия.
И поэтому эти селекторы больше не должны быть для вас волшебными, а раскрываться как достаточно продвинутая технология. В них больше наука, чем магия, и теперь, когда вы знаете их самые сокровенные секреты, решать вам. Идите вперед и творите загадочные чудеса науки в Интернете.