CATEGORÍA : Maquetación XHTML

Personaliza select con CSS3

Hasta hace poco tiempo personalizar un select era bastante rollazo, y muchas veces imposible sin usar javascript, hoy en día han surgido alternativas a través de CSS3 que nos permiten dar la apariencia que queramos antes de clicar en la lista seleccionable desactivando las propiedades comunes de select (appearance) y añadiendo las nuestras tales como una imagen de fondo, en el caso más fácil, o a través de CSS3 darle apariencia nueva con background, shadow o transform , os pongo un ejemplo sencillo:

select {
-webkit-appearance: none;
-moz-appearance:none;
appearance:none;
background: #d9d9d9 url(images/bg-select.jpg) no-repeat right;
border: none;
padding: 10px;
margin: 0;
width: 100%;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius: 0;
}

Podéis encontrar más info sobre la personalización de selects aquí:
bavotasan leaverou

Personaliza una web en función del dispositivo con media queries (breakpoints)

Os dejo un listado de los comúnmente llamados breakpoints en media queries para darle distintas propiedades al CSS según la resolución de pantalla. No son otra cosa que reglas que afectan a la visualización de la página según la resolución y se pueden combinar como queramos, siempre teniendo en cuenta que al ser en cascada los de abajo sustituirán los estilos de arriba.

Los ejemplos siguientes hacen referencia al ancho del navegador pero también se puede utilizar la propiedad min-device-height o max-device-height. Las medidas en píxeles se corresponden con las más utilizadas pero pueden modificarse según nos interese e incluso usar porcentajes o em. Haced más pequeña la ventana de vuestro navegador mientras consultáis esta web para comprobar el efecto.

/* Smartphones (vertical y horizontal) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}

/* Smartphones (horizontal) ----------- */
@media only screen
and (min-width : 321px) {
}

/* Smartphones (vertical) ----------- */
@media only screen
and (max-width : 320px) {
}

/* iPad2 (vertical y horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}

/* iPad2 (horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}

/* iPad2 (vertical) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}

/* Ipad3 (horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
}

/* Ipad3 (vertical) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
}

/* Grandes resoluciones ----------- */
@media only screen
and (min-width : 1824px) {
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

/* iPhone 5 ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
}

La información está extraída de:

ResponsiveDesign.is CSS Tricks

Podéis encontrar más información sobre media queries en:

W3.org

Cómo hacer excepciones en CSS para IE u otros navegadores

Normalmente  cuando tenemos una web terminada llega el momento fatídico de comprobarla en todos los navegadores posibles, solemos tenerle miedo a los móviles pero el tema del responsive es juego de niños comparado con la pesadilla de hacer tu web retrocompatible con navegadores más antiguos.

Una de las formas es utilizar los condicionales dentro del head para la etiqueta <html>, como por ejemplo:

<!--[if lt IE 7 ]> <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ES" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ES" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ES" class="ie8"> <![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="es_ES">

La sintaxis para esclarecer qué condicional utilizar según el navegador (if IE 7, por ejemplo) la podéis encontrar en librosweb.

De esta manera, en vuestra hoja de estilos podéis crear excepciones particulares ya que la etiqueta <html> tendrá una clase única según el navegador, en el CSS la excepción sería algo tal que así:

html.ie6  .contenedor {background:red;}
html.ie7 .contenedor {background:green;}

Aunque la mejor manera, si tenemos que modificar muchos estilos, es utilizar esos condicionales para tener distintos CSS según el navegador, algo así:

<link href="css/estilos.css" rel="stylesheet" media="screen" type="text/css" />

<!--[if IE 8 ]>
<link rel="stylesheet" href="css/estilos-ie8.css" type="text/css" media="screen" />
<![endif]-->

Al estar debajo de los estilos generales sobreescribirán (en condiciones normales, es decir, si no hay !important o estilos en línea) los estilos definidos en el CSS previo.

Tormus, el comprobador de DIVS

Hay veces que tenemos una estructura de divs dentro de divs que están dentro de unos divs incluidos en un tab dentro de otro tab para trabajar con pestañas y toggles, si no comentamos bien o trabajamos con el código de otro desarrollador encontrar el fallo en una maqueta puede ser para volverse loco, para ello tenemos esta herramienta online que te permite ver dónde cierra exactamente cada div y así encontrar dónde está cerrando mal el html.

Herramienta para comprobar DIVS