:matchesПсеудо-класа је описан као функционална псеудо-класе по службеној ЦСС селектори Левел 4 спецификације. Сама себи не служи ни у једну сврху, осим што олакшава неке сложене селекторе омогућавајући им груписање. На неки начин можемо мислити :matchesкао синтаксички шећер.
У основи вас спречава да поновите бирач једињења када постоји само једна ставка која се разликује. Верујем да је не само брже писање већ и брже рашчлањивање прегледача, али о томе немам чврстих информација, колико знам да ова псеудо-класа не нуди ништа више од помагања писању бирача.
Синтакса
:matches( selector(, selector)* ):matches()прихвата листу ваљаних селектора као аргумент. Као:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )То чини неке сложене селекторе много лакшим за писање, на пример:
:matches(section, article, aside, nav) :matches(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )И мање понављајуће:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Имајте на уму да :matches()се не може угнездити и са којим не ради :not(). Ниједан од следећих селектора неће радити:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Нерд Алерт
Спецификације наводе да комбинатори (нпр ~. >...) нису дозвољени у прослеђеном бирачу у брзом профилу, али ће бити у сложеном профилу. Поједностављено, брзи профил биће прва (и могућа последња) примена спецификација, док сложени профил повезује хипотетичку савршену будућност у којој перформансе нису битне.
Ажурирање у јуну 2015: Нисмо сигурни колико је горњи пасус тачан више. Спецификације са којима смо се повезали су се промениле и тог дела више нема. Па смо уклонили везу.
Имитирајући понашање са Сасом
Могуће је симулирати слично понашање са Сасс-ом (или било којим ЦСС претпроцесором):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Ово ствара еквивалентни селектор :matches()искориштавањем гнежђења селектора. Можете чак створити неку врсту функције која ће ово аутоматизовати на вишем нивоу, али то овде није обухваћено.
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 88 | 78 | Не | 88 | 14 |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Напомена: пошто ЦСС одбацује читав селектор када постоји део који не разуме, морате да их раздвојите да би то функционисало свуда. На пример, ако сте још увек
/* This won't work in any browser because * Webkit browsers do not know `moz` and * Gecko browsers do not know `webkit` */ :-webkit-any(a, b) c, :-moz-any(a, b) c ( color: #BADA55; ) /* This however will work */ :-webkit-any(a, b) c ( color: #BADA55; ) :-moz-any(a, b) c ( color: #BADA55; )