html - examples - ¿Cómo puedo hacer una escala de la lista de estilo de la lista con el tamaño de la fuente de la lista, cuando no podemos usar las fuentes de glifo?

ul li css (5)

En su imagen SVG XML debe eliminar los atributos de width y height , y luego el SVG se escalará para ser 100% o 1em del font-size

Aquí está la versión base64 de su imagen con esto hecho:

list-style-image: url(''data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4IDE0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDE0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNMC4zNywxMi42MzhsNS43MjYtNS41NjVMMC41MzEsMS4zNDdDMC4yNTIsMS4wNTksMC4yNjEsMC42MDEsMC41NDcsMC4zMjFjMC4yODktMC4yNzksMC43NDYtMC4yNzIsMS4wMjYsMC4wMTZsNi4wNjIsNi4yNGMwLDAuMDAyLDAuMDA2LDAuMDA0LDAuMDA4LDAuMDA2YzAuMDY4LDAuMDcsMC4xMTksMC4xNTYsMC4xNTYsMC4yNDRDNy45MDIsNy4wODgsNy44NDYsNy4zOTksNy42MzEsNy42MWMtMC4wMDIsMC4wMDQtMC4wMDYsMC4wMDQtMC4wMSwwLjAwNmwtNi4yMzgsNi4wNjNjLTAuMTQzLDAuMTQxLTAuMzMxLDAuMjA5LTAuNTE0LDAuMjA1Yy0wLjE4Ny0wLjAwNi0wLjM3Mi0wLjA3OC0wLjUxMS0wLjIyMUMwLjA3NiwxMy4zNzYsMC4wODMsMTIuOTE5LDAuMzcsMTIuNjM4Ii8+PC9zdmc+'');

Lamentablemente, no se puede establecer explícitamente el tamaño de una list-style-image , sin embargo, hay una solución de corte que no requiere HTML adicional;

Si sus elementos LI solo contienen una sola línea de texto (que a menudo es el caso de las listas), puede usar el selector css ::first-line para aumentar o disminuir el tamaño de su fuente sin afectar su lista-estilo-imagen .

Dando esta solución alternativa:

ul { list-style-image: url(''data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4IDE0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDE0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNMC4zNywxMi42MzhsNS43MjYtNS41NjVMMC41MzEsMS4zNDdDMC4yNTIsMS4wNTksMC4yNjEsMC42MDEsMC41NDcsMC4zMjFjMC4yODktMC4yNzksMC43NDYtMC4yNzIsMS4wMjYsMC4wMTZsNi4wNjIsNi4yNGMwLDAuMDAyLDAuMDA2LDAuMDA0LDAuMDA4LDAuMDA2YzAuMDY4LDAuMDcsMC4xMTksMC4xNTYsMC4xNTYsMC4yNDRDNy45MDIsNy4wODgsNy44NDYsNy4zOTksNy42MzEsNy42MWMtMC4wMDIsMC4wMDQtMC4wMDYsMC4wMDQtMC4wMSwwLjAwNmwtNi4yMzgsNi4wNjNjLTAuMTQzLDAuMTQxLTAuMzMxLDAuMjA5LTAuNTE0LDAuMjA1Yy0wLjE4Ny0wLjAwNi0wLjM3Mi0wLjA3OC0wLjUxMS0wLjIyMUMwLjA3NiwxMy4zNzYsMC4wODMsMTIuOTE5LDAuMzcsMTIuNjM4Ii8+PC9zdmc+''); } .small-list { font-size: 140%; } .large-list { font-size: 350%; } .small-list li::first-line, .large-list li::first-line{ font-size: 70%; }

Una página web en la que estoy trabajando usa algunos galones de fantasía para viñetas en una lista. Me gustaría definir un estilo de lista que se adapte al tamaño de fuente de los elementos de la lista: hacerlo es el objetivo final de mi problema aquí.

Actualmente mantenemos esos galones en archivos SVG (uno de los cuales se ofrece a continuación) para que puedan ampliarse sin verse terribles. Se les hace referencia de esta manera:

ul.foo { list-style-image: url("../images/chevron.svg"); }

Usamos estas listas de chevron varias veces en el sitio. A veces están con texto grande, a veces con texto de tamaño más pequeño o normal. Estamos obligados a crear una nueva imagen de Chevron para cada tamaño de fuente (por ejemplo, chevron-small.svg , chevron-medium.svg , chevron-large.svg , etc.), pero seguramente hay una mejor manera que nos permite usar solo la imagen y ampliarla por sí solo en función del tamaño de la fuente.

Sin embargo, todavía no he descubierto cómo hacer que la escala de la imagen tenga el tamaño de fuente.

La wiki W3 para list-style-image sugiere que "si el ancho o alto intrínseco de la imagen se da como un porcentaje, entonces ese porcentaje se resuelve contra 1em", que suena como si fuera exactamente lo que queremos. Sin embargo, no he descubierto cómo hacer que esto suceda. Respuesta de Brian Campbell a ¿Cómo puedo hacer una escala svg con su contenedor padre? parece sugerir una manera de hacer que este porcentaje ocurra, pero cuando establezco un ancho o una altura del 100%, los puntos de la viñeta del galón se muestran extremadamente pequeños o no aparecen en absoluto, incluso cuando el tamaño de la fuente es grande.

