Daniel Mota / IceBeat

Mi vida en formato CSS3

Estás en la bitácora de IceBeat, una página sobre diseño y desarrollo web.

display:none no intrusivo

Hay varias formas de ocultar información, cuando la cantidad es grande se suelen utilizar métodos como los acordeones o las pestañas, que ocultan las capas que no se quieren ver.

Normalmente utilizamos el evento onload para ocultar las capas, dejando un efecto visual de ahora te veo y ahora no te veo.

Para evitar este problema hay varias soluciones, aquí os dejo unas cuantas.

Escribir con document.write un style para ocultar una clase.

   document.writeln('<style type="text/css">.hide { display:none } </style>');

Añadir detrás de las capas el javascript necesario para ocultarlas

   <script type="text/javascript" charset="utf-8">
   $$('.hide').setStyle('display','none');
   </script>

Utilizar el evento domready de algunos frameworks que se dispara una vez cargado el DOM y no la página entera.

    window.addEvent('domready', function() {
$$('.hide').setStyle('display','none');
    });

Hay que decir que si el javascript no esta activado las capas no se ocultaran y estas podrán ser vistas sin ningún problema.


Evitar el cache de los css y js

Muchas veces nos ha pasado que hacemos cambios en las hojas de estilos pero no se ven reflejados o se ven a medias y te hacen una especie de mezcla de lo antiguo y lo nuevo. Para evitarlo hay una forma muy sencilla y es el poner la fecha de modificación del archivo como variable, con esto consigues que el navegador fuerce el cache solo cuando ha sido modificado.

function version($file) {
    return $file.'?'.filemtime($file);
}

<link href="<?php echo version('css.css'); ?>" rel="stylesheet" type="text/css" />

Comentarios en los CSS

Hace tiempo con Andrés nos asalto la duda de cual era la mejor implementación para escribir código CSS. Desde su punto de vista el opto por algo muy elaborado como en otro lenguajes de programación pero creo que no todos los que escriben CSS son programadores.

Todos a los que les preguntaba me decían lo mismo, no tengo tiempo para escribir un comentario y menos para mi. Tenemos mala fama escribiendo comentarios CSS porque no pensamos que tarde o temprano tendremos que retocar la hoja de estilos.

Desde el punto de vista de un diseñador/maquetador lo más importante es la ubicación, tanto en layout como en el sistema de plantillas.

Partiendo de esto podríamos considerar necesario:

  • Nombre de la sección
  • Ubicación en el diseño
  • Ubicación en las vistas (si usamos un framework)

Un ejemplo de uso seria:

/*
    SIDEBAR, menú de información principal
    [top right] base/sidebar.php
*/

Hay que pensar desde el punto de vista de que algún día retomaremos el CSS, con este pequeño comentario ubicaremos la plantilla en el diseño y en el framework facilitando la edición a otros maquetadores.


Evitar el halo azul en safari

En safari cuando tenemos el foco en los inputs o textareas nos encontramos con un halo azul alrededor del borde, esto viene muy bien para saber donde te encuentras pero en el caso que usemos imágenes de fondo y los input no tengan bordes queda un poco feo. Para ello se utiliza la propiedad outline que es la misma que usamos para quitar el borde de los enlaces.

input, textarea  {
    outline:none;
}

Con esto evitamos ese halo azul.


Nomenclatura en CSS

En el comentario de Nordic acerca de las propiedades CSS comenta sobre la nomenclatura de ID y Class.

Me ha picado la curiosidad para saber que nomenclatura es la idónea para escribir CSS.

Existen 3 tipos:

  • Guión medio: #mi-contenedor
  • Guión bajo: #mi_contenedor
  • CamelCase: #miContenedor

Normalmente para los lenguajes de programación se utilizan los dos últimos, debido a que el guión medio no puede ir en las variables.

En PHP por ejemplo se suele usar el guión bajo para los nombres de las funciones, en Ruby se utiliza el ultimo.

La verdad es que no entiendo cual puede ser el correcto.

Yo suelo utilizar el primero porque las propiedades CSS se escribe con guión medio (background-color, font-size).

Aunque también es cierto que para diferenciar las propiedades de los nombres de las clases se suelen escribir de diferente forma.

¿Que nomenclatura es la más acertada?

Página 1 de 5 · Mostrar 5 más