|

CSS: Mnemotecnia y shorthand

ByLuis

Seguimos organizando las hojas de estilo.
La [mnemotecnia][] (o nemotecnia) es un proceso de asociación mental destinado a facilitar el recuerdo de algo. Ese algo puede ser, por ejemplo, el orden de declaración de las reglas de presentación para los enlaces (link no visitado, visitado, etc.). Para recodar el orden nos servirán los términos en inglés (mayúsculas especialmente) LoVe HAte.
### LoVe HAte
Es conveniente recordar que el orden correcto de las declaraciones es este y no otro:
a:link { /* Love hate */
}
a:visited { /* loVe hate */
}
a:hover { /* love Hate */
}
a:active { /* love hAte */
}
### TRouBLe
Algunas propiedades CSS se pueden definir en forma taquigráfica (shorthand).
Por ejemplo, para definir los márgenes de un elemento podemos usar `margin-top: 0; margin-right: 1em; margin-bottom: 1em; margin-left: 1em` o, para ahorrar teclas y bytes, usar la versión corta:
#unSelector {
margin: 0 1em 1em 1em;
}
El orden de los valores es el siguiente: arriba, derecha, abajo, izquierda. Esto es, empezamos a asignar valores en sentido de las agujas del reloj (de las doce de la mañana y acabamos a las nueve de la noche). Mnemotécnicamente sería, TRouBLe (top, right, bottom, left).
Estas versiones abreviadas pueden llevar, atención, uno, dos, tres o cuatro valores, ahí es _ná_. Veamos:
#unSelector {
margin: 0;
/* margen 0 por los cuatro costados */
}
#unSelector {
margin: 0 1em;
/* márgenes superior e inferior a cero,
márgenes izquierdo y derecho de 1em */
}
#unSelector {
margin: 0 1em 2em;
/* huy, este tiene truco: margen superior, cero;
margen derecho, 1em; margen inferior, 2em.
¿Y el izquierdo? en caso de tener
tres valores, se toma el segundo, esto es el
valor es el mismo para los dos laterales */
}
#unSelector {
margin: 0 1em 2em 1em;
/* TRouBLe, como ya hemos comentado */
}
Claro está que lo dicho para los márgenes también es aplicable a `padding`, `border-width`, `border-style`, `border-color` y seguramente a alguna propiedad más que ahora mismo (¡café!) no está en mi cabeza.
Más sobre [Memoria y reglas nemotécnicas][m].
[mnemotecnia]: http://buscon.rae.es/draeI/SrvltGUIBusUsual?LEMA=mnemotecnia&TIPO_HTML=2&FORMATO=ampliado&sourceid=mozilla-search “Definición en el diccionario de la Real Academia Española”
[m]: http://www.weblioteca.com.ar/textos/mente/memoriaynemotecnia.htm

Similar Posts

|

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;
}
|

Paso a paso de un diseño web

ByLuis

La gente de SitePoint han publicado un gran artículo en el que explican cómo hacer un diseño (layout) mediante XHTML y CSS.
Hace tiempo alguien nos preguntaba por un comentario en un artículo cómo podía pasar de su forma de diseñar por tablas a diseñar sin tablas. Creo que con este artículo podrá aprender la transición de forma muy sencilla y rápida.
Empieza explicándonos los pasos que hay que llevar a cabo para la fase inicial de nuestro diseño. Dibujar los contenidos (cabecera, panel, contenido, pie de página) y cómo crear la estructura de capas y sus estilos.
Después nos indica como añadir fondos y contenidos a las distintas partes de nuestra página, como por ejemplo las imágenes con float. No solo se centra en lo estrictamente desarrollo, sino también un poco en diseño. Añade imágenes de fondo al pie y a la cabecera que realmente quedan bastante bien.
Y por último nos indica como dividir el contenido en rejillas para darle un aspecto más uniforme.
Breaking Out of the Box

CSS para impresión sin cambiar totalmente el aspecto de la web

ByLuis

Muchas de las técnicas para hacer hojas de estilo que permitan imprimir correctamente nuestra web producen una salida que no se parece en nada a lo que se muestra en pantalla. Esto suele confundir al usuario y le produce la impresión de que ha imprimido una pagina distinta.
En ErraticWidsom nos enseñan a hacer hojas de estilo para impresión mantiendo la línea de diseño que se ve en pantalla.
Vía / Digg

| | |

CSSVista: editor CSS para Firefox e IE6

ByLuis

CSSVista es una aplicación desarrollada por la gente de SiteVista que nos permite editar CSS y ver los resultados que se producen directamente en IE6 y Firefox.
cssvista.png
Se trata de una aplicación gratuita, todavía en fase de desarrollo que nos puede ser de gran utilidad cuando maquetamos un diseño y queremos que se vea correctamente en ambos navegadores. Aunque yo prefiero usar un editor normal y refrescar el contenido en el navegador que esté probando en ese momento.
CSSVista
Vía / Lifehacker

|

Cómo extraer colores fuera del Photoshop

ByLuis

eyedropper.jpg ¿Cuántos minutos trabajas al día con Photoshop y te has visto en la situación de querer saber un color de otra web y tener que usar el Colorzilla de Firefox o directamente imprimir pantalla, pegarla en Photoshop y usar el eyedropper.?
Pues Photoshop, en cualquier versión, ya trae la opción y es el mismo Eyedropper (el icono del cuentagotas). Tan solo hay que clickarlo y dejarlo pulsado arrastrando el cursor hasta donde queremos obtener el color. Cuando lo tengamos, soltamos el click y aparecerá el color como color de primer plano.
Vía / Genbeta