¿Cómo puedo hacer que esta escala de estilo de lista de la lista se adapte completamente al tamaño del texto, de modo que a medida que el tamaño del texto de una UL aumenta, la imagen de la viñeta también lo hace?

( Fuentes Glyph: no podemos usarlas. Harían el trabajo visualmente, pero tienen un impacto negativo en la accesibilidad porque los lectores de pantalla no leerán las viñetas como balas sino como algún otro personaje extraño. Podríamos definir una fuente de glifo personalizada, posiblemente, y reemplazar los caracteres de viñeta en ella con la nuestra, pero la sobrecarga de tamaño de archivo al hacerlo sería excesiva. Por lo que puedo decir, tenemos que usar una imagen).

El código de mi SVG

El SVG viene de Illustrator y tiene este código:

<?xml version="1.0" encoding="utf-8"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="8px" height="14px" viewBox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve"> <path fill="#666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321 c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244 C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205 c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638"/> </svg>

Que se muestra como el siguiente, donde el texto es 16px, y el chevron no está escalando al tamaño de fuente, pero es decentemente grande y visible (un poco más grande que lo deseado en este caso, pero ignorémoslo, ya que la imagen misma puede ser editado):

Como dije, traté de seguir la respuesta de Brian Campbell y establecer la propiedad width o height en 100%:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" viewBox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve">

Sin embargo, tener el ancho o la altura definidos como 100% parece hacer que los galones sean pequeños, y mucho más pequeños que 1em, como se establece:

(Captura de pantalla de Firefox. En Chrome son un poco más grandes, aún mucho más pequeños que 16 píxeles).

Fragmento de código

/* The image referenced here is the SVG provided above, with base 64 encoding. It is the freshly exported version that still has a defined width and height of 8px and 14px. You may wish to just save the SVG above locally. */ ul { list-style-image: url(''data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDggMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDggMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0wLjM3LDEyLjYzOGw1LjcyNi01LjU2NUwwLjUzMSwxLjM0N0MwLjI1MiwxLjA1OSwwLjI2MSwwLjYwMSwwLjU0NywwLjMyMWMwLjI4OS0wLjI3OSwwLjc0Ni0wLjI3MiwxLjAyNiwwLjAxNmw2LjA2Miw2LjI0YzAsMC4wMDIsMC4wMDYsMC4wMDQsMC4wMDgsMC4wMDZjMC4wNjgsMC4wNywwLjExOSwwLjE1NiwwLjE1NiwwLjI0NEM3LjkwMiw3LjA4OCw3Ljg0Niw3LjM5OSw3LjYzMSw3LjYxYy0wLjAwMiwwLjAwNC0wLjAwNiwwLjAwNC0wLjAxLDAuMDA2bC02LjIzOCw2LjA2M2MtMC4xNDMsMC4xNDEtMC4zMzEsMC4yMDktMC41MTQsMC4yMDVjLTAuMTg3LTAuMDA2LTAuMzcyLTAuMDc4LTAuNTExLTAuMjIxQzAuMDc2LDEzLjM3NiwwLjA4MywxMi45MTksMC4zNywxMi42MzgiLz48L3N2Zz4=''); /* Or if you wish to save the SVG locally: list-style-image: url(''chevron.svg''); */ } .small-list { font-size: 85%; } .large-list { font-size: 150%; }

<ul class="small-list"> <li>The goal is to make the chevron smaller for this list</li> <li>Specifically, just slightly smaller than capital letters, as stated.</li> <li>Nomas matas</li> <li>Roris dedit</li> </ul> <ul class="large-list"> <li>And larger for this list</li> <li>Nomas matas</li> <li>Roris dedit</li> </ul>

Esto usa su svg como imagen de fondo para el contenido :: before, dimensionado con em''s para mantenerlo del mismo tamaño que la fuente. La imagen será más pequeña que el mismo tamaño que el texto, sin importar cómo se ajuste el tamaño del texto o si se acerca o aleja.

