Mantener su código de CSS3 Slim

Este artículo es parte de nuestro "Serie de tutoriales HTML5 / CSS3" - Dedicado a ayudarlo a ser un mejor diseñador y / o desarrollador.. haga clic aquí Ver más artículos de la misma serie..

Los desarrolladores web pueden ahorrar mucho tiempo utilizando una sintaxis CSS3 más sofisticada. Los usuarios que visitan su página esperan el tiempo de carga más rápido posible, lo que hace que sea su responsabilidad mantener bajos los tamaños de archivo. Hay un montón de trucos abreviados con CSS y especialmente bajo el nuevo modelo CSS3.

He reunido algunas de estas ideas en la guía a continuación. También debemos abordar otras áreas, como la reducción de su código CSS. Hay herramientas en el navegador disponibles para ayudar a los desarrolladores en el proceso de diseño, pero usted querría combinar códigos cortos con esta reducción del tamaño del archivo para simplificar el proceso de representación de su sitio web..

Consejos básicos sobre el formateo

Antes de saltar a la sintaxis de CSS real, quiero repasar el tema de cómo para escribir tu CSS. Si está familiarizado con el diseño web, es probable que haya visto una hoja de estilo antes, probablemente más de una vez. La primera parte de cada comando se llama selector. Esto apunta al tipo de elemento que recibirá los estilos agregados dentro de las llaves, también conocido como propiedades.

Nivel Inline

Con los estilos en línea, cada propiedad se escribe una tras otra con solo espacios para separarlas. Este método se aplica mejor a los selectores donde solo necesita un par de propiedades. Le ahorrará espacio en la página y el desplazamiento a través de su hoja de estilo será mucho más rápido. En caso de que nunca haya encontrado CSS en línea antes, he agregado un pequeño ejemplo a continuación que se dirige a los enlaces de anclaje HTML.

a color: # 648cc8; font-weight: negrita;  a: hover color: # 739cda; texto-decoración: ninguno;  a.alt color: # bd4949! important;

Nivel de bloque

Por otro lado, las propiedades de estilo de bloque se ingresan en una línea por par de clave / valor y, a menudo, se sangran para realizar ediciones más rápidas al escanear el código. Aproximadamente el 99% de las hojas de estilo más limpias que utilizo para este formato, se ha convertido en un estándar de la industria para muchos diseñadores. Si su selector utiliza más de 6 o 7 propiedades, este es el mejor formato para aplicar.

Cuando toma en consideración las muchas propiedades nuevas de CSS3, también se da cuenta de la rapidez con que se llenan sus hojas de estilo. Y muchas de estas propiedades admiten copias específicas del navegador que requieren entradas de código casi duplicadas (como el radio del borde). Puede ver mi ejemplo de un conjunto de propiedades de bloque a continuación que se dirige a un div de contenedor de muestra.

.wrap display: block; relleno: 6px 10px; fondo: #FFF; radio del borde: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-radio-borde: 4px;

Ninguna forma de escribir CSS es específicamente mejor que la otra. En última instancia, es su elección como desarrollador el estilo que prefiere, e incluso esto se ajustará al proyecto en el que trabaje. ¡Incluso es común encontrar CSS donde los diseñadores han mezclado ambos! Personalmente siento que “trabajos en progreso” tiende a ser más fácil con los estilos de bloque, ya que estoy examinando constantemente la hoja de estilo para realizar ediciones o adiciones. Pero para los dominios con mucho tráfico, la mejor manera de ir es la de minimizar el archivo CSS..

Manteniéndolos delgados

Al utilizar los muchos códigos cortos disponibles en CSS3, puede ahorrar mucho tiempo de desarrollo. La edición de elementos HTML será mucho más fácil a medida que entienda esta jerga que ahorra tiempo. Además, su código aparecerá más limpio y fácil de ver.

El único inconveniente es que no todos los navegadores son totalmente compatibles con estas propiedades. Hay soluciones para muchos de los problemas existentes, como en Internet Explorer y Netscape. Afortunadamente, la Web siempre avanza hacia adelante y, a medida que CSS3 crece en popularidad, sin duda experimentaremos un crecimiento en la compatibilidad del navegador también..

