Posts Tagged ‘Safari’

Maquetando sin tablas, pero como con tablas: display inline block

Monday, October 27th, 2008

Aviso: lo que se explica en el siguiente artículo forma parte de lo que denomino “la maquetación web del futuro“, es decir, cosas que podremos hacer dentro de un tiempo pero que, dado el uso que aún tienen algunos navegadores antigüos, hoy por hoy no es recomedandable utilizar

Actualización!: Anieto2k publica un hack que permitiría utilizar esta técnica en todos los navegadores. 

Esta semana he leído dos artículos (artículo 1, artículo 2) donde unidos a la palabra maquetación se usan términos como “Table”, “Cell” o “Row”. ¿Qué pasa? ¿Se ha vuelto a poner de moda la maquetación basada en tablas? Evidentemente no, esto no tiene vuelta atrás aunque todavía haya demasiados sitios webs table based.

La idea central de estos artículos es la posibilidad de poder aplicar a elementos que no son tablas propiedades de éstas. Esto se hace mediante los valores “table”, “table-cell” y “table-row” de la propiedad display. Se vuelve a hablar de esto ahora que Internet Explorer 8 admite y funciona con estos valores, aunque no lo hace de forma totalmente correcta (hablamos de la beta 2).

En la práctica lo que esto supone es que podemos hacer un elemento HMTL como, por ejemplo, un DIV, tenga el comportamiento de una tabla. Es decir, sin hacer atentados semánticos podemos aprovechar las propiedades de la maquetación con tablas. Un claro caso de uso es poder hacer algo que trae de cabeza a cualquier maquetador CSS: que un conjunto de elementos flotantes tengan una altura común. Dos imágenes valen más que 2.000 palabras

Caso 1: (ver html)

Caso 2: (ver html no en Internet Explorer < 8)

Para el segundo caso lo que hemos hecho es usar en los siguientes valores de la propiedad display:

  • display: table->le dice al elemento que se comporte como una tabla.
  • display: table-row-> le dice al elemento que se comporte como una fila de una tabla
  • display: table-cell->  le dice al elemento que se comporte como una celda de una tabla

Ojo, por si no has leido atentamente: esta técnica se podrá usar cuando la gente

Más sobre este tema:

Rediseño del inspector web de Webkit: ¿Alternativa a Firebug?

Tuesday, October 7th, 2008

Desde la aparición de Firebug los inspectores web se han convertido una de las herramientas fundamentales de trabajo de cualquier desarrollador web. Prácticamente todos los desarrolladores de navegadores incorporan un inspector.

Hasta ahora el Firebug no tenía competencia en la práctica y desde luego esta no provenía del que incorpora el IE8. Pero con el rediseño del inspector web de Webkit creo que esto puede empezar a terminarse. Una primera y rápida inspección revela un interfaz cómodo de utilizar, muy rápido y con funcionalidades extra como el acceso a bases de datos

Entonces… ¿Ya puedo pasar de Firebug?: bueno, no diría tanto. Creo que hay una cosa que no se puede hacer en Webkit: añadir propiedades CSS directamente en el inspector correspondiente.  Además todavía tiene algunos fallos (¡Permite inspeccionarse a sí mismo… y empieza anidar ventanas!) que hacen que todavía no sea una alternativa 100%. Pero le falta muy poco.

CSS Hack para Chrome y Safari

Friday, September 5th, 2008

[Vía Pinceladas Web]

Era inevitable y posiblemente será necesaria la aparición de un filtro o hack css que nos permita aplicar una determinada regla CSS que solamente entienda el nuevo navegador de Google, Chrome. El que presentamos a continuación también funciona en Safari, dado que ambos usan el motor de Webkit.

El hack se basa en el selector CSS "E:nth-of-type(n) " que selecciona el elemento (E) situado en la posición (n) de nuestro documento. Por ejemplo, div:nth-of-type(3) aplicaría la regla que definamos al tercer div que aparezca en nuestro documento. Con esta explicación espero que entendáis porqué funciona el siguiente filtro:

CSS:
  1. body:nth-of-type(1) div.caja {
  2.        background: blue;
  3. }

En este caso los div con un class "caja" del primer elemento "body" de nuestro documento se verán con fondo azul únicamente en Chrome y Safari.

Si queréis el codigo completo para probar...

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Chrome CSS Hack Demo</title>
  5. <style type="text/css">
  6. div.caja {
  7.        border: 1px solid red;
  8.         width: 200px;
  9.         height: 200px;
  10. }
  11. body:nth-of-type(1) div.caja {
  12.     background: blue;
  13. }
  14. </style>
  15. </head>
  16.     <div class="caja">
  17.    
  18.     </div>
  19. </body>
  20. </html>