Clear de float en CSS

ByLuis

Aunque existe una forma común de hacer un clear de los float de los elementos anteriores:

<div class="clear"></div>

existe una forma más adecuada aunque realmente no es nueva, ya que ya se habló de ella en el 2004.

Para ello usaremos la propiedad :after que genera contenido antes del contenido del elemento. Tendremos una capa contenedora la cual modificaremos mediante CSS para que genere contenido invisible y con clear.

#container:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#container
{display: inline-block;}
/* Oculta para IE-mac \*/
* html #container
{height: 1%;}
#container
{display: block;}

Clear Your Floats – The Right Way

Similar Posts

|

Consejos para organizar tus CSS

ByLuis

Muchas veces cuando estamos diseñando nuestras páginas web, nos encontramos con que vamos añadiendo estilos a nuestras CSS, por lo que al final tenemos un CSS bastante desorganizado y caótico. Aquí os dejo unos pocos consejos para tener unas CSS limpias y organizadas.

  • Agrupa los estilos: júntalos por categorías (cabecera, tipografía, …) y sepáralos mediante comentarios.
  • Elige correctamente las categorías
  • Importa otras hojas de estilo
  • Usa tabulación y saltos de línea
  • Usa selectores para descendientes…

Squeaky Clean CSS

Vía / Caótico Neutral

70 ideas para crear mejores CSS

ByLuis

Un gran recopilatorio sobre consejos y técnicas para desarrollar tus CSS. Un lugar dónde encontrar bastantes cosas de las que necesitamos cuando queremos desarrollar unos CSS en condiciones. Cambiar colores al texto o poner bordes no es suficiente, los CSS son más complejos.

La lista está dividida en diferentes apartados:

  • Cómo empezar.
  • Organizar el código.
  • Tratar con id, class, selectores y propiedades.
  • Abrevia el código.
  • Tipografía.
  • Depurar el código.
  • Consejos técnicos sobre id y class.
  • Consejos técnicos sobre selectores.
  • Estilos en enlaces.
  • Técnicas CSS.
  • IE.
  • Obtener inspiración.

Entre todos los consejos, algunos me gustaría destacar, puede que sean conocidos de sobra, pero nunca viene mal volver a recordarlos.

  • Para empezar, usa una página en blanco, dibuja dónde quieres cada bloque (cabecera, contenido, paneles laterales, pie de página), sitúa las capas y empieza a crear los estilos.
  • Organiza tus CSS en bloques y añade comentarios para indentificarlos, cuando quieras añadir, modificar o borrar, siempre será más cómodo y rápido si lo haces así.
  • Escribe los contenedores al mínimo, piensa bien en la estructura y no lo llenes todo de capas.
  • Evita los selectores y el hacking, aunque sobre el hacking yo diría que ni lo uses.
  • Escribe en los comentarios al inicio los códigos de colores que utilices para facilitarte el trabajo.
  • Escribe el nombre de los ids y los class de acuerdo con la semántica.
  • Acorta la notación hexadecimal: #334455 es #345. Yo en esto fallo, me cuesta hacerlo así, malas costumbres.
  • Usa mayúsculas o minúsculas mediante estilos.
  • Usa bordes para localizar las capas cuando estés depurando.

70 Expert Ideas For Better CSS Coding

Vía / Techmeme

Gráficas mediante CSS

ByLuis

Una buena colección de herramientas para generar gráficas (de barras, progreso, de tarta, …):

10 Free CSS Graph Resources

Vía / Intenta

12 técnicas básicas de plantillas CSS

ByLuis

Ya hemos hablado otras veces sobre CSS layouts y hemos dado ejemplos para implementarlas. En este caso es más de lo mismo, pero la claridad y sencillez con que lo muestran me ha gustado bastante.
Los diseños están divididos en 1 columna, 2 columnas (con el panel a la derecha o izquierda) y tres columnas. Cada una de estas categorías, a su vez tiene diseño estático, estático con paneles en el pie de página y diseño fluido.
csstemplates.png
Se pueden descargar los diseños cuando los visualizas.
12 Basic CSS Templates
Vía / Digg

|

Añadir números de línea en highlight.js

ByLuis

Aprovechando la versión 1.2.0 de Snippet Block, comparto cómo añadir números de línea al código formateado por highlight.js.

El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.

document.addEventListener( 'DOMContentLoaded', () => {
	const prevHighligth = window.hljs.highlightBlock;
	window.hljs.highlightBlock = block => {
		const newline = '<span class="sw_new_line"></span>';
		// Replace all without regex
		block.innerHTML = block.innerHTML
			.split( newline )
			.join( '' );
		prevHighligth( block );
		if ( block.classList.contains( 'sw_show_line_numbers' ) ) {
			block.innerHTML = newline +
				block
					.innerHTML
					.replace( /\n/g, `\n${ newline }` );
		}
	};
} );

¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.

Ahora toca explicar la parte CSS, para ello usaremos CSS counters.

pre code {
	counter-reset: linenumber;
}

pre code .sw_new_line::before {
	content: counter(linenumber, decimal-leading-zero);
	counter-increment: linenumber;
	padding-right: 15px;
	font-size: 0.8em;
	opacity: 0.6;
}
|

Reglas para maquetar varios elementos con CSS

ByLuis

Un tutorial bastante interesante que nos responderá varias preguntas sobre maquetación de varios elementos. Nos ayudará a comprender cómo apilar capas, alinear elementos inline, propiedades float y collapse, hasta un total de 15 preguntas:

CSS Tutorials – Understanding Multiple Element Formatting Rules

Vía / Pixel Groovy