Color RGBa Transparencia / Opacidad

El nuevo RGBavalue no es exactamente un CSS3 propiedad, pero La transparencia alfa es específica de CSS3 solamente. En lugar de los valores comunes "Rojo Verde Azul" que pasas por color, ahora puedes Incluye una cuarta opción de transparencia de color.. Debido a esto, los desarrolladores web realizan PNG transparentes casi en su totalidad.

La sintaxis básica requiere un valor de 0-255 en las primeras tres (3) ranuras y 0-1.0 en la posición alfa. La gama de colores es específica para la cantidad de cada tono (RGB) que se puede ver, con 0 como nada y 255 en su totalidad..

 / ** sintaxis ** / fondo: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** ejemplo ** / div fondo: rgba (255, 255, 255, 0.3);

Compatibilidad entre navegadores

Otra propiedad opacidad Se puede utilizar en algunas circunstancias. Sin embargo, esto afectará a todo el elemento HTML y al contenido interno, no solo el fondo como viste en mi ejemplo.

Desafortunadamente, Internet Explorer todavía no admite el valor de color RGBa. Por lo general, debe incluir una propiedad alternativa con una opacidad total para estos navegadores menos estándar. Usted configura esto con los mismos valores pero excluyendo el 4to (opacidad). Se vería algo así como rgba (255, 255, 255)

Además, Internet Explorer se puede manejar un poco más correctamente a través de condicionales. Realmente puede verificar si el navegador está ejecutando IE y mostrar un filtro de CSS CSS de Microsoft patentado. He demostrado esto en mi ejemplo a continuación (tenga en cuenta que esto aparecería en algún lugar de su archivo HTML):

CSS3 radio de borde

He leído algunos hilos confusos del foro sobre la creación de bordes redondeados con CSS3, no tanto por el lado como se hace, pero con un soporte de navegador complicado, los desarrolladores web están luchando por el código más fácil para ingresar y funcionar como se espera.

 / ** sintaxis ** / radio-borde: arriba a la izquierda arriba a la derecha abajo a la derecha abajo a la izquierda;

los radio del borde la propiedad comparte una sintaxis similar a la creación de un borde estándar, excepto en este caso que nos dirigimos a las esquinas del cuadro. Esta propiedad realmente aceptará de 1 a 4 valores y cada uno de ellos tiene como objetivo una configuración diferente de esquinas.

1 valor: Las cuatro esquinas se redondean al mismo valor.
2 valores: El primer valor se aplica a arriba a la izquierda y abajo a la derecha mientras que el segundo valor golpea parte superior derecha y abajo a la izquierda
3 valores: Primero se aplica a la arriba a la izquierda esquina, el segundo es a la vez abajo a la izquierda Y parte superior derecha mientras que el tercer y último valor se aplica a abajo a la derecha
4 valores: Los 4 valores apuntan a las esquinas en el siguiente orden: arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda

 / ** ejemplo ** / div radio del borde: 4px 4px 8px 4px;  div radio del borde: 4px 4px 8px;

Así que en el código anterior estamos usando radio del borde aplicar un efecto redondeado de 4px en todo excepto el abajo a la derecha Borde que obtiene una curva alisada de 8px. Si lo notó, ambos códigos aplicarán el mismo efecto de estilo..

Compatibilidad entre navegadores

Ahora el principal problema es que radio del borde Solo es compatible con algunos navegadores. Internet Explorer 9 recientemente agregó un gran soporte y Opera también lo representará. Sin embargo, incluso Opera ha creado su propia propiedad con -radio de la frontera orientado a su motor de navegador específico. Adicionalmente -moz-border-radius es compatible con el software Firefox / Gecko y -webkit-border-radius para Google Chrome / Safari.

El código a continuación es un ejemplo de mi plantilla básica para crear esquinas redondeadas con el soporte de navegador global más grande.

 div radio del borde: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px ;; -moz-border-radius: 4px 4px 8px 4px; -o-radio-borde: 4px 4px 8px 4px;

Fancy a Drop Shadow?

