Portapapeles js
A lo largo de mis años de uso de CSS, he encontrado algunos principios que resistieron la prueba del tiempo, mientras que otros me causaron muchos dolores de cabeza a la larga. Quiero compartir contigo los que resistieron la prueba del tiempo. Si tienes algún buen consejo que no aparezca en esta lista, házmelo saber, estoy tan dispuesto a aprender como a compartir.
Nota: Los consejos de este artículo tienen que ver con la experiencia del desarrollador de CSS, y no con el diseño, el rendimiento o la accesibilidad (aunque son importantes). Los siguientes puntos te serán especialmente útiles si necesitas mantener y ampliar tu código CSS durante largos periodos de tiempo.
En primer lugar, es muy importante comprender la especificidad de CSS; aquí tienes un artículo excelente. En esencia, siempre que quieras sobrescribir estilos aplicados por un selector, necesitas superar o al menos igualar su especificidad.
Para evitar las guerras de especificidad, debes evitar añadir selectores que no sean necesarios. En lugar de .nav ul li utilice sólo .nav li o mejor sólo .nav-item. Los puntos 2. – 6. de este artículo son prácticas que te ayudarán a mantener baja tu especificidad.
Css transición rotar
En este tutorial, le mostraremos cómo organizar sus enlaces utilizando columnas de Bootstrap y añadir una funcionalidad distintiva mediante la vinculación tanto a las subpáginas de un sitio web y sus subcategorías en una columna ordenada.
En el código de abajo, tenemos tres cajas seccionales y cada una de ellas está etiquetada con un color diferente como azul, rojo y verde. Éstas formarán nuestras tres columnas diferentes. Cada columna tiene un enlace a la página principal y una lista de sub-enlaces pertenecientes a esa página, por ejemplo, la última columna verde es una columna de Departamentos con un enlace directo a la página principal del departamento y debajo de eso, una lista de nombres de departamentos. El enlace al departamento principal se encuentra dentro de un encabezado h2 y está ligeramente separado de sus subenlaces. De este modo, los usuarios tienen la opción de ir directamente a la página de índice de los departamentos o seleccionar uno de ellos.
En primer lugar, nos aseguramos de utilizar Flexbox en los elementos de fila. Flexbox es un método de diseño CSS que ordena, alinea y distribuye los elementos de forma eficaz. Ahorra mucho tiempo y frustración al eliminar la necesidad de usar flotadores y demasiadas consultas de medios para diseños responsivos. Seleccionamos todos los elementos row y los elementos sectional-box dentro de ellos y les damos el atributo: display: flex;.
Css transformar duración
Estilizar una tabla HTML no es el trabajo más glamuroso del mundo, pero a veces todos tenemos que hacerlo. Este artículo proporciona una guía para hacer que las tablas HTML se vean bien, destacando algunas técnicas específicas de estilización de tablas.
Una tabla HTML típicaEmpecemos por una tabla HTML típica. Bueno, digo típica – la mayoría de los ejemplos de tablas HTML son sobre zapatos, o el tiempo, o empleados; nosotros decidimos hacer las cosas más interesantes haciéndola sobre bandas punk famosas del Reino Unido. El marcado tiene este aspecto:
La tabla está bien marcada, es fácilmente estilizable y accesible, gracias a elementos como scope, <caption>, <thead>, <tbody>, etc. Desafortunadamente, no se ve bien cuando se representa en la pantalla (véalo en vivo en punk-bands-unstyled.html):
Gráficos y colores¡Ahora los gráficos y los colores! Como la mesa está llena de punk y actitud, tenemos que darle un estilo imponente y brillante que le vaya bien. No te preocupes, no hace falta que tus mesas sean tan estridentes: puedes optar por algo más sutil y de buen gusto.
Variables css pseudoelementos
Básicamente me pedía que le dijera a rails que precompilara home.scss. Sin embargo, cuando navego a través de la base de código del proyecto de código abierto. No parece tener esta línea de código. La precompilación parece ocurrir como por arte de magia.
* Cualquier archivo CSS y SCSS dentro de este directorio, lib/assets/stylesheets, vendor/assets/stylesheets, * o el directorio vendor/assets/stylesheets de cualquier plugin puede ser referenciado aquí usando una ruta relativa. * Puedes añadir estilos para toda la aplicación a este archivo y aparecerán al final del archivo * compilado, de modo que los estilos que añadas aquí tienen prioridad sobre los estilos definidos en cualquier * estilo definido en los otros archivos CSS/SCSS de este directorio. Generalmente es mejor crear un nuevo * archivo por ámbito de estilo. * *= require_tree . *= require_self */
Luego, si tenemos algún otro .scss que necesite ser precompilado, tendremos que añadirlo explícitamente utilizando la directiva Rails.Application.config.assets.precompile, ¡luego el railtie de sprockets hará el resto del trabajo!