ul.foo, ul.foo li { list-style-type: none; padding: 0; margin: 0; } ul.foo li { height: 1em; } ul.foo li:before { content: ""; background-image: url(http://imgh.us/chevron_1.svg); background-size: .5em .5em; background-repeat: no-repeat; display: inline-block; vertical-align: top; position: relative; top: 50%; margin-top: -.175em; width: .5em; height: .5em; }

<ul class="foo"> <li>List Item</li> <li>List Item</li> <li>List Item</li> <li>List Item</li> </ul> <ul class="foo" style="font-size: 2em"> <li>List Item</li> <li>List Item</li> <li>List Item</li> <li>List Item</li> </ul>

Me acercaría a resolver este problema usando un pseudo elemento antes de cada li

Aquí está el marcado

ul { list-style: none; } li { position: relative; } li:before { /* The desired width gets defined in two places: The element width, and background size. The height only gets defined once, in background size. */ position: absolute; display: block; content: ''/2022''; /* bullet point, for screen readers */ text-indent: -999999px; /* move the bullet point out of sight */ left: -.75em; width: .4em; /* desired width of the image */ height: 1em; /* unrelated to image height; this is so it gets snipped */ background-repeat: no-repeat; background-image: url(''data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDggMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDggMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0wLjM3LDEyLjYzOGw1LjcyNi01LjU2NUwwLjUzMSwxLjM0N0MwLjI1MiwxLjA1OSwwLjI2MSwwLjYwMSwwLjU0NywwLjMyMWMwLjI4OS0wLjI3OSwwLjc0Ni0wLjI3MiwxLjAyNiwwLjAxNmw2LjA2Miw2LjI0YzAsMC4wMDIsMC4wMDYsMC4wMDQsMC4wMDgsMC4wMDZjMC4wNjgsMC4wNywwLjExOSwwLjE1NiwwLjE1NiwwLjI0NEM3LjkwMiw3LjA4OCw3Ljg0Niw3LjM5OSw3LjYzMSw3LjYxYy0wLjAwMiwwLjAwNC0wLjAwNiwwLjAwNC0wLjAxLDAuMDA2bC02LjIzOCw2LjA2M2MtMC4xNDMsMC4xNDEtMC4zMzEsMC4yMDktMC41MTQsMC4yMDVjLTAuMTg3LTAuMDA2LTAuMzcyLTAuMDc4LTAuNTExLTAuMjIxQzAuMDc2LDEzLjM3NiwwLjA4MywxMi45MTksMC4zNywxMi42MzgiLz48L3N2Zz4=''); background-size: .4em .7em; background-position: 0 .3em; } .small-list { font-size: 85%; } .large-list { font-size: 150%; }

Explicación:

Primero nos deshacemos de las viñetas predeterminadas en el ul
Luego creamos un pseudo elemento delante de cada li usando :before selector y el content: ''/2022'';
- El content: ''/2022''; agrega el punto de viñeta Unicode , •, para que los lectores de pantalla lean. La sangría de texto lo mueve fuera de la vista.
Luego aplicamos un fondo (chevron) a los pseudo elementos y lo dimensionamos usando algunas propiedades. La parte clave aquí es asegurar que las dimensiones mantengan la misma proporción que la svg. Las dimensiones en el pseudo elemento se definen usando em para que se ajusten proporcionalmente cuando se cambia el font-size . Finalmente, también posicionamos el fondo donde habría estado la viñeta.
- background-size: .4em .7em; le dice al navegador que debe dimensionar el fondo de la misma manera que se debe dimensionar la imagen, necesitamos mantener la relación de aspecto correcta aquí.
- background-position: 0 .3em; mueve la imagen de chevron en línea con el texto.
- width: .4em; hace que el elemento psuedo sea lo suficientemente ancho para ajustarse a la imagen y la height: 1em; hace que coincida con la altura de la línea, y sea lo suficientemente alto como para ajustarse también al desplazamiento.

Advertencia: - IE 8 no es compatible background-size , pero supongo que esto no será un problema, ya que tampoco es compatible con el procesamiento de svg.

Podrías definir svg en tu CSS directamente y cambiar la altura y el ancho según sea necesario, no muy SECO, pero funciona:

.small-list { font-size: 85%; list-style-image: url(''data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14" width="6" height="9"><path fill="%23666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321 c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244 C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205 c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638" /></svg>''); } .large-list { font-size: 150%; list-style-image: url(''data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14" width="8" height="14"><path fill="%23666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321 c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244 C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205 c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638" /></svg>''); }

O puede secarlo un poco usando svg como una imagen de fondo en lugar de como una imagen de estilo de lista. Tenga en cuenta que colocar el svg en el CSS no es necesario aquí:

ul { list-style: none; padding-left: 0; } li { padding-left: .65em; background: url(''data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14"><path fill="%23666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321 c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244 C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205 c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638" /></svg>'')no-repeat scroll 0% 50% /.65em .65em transparent; } .small-list li { font-size: 85%; } .large-list li { font-size: 150%; }

Puede usar SVG como una imagen incrustada:

<img src="chevron.svg" alt="chevron-icon" class="my-icon" />

* CSS

.my-icon{ width:50px; height:auto; }

Un artículo útil:

http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

Para una mejor compatibilidad del navegador, recomiendo convertir tus archivos SVG en una fuente, puedes hacerlo aquí:

https://icomoon.io/

O use una fuente prediseñada como FontAwesome:

http://fontawesome.io/

Aquí obtendrá el ícono que necesita:

http://fontawesome.io/icon/chevron-right/

Implementar FontAwesome con:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Pero le recomiendo encarecidamente que descargue los archivos fuente en lugar de usar man en los archivos intermedios.

Y agrega este CSS:

ul{ list-style:none; color:#888; font-size:24px; } ul li:before{ font-family: FontAwesome; content:"/f054"; }

HTML

<ul> <li>Item 1</li> <li>Item 2</li> </ul>

Puede obtener una vista previa aquí:

http://jsfiddle.net/a1vkeg6c/1/

De esta forma, tendrá el mismo soporte retina de SVG que desee, e incluso de una manera más práctica.

¡Espero haber sido útil!