Post Top Ad

Your Ad Spot

jueves, 20 de agosto de 2020

Regla CSS @media en JavaScript

JavaScript se encuentra en este lugar tan especial cuando se trata de tecnologías web. Proporciona funcionalidades que no se pueden encontrar en ningún otro lugar o puede reemplazar fácilmente a otros lenguajes web, HTML y CSS.
Si bien la mayoría de los desarrolladores de JS probablemente conocen la API DOM y todas las bibliotecas y marcos de interfaz de usuario construidos sobre ella, el conocimiento de "API CSS" (técnicamente no se llama así, pero entiendes el punto) es menos común.
Ya he cubierto la API que puede usar para crear sus hojas de estilo CSS directamente desde JS en mi artículo anteriorEn cambio, hoy me gustaría centrarme en algo más avanzado, en cómo controlar sus @mediareglas CSS, lo ha adivinado, ¡en JS!

Resumen de la API de CSS

Comencemos con un resumen muy rápido del artículo anterior.
Puede acceder a una hoja de estilo de 2 formas, ya sea a través de la sheetpropiedad de un <style>elemento DOM de etiqueta o como uno de los elementos de la document.styleSheetscolección indexada. En ambos casos, el resultado es un objeto que implementa la CSSStyleSheetinterfaz que luego le da más acceso a métodos de control como insertRule()removeRule(), así como propiedades como cssRules.
const estilo = documento . createElement ( "estilo" ) ; documento . cabeza . appendChild ( estilo ) ;   


const styleSheet = estilo . hoja ; const ruleIndex = styleSheet . insertRule ( ".example {color de fondo: rojo}" ) ; regla const = styleSheet . cssRules [ ruleIndex ] ;   
   
   
El insertRule()método devuelve el índice en el que se insertó la nueva regla CSS. Esto se puede utilizar para acceder al objeto de regla que implementa la CSSRuleinterfaz. Y tal objeto, como se esperaba, tiene algunas propiedades propias, que se utilizan principalmente para configurar y acceder a los datos de la regla.

CSSRule

Ahora, aquí es donde disminuimos un poco la velocidad. Esto se debe a que el CSSRuley sus derivados deben entenderse bien para poder crear hojas de estilo basadas en JS más complejas .
Por sí solo, aunque nunca lo verá de esa manera, CSSRulesolo tiene algunas propiedades. Los más importantes son probablemente el cssText- que contiene la representación CSS textual de su regla y el type- un valor constante que indica el tipo de lo dado CSSRule.
// ... regla . cssText ; // ".example {color de fondo: rojo;}"
 
Hay varios tipos y, por tanto, derivados de la CSSRuleinterfaz. El más común: CSSStyleRulees responsable de reglas como la que ve arriba. Además de las CSSRulepropiedades estándar , también tiene algunas más interesantes como selectorTextla representación textual del selector CSS de la regla y styleun CSSStyleDeclarationobjeto, al igual que los estilos en línea del elemento DOM a los que puede estar acostumbrado.
// ... regla . selectorText ; // ".ejemplo" regla . estilo . backgroundColor ; // regla "roja" . estilo . backgroundColor = "verde" ; regla . estilo . backgroundColor ; // "verde"
 
 
  
 
Como una buena ventaja, ¿sabías que puedes cambiar la styleregla, alterarla y todos los elementos a los que se aplica en tiempo real?

CSSMediaRule

Pero todas las diferentes CSSRules no son para lo que viniste aquí, no. Has venido por la @mediaregla CSS Y, como era de esperar, también tiene su reflejo en el lado de JavaScript, esta vez en forma de CSSMediaRule.
CSSMediaRulees muy interesante debido a su herencia más profunda. A diferencia de simple, CSSStyleRuleque es un hijo directo de CSSRuleCSSMediaRuleademás tiene CSSGroupingRuleCSSConditionRule(en el orden dado) como sus padres.
Esto dice mucho sobre la regla. El CSSGroupingRuleestá destinado a las reglas que contienen reglas anidadas dentro de ellas, mientras CSSConditionRuleque significa que se aplican solo cuando se cumple una determinada condición. ¿Recuerda la sintaxis CSS de una @mediaregla?
@ media pantalla y ( mínimo - ancho : 900 px ) { . ejemplo { fondo - color : azul ; } }     
   
     
  