La otra faceta realmente impresionante de CSS3 es el soporte para caja y sombras de texto. Este ha sido un problema para los desarrolladores en el pasado, ya que las imágenes de fondo eran la única opción realista. Esta sintaxis en realidad sigue un rol abreviado que es mucho más fácil que las otras propiedades que hemos cubierto. Al principio es difícil recordar el orden correcto de los valores clave, pero cuanto más practique, más fácil será..

Desafortunadamente, Internet Explorer es una vez más el extraño. Todos los demás navegadores principales, incluidos Firefox, Google Chrome, Safari y Opera, son totalmente compatibles con sombra de texto propiedad. Los desarrolladores han intentado construir su propio soporte de IE pero todavía es muy limitante. La sintaxis básica se escribe de la siguiente manera:

 / ** sintaxis ** / text-shadow: color de radio de desenfoque de offset x y offset; / ** ejemplo ** / div text-shadow: 2px 2px 1px # 111;

La compensación de X e Y le dice al navegador qué tan arriba y abajo debe aparecer la sombra. Puede usar valores negativos para colocar la sombra arriba y sobre la izquierda, respectivamente. Pero esto se ve muy incómodo, así que recomiendo enteros positivos. Además, el valor del radio de desenfoque se puede usar para suavizar los bordes rígidos, si la sombra del texto no parece natural.

Esta sintaxis solo está analizando la notación básica al crear un único efecto de sombra paralela. ¡Diseñadores altamente avanzados han estudiado para crear incluso múltiples sombras simultáneamente! Hago referencia a esta impresionante publicación del blog de abril de 2011, que explica con gran detalle la imposición de sombras de texto. Si tiene tiempo, hojee el contenido solo para tener una idea de las características más avanzadas y asegúrese de marcarlo como referencia futura.!

Compatibilidad entre navegadores

El detractor más grande con el que nos encontramos es Internet Explorer. Una y otra vez, Microsoft ha sacado su propio motor de renderizado del navegador que, en el mejor de los casos, ha funcionado mal. Ahora, incluso con CSS3 tomando las riendas en las sombras de texto, IE todavía está detrás. Hay un gran sitio web de demostración donde puede encontrar ejemplos de código y comentarios condicionales tradicionales de CSS.

Básicamente, está buscando verificar si el navegador que ejecuta su usuario coincide con alguna versión de Internet Explorer 9 o inferior. Luego, utilizando los filtros de MS, podemos aplicar una sombra en cualquier elemento de texto (arriba, estamos usando un párrafo).

Facilitando las transiciones

CSS3 transición ¡Es la propiedad más popular en el mercado del diseño desde los flapjacks de la abuela! Los diseñadores web han estado haciendo tanto alboroto por las transiciones puras de CSS, aunque el soporte se limita principalmente a los navegadores Webkit. Por supuesto, puede utilizar propiedades secundarias para Mozilla y Opera y similares. Pero la notación abreviada es realmente cautivadora, especialmente si estás en contra de las animaciones de JavaScript por cualquier razón..

En primer lugar, echemos un vistazo a la propiedad de transición original. Esto requerirá 4 valores que también se podrían desglosar en propiedades. Se corresponden con la transición. propiedad(cual es el efecto), duración(cuanto tiempo sacarlo), función de tiempo(cambios de velocidad sobre la animación), y retrasar(número de segundos a esperar antes de animar).

/ ** sintaxis ** / transición: duración de la propiedad tiempo de retardo-función; / ** ejemplo ** / img transición-propiedad: opacidad; duración de la transición: 2s; función de tiempo de transición: facilidad de entrada; retardo de transición: 0,5 s;

Debe comprender intuitivamente el propósito de la mayoría de estas propiedades, excepto posiblemente la función de temporización. Aunque es confusa al principio, esta propiedad simplemente anima tu transición de manera diferente, por lo que el efecto comenzará más lento, más lento o algo similar..

W3 Schools tiene una función de sincronización de documentos en línea que enumera todos los valores posibles que puede probar. Constantemente me encuentro buscando en Google para estas guías, pero hacen marcadores tan útiles.

Compatibilidad entre navegadores

