No se puede encontrar reglas de consulta en el archivo CSS abierto por python cssutils paquete

Necesito modificar el estilo de renderización CSS para varias páginas web similares, así que tengo la intención de abrir cada archivo css y modificar sus reglas.

Intenté modificar un elemento en la página web, haciendo que no desaparezca junto con el cambio de tamaño de la pantalla, la regla css de origen es:

@media screen and (max-width: 768px):
.base-header .group-list.nav {
display: none; }

Quiero desactivar el display: none configuración para hacer que el elemento siga apareciendo.

Ahora examinaría el primer archivo de css vía cssutils:

import csutils

stylesheet = cssutils.parseFile('global.css')

In stylesheet.cssRulesNo pude encontrar el display: none en virtud de las normas @media screen . Sin embargo, podría encontrar otros ajustes de reglas que no están bajo consulta de los medios.

Si abro el archivo css open(), pude ver la configuración de la consulta de los medios, pero el archivo regresa por open() es más desordenado y parece difícil de editar para mí.

¿Cómo pude encontrar las reglas bajo consulta de medios en archivos de css? ¿O hay mejor manera de resolver mi problema, sin usar el método de análisis en cssutils?

¡Gracias por cada consejo!

Pregunta hecha hace 3 años, 4 meses, 28 días - Por binarybard1cc8

3 Respuestas:

  • Encontré que soy capaz de editar el archivo a través de lo tradicional open() luego editar el método de archivo.

    Si uso el código Visual Studio para abrir el archivo css, entonces auto-formatarlo, podría abrir el archivo resultante y editarlo line-by-line.

    Sin embargo, para el archivo css necesito primero formatearlo para leer la línea de archivo por línea, de lo contrario el archivo css es demasiado desordenado para parse. Todavía no he encontrado una manera de resolver esto, BeatifulSoup parece no ayudar a la CSS parsing problema.

    Respondida el Dec 18, 2020 a las 04:17 - por syntaxsavvy

    Votos positivos: 0 | Votos negativos: 0

  • Para encontrar reglas de consulta de medios en archivos CSS sin usar cssutils, puedes utilizar la librería de Python llamada tinycss. Esta librería te permitirá analizar y extraer información de las reglas de medios en tus archivos CSS.

    Aquí te muestro un ejemplo de cómo podrías hacerlo:

    python
from tinycss import make_parser

parser = make_parser()
stylesheet = open('global.css').read()
parsed_stylesheet = parser.parse_stylesheet(stylesheet)

for rule in parsed_stylesheet.rules:
    if rule.at_keyword == 'media':
        
    Aquí puedes acceder a las reglas de consulta de medios
            print(rule.at_keyword)
        for property in rule.content:
            print(property.name, property.value)

    De esta manera, podrás acceder a las reglas bajo consulta de medios en tus archivos CSS y modificarlas según tus necesidades.

    Espero que esta información te sea útil para resolver tu problema. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 19, 2020 a las 04:18 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Método de análisis con cssutils

    Para modificar las reglas de consulta de medios utilizando cssutils:

    • Identifica el bloque de consulta de medios que deseas modificar.
    • Utiliza el método `cssutils.util.findInSubtree()` para encontrar el bloque de consulta de medios.
    • Utiliza el método `cssRule.cssText` para obtener el texto de la regla.
    • Modifica el texto de la regla para deshabilitar el `display: none`.
    • Utiliza el método `cssRule.cssText` para establecer el texto modificado de la regla.

    Ejemplo:

    python
import cssutils


    Abrir el archivo CSS
    css = cssutils.parseFile('global.css')


    Buscar el bloque de consulta de medios
    media_query = cssutils.util.findInSubtree(css, cssutils.css.MediaRule)


    Obtener el texto de la regla
    rule_text = media_query.cssText


    Modificar el texto de la regla
    rule_text = rule_text.replace('display: none;', 'display: block;')


    Establecer el texto modificado de la regla
    media_query.cssText = rule_text


    Guardar el archivo CSS modificado
    with open('global.css', 'w') as f:
    f.write(css.cssText)

    Mejor alternativa

    Una mejor alternativa para modificar las reglas CSS es utilizar un procesador CSS como csso o postcss. Estos procesadores te permiten escribir CSS más modular y mantenible, y hacen que sea más fácil modificar estilos específicos.

    Ejemplo con postcss:

    Archivo PostCSS:

    css
.base-header .group-list.nav {
  display: block !important;
}

    Comando para aplicar el procesador:

    
postcss global.css -o global.modified.css

    Esto creará un nuevo archivo CSS (global.modified.css) con la regla modificada.

    Respondida el Dec 19, 2020 a las 04:23 - por Gemini

    Votos positivos: 0 | Votos negativos: 0