|

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

|

Laboratorio: indicativo de idioma y target en los enlaces mediante CSS

ByLuis

En muchas páginas he visto como se indica que un enlace va a abrirse en una ventana nueva con un icono que suele ser una flecha. También se suele indicar que el enlace es a una página en otro idioma mostrando la bandera del país o con un texto.

La verdad es que si tenemos que incluir la imagen en cada enlace que creamos, nos podemos volver locos, a parte de aburrirnos bastante. Una solución sencilla es mediante estilos, para ello usaremos los selectores de atributos y los pseudo-elementos.

Contaremos con dos imágenes: una para indicar un enlace externo (abrir.gif) y otra para indicar el país (inglés en este caso gb.png). También tendremos en cuenta que es posible que el enlace se abra en otra ventana y que sea en inglés.

Para poder realizarlo mediante estilos necesitamos el pseudo-elemento :after, el cual nos permite incluir contenido después del propio contenido del elemento, usando para ello también la propiedad content. También será necesario asignar el estilo de los elementos según sus atributos usando para ello selectores de atributos. Usaremos el atributo hreflang para indicar el idioma y si contiene el atributo target supondremos que es un enlace externo.

a[target]:after {
padding-left: 4px;
content: url(abrir.gif);
}
a[hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png);
}
a[target][hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png) "  " url(abrir.gif);
}

Funciona en Firefox y en Opera, en Safari supongo que también. En nuestro amigo IE no funciona, al menos en la versión 6, si alguien me puede confirmar en Safari y en IE7, se lo agradeceré en el alma.

Ejemplo

| |

Selecciona tu hoja de estilos mediante PHP

ByLuis

En 456 Berea Street nos muestran una forma muy interesante para poder mostrar tu página con diferentes hojas de estilo. Tiene el inconveniente de que solo admite dos estilos entre los que elegir.

Funciona aunque el javascript esté desactivado, pero no cuando estan desactivadas las cookies, pero no daría error, tan solo visitaríamos siempre la misma página.

El funcionamiento es sencillo, disponemos de dos directorios, cada cual con las hojas de estilo que nos interesa. Habrá un enlace a una página que cuando accedemos a ella nos cambiará de directorio, guardará el valor en una cookie y nos devolverá a la página a la página desde la que hemos hecho la llamada o a la raíz si no existía esa página. Y luego en cada página deberemos obtener el valor del directorio de las cookies y usarlo para recuperar la hoja de estilo correspondiente.

El script que se encarga de cambiar de directorio es el siguiente:

<?php
$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "zoom")) ? "main" : "zoom";
setcookie("layout", $layout, time()+31536000, '/');
$ref = (isset($_SERVER['HTTP_REFERER'])) ? $_SERVER['HTTP_REFERER'] : "http://{$_SERVER['SERVER_NAME']}/";
header("Location: $ref");
?>

Y luego en cada página tendremos que incluir lo siguiente:

Para recuperar el directorio.

$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "zoom")) ? "zoom" : "main";

Para seleccionar el estilo correcto.

<style type="text/css" media="screen,projection">
@import '/css/<?php echo $layout; ?>.css';
</style>

Build your own PHP style sheet switcher

|

21 cuestiones sobre block, inline y floating en HTML

ByLuis

Una colección con 21 preguntas/respuestas sobre block, inline y floating en HTML. Para aquellos que se inicien en el mundo del HTML y tengan dudas sobre los diferentes tipos de elementos (bloques e inline), sobre los márgenes, el padding, los bordes…
Un FAQ muy sencillo, y muy bien explicado que nos puede resolver muchas dudas.
CSS Tutorials – HTML Formatting Model: Block, Inline and Floating Elements
Vía / Pixel Groovy

CSS dinámicos

ByLuis

Un interesante artículo que nos explica cómo realizar hojas de estilo dinámicas, aunque la verdad yo no le veo mucho uso, incluso el ejemplo que pone no me vale demasiado. Supongo que se podría evitar el uso dinámico de CSS diseñando mejor las CSS, pero claro, tambien puede que me equivoque. De todas formas, el artículo me ha gustado bastante, porque a parte de explicarte cómo hacerlo, te muestra que lo que siempre pensamos como estático (CSS, Javascript) puede ser un script PHP y no necesariamente un texto plano. A parte te dice con qué problemas nos podemos encontrar, en este caso el tiempo de ejecución del script frente al tiempo de carga de un fichero plano, algo que creo que a veces se suele olvidar.

Usar una hoja de estilos dinámica puede ser útil en el caso de que nuestra aplicación deba mostrar distintos estilos dependiendo de la página desde la que se le pida. Como ejemplo pone una aplicación que use módulos (ventanas tipo gadgets) y que dependiendo del módulo tenga que mostrar un estilo u otro.

Lo único diferente a la hora de crear el script PHP que nos devuelve el script es que se debe devolver el tipo de contenido del archivo (Content-Type), ya que el resto no se debería diferenciar de mostrar un HTML:

