Creación de la extensión DevTools del Administrador de consultas de funciones

 

 

 

  • SmashingConf Nueva York 2024
  • ¡Registro!

  • Índice
    1. Trabajar con CSS no compatible
      1. Problemas en cascada
      2. ¡Consultas de funciones al rescate!
    2. Presentamos el Administrador de consultas de funciones
    3. Creación del administrador de consultas de funciones
      1. Crear un panel de herramientas de desarrollo
      2. Leer CSS de la página inspeccionada
      3. Conexión del panel y los scripts de contenido
      4. Gestión de consultas de funciones
    4. Limitaciones del FQM
      1. Reservas
      2. Funciones no compatibles
      3. Otras lecturas

    La solución moderna para desarrollar navegadores tanto modernos como antiguos son las consultas de funciones. Nos permiten escribir CSS condicionado a la compatibilidad del navegador con una característica particular. En este artículo, Ire Aderinokun explica cómo desarrolló el Administrador de consultas de funciones. Descubra cómo esta herramienta puede ayudarle a admitir navegadores más antiguos y también cómo crear sus propias extensiones de DevTools.

     

    En los últimos años, se han implementado varias funciones CSS revolucionarias en los principales navegadores. CSS Grid Layout, por ejemplo, pasó del 0 al 80 % de soporte global en el lapso de unos pocos meses, lo que lo convierte en una herramienta increíblemente útil y confiable en nuestro arsenal. Aunque la compatibilidad actual con una función como CSS Grid Layout es relativamente buena, no todos los navegadores recientes o actuales la admiten. Esto significa que es muy probable que usted y yo estemos desarrollando actualmente para un navegador que no es compatible.

    La solución moderna para desarrollar navegadores tanto modernos como antiguos son las consultas de funciones. Nos permiten escribir CSS condicionado a la compatibilidad del navegador con una característica particular. Aunque trabajar con consultas de funciones es casi mágico, probarlas puede resultar complicado. A diferencia de las consultas de medios, no podemos simular fácilmente los diferentes estados simplemente cambiando el tamaño del navegador. Ahí es donde entra en juego el Administrador de consultas de funciones , una extensión de DevTools que le ayuda a alternar fácilmente las condiciones de consulta de funciones. En este artículo, cubriré cómo creé esta extensión, además de dar una introducción a cómo se crean las extensiones de herramientas de desarrollador.

     

    Trabajar con CSS no compatible

    Si un property-valuepar (por ejemplo display: grid, ) no es compatible con el navegador en el que se ve la página, no sucede mucho. A diferencia de otros lenguajes de programación, si algo está roto o no es compatible en CSS, solo afecta la regla rota o no compatible, dejando intacto todo lo demás a su alrededor.

    Tomemos, por ejemplo, este sencillo diseño:

    Vista previa grande

    Tenemos un encabezado que se extiende a lo largo de la parte superior de la página, una sección principal directamente debajo a la izquierda, una barra lateral a la derecha y un pie de página que se extiende a lo largo de la parte inferior de la página.

    Así es como podríamos crear este diseño usando CSS Grid:

    Vea la cuadrícula de diseño de Pen de Ire Aderinokun ( @ire ) en CodePen .

    En un navegador compatible como Chrome, esto funciona tal como queremos. Pero si viéramos esta misma página en un navegador que no soporta CSS Grid Layout, esto es lo que obtendríamos:

    Vista previa grande

    Es esencialmente lo mismo que si no hubiéramos aplicado ninguno de los estilos relacionados con la cuadrícula en primer lugar. Este comportamiento de CSS siempre fue intencional. En la especificación CSS , dice:

    “En algunos casos, los agentes de usuario deben ignorar parte de una hoja de estilo ilegal, [lo que significa actuar] como si no hubiera estado allí”

    Históricamente, la mejor manera de manejar esto ha sido utilizar la naturaleza en cascada de CSS. Según la especificación, "gana la última declaración en el orden de los documentos". Esto significa que si se definen varias propiedades de la misma propiedad dentro de un solo bloque de declaración, prevalecerá esta última.

    Por ejemplo, si tenemos las siguientes declaraciones:

    body { display: flex; display: grid;}

    Suponiendo que tanto Flexbox como Grid sean compatibles con el navegador, este último display: gridprevalecerá. Pero si el navegador no admite Grid, entonces esa regla se ignora y en display: flexsu lugar se utilizan las reglas anteriores válidas y admitidas, en este caso .

     

    body { display: flex; display: grid;}

    Problemas en cascada

    Usar la cascada como método de mejora progresiva es y siempre ha sido increíblemente útil. Incluso hoy en día, no existe una manera mejor o más simple de manejar alternativas simples de una sola línea, como esta para aplicar un color sólido donde la rgba()sintaxis no es compatible.

    div { background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5);}

    Sin embargo, el uso de la cascada tiene una limitación importante, que entra en juego cuando tenemos múltiples reglas CSS dependientes. Tomemos nuevamente el ejemplo de diseño. Si intentáramos utilizar esta técnica en cascada para crear un respaldo, terminaríamos con reglas CSS en competencia.

    Vea el diseño del lápiz, ambos de Ire Aderinokun ( @ire ) en CodePen .

    En la solución alternativa, necesitamos usar ciertas propiedades como márgenes y anchos, que no son necesarios y de hecho interfieren con la versión "mejorada" de Grid. Esto hace que sea difícil confiar en la cascada para una mejora progresiva más compleja.

    ¡Consultas de funciones al rescate!

    Las consultas de funciones resuelven el problema de la necesidad de aplicar grupos de estilos que dependen del soporte de una función CSS. Las consultas de funciones son una "regla anidada" que, al igual que las consultas de medios a las que estamos acostumbrados, nos permiten crear un subconjunto de declaraciones CSS que se aplican en función de una condición. A diferencia de las consultas de medios, cuya condición depende de las especificaciones del dispositivo y la pantalla, las condiciones de consulta de funciones se basan en si el navegador admite un par de propiedad-valor determinado.

    Una consulta de características se compone de tres partes:

    1. La @supportspalabra clave
    2. La condición, por ejemplodisplay: flex
    3. Las declaraciones CSS anidadas.

    Así es como se ve:

    @supports (display: grid) { body { display: grid; }}

    Si el navegador lo admite display: grid, se aplicarán los estilos anidados. Si el navegador no admite display: grid, el bloqueo se omite por completo.

    Lo anterior es un ejemplo de una condición positiva dentro de una consulta de características, pero hay cuatro tipos de consultas de características:

    1. Condición positiva, por ejemplo@supports (display grid)
    2. Condición negativa, por ejemplo@supports not (display: grid)
    3. Conjunción, por ejemplo@supports (display:flex) and (display: grid)
    4. Disyunción, por ejemplo@supports (display:-ms-grid) or (display: grid)

    Las consultas de funciones resuelven el problema de tener grupos de estilos de mejora y respaldo separados. Veamos cómo podemos aplicar esto a nuestro diseño de ejemplo:

    Vea el conejito Pen Run dirigido por Ire Aderinokun ( @ire ) en CodePen .

    Presentamos el Administrador de consultas de funciones

    Cuando escribimos consultas de medios, las probamos cambiando el tamaño de nuestro navegador para que se apliquen los estilos en cada punto de interrupción. Entonces, ¿cómo probamos las consultas de funciones?

     

    Dado que las consultas de funciones dependen de si un navegador admite una función, no existe una manera fácil de simular el estado alternativo. Actualmente, la única forma de hacerlo sería editar su código para invalidar/revertir la consulta de función.

    Por ejemplo, si quisiéramos simular un estado en el que CSS Grid no es compatible, tendríamos que hacer algo como esto:

    /* fallback styles here */@supports (display: grrrrrrrrid) { /* enhancement styles here */}

    Aquí es donde entra en juego el Administrador de consultas de funciones. Es una forma de revertir sus consultas de funciones sin tener que editar manualmente su código.

    Funciona simplemente negando la consulta de función tal como está escrita. Entonces la siguiente consulta de características:

    @supports (display: grid) { body { display: grid; }}

    Pasará a ser lo siguiente:

    @supports not (display: grid) { body { display: grid; }}

    Dato curioso, este método también funciona para consultas de características negativas. Por ejemplo, la siguiente consulta de características negativas: Blog sobre ropa de Shein, Primark y Amazon

    @supports not (display: grid) { body { display: block; }}

    Pasará a ser lo siguiente:

    @supports not (not (display: grid)) { body { display: block; }}

    Lo que en realidad es esencialmente lo mismo que eliminar el "no" de la consulta de función.

    @supports (display: grid) { body { display: block; }}

    Creación del administrador de consultas de funciones

    FQM es una extensión de las herramientas de desarrollo de su navegador. Funciona registrando todo el CSS de una página, filtrando el CSS anidado dentro de una consulta de función y dándonos la posibilidad de alternar entre la versión normal o "invertida" de esa consulta de función.

    Crear un panel de herramientas de desarrollo

    Antes de continuar con cómo construí específicamente el FQM, veamos cómo crear un nuevo panel de DevTools en primer lugar. Como cualquier otra extensión de navegador, registramos una extensión DevTools con el archivo de manifiesto.

    { "manifest_version": 2, "name": "Feature Queries Manager", "short_name": "FQM", "description": "Manage and toggle CSS on a page behind a @supports Feature Query.", "version": "0.1", "permissions": [ "tabs", "activeTab", "all_urls" ], "icons": { "128": "images/[email protected]", "64": "images/[email protected]", "16": "images/[email protected]", "48": "images/[email protected]" }}

    Para crear un nuevo panel en DevTools, necesitamos dos archivos: uno devtools_page, que es una página HTML con un script adjunto que registra el segundo archivo, panel.htmlque controla el panel real en DevTools.

    Vista previa grande

    Primero, agregamos devtools_pagea nuestro archivo de manifiesto:

    { "manifest_version": 2, "name": "Feature Queries Manager", ... "devtools_page": "devtools.html",}

    Luego, en nuestro devtools.htmlarchivo, creamos un nuevo panel en DevTools:

    !DOCTYPE htmlhtmlhead meta charset="utf-8"/headbody!-- Note: I’m using the browser-polyfill to be able to use the Promise-based WebExtension API in Chrome --script src="../browser-polyfill.js"/script!-- Create FQM panel --scriptbrowser.devtools.panels.create("FQM", "images/[email protected]", "panel.html");/script/body/html

    Finalmente, creamos nuestra página HTML del panel:

     

    !DOCTYPE htmlhtmlhead meta charset="utf-8"/headbody h1Hello, world!/h1/body/html

    Si abrimos nuestro navegador, veremos un nuevo panel llamado “FQM” que carga la panel.htmlpágina.

    Vista previa grande

    Leer CSS de la página inspeccionada

    En FQM, necesitamos acceder a todos los CSS a los que se hace referencia en el documento inspeccionado para saber cuáles están dentro de las consultas de funciones. Sin embargo, nuestro panel DevTools no tiene acceso directo a nada en la página. Si queremos acceder al documento inspeccionado, necesitamos un script de contenido.

    Vista previa grande

    Un script de contenido es un archivo javascript que tiene el mismo acceso a la página html que cualquier otro fragmento de javascript incrustado en él. Para registrar un script de contenido, simplemente lo agregamos a nuestro archivo de manifiesto:

    { "manifest_version": 2, "name": "Feature Queries Manager", ... "content_scripts": [{ "matches": [""], "js": ["browser-polyfill.js", "content.js"] }], }

    En nuestro script de contenido, podemos leer todas las hojas de estilo y CSS dentro de ellas accediendo a document.styleSheets:

    Array.from(document.styleSheets).forEach((stylesheet) = { let cssRules; try { cssRules = Array.from(stylesheet.cssRules); } catch(err) { return console.warn(`[FQM] Can't read cssRules from stylesheet: ${ stylesheet.href }`); } cssRules.forEach((rule, i) = { /* Check if css rule is a Feature Query */ if (rule instanceof CSSSupportsRule) { /* do something with the css rule */ } }); });

    Conexión del panel y los scripts de contenido

    Una vez que tengamos las reglas del guión de contenido, queremos enviarlas al panel para que puedan ser visibles allí. Idealmente, querríamos algo como esto:

    Vista previa grande

    Sin embargo, no podemos hacer esto exactamente, porque el panel y los archivos de contenido en realidad no pueden comunicarse directamente entre sí. Para pasar información entre estos dos archivos, necesitamos un intermediario: un script en segundo plano. La conexión resultante se parece a esto:

    Vista previa grande

    Como siempre, para registrar un script en segundo plano, debemos agregarlo a nuestro archivo de manifiesto:

    { "manifest_version": 2, "name": "Feature Queries Manager", ... "background": { "scripts": ["browser-polyfill.js", "background.js"] },}

    El archivo de fondo deberá abrir una conexión con el script del panel y escuchar los mensajes que provienen de allí. Cuando el archivo de fondo recibe un mensaje del panel, lo pasa al script de contenido, que escucha los mensajes de fondo. El script de fondo espera una respuesta del script de contenido y transmite ese mensaje al panel.

     

    A continuación se muestra un ejemplo básico de cómo funciona:

    // Open up a connection to the background scriptconst portToBackgroundScript = browser.runtime.connect();// Send message to content (via background)portToBackgroundScript.postMessage("Hello from panel!");// Listen for messages from content (via background)portToBackgroundScript.onMessage.addListener((msg) = { console.log(msg); // = "Hello from content!"});
    // backrgound.js// Open up a connection to the panel scriptbrowser.runtime.onConnect.addListener((port) = { // Listen for messages from panel port.onMessage.addListener((request) = { // Send message from panel.js - content.js // and return response from content.js - panel.js browser.tabs.sendMessage(request.tabId, request) .then((res) = port.postMessage(res)); });});
    // content.js// Listen for messages from backgroundbrowser.runtime.onMessage.addListener((msg) = { console.log(msg) // = "Hello from panel!" // Send message to panel return Promise.resolve("Hello from content!");});

    Gestión de consultas de funciones

    Por último, podemos llegar al núcleo de lo que hace la extensión, que es "activar/desactivar" el CSS relacionado con una consulta de función.

    Si recuerda, en el script de contenido, recorrimos todo el CSS dentro de las consultas de funciones. Cuando hacemos esto, también necesitamos guardar cierta información sobre la regla CSS:

    1. La regla misma
    2. La hoja de estilo a la que pertenece
    3. El índice de la regla dentro de la hoja de estilo.
    4. Una versión “invertida” de la regla.

    Esto es lo que parece:

    cssRules.forEach((rule, i) = { const cssRule = rule.cssText.substring(rule.cssText.indexOf("{")); const invertedCSSText = `@supports not ( ${ rule.conditionText } ) ${ cssRule }`; FEATURE_QUERY_DECLARATIONS.push({ rule: rule, stylesheet: stylesheet, index: i, invertedCSSText: invertedCSSText });});

    Cuando el script de contenido recibe un mensaje del panel para invertir todas las declaraciones relacionadas con la condición de consulta de características, podemos reemplazar fácilmente la regla actual por la invertida (o viceversa).

    function toggleCondition(condition, toggleOn) { FEATURE_QUERY_DECLARATIONS.forEach((declaration) = { if (declaration.rule.conditionText === condition) { // Remove current rule declaration.stylesheet.deleteRule(declaration.index); // Replace at index with either original or inverted declaration const rule = toggleOn ? declaration.rule.cssText : declaration.invertedCSSText; declaration.stylesheet.insertRule(rule, declaration.index); } });}

    ¡Y eso es esencialmente todo! La extensión Feature Query Manager está actualmente disponible para Chrome y Firefox.

    Limitaciones del FQM

    El Administrador de consultas de funciones funciona "invirtiendo" sus consultas de funciones, de modo que se aplica la condición opuesta. Esto significa que no se puede utilizar en todos los escenarios.

    Reservas

    Si su CSS de "mejora" no está escrito dentro de una consulta de función, entonces la extensión no se puede usar ya que depende de encontrar una regla de soporte de CSS.

    Funciones no compatibles

    Debe tomar nota de si el navegador en el que está utilizando FQM admite o no la función en cuestión. Esto es particularmente importante si su consulta de característica original es una condición negativa, ya que invertirla la convertirá en una condición positiva. Por ejemplo, si escribiste el siguiente CSS:

    div { background-color: blue; }@supports not (display: grid) { div { background-color: pink; }}

    Si utiliza el FQM para invertir esta condición, será lo siguiente:

    div { background-color: blue; }@supports (display: grid) { div { background-color: pink; }}

    Para que pueda ver realmente la diferencia, deberá utilizar un navegador que de hecho sea compatible display: grid.

    Creé el Administrador de consultas de funciones como una forma de probar más fácilmente los diferentes CSS a medida que desarrollo, pero no reemplaza las pruebas de diseño en los navegadores y dispositivos reales. Las herramientas de desarrollo solo llegan hasta cierto punto, nada supera las pruebas de dispositivos reales.

    Otras lecturas

    • Cómo dibujar gráficos de radar en la web
    • ¿Qué hay de nuevo en DevTools?
    • SolidStart: una clase diferente de metamarco
    • Principales herramientas de front-end de 2023

    (ra, yk, il, mrn)Explora más en

    • CSS
    • Herramientas de desarrollo
    • javascript
    • Herramientas





    Tal vez te puede interesar:

    1. Creación de su propia biblioteca de validación de React: la experiencia del desarrollador (Parte 3)
    2. Introducción a Quasar Framework: creación de aplicaciones multiplataforma
    3. Creación de un componente web retro que se puede arrastrar con iluminación
    4. Creación y acoplamiento de una aplicación Node.js con arquitectura sin estado con la ayuda de Kinsta

    Creación de la extensión DevTools del Administrador de consultas de funciones

    Creación de la extensión DevTools del Administrador de consultas de funciones

    SmashingConf Nueva York 2024 ¡Registro! Índice Trabajar con CSS no compatible

    programar

    es

    https://pseint.es/static/images/programar-creacion-de-la-extension-devtools-del-administrador-de-consultas-de-funciones-945-0.jpg

    2024-04-04

     

    Creación de la extensión DevTools del Administrador de consultas de funciones
    Creación de la extensión DevTools del Administrador de consultas de funciones

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20