Ahora vamos a poner en marcha el soporte completo del navegador. Por defecto, la propiedad de transición es solamente Compatible con las nuevas versiones de Safari. Sin embargo, muchos usuarios todavía requieren la -webkit prefijo que también se aplica a Google Chrome y motores de renderización similares. A continuación hay una “finalizado” plantilla de bloque de código Recomiendo guardar y usar si necesita soporte de transición de la mayoría de los navegadores web.

 img transición: opacidad 2s eas-in 1s; -webkit-transición: opacidad 2s facilidad en 1s; / * Chrome, safari, flock * / -moz-transition: opacidad 2s eas-in 1s; / * mozilla + gecko * / -o-transición: opacidad 2s eas-in 1s; / * opera * /

Efectos de trazo de texto

Esta propiedad no es enorme y no encontrarás muchos diseñadores web que la utilicen en la actualidad. Pero puedes usar trazo de texto para construir algunos efectos realmente aseados con sus fuentes. Los navegadores webkit como Safari y Chrome son los únicos verdaderos defensores de esta propiedad hasta ahora. Opera y Firefox tienen dificultades para representar objetos de texto con estos mismos contornos.

 / ** sintaxis ** / p -webkit-text-stroke: ancho color;  / ** ejemplo ** / p -webkit-text-stroke: 1px # 222;

Compatibilidad entre navegadores

Si siente la necesidad de efectos de trazo de texto, siempre debe incluir un color de copia de seguridad. Mozilla y Opera pueden arreglárselas, sin embargo, los usuarios de Internet Explorer no tienen otras opciones. Lamentablemente, esta es una de las propiedades más nuevas de CSS3 que simplemente no ha obtenido suficiente apoyo de la comunidad de desarrolladores de navegadores web. Debería pasar un tiempo jugando con esta gran herramienta web creada específicamente para construir estos contornos de texto CSS3.

Tamaño de caja

La propiedad de tamaño de caja le da más control sobre el ancho / alto total de cualquier elemento de bloque. Por defecto, el ancho / alto + borde + margen + relleno conforman el tamaño total de una caja. Sin embargo, el uso de un cuadro de borde en su contenido empuja todos sus rellenos y márgenes interior para mantener el ancho exactamente igual. Solo hay dos valores para esta propiedad, con caja de contenido siendo el predeterminado.

div ancho: 550px; relleno: 9px; tamaño de caja: caja de borde; / * El ancho se mantendrá en 550px * /

Como puedes imaginar, esto te será útil en algún momento de tu carrera en CSS. El relleno y los márgenes pueden ser un verdadero dolor y cuando agrega bordes, tiende a perder el rastro de píxeles.

Compatibilidad entre navegadores

Opera e IE 8 soportan esta nueva propiedad por defecto. IE7 y las siguientes opciones están bloqueadas con la configuración del cuadro de contenido, a menos que sus visitantes utilicen el modo peculiaridades. Las únicas adiciones que debe conocer específicamente sobre los kits de webkit y los motores de navegador con Mozilla.

div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-sizing: border-box; / * Firefox * / box-sizing: border-box; / * Opera / IE8 + * /

Columnas CSS3 puras

Las columnas son un poco complicadas con CSS3 pero se pueden lograr con un código mínimo. Las 2 propiedades en las que quieres enfocarte son recuento de columnas y espacio entre columnas. El recuento hace referencia al número total de columnas que desea aplicar, mientras que el espacio crea un margen entre cada una..

 div # cols column-count: 3; espacio entre columnas: 10px;

En mi ejemplo podemos ver los códigos de identificación que se usan como un contenedor. Dentro dividimos el div en 3 columnas con un espacio de 10px entre cada una. Además podrías poner ancho de columna que se utiliza para establecer el ancho total de cada columna en lugar de enumerar un número sólido.

Compatibilidad entre navegadores

Cualquier cosa antes de IE8 simplemente no podrá hacer uso de esta propiedad. Pero como hemos visto en todos los ejemplos, Mozilla y Webkit ofrecen sus propias soluciones para múltiples navegadores. Si necesita una plantilla, vea mi pequeño código de ejemplo a continuación:

 div # barra lateral ancho: 210px; -mez-columna-cuenta: 3; -moz-column-gap: 7px; -webkit-column-count: 3; -webkit-column-gap: 7px; recuento de columnas: 3; espacio entre columnas: 7px;