Ahora, ambos CSSMediaRulepadres le agregan propiedades y métodos importantes. Yendo desde todo el camino hacia arriba (directamente debajo de CSSRulesí mismo), CSSGroupingRuleagrega métodos como insertRule()deleteRule()así como cssRulespropiedad a la fiesta. ¿Suena familiar? Eso es porque estas son funcionalidades similares a las que vimos anteriormente, todo desde el principio con la CSSStyleSheetinterfaz.
// ... const mediaRuleText = `@media screen and (min-width: 900px) {
   
  .example {
    color de fondo: azul;
  }
} ` ; const mediaRuleIndex = styleSheet . insertRule ( ruleText ) ; const mediaRule = styleSheet . cssRules [ mediaRuleIndex ] ;
   
   

mediaRule . cssRules [ 0 ] . selectorText ; // ".example" mediaRule . cssRules [ 0 ] . estilo . backgroundColor ; // "azul" 
 
En nuestro caso, solo hay una regla agrupada por CSSGroupingRule- un simple CSSStyleRule, lo que significa que hemos completado un círculo.
A continuación, tenemos el CSSConditionRuleque trae consigo la conditionTextpropiedad. Este chico nos permite acceder a la representación textual de la condición CSS. En nuestro caso es:
mediaRule . conditionText ; // "pantalla y (ancho mínimo: 900 px)" 
El CSSMediaRuletambién añade una propiedad de su propia - media- que es igual a una implementación de objeto MediaListde interfaz. Básicamente, una versión un poco más avanzada de conditionTextNo es realmente importante para nada, así que si está interesado, consulte los documentos de MDN.

Al revés

Entonces, eso prácticamente lo resume para las CSSMediaRuleAPI y las relacionadas. Hay bastantes variaciones CSSRulecomo esta, que cuando se usan juntas pueden dar lugar a resultados bastante impresionantes. Bibliotecas CSS-in-JS dinámicas y manejables como la míaPrototopo con complejas actualizaciones en tiempo real son definitivamente posibles.
Pero también podría decir que estas cosas son mejores para que las maneje el CSS. Y tendrías toda la razón, para eso se diseñó CSS. Pero si es así, ¿quizás te interesaría algo diferente?
¿Y si te dijera que hay una forma de evaluar las consultas de medios directamente en JS? ¿Para saber cuándo, por ejemplo, una ventana tiene el ancho o alto deseado? Bueno, eso seguramente es posible y todo gracias amatchMedia()

matchMedia

Entonces, matchMedia()es un método accesible directamente en el windowobjeto (globalmente), que le permite analizar una consulta de medios dada y reaccionar a los cambios en su actividad.
const mediaQuery = matchMedia ( "pantalla y (ancho mínimo: 900px)" ) ;   
matchMedia()devuelve lo que se llama un MediaQueryListobjeto. Este tipo le proporciona todo lo que desea cuando trabaja con consultas de medios. Tiene la matchespropiedad más importante para verificar si la consulta de medios coincide con el estado del sitio web actual, la mediapropiedad para recuperar la cadena de consulta de medios proporcionada y dos métodos addListener()removeListener()para escuchar los cambios de estado de la consulta de medios.
mediaQuery . addListener ( ( ) = > { mediaQuery . coincide con ; // verdadero o falso } ) ; mediaQuery . medios de comunicación ; // "pantalla y (ancho mínimo: 900 px)"  
  

 
Ahora bien, no puede discutir la utilidad de esta función. Ser capaz de verificar si se aplica cierta consulta de medios es extremadamente útil cuando se trata de cualquier tipo de interfaz de usuario impulsada por JS; tome Masonry Grid, por ejemplo. El matchMedia()camino es mucho más rápido que cualquier otra solución similar (especialmente la que tiene un resizemonitoreo uniforme constante ). ¡Y ya he dicho que tiene un gran soporte entre navegadores con up (o más bien abajo) a IE 10!

Conclusión

Con la API de CSS y matchMedia()creo que les he mostrado un lado impresionante de las capacidades de JavaScript. Espero que hayas aprendido algo nuevo y ahora puedas crear todo tipo de maravillas JS, desde diseños simples de interfaz de usuario impulsados ​​por JS hasta bibliotecas CSS-in-JS completas.
Para obtener más guías y tutoriales de desarrollo web, sígueme enGorjeoFacebook, oa través de mi boletín de noticias a continuación. También tengo unCanal de Youtube(no muy activo recientemente, pero estoy trabajando en ello), que es posible que desee consultar y suscribirse. ¡Gracias por leer este artículo y te deseo una feliz codificación!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas