cssList con editor de color

Añadido a cssList un editor de color, accesible mediante el botón a continuación del botón Apply o directamente desde la rejilla de edición si hemos vinculado la propiedad que estamos editando al mezclador de color.

Como vincular una propiedad de css al mezclador de color

En el archivo “directorio notepad++\plugins\cssList\cssProperties.txt” añadiremos a la propiedad que queramos vincular el siguiente texto: :<color>. Por ejemplo border-color quedaría de la siguiente forma: border-color:<color>

Descarga

cssListBeta0dColorMixer.rar

cssList beta0c: propiedades enlazadas

Esta nueva actualización del plugin añade la opción de enlazar valores de propiedades, el cambio en un valor se aplica a todas las propiedades enlazadas.Ejemplo del plugin en acción: Mas información sobre como enlazar propiedades en Adaptando cssList a tus necesidades

Descarga

cssListBeta0c.rar

Adaptando cssList a tus necesidades

Para mejorar la productividad al usar cssList para notepad++ es conveniente hacer algunos cambios en los archivos incluidos en el directorio cssList (directorio de plugins de notepad++\cssList)
  • cssProperties.txt

    Este archivo de texto es el que genera el listado que se despliega al pulsar en la primera columna de las propiedades del selector actual, cada valor irá en una línea sin espacios en blanco, opcionalmente seguido por dos puntos (:) y un identificador de lista de posibles valores definidos en cssLists.txt. Podemos borrar las propiedades que no usemos, por ejemplo si usamos las shorthand de border en vez de border-style, border-width y border-color, podemos borrar estas tres propiedades de cssProperties.txt limitando asi la cantidad de valores que mostramos en el listado.
  • cssLists.txt

    Algunos valores para propiedades css son listas de las que solo podemos elegir un elemento, por ejemplo para display podemos elegir entre none, box, block, flex etc… o para border-style entre none, hidden, dotted, dashed etc…. Para estos casos podemos crear una variable en el archivo cssLists.txt y vincularla a una propiedad en el archivo cssProperties.txt. El nombre de la variable debe empezar con el prefijo “list” seguido del nombre que queramos, los valores para la lista los pondremos a continuación del signo “:” (dos puntos) e irán separados por el signo “|”. por ejemplo, la lista de valores para background-attachment quedaría de la siguiente manera:
    listBgAttach:scroll|fixed|inherit
    . Para vincularla a la propiedad background-attachment en cssProperties.txt pondríamos a continuación del nombre de la propiedad el nombre de la variable de lista separado por dos puntos:
    background-attachment:listBgAttach
  • cssGroups.txt

    En este archivo definimos las relaciones entre propiedades que van a tener el mismo valor, normalmente en propiedades que no siguen el estandar y tienen distintos nombres de propiedad para cada navegador, un ejemplo es border-radius, por compatibilidad tenemos que definirla en nuestra hoja de estilos como border-radius, -moz-border-radius y -webkit-border-radius, las tres con el mismo valor. Para que al modificar uno de los valores se actualice en las otras dos propiedades añadiremos una línea en cssGroups.txt con todos los nombres unidos por el signo “+”, en este caso sería:
    border-radius+-moz-border-radius+-webkit-border-radius

Notepad++ plugin: cssList beta0b

Cambios en esta versión

  • En esta nueva versión se añaden dos botones para navegar por las distintas coincidencias del selector actual a través del documento, el mismo selector puede aparecer repetido en cada uno de los distintos medios (@media print, screen etc…).
  • Añadido un desplegable para filtrar el listado de selectores por tipo de media (@media screen, print etc…)
  • Añadido checkbox para evitar que se borren salos de línea y espacios en blanco al aplicar los cambios efectuados a las propiedades del selector
DescargaDownload cssListBeta0b.rar

Notepad++ plugin: cssList Beta

CssList es un plugin para Notepad++ que facilita la edición de archivos CSS comprimidos (archivos sin saltos de línea ni espacios en blanco innecesarios).

Uso del plugin

Una vez instalado el plugin podremos acceder desde el menú Plugins\Web Tools\CssList
  1. 1

    Al pulsar el botón “Get CSS selectors” obtendremos el listado que aparece en el siguiente campo (2)

  2. 2

    Lista de selectores. Al pulsar sobre cada nombre se selecciona automáticamente la sección correspondiente de la ventana principal y llenamos la tabla siguiente con las propiedades de este selector. Al pulsar varias veces sobre el mismo selector iremos a la siguiente declaración en el caso de que hayan varias en el mismo documento.

  3. 3

    Filtro para los nombres de los selectores, hace búsquedas parciales en la lista de selectores, solo mostrará los que contengan el texto introducido. Por ejemplo, si escribimos “pre” nos mostrará “#previous-link”, “pre”,”.parag>pre” etc

  4. 4

    Propiedades del selector actual, en la primera columna podemos elegir la propiedad de una lista desplegable o escribir cualquier otra no existente en esa lista, el tipo de contenido de la segunda columna dependerá de el nombre de propiedad seleccionado en la primera. Los valores por defecto para estas columnas los podemos modificar editando los archivos cssList.txt y cssProperties.txt

  5. 5

    Aplica los cambios realizados en las propiedades del selector actual

Instalación

Descomprime el archivo en el directorio de notepad++\plugins

Descarga

cssListBeta.rar