Custom @ font-face

Debe haber escuchado acerca de la emoción con respecto a las fuentes personalizadas de CSS3. Si utilizamos la propiedad @ font-face, podemos importar estilos de fuente externos y usarlos como cualquier otra familia. La sintaxis es un tanto complicada y tendrás que dedicar algo de tiempo a hacerlo bien. El bloque para @Perfil delantero se utiliza para definir un nombre de familia, después puede usar esto en su Familia tipográfica propiedades donde sea!

 @ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Sólo Internet Explorer * /

Como puede ver arriba, no estoy apuntando a ningún tipo de fuente específico, pero la sintaxis es lo que debería sobresalir. Tenga en cuenta que Internet Explorer solo admite .eot tipos de letra, mientras .ttf y .otf Son opciones populares para los otros navegadores. También de importancia, debe comprender que puede pasar URL de fuentes desde enlaces directos, es decir,. url ('https://www.hongkiat.com/css3/fonts/myfont.ttf');

No hay ningún problema real entre los navegadores con esta configuración, ya que todos los motores de renderizado pueden analizar estos tipos de archivos de fuentes. Solo recuerde que para el soporte de IE debe incluir una versión eot así como su original. Creo que el artículo de W3 Schools tiene un catálogo de la información más importante que debe consultar.

Convertir a CSS en miniatura

Este tema se debate frecuentemente ya que tiene un propósito diferente para cada proyecto. Por un lado, los desarrolladores web pasan mucho tiempo escribiendo sus hojas de estilo. No hay forma de cifrar este tipo de datos de texto sin formato y ocultarlo de los ojos de los espías. Si está tratando de evitar que otros roben su código descaradamente, lo mejor que puede hacer es amontonar los estilos y eliminar todos los saltos de línea / espacios.

Este proceso puede ser etiquetado como miniaturizando tu codigo. En general, los desarrolladores escribirán el CSS en formato estándar y luego eliminarán todos los espacios en blanco antes de subirlos al servidor web. Luego, tiene una copia local para editar rápidamente y también proporciona una versión más pequeña en el proyecto en vivo. Obviamente, este método puede ser útil para reducir la carga de páginas y mantener a raya a los secuestradores de código.

El enlace que publiqué arriba que conduce a Minify CSS tiene material de lectura excelente sobre el tema. El sitio también proporciona una herramienta basada en el navegador para eliminar dichos espacios en blanco y los rendimientos clave de su código. CSS Compressor es otra opción con una interfaz simple que se ejecuta directamente en su navegador web. También he escuchado cosas buenas sobre Clean CSS, aunque nunca he usado la aplicación yo mismo..

enlaces relacionados

Para seguir avanzando, proporcioné seis enlaces útiles de toda la Web. Estos incluyen no solo la notación abreviada, sino también guías y tutoriales útiles para acceder al practicar este nuevo código CSS abreviado..

Guía para principiantes de CSS3
Guía de CSS de taquigrafía
¿Estás utilizando CSS3 adecuadamente??
Contenidos CSS y tabla de compatibilidad del navegador.
CSS3 + Mejora progresiva = Diseño inteligente
Índice completo de propiedades CSS / CSS3

Conclusión

Se necesita mucha dedicación y práctica para escribir un código CSS para construir un programa concreto que pueda seguir para cada proyecto. La mayoría de los diseñadores web se complacen en recoger nuevos proyectos e ideas, por lo que seguramente encontrará el tiempo para practicar estos útiles consejos de codificación. Intente copiar una pequeña hoja de referencia para su propia conveniencia, en caso de que no pueda encontrarlas o, peor aún, pierda la conexión a Internet.!

¿Conoces otras propiedades útiles de CSS3 o accesos directos? Nos encantaría escuchar sus pensamientos e ideas en los comentarios de la discusión. Los desarrolladores web están presionando para una mayor estandarización dentro del W3C y claramente la transición ha sido cada vez más fácil. CSS3 ofrece fantásticos beneficios y si puedes dominar la codificación abreviada, esto mantendrá bajos los tamaños de tus archivos y evitará que los copios roben tu código.