header('Content-Type: text/css');
if (condicion) {
echo '#estilo { display: inline; }';
} else {
echo '#estilo { display: inline; }';
}

El problema con el que nos encontramos es que cada vez que se visita la CSS se tiene que ejecutar y no se guarda en caché. Para que cachee el script, durante un tiempo prudencial, debemos indicarlo en la cabecera:

header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');

Ahora el único problema que nos queda es no tener que procesar siempre los mismos estilos, para ello nada mejor que usar @import, así seleccionamos unos estilos u otros, pero no los generamos:

header('Content-Type: text/css');
header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');
if (condicion) {
echo '@import "estilo1.css";';
} else {
echo '@import "estilo2.css";';
}

Static and dynamic CSS combined

71 formas de hacer un menú mediante CSS (y contando)

ByLuis

Si tienes alguna duda de cómo realizar el menú de tu aplicación web, aquí tienes una lista bastante extensa de artículos y tutoriales de listas, menús, navegación y pestañas. Los hay mejores, peores, más sencillos, os recomiendo que os deis una pasada por ellos y veáis cual se adapta mejor a vuestras necesidades. Eso sí, comprobaría que funcionen en todos los navegadores.
Top 71 CSS Menus Navigation Tabs
Via / Digg

|

Recursos CSS para principiantes

ByLuis

No todo el mundo conoce las hojas de estilo, incluso gente que trabaja a diario con ellas, suele pasarles que solo saben cambiar lo que necesitan y poco más. Para aquellos que se encuentran en esas circustancias o simplemente son unos vagos, aquí tres recursos para ayudarnos a crear tablas, definir el formato del texto y seleccionar colores.

  • La primera de las utilidades nos permite darle estilos a una tabla, pudiendo jugar con los colores, grosores y demás de las tablas, filas y celdas.
  • La siguiente utilidad nos ayuda con el texto: la fuente, negrita, itálica, tamaño, separación de letras, alineamiento, …
  • Y por último una lista de colores y su correspondencia RGB.

También es curiosa la utilidad para crearnos nuestro favicon, aunque supongo que la gente que llega a este nivel, quizás si sepa usar un editor gráfico.

Web development

Vía / dzone

| |

Incluir CSS a tu RSS

ByLuis

Algo sencillo y que queda muy bien a la hora de mostrar nuestras hojas de estilo, claro, que si usamos una aplicación que las muestra según sus propios estilos, no conseguimos nada.

Se trata de añadir una línea indicando el xml-stylesheet en las RSS:

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://dominio.com/rss.css" ?>
...

Y luego definir los estilos, en el ejemplo del autor, a parte de formatear la salida, oculta aquellas partes del RSS que no quiere que aparezcan:

rss {
display: block;
font-family: verdana, arial;
}
title {
display: block;
margin: 5px;
padding: 2px;
color: gray;
border-bottom: 1px solid silver;
}
link {
display: block;
font-size: small;
padding-left: 10px;
}
item {
display: block;
padding: 2px 30px 2px 30px;
}
docs {
display: block;
background-color: #ffffe6;
margin: 20px;
text-align: center;
padding: 5px;
color: #7f7f7f;
border: 1px solid silver;
}
/* Elementos ocultos */
language, lastBuildDate, ttl, guid, category, description, pubDate {
display: none;
}

Ejemplo

Adding a CSS StyleSheet to your RSS Feed

Vía / dzone

|

Crear nuestros propios checkboxes y radio buttons mediante CSS

ByLuis

A veces dependemos del navegador en aspectos de diseño, un caso bastante común es con los checkboxes y radio buttons, no son como nosotros queremos y difieren según el navegador que usemos.

fuglychecks.pngEsto se puede solucionar mediante CSS, para ello deberemos crearnos una imagen que contenga todos los estados del botón (seleccionado, no seleccionado, con foco y sin foco). Como se puede apreciar, la imagen contiene todos los posibles estados uno debajo del otro, ya que mediante estilos, usaremos una porción de la imagen para mostrar el estado correspondiente.

Para poder realizar este efecto es necesario usar la etiqueta label, la cual hará referenia al checkbox o al radio button, los cuales son necesarios ocultar para poder sustituirlos por la imagen (que estará ligada al elemento label).

Tenemos estos elementos HTML:

<input type="checkbox" id="opc1"/><label for="opc1">Opcion 1</label>

Los estilos iniciales para el input y para el label son los siguientes:

input[type="checkbox"] {
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
}
label {
padding-left: 20px;
height: 16px;
}

Y por último, los estilos para los distintos estados del input son los siguientes:

input[type="checkbox"] + label{
background: url("imagen.png") 0 0 no-repeat;
}
input[type="checkbox"]:focus + label{
background-position: 0 -16px;
}
input[type="checkbox"]:checked + label{
background-position: 0 -32px;
}
input[type="checkbox"]:checked:focus + label{
background-position: 0 -48px;
}

Styling Checkbox and Radio Graphics With Only CSS

Vía / Digg