CSS @custom-media la regla at permite la creación de alias medios de comunicación Consulta. Esto es especialmente valioso si utiliza consultas de medios largas o complejas varias veces en su código base. Esta característica es esencialmente similar a la versión de consulta de medios. Propiedades personalizadas de CSS (variables CSS).
sintaxis
La sintaxis es definición Los alias son:
@media (<dashed-ident>) (<media-query-list> | true | false );Por ejemplo:
@custom-media --modern-touch (pointer: coarse) and (min-width: 1024px);…donde la línea discontinua marca la ubicación --modern-touch.
La sintaxis es usar Los alias son lo mismo que usar cualquier consulta de medios, pero en lugar de proporcionar un tipo de medio o función de medio, usted proporciona <dashed-ident> tu definiste @custom-media:
@media <dashed-ident> {
/* ... */
}Parámetros y descriptores
<dashed-ident>: Identificador definido por el usuario, debe comenzar con dos guiones (--), similar a una función o propiedad personalizada. Al igual que las propiedades personalizadas, los nombres distinguen entre mayúsculas y minúsculas. Por ejemplo,--mobile-breakpointy--Mobile-BreakpointSe hará referencia a una definición de medios personalizada diferente.<media-query-list>: Lista de consultas de medios, separadas por operadores.true/false: Alternar siempre coincidir/nunca coincidir.
Veamos cómo funcionan en diferentes contextos, por ejemplo, cómo determinan el alcance, cómo los usan con valores booleanos, definen lógica compleja, establecen reglas usando la sintaxis de alcance CSS e incluso anidan alias.
alcance y ubicación
A diferencia de los atributos personalizados, con alcance al elemento en el que están definidos (y sus hijos), @custom-media Las reglas son globales. Se evalúan en el ámbito de la hoja de estilo y siempre se aplican a todo el archivo. Si hay varios @custom-media Las reglas se definen con el mismo nombre y la regla dentro del alcance es la que se usa al evaluar.
cuando un @media Una regla que utiliza un alias personalizado, indicado por una línea de puntos, examina la definición actual de ese alias en ese punto de la hoja de estilo. Si el alias se redefine más adelante, no “actualizará” la consulta de medios procesada. Por ejemplo, en este caso margin-block: 1rem Sólo se aplicará a body en caso afirmativo fullscreen en lugar de browser Esto fue a pesar de declaraciones posteriores que utilizaron el mismo nombre.
@custom-media --screen-display (display-mode: fullscreen);
@media (--screen-display) {
body {
margin-block: 1rem;
}
}
@custom-media --screen-display (display-mode: browser);notas: comportamiento de alcance todavía en discusión Y eso puede cambiar en el futuro.
constante de bollinger
En la sección de sintaxis anterior, tenga en cuenta @custom-media Las reglas se pueden establecer explícitamente como true o false. Esto es útil para “cambiar” bloques CSS completos o etiquetas de características durante el desarrollo.
Operadores y lógica compleja
como @custom-media Utilice exactamente los mismos operadores lógicos (and, ,, or, not, only) y la regla de agrupación es @mediapuede crear una lógica compleja de agrupación de corchetes como de costumbre. Para obtener detalles completos sobre cómo utilizar operadores, negación u ocultar hojas de estilo en navegadores antiguos, consulte Parte del operador lógico AND @media anuario. También vale la pena hacer referencia. Sección sobre decisiones anidadas y complejas Al crear consultas complejas.
Por ejemplo, construya la consulta usando and Operadores lógicos, puedes escribir así:
@custom-media --modern-touch (pointer: coarse) and (min-width: 1024px);sintaxis de alcance
como cualquier otro <media-query-list>, @custom-media apoyo Sintaxis de consulta de medios de alcance Utiliza operadores como mayor que (>), menos que(<), e igual a (=), condiciones de evaluación:
/* Old way */
@custom-media --tablet (min-width: 768px) and (max-width: 1024px);
/* New, cleaner way */
@custom-media --tablet (768px <= width <= 1024px);Alias anidados
una característica única de @custom-media La característica de los alias es que pueden referirse entre sí. Esto le permite construir condiciones semánticas jerárquicas:
@custom-media --narrow-window (width < 30rem);
@custom-media --small-and-hover (--narrow-window) and (hover: hover);
@media (--small-and-hover) {
/* Styles for mobile-sized screens with hover capabilities */
}Sin embargo, si se detecta un bucle, todas las consultas de medios personalizadas involucradas se considerarán indefinidas. Por ejemplo, si --query-a referirse a --query-bEntonces --query-b No se puede hacer referencia --query-a. De manera similar, las consultas de medios personalizadas no puedo Referencia misma.
También tenga cuidado con el anidamiento excesivo, ya que esto puede dificultar mucho la depuración e identificar qué nivel de consulta tiene un impacto relevante en las herramientas de desarrollo del navegador.
Ejemplo: definir puntos de interrupción públicos
En lugar de recordar si el punto de interrupción de su “tableta” es 768px o 800pxlo defines una vez en la parte superior de tu hoja de estilo.
@custom-media --tablet (min-width: 768px);
.sidebar {
display: none;
@media (--tablet) {
display: block;
}
}Ejemplo: definir una abreviatura para una propiedad existente
Texto estándar estándar, p. (prefers-reduced-motion: reduce) Se puede utilizar varias veces en una biblioteca y los bytes se acumulan. puedes usar @custom-media Defina una alternativa más simple:
@custom-media --prefers-reduced-motion (prefers-reduced-motion: reduce);
@media (--prefers-reduced-motion) {
/* ... */
}
@custom-media --js-enabled (scripting: enabled);
@custom-media --js-disabled (scripting: none);
@media (--js-disabled) {
.no-js-banner {
display: block;
}
}Hay muchos Accesorios abiertos @custom-media receta Puedes considerar usarlo.
Soporte de JavaScript
@custom-media Alias no estará expuesto a javascript matchMedia() métodolo que significa que este código No Esto funcionará incluso si tiene el alias definido en algún lugar de la página.
matchMedia("(--tablet)")Especificación
este @custom-media La regla en se define en Consulta de medios nivel 5 Especificación.
Soporte del navegador
Los navegadores que no lo soportan básicamente lo ignorarán. @custom-mediapor lo que las declaraciones alternativas y las estrategias de mejora progresiva pueden resultar ventajosas. puedes usar @supports comprobar si @custom-media El soporte del navegador del usuario es el siguiente:
@supports (at-rule(@custom-media)) {
/* ... */
}Irónicamente, al momento de escribir este artículo, @supports La función de evaluación de reglas at no es totalmente compatible con varios navegadores (Cromo 148+ solamente), por lo que debes verificar si tu situación lo admite. Puedes ver la discusión sobre esto. Borrador de CSS número 2463.
Otra forma es usar algo como Medios personalizados PostCSSque ampliará las reglas en el paso de compilación para permitir una compatibilidad más amplia con el navegador.
