EntradaLínea ondulada CSS. Los estilos subrayan en internet
Del autor: La estilización de los guiones bajos de los enlaces es una ocupación bastante complicada, y olvido constantemente qué método es adecuado en una u otra situación. Afortunadamente, John Jameson nos ayudará a entender rápidamente esto en su artículo.
Hay muchas maneras de estilizar guiones bajos. Puede recordar el artículo "Crear una referencia de subrayado a medio". El medio no intentó hacer algo fuera de los marcos salientes, querían crear un atractivo subrayado en el texto.
Underscores delgados y negros con espacios alrededor de letras con notas más bajas: el trabajo de Marsin Vitchery del artículo crea una referencia de subrayado a medio.
Un buen subrayado estándar, que también es de buen tamaño y salta las partes remotas más bajas de las letras. Mucho mejor que en la mayoría de los navegadores predeterminados. Como resultó, el medio chocó con muchos problemas en su camino. E incluso dos años después, todavía una buena estilización del énfasis causa muchos problemas.
Objetivo
¿Por qué no usar la decoración de texto: subrayado? Si estamos hablando del escenario perfecto, subrayando debería:
posición debajo de la línea de base;
salta las partes remotas más bajas de las letras;
cambiar de color, grosor y estilos;
ir a una nueva cadena;
trabajar con cualquier fondos.
Sin embargo, creo que bien podemos requerir que todo esto subraye, sin embargo, por lo que sé, no existe una manera intuitiva de resolver todas estas tareas en CSS.
Enfoques
Entonces, ¿qué métodos tenemos a nuestra disposición para subrayar el texto? Recordé lo siguiente:
decoración de texto;
imagen de fondo;
Filtros SVG;
Underline.js (lienzo);
decoración de texto- *
Vayamos por toda la lista y consideremos todos los pros y contras de cada enfoque.
Propiedad de decoración de texto
La propiedad de decoración de texto es la forma más fácil de subrayar. Necesitas aplicar solo una propiedad. En el texto pequeño, tal línea se verá normalmente, pero vale la pena aumentar el tamaño de la fuente y ya es torpe.
El mayor problema con la propiedad de decoración de texto es la falta de personalización. La línea utiliza el color y el tamaño de la fuente del texto al que se usa, y no hay un método de navegador cruzado para cambiar los estilos. Un poco más tarde, hablemos con más detalle en esta propiedad.
pros
solo usa;
ubicado debajo de la línea de base;
salta las partes remotas más bajas de las letras predeterminadas en Safari y iOS;
salta a una nueva cadena;
funciona con cualquier fondos.
Minusales
no se pierde la extensión de las partes más bajas de las letras en otros navegadores;
es imposible cambiar el color, el grosor y los estilos.
Propiedad fronteriza
La propiedad fronteriza es un buen equilibrio de velocidad y personalización. Este enfoque Usa comprobado Marcos de CSSAsí que puedes cambiar fácilmente el color, el grosor y los estilos. Esto parece una propiedad de fondo de la frontera en los elementos en línea:
El mayor mínimo es hasta qué punto se encuentra el subrayado desde el texto. El subrayado se encuentra debajo de las partes remotas más bajas de las letras. Este problema Se resuelve si realiza un elemento de bloques en línea y reduce la altura de la línea, pero luego se pierde la capacidad de saltar a nuevas líneas. Muy adecuado para líneas individuales, pero no más.
Además, utilizando la sombra de texto, puede ocultar partes de la línea alrededor de la boquilla inferior. En este caso, tendrá que imitar el color de fondo, lo que significa que el método funciona solo en fondos homogéneos. Los gradientes y las imágenes no se adaptarán.
Sobre el este momento Hay 4 propiedades para subrayar estilizar. Mucho mejor que solo la decoración de texto.
pros
puedes usar la propiedad de transición y animar el color y el grosor;
salta a nuevas cadenas de forma predeterminada si el elemento no es bloqueo en línea;
Minusales
la línea está muy lejos y es difícil moverlo;
demasiadas propiedades innecesarias deben usarse para subrayar bien la mirada;
selección de texto deficiente cuando se usa la sombra de texto.
Box-Shadow Property
La propiedad Box-Shadow dibuja un subrayado con dos sombras internas: uno crea un rectángulo, y el segundo lo oculta. Esto significa que para el correcto funcionamiento del método, se necesita un fondo homogéneo.
El mismo truco con la sombra de texto se puede usar para simular el paso alrededor de la finalización inferior de las letras. Si el color de la línea difiere del texto, o es bastante delgado, entonces no debería haber problemas ya que sucede con la decoración de texto.
pros
se puede colocar bajo la línea de base;
puedes saltar las llamadas usando la sombra de texto;
se puede cambiar de color y grosor;
salta a nuevas líneas.
Minusales
es imposible cambiar los estilos;
no funciona con todos los fondos.
Propiedad de la imagen de fondo
La propiedad de fondo de fondo se resuelve mejor por nuestras tareas, y tiene muy pocas menos. La idea es que cree una imagen usando degradado lineal y posición de fondo, que se repite a lo largo del eje horizontal a lo largo de las cadenas de texto. El elemento debe ser exhibido: en línea;.
La demostración a continuación no usa degradado lineal. Para crear un efecto empinado, puede usar su imagen.
pros
se puede ubicar debajo de la línea de base;
puede omitir las llamadas inferiores con el texto-sombra;
es posible cambiar el color, el grosor (incluso en el polpíxel) y los estilos;
trabaja con imágenes de usuario;
salta sobre nuevas líneas;
funciona con cualquier fondo, si no está utilizando la sombra de texto.
Minusales
el tamaño de la imagen puede variar de diferentes maneras a diferentes permisos, navegadores y aumentar los niveles.
Filtros SVG
Jugué con este método. Puede crear un elemento de filtro SVG INLAAIN que dibuje una línea y ampliará el texto para disfrazar a esas partes de la línea que deben ser transparentes. Puede asignar la ID del filtro y consultarlo en CSS usando Filtro: URL ('# SVG-subrayado').
¿Qué es el Plus: el filtro agrega transparencia sin confiar en la sombra de texto? ¡Es decir, puede saltar las bolas inferiores de las letras en cualquier fondo, incluidos los gradientes y las imágenes! El siguiente ejemplo funciona con una sola cadena de texto, así que ten cuidado.
Y así parece en Chrome y Firefox:
En IE, Edge y Safari con soporte, surgen problemas. CSS es difícil probar el soporte para los filtros SVG. Puede usar la regla @Supports en el filtro, pero para que solo revise el trabajo de la propia referencia, y no el filtro aplicado o no. Mi camino es bastante rudamente trabajando con los navegadores, así que sea doblemente cuidadoso.
pros
ubicado debajo de la línea de base;
salta las llamadas inferiores;
se puede cambiar de color, grosor y estilos;
trabaja en cualquier fondo.
Minusales
no salta sobre nuevas líneas;
no funciona en IE, EDGE y SAFARI, pero puede especificar la decoración de texto como un folleto. El subrayado en los safari se ven muy bien.
Subrayline.js (lienzo)
Underline.js es una biblioteca increíble. Soy impresionante que fue que Zhang pudiera hacer con JS y la atención al detalle. Si aún no ha visto la demostración técnica Underline.js, deje de un minuto y vea. La Red tiene un maravilloso desempeño de nueve minutos en los principios del trabajo, lo gastaré rápidamente ahora. Underlowing se dibujan utilizando lienzo. Un enfoque completamente nuevo, que es sorprendentemente funcionando bien.
A pesar del nombre atractivo, es solo una demostración técnica. Es decir, no podrá colocar de inmediato la biblioteca en el proyecto sin un montón de cambio completo.
Esta biblioteca debe mencionarse solo como prueba del concepto. El lienzo tiene un potencial para crear guiones bajos interactivos, pero para el trabajo correcto deberá escribir un código JS adicional.
Text-Decoration- * Propiedades
Recuerda, dije que un poco más tarde analizaremos algo con más detalle. Ahora esto irá. La propiedad de decoración de texto funciona bien en sí misma, pero podemos agregar un par de propiedades experimentales para más mejor vista:
text-Decoration-Color
text-Decoration-Skip
estilo de decoración de texto
No te regocijas con anticipación, ya sabes sobre el apoyo en los navegadores.
Propiedad de color decoración de texto
La propiedad de color de decoración de texto le permite cambiar el texto del subrayado por separado del color del texto. Las propiedades incluso tienen un buen soporte en los navegadores. Funciona en Firefox y con el prefijo en Safari. Hay sus menos: si no limpia la línea alrededor de las llamadas, en Safari se encuentra en la parte superior del texto. Firefox:
Propiedad de texto-decoración-salto
La propiedad de salto de decoración de texto es responsable de saltarse las calificaciones inferiores en el texto subrayado.
La propiedad no es estándar y, en este momento, funciona solo en Safari. Para trabajar en otros navegadores, debe usar el prefijo -Webkit-. En Safari, esta propiedad está habilitada de forma predeterminada, por lo que el subrayado salta las ruidos más bajos, incluso en los sitios donde no se especifica esta propiedad.
Si usa normalize, necesitas saber que Últimas Versiones Desconecte la propiedad para la operación normal en todos los navegadores. Si desea devolver estos subrosos casi mágicos, debe habilitar esta propiedad.
Propiedad de estilo de decoración de texto
La propiedad de estilo de decoración de texto ofrece el mismo subrayado que la propiedad de estilo fronterizo, pero también agrega el nuevo tipo - Ondulado. Valores posibles:
En este momento, la propiedad de estilo de decoración de texto solo funciona en Firefox, la captura de pantalla se muestra a continuación:
¿Se ve un conjunto de énfasis monocromático?
¿Qué ocurre?
Las propiedades de la decoración de texto- * son más intuitivas en comparación con otras propiedades para los subrayados de estilo. Sin embargo, si un aspecto diferente a los requisitos que hemos presentado anteriormente, se puede observar que con la ayuda de estas propiedades, es imposible cambiar el grosor y la posición. Después de un pequeño estudio, encontré estas dos propiedades:
ancho de subrayado de texto
posición de texto-subrayado
Parece que estas propiedades fueron expulsadas de la versión temprana de CSS debido a la falta de interés en ellos. No se aplicaron. Oye, no tengo la culpa de esto.
conclusiones
Entonces, ¿qué mejor esfuerzo para enfatizar el texto? Todo depende de diferentes factores.
Para un texto pequeño, recomiendo usar la decoración de texto y una propiedad experimental de salto de decoración de texto, con la esperanza de que funcione. En la mayoría de los navegadores se ve tan, pero siempre fue que la gente no le prestó atención. Si usted es lo suficientemente paciente, existe la posibilidad de que, en poco tiempo, todos sus subrosos se vean bien, y no tendrá que cambiar nada.
Para el texto principal, use la imagen de fondo. El método funciona, se ve hermosa, y por ello hay mezcla de Sass. Si el subrayado es sutil, o el color difiere del texto, lo más probable es que pueda omitir el método de la sombra de texto. Para el texto en una línea, use la parte inferior del borde y cualquier otra propiedad.
Y para omitir las letras de las letras en fondos de gradiente o imágenes, intente usar el filtro SVG. O simplemente no mezcle tales fondos con guiones bajos. En el futuro, cuando mejora el soporte en los navegadores, puede usar las propiedades de la decoración de texto.
Descripción
Agrega diseño de texto en forma de subrayado, cruce, líneas sobre texto y parpadeo. Al mismo tiempo, puede aplicar más de un estilo, aliviando los valores a través del espacio.
Sintaxis
decoración de texto: [Blink || Línea a través || Enarline || Subrayado] | ninguno | heredar.
Valores
Parpadea conjuntos de texto parpadeante. Este texto es periódicamente, aproximadamente una vez por segundo desaparece, luego aparece nuevamente en el mismo lugar. Este valor no es actualmente compatible con los navegadores y condenado en CSS3, se recomienda utilizar la animación a cambio. Línea a través crea un texto cruzado (ejemplo). La línea en línea pasa sobre el texto (ejemplo). Subrayado establece el texto subrayado (ejemplo). Ninguno cancela todos los efectos, incluyendo subrayar la referencia, que es predeterminada. El valor heredado se hereda del padre.HTML5 CSS2.1 IE CR OP SA FX
Ataque estratégico
Modelo de objeto
document.getelementbyid ("elementid") .style.textdecorage
document.getelementbyid ("elementid") .style.textdecorageblink
document.getelementbyid ("elementid") .style.textdecorationlinethrough
document.getelementbyid ("elementid") .style.textdecorationnone
document.getelementbyid ("elementid") .style.textdecoragesenceoneone
document.getelementbyid ("elementid") .style.textdecorageungline
Navegador
Internet Explorer antes de la versión 7.0 no es compatible con el valor heredado. La línea obtenida utilizando el valor de línea en IE7 se encuentra más alto que en otros navegadores; En IE8, este error está arreglado.
Le permite hacer un menor de subrayado en HTML inferior (subrayado), TOP (enrala), texto cruzado (línea a través), etc. Compatible con este chip con el anterior y funcionará:
En la segunda línea se muestra cómo todo se registra en una fila con una decoración de texto.
estilo de decoración de texto - Texto Subscore
La opción establece la apariencia de la línea decorativa para / referencia. En las nuevas recomendaciones de CSS, se agregaron valores ondulados y dobles, ahora son solo 5:
- línea sólida - sólida;
- doble - doble (desde el primer ejemplo anterior);
- punteado - consiste en una secuencia de puntos;
- discutiendo - le permite hacer un CSS de subrayado punteado;
- ondulado - espectacular línea ondulada.
posición de subrayado de texto: posicionamiento CSS Subscore
Con la ayuda de esta propiedad, puede controlar la posición de la línea con respecto a la fuente de la glifo.
Total 4 opciones están disponibles:
- auto - se encuentra lo más cerca posible del texto del texto;
- debajo, bajo el borde más bajo de la fuente;
- izquierda y derecha - izquierda / derecha para las entradas mostradas verticalmente.
Aquí está la diferencia visual entre el texto inferior inferior usando debajo y automático:
La diferencia, creo, es bastante obvia.
text-Decoration-Skip - eliminamos el subrayado para los artículos
Usando la opción, puede cancelar (saltar) decorar algunos elementos en Cadena html. Para comprender mejor los valores válidos de espacios, objetos, decoración de caja, bordes, tinta, duplicaré la imagen de la última nota:
Es decir, por ejemplo, con la ayuda de la tinta, puede hacer que el menor subrayado en CSS, que no se cruzaría con los personajes. El valor de los objetos le permite omitir los elementos en línea (bloque en línea): insertar intervalo, y la línea continua se interrumpirá en el lugar apropiado:
Los parámetros de la decoración de la caja, los espacios, los bordes son mucho peores respaldados por los navegadores, por lo que su resultado es a veces diferente de lo esperado. Aquí hay un estado de compatibilidad / soporte de decoración de texto en el momento de escribir el artículo:
Chips adicionales para subrayar
Los usuarios de principiantes a menudo hacen algunas preguntas típicas sobre el tema, por lo que también decidimos considerarlas. El ejemplo general está en la parte inferior después de la explicación.
Cómo eliminar la referencia de subrayado
r: Hover (Texto-Decoración: subrayado;)
Ambos ejemplos a continuación le permiten comprender la lógica del trabajo cuando se desplaza: o usted indica inicialmente en CSS subrayado Los enlaces, y luego retírelo para flotar, o viceversa.
Si hay algunas otras preguntas sobre el tema, pregúnteles en los comentarios. Intentaremos considerar más tarde o sugerir en las respuestas. Lo principal en este asunto es la práctica: intente agregar diferentes propiedades para la opción de decoración de texto directamente en los ejemplos o crear su propio archivo de prueba. Esperamos en el sujeto de texto subrayado y enlaces en CSS / HTML, se ha vuelto clara.
El enfatizante es diferente, respectivamente, los métodos de su creación difieren. A continuación se enumeran varios populares.
Usando la decoración de texto
La propiedad de decoración de texto con el valor subrayado agrega un énfasis al texto; Este tipo de énfasis se puede observar para referencias por defecto. La línea creada de esta manera es igual al ancho del texto y será del mismo color que el titular. Puede cambiar la línea de color a través de la propiedad de color decoración de texto. Ejemplo 1 muestra el uso de la decoración de texto al elemento.
.
Ejemplo 1. Uso de la decoración de texto
El resultado de este ejemplo se muestra en la FIG. uno.
Higo. 1. Tipo de línea creada a través de la decoración de texto.
Los navegadores de IE y Edge no admiten la propiedad de color de decoración de texto.
Usando la parte inferior de la frontera
Propiedad fondo de la frontera. Agrega al elemento debajo de la línea de un grosor, color y estilo dado. Dicha línea requiere todo el ancho disponible, a pesar de la longitud del texto del encabezado (Fig. 2).
Higo. 2. Vista de la línea creada por la parte inferior de la frontera.
La distancia desde la línea hasta el texto se puede ajustar utilizando la propiedad. fondo acolchado Como se muestra en el Ejemplo 2.
Ejemplo 2. Usando la parte inferior del borde
Ley de discurso cultural en el siglo XXI.
De hecho, el dispositivo de texto de mito, ilustra el discurso, y le da su sonido, su propio carácter.
A la línea estar en el ancho del texto, es suficiente para girar el encabezado en un elemento de bloqueo de estrecho agregando una propiedad al selector H2 monitor con un valor de bloques en línea.
Uso :: trastero y contenido.
También puede hacer una línea artificial a través de una combinación de propiedades. contenido y pseudo-elemento :: después. . Solo retirarán un pseudoemento vacío después del título, y la apariencia de este pseudoemento está determinada por otras propiedades. En la Fig. 3 muestra una línea similar.
Higo. 3. Línea creada por :: después
La posición de tal línea en relación con el texto se establece a través de la propiedad. fondo Con un valor negativo, color de línea a través de la propiedad. antecedentes. . De hecho, resulta no una línea, sino un bloque rectangular, por lo que usamos el relleno de fondo (Ejemplo 3).
Ejemplo 3. Uso :: después
Ley de discurso cultural en el siglo XXI.
De hecho, el dispositivo de texto de mito, ilustra el discurso, y le da su sonido, su propio carácter.
Hay un grupo en maneras diferentes guion bajo. Puede recordar el artículo Marsina Vicari "Elaboración de enlaces de creación" en medio. Los desarrolladores medios no están tratando de hacer algo loco, solo quieren crear una hermosa línea debajo del texto.
Este es el subrayado más fácil, pero tiene el tamaño correcto y no superpone a los elementos remotos de las letras. Y es definitivamente mejor que el subrayado predeterminado en la mayoría de los navegadores. El medio tenía que enfrentar las dificultades para lograr su estilo en la web. Dos años después, todavía somos difíciles de hacer un hermoso subrayado.
Objetivo
¿Qué está mal con la decoración de texto habitual: subrayado? Si estamos hablando del escenario perfecto, el subrayado debe hacer lo siguiente:
- posicionado debajo de la línea de base;
- omitir elementos remotos;
- cambiar color, grosor y línea de estilo;
- trabajar con texto de múltiples líneas;
- trabajar en cualquier fondo.
Creo que estos son todos los requisitos razonables, pero por lo que sé, no existe una forma intuitiva de lograrlo con la ayuda de CSS.
Enfoques
Así que esto es para varios métodos¿Cuál podemos implementar subrayado en la web?
Aquí están los que considero:
- decoración de texto;
- fondo fronterizo;
- sombra de la caja;
- imagen de fondo;
- filtros SVG;
- Underline.js (lienzo);
- decoración de texto- *.
Analizaremos estos métodos uno por uno y hablaremos sobre los pros y los contras de cada uno de ellos.
texto-decoración.
la decoración de texto es la forma más obvia de subrayar. Aplicas una propiedad y esto es suficiente. En tamaños de fuentes pequeñas, puede parecer bastante bien, pero aumentar el tamaño de la fuente y tal subrayado comienza a parecer incómodo.
El mayor problema con la decoración de texto es la falta de ajustes. Está limitado al color y el tamaño de la fuente del texto y no tiene una forma de navegador cruzada de cambiarla. Aún lo hablaremos con más detalle.
- fácil de usar;
- posicionado debajo de la línea de base;
- de forma predeterminada, los elementos de eliminación más bajos en Safari y IOS;
- enfatiza el texto de múltiples líneas;
- trabaja en cualquier fondo.
- no se pierde los elementos remotos más bajos en todos los demás navegadores;
- no le permite cambiar el color, el grosor o la línea de estilo.
fondo de la frontera.
border-BEST ofrece un buen equilibrio entre la simplicidad y la personalización. Este enfoque utiliza la antigua buena propiedad CSS para la frontera, significa que puede cambiar fácilmente el color, el grosor y el estilo.
Así es como se ve el fondo del borde como elementos en minúscula.
El inconveniente principal es la distancia del subrayado desde el texto, es totalmente más bajo que los elementos del eliminación. Puede solucionarlo configurando los elementos de propiedad de bloques en línea y reduciendo la altura de la línea, pero luego perderá la capacidad de envolver el texto. Bueno para líneas individuales, pero más no es adecuado en ninguna parte.
Además, podemos usar la sombra de texto para superponerse parte de la línea junto a los elementos de sustitución, lo imitando con el mismo color que el fondo. Es decir, esta técnica solo funciona en un fondo monocromo simple, sin gradientes, patrones o imágenes.
En este momento ya usamos las cuatro propiedades completas para diseñar una línea. Es mucho más trabajo que solo agregar decoración de texto.
- puede omitir elementos remotos utilizando la sombra de texto;
- puede cambiar el color, la gordura y la línea de estilo;
- le permite usar transiciones y animaciones de colores y gordos;
- funciona con texto de múltiples líneas, si no se aplica el valor de bloques en línea;
- funciona en cualquier fondo, si no usa la sombra de texto.
- posicionado demasiado bajo y se mueve en un método complejo;
- muchas propiedades adicionales se utilizan para una operación adecuada;
- cuando se usa la sombra de texto, la selección del texto se ve feo.
sombra de la caja
box-Shadow dibuja un sustituto debido a dos sombras internas: uno crea un rectángulo, y el segundo lo oculta. Esto significa que necesitas fondo monófónico Para que funcione.
Puede usar el mismo truco con la sombra de texto para llenar los pases entre los elementos de subrayado y remotos. Pero si el color del subrobrado difiere del color del texto, o es simplemente bastante delgado, la línea no se enfrentará a elementos remotos al usar la decoración de texto.
- le permite cambiar el color y el grosor de la línea;
- funciona con texto de múltiples líneas.
- no permite cambiar el estilo de subrayado;
- funciona no en ningún fondo.
imagen de fondo.
El método con la imagen de fondo está más cerca de nuestro deseo y tiene una mínima deficiencia. La idea es usar degradado lineal y posición de fondo para crear una imagen que se repita debajo de la línea de texto.
Para trabajar este enfoque, es necesario que el texto esté en modo de modo estándar: en línea; .
La siguiente opción se realiza sin gradiente lineal, para los efectos que puede agregar su imagen de fondo.
- puede colocarse debajo de la línea de base;
- puede omitir los elementos remotos a expensas de la sombra de texto;
- trabaja con imágenes personalizadas;
- envuelve algunas líneas de texto;
- funciona en cualquier fondo, si no aplica la sombra de texto.
- el tamaño de la imagen puede variar según la resolución, el navegador y el zoom de la pantalla.
Filtros SVG.
Jugué mucho de esta manera. Puede crear un filtro en minúsculas SVG, que dibuja una línea y luego expanda el texto para enmascarar parte de la línea, que queremos hacer transparentes. Luego, puede configurar el filtro de identificación y consultarlo en CSS aproximadamente, por lo que se filtra: URL ('# SVG-subrayado').
La ventaja de este enfoque es que la transparencia se logra sin aplicar la sombra de texto, es decir, omitimos los elementos remotos en cualquier fondo, incluidos los gradientes y las imágenes de fondo. Funciona solo en una línea de texto separada, considerándola.
Así es como se ve en Chrome y Firefox:
El soporte en IE, Edge y Safari es problemático. Es difícil probar el soporte del filtro SVG en CSS. Puede usar la directiva @supports con filtro, pero solo verificará el funcionamiento del enlace del filtro, pero no el trabajo del filtro en sí. Mis intentos terminaron con la definición mutua de las posibilidades del navegador, esta es una falta tangible de un método.
- puede colocarse debajo de la línea de base;
- puede perderse elementos remotos;
- permite un cambio en el color, el grosor y la línea de estilo;
- trabaja en cualquier fondo.
- no funciona con texto de múltiples líneas;
- no funciona en IE, Edge y Safari, pero puede usar la decoración de texto como una opción de respaldo, en Safari se ve digno.
Subrayline.js (lienzo)
Underline.js fascinados. Lo considero un impresionante lo que hizo Venten Geng, de poseer javascript y atención al detalle. Si no ha visto una demostración técnica Underline.js, léase de lectura y obtenga un minuto de tiempo. También está su informe de nueve minutos sobre cómo funciona, pero describiré un breve: el subrayado se basa con la ayuda de elementos.
A pesar del nombre del desafío, Underline.js es solo una demostración técnica. Esto significa que no puede simplemente tomar y conectarlo a su proyecto sin cambiar el código.
Decidí mencionar esto en la prueba del concepto que
Nuevas propiedades de la decoración de texto
Recuerdas que prometí hablar de la decoración de texto. El tiempo ha llegado.
En sí mismo, esta propiedad funciona bien, pero puede agregar múltiples propiedades experimentales para personalizar vista externa guion bajo.
- text-Decoration-Color
- text-Decoration-Skip
- estilo de decoración de texto
Pero no se regocija demasiado ... Apoyo en los navegadores, como siempre. Así que va.
text-Decoration-Color
La propiedad de color de decoración de texto le permite cambiar el nivel de subrayado por separado del color del texto. El apoyo a esta propiedad es mejor de lo que podría esperar, funciona en Firefox y con el prefijo en Safari. Eso es qué obstáculo: Si tiene elementos remotos, Safari pondrá el subrayado sobre el texto.
text-Decoration-Skip
La propiedad de salto de decoración de texto incluye un pasaje de elementos remotos en el texto subrayado.
Esta propiedad no es estándar y ahora funciona solo en Safari, con el prefijo -Webkit. Safari de forma predeterminada activa esta propiedad, por lo que los elementos remotos siempre están cruzados.
Si está utilizando Normalize, tenga en cuenta que las últimas versiones deshabilitan esta propiedad por el comportamiento consecutivo de los navegadores. Y si desea subrayar no afectar los elementos remotos, debe activarlo manualmente.
estilo de decoración de texto
La propiedad de estilo de decoración de texto ofrece las mismas oportunidades de diseño que la propiedad de estilo fronterizo, agregando el estilo ondulado, excepto.
Aquí está la lista de valores disponibles:
- discutió
- punteado.
- doble.
- sólido
Ahora, la propiedad de estilo de decoración de texto solo funciona en Firefox, aquí hay una captura de pantalla:
Lo que falta
Una serie de propiedades de la decoración de texto- * es mucho más intuitiva de usar que las otras propiedades CSS para subrayar. Pero si se parece con más cuidado, no es suficiente para satisfacer nuestras solicitudes para establecer el grosor o la posición de la línea.
Después de un pequeño estudio, encontré un par de propiedades más:
- ancho de subrayado de texto
- posición de texto-subrayado
Aparentemente, se relacionan con los primeros borradores de CSS, pero nunca se implementaron en los navegadores debido a la falta de interés.
conclusiones
Entonces, ¿cuál es el método de subrayar lo mejor?
Para un texto pequeño, recomiendo usar la decoración de texto con una adición optimista de text-decoration-skip. Se ve un poco insípido en la mayoría de los navegadores, pero el subrayado en los navegadores fue tal siempre y la gente simplemente no prestará atención. Además, siempre existe la posibilidad de que si tiene paciencia, este subrayado se verá bien sin la necesidad de cambiar algo, ya que se realizará en los navegadores.
Para el texto básico tiene sentido usar la imagen de fondo. Este enfoque funciona, se ve genial y hay mezcladores SAS para él. Usted, en principio, puede omitir la sombra de texto si el subrayado es delgado o caracterizado por el color del texto.
Para cadena separada Texto Use la parte inferior de la frontera junto con cualquier propiedad adicional.
Y si necesita saltarse elementos remotos contra el fondo de gradiente o imagen, intente usar filtros SVG. O simplemente evite usar un subrayado.
En el futuro, cuando el apoyo en los navegadores es mejor, la única respuesta será un conjunto de propiedades de la decoración de texto- *.
También recomiendo prestar atención al artículo Benjamin WoodRoff CSS subrayado chupar, en el que se consideran las mismas preguntas.