No me di cuenta del apoyo para @supports ¡determinar el soporte del selector fue tan bueno! normalmente pienso en @supports como una forma de probar property: value apoyo de pareja. pero con el selector() función, también podemos probar el soporte del selector. Se parece a esto:
@supports selector(:nth-child(1 of .foo)) {
}Simplemente suelta el selector justo entre los paréntesis y eso es lo que prueba.
Ese selector de arriba es una prueba bastante buena, en realidad. Es un “argumento de lista de selectores” que funciona para el :nth-child selectores de ‘n’ amigos. Mientras escribo, solo es compatible con Safari.
Entonces, digamos que su situación ideal es que el navegador admita este selector. Aquí hay un ejemplo. sabes que con <ol> y <ul> el único elemento hijo válido es <li>. Pero también diga que esta lista necesita separadores, entonces usted (y no digo que sea una gran idea) hizo este tipo de cosas:
<ul>
<li class="list-item">List item</li>
<li class="list-item">List item</li>
<li class="separator"></li>
/* ... */
</ul>Entonces también querrá poner rayas de cebra en la lista. Y, si desea rayas de cebra, debe seleccionar unas de otras .list-item, ignorando la .separator. Entonces…
li:nth-child(odd of .list-item) {
background: lightgoldenrodyellow;
}Pero solo Safari admite eso… así que puedes hacer:
@supports selector(:nth-child(1 of .foo)) {
li:nth-child(odd of .list-item) {
background: lightgoldenrodyellow;
}
}Si no te importara cuál era el respaldo, ni siquiera tendrías que preocuparte por el @supports en absoluto. Pero di que te importa el respaldo. Quizás en la situación compatible, las rayas de cebra hacen el trabajo pesado del UX que está buscando, por lo que todo lo que necesita para el separador es un poco de espacio. Pero para los navegadores que no son compatibles, necesitará algo más robusto porque no tiene las rayas de cebra.
Así que ahora puedes diseñar ambas situaciones:
@supports selector(:nth-child(1 of .foo)) {
li {
padding: 0.25em;
}
li:nth-child(odd of .list-item) {
background: lightgoldenrodyellow;
}
li.separator {
list-style: none;
margin: 0.25em 0;
}
}
@supports not selector(:nth-child(1 of .foo)) {
li.separator {
height: 1px;
list-style: none;
border-top: 1px dashed purple;
margin: 0.25em 0;
}
}si conseguimos el @when sintaxis, entonces podemos escribirlo un poco más claro:
/* Maybe? */
@when supports(selector(:nth-child(1 of .foo))) {
} @else {
}De todos modos. El resultado final es…
Soportado
No soportado
También hay una API de JavaScript para probar el soporte. No estaba seguro de si esto realmente funcionaría, ¡pero parece que sí! Esto falla en Chrome y pasa en Safari mientras escribo:
CSS.supports("selector(:nth-child(1 of .foo))")Mientras armaba esto, estaba pensando… hmmmmmmm, ¿qué selectores de CSS hay que tienen una extraña compatibilidad con varios navegadores? Realmente no son tantos. E incluso de aquellos que tienen un extraño soporte para navegadores cruzados, pensando en la cantidad de casos de uso en los que realmente te importa envolverlo en un @supports (en lugar de simplemente dejar que falle) son bastante pocos.
El ::marker el pseudo-elemento hubiera sido genial, pero ahora está bastante bien soportado. Estaba pensando en el selector de atributos que no distingue entre mayúsculas y minúsculas, como [href$="pdf" i], hubiera sido bueno, pero no, también bien respaldado. Mismo trato con los separados por comas :not(a, .b, [c]). tal vez algo como :fullscreen / :-webkit-full-screen ¿Sería interesante y útil porque únicamente no es compatible con iOS Safari?