Contacta (+34) 622 045 404

Estudio de desarrollo front-end, maquetación web, diseño y programación WordPress freelance.

Fundado por Alberto Fortes, diseñador y maquetador web HTML5 responsive design, front-end developer JavaScript y programador WordPress freelance a medida desde 2006.

Especializados en outsourcing con importantes clientes finales.

Comandos CSS exclusivos de Mozilla

12 Octubre, 2006

mozilla

Lo que sigue son comandos creados por Mozilla.org para ser usados exclusivamente en su interfaz (ya sabeis: mozilla, firefox, flock…). Se crearon siguiendo las directrices del w3c, y sólo funcionan con navegadores basados en mozilla (por eso empiezan con -moz), así que no es muy recomendable usarlos a no ser que sea para solventar algún bug u otro “apaño” específico a estos (o para ponerlos en tu página personal con una chapita de Odio ie, aunque el odio no es bueno, provoca acidez ;-). Muchos de ellos también equivalen a propiedades de CSS3, así que a ir poniéndonos los dientes largos.
He recopilado, compilado y traducido algo de información de sitios como xulplanet, eightlines, el mozilla developer center y un poco de lo que he visto por ahí. Espero que a alguien le sirva esta “mijita” de información con Ñ.

-moz-appearance
Fuerza al navegador para que coja la apariencia (barras de scroll, navigation, etc) del sistema operativo que corra en tu máquina.
Valores posibles: none, button, checkbox-container, checkbox, dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper-horizontal…

Ejemplo: .ej{-moz-appearance: window;}

-moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors y -moz-border-left-colors.
Define los colores del border a razón de un pixel de ancho por color, esto es que si quereis una anchura de 3 pixels con 3 colores diferentes debeis poner los tres sabiendo que el primero ocupa el borde exterior.
Valores: y transparent.

ejemplo: .ej{-moz-border-bottom-colors: #F00 #F90 #c60 #FFF;}

-moz-border-radius
Redondea las esquinas de los bordes. Equivale a la propiedad border-radius de CSS3
Hay que darle una medida de valor (px, em…) y cuanto mayor sea este más redondeadas serán las esquinas. Ver ejemplo.
Valores: double, y solid (dotted y dashed se comportan como solid).

También se pueden delimitar a algunos ángulos con las propiedades más restrictivas: -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft y -moz-border-radius -topright.

Ejemplo: .ej{-moz-border-radius: 10px 200px 200px 10px; /*esto dibuja una D*/}

Actualización: parece ser que no da bueno resultados al combinarla con -moz-border-colors. Ver análisis.

-moz-box-align
Equivalente al atributo align. Establece el alineamiento de los elementos hijos dentro de la caja cuando el tamaño de esta es mayor que el de todos sus hijos.
Para las cajas con orientación horizontal, establece el alineamiento vertical de sus hijos y para cajas de orientación vertical establece el alineaminto horizontal de los hijos.
Valores:

  • stretch: (por defecto) estira los elemntos hijo hasta alcanzar la altura o anchura de la caja padre. Con un diseño líquido, los elementos sometidos a stretch van estirándose hasta alcanzar la dimensión final de la caja
  • start: situa a los elementos en el extremo superior izquierda de la caja.
  • center: alinea a los elementos hijos en el centro de la caja
  • end: Lo opuesto al valor start, esto es, situa el elmento en el extremo inferior derecha
  • baseline: se aplica únicamente a las cajas horizontales. Alinea las líneas bases del elemnto y del padre

Ejemplo: .ej{-moz-box-align: center;}

-moz-box-direction
Establece la dirección een la que fluyen los elemntos de la caja.
[En CSS 2.1 está la etiqueta direction, que vendría a ser la equivalente, pero ojo que sus valores difieren]
Valores:

  • normal: Sigue el flujo normal de los textos orizontales: de arriba a abajo y de izquierda a derecha.
  • reverse: Invierte el flujo por defecto (normal), de manera que los elemntos van de derecha a izquierda y de abajo a arriba

Ejemplo: .ej{-moz-box-direction: reverse;}

-moz-box-flex
Estableceuna jerarquía de flexibilidad en los elementos hijos de la caja. Por defecto todos son igual de flexibles, pero si necesitamos que unos lo sean más que otros, podemos usar esta propiedad, de manera que los elemntos con mayor valor numérico crecerán más que los que tienen menos.
Valores: 0 no crece, >0 crece

Ejemplo: .ej{-moz-box-flex: 3;}

-moz-box-ordinal-group
Indica la pertenecia de los elementos a una jerarquía de visualización en pantalla, de manera que llos elementos con un número menor se mostrarán en pantalla antes que los de un número mayor.

Ejemplo: .ej{-moz-box-ordinal-group: 1;}

-moz-box-orient
Determina el posicionamiento vertical u horizontal de los hijos dentro de una caja.
Valores:

  • horizontal: (por defecto) Los hijos se muestran horizontalmente en una fila
  • vertical: los hijos se muestran verticalmente en una columna

Ejemplo: .ej{-moz-box-orient: vertical;}

-moz-box-pack
Establece el posicionamiento de los hijos (sólo) cuando la dimensión de la caja es mayor que la de la suma de sus hijos.
Valores:

  • start: (por defecto) sitúa los elementos en el extremo superior y/o izquierda de la caja
  • center: alinea los elemntos en el centro de la caja
  • end: sitúa los elementos en el extremo inferior y/o derecha de la caja

Ejemplo: .ej{-moz-box-pack: end;}

-moz-background-clip
Equivale a background-clip de CSS3.
Determina si la imagen de fondo se extiende dentro del border o no.
Valores:

  • border: (por defecto) la imagen se extiende fuera del área del border (se puede controlar mediante z-index)
  • padding: la imagen se extiende fuera del padding

Ejemplo: .ej{-moz-background-clip: padding;/*la imagen no lse extenderá debajo del border*/}

-moz-background-inline-policy
Para los background-image de elementos inline. Determina como debe comportarse dicha imagen de fondo cuando el elemento (inline) ocupa varias líneas. Aquí tienes un enlace con pruebas de las distintas propiedades.
Valores:

  • continuous: (por defecto)
  • bounding-box
  • each-box

Como es un poco lioso mejor lo ves con ejemplos.
Ejemplo: .ej {-moz-background-inline-policy: bounding-box;}

-moz-background-origin
Equivale a la propiedad background-origin de CSS3. Determina en base a quien se fija la propiedad background-position. No se palica cuando background-position es fixed.
Valores:

  • content: posición relativa al propio padre o contenedor
  • border: posición relativa al border, por lo que la imagen puede ir edtrás de este.
  • padding: (por defecto)posición relativa al padding del padre

Así: -moz-background-origin: border 0 0; sería respecto al borde superior izquierdo del padding.

-moz-box-sizing
S usa para alterar el modelo de caja de mozilla, de forma que podemos emular a los comportamientos de otros navegadores.
valores:

  • content-box: (por defecto) width y height especifica el tamaño del elemento, dejando fuera de estas dimensiones al padding, border y margin. Es el compartamiento estándar de las especificaiones del w3c.
  • padding-box: width y height especifica el tamaño del elemento, incluyendo el padding, no el border ni el margin
  • border-box: width y height especifica el tamaño del elemento, incluyendo el padding y el border, pero no el margen. este es el modelo de iexplorer <7.

Ejemplo: .ej{-moz-box-sizing: border-box; /*y así vemos como se vería una caja con las ediciones de explorer anteriores a 7*/}

-moz-outline
Nos sirve para controlar la línea que rodea a los elementos, fuera del border, cuando los seleccionamos con mozilla. Podemos jugar con ella (colorearla, etc) o simplemente anularla (y aque se te puede desmontar una página por culpa del pixel extra de esta dichosa línea (gracias a tocomocho).
Equivale a la etiqueta outline de CSS 2.1. Pero utiliza -moz-outline si quieres atacar únicamente a mozilla y CIA.
Valores:

  • -moz-outline-color: Controla el color de la línea.
    Valores: e invert (invierte el color del background para asegurarse de que se verá
  • -moz-outline-style: Para controlar el estilo de la línea. Valores:
    • None: anula la línea. Equivale a -moz-outline-width:0;
    • dotted.
    • dashed
    • solid
    • double
    • groove
    • ridge
    • inset
    • outset
  • -moz-outline-width: Define la anchura de la línea.
    Valores: thin | medium (por defecto)| thick | | inherit
    • Y esto es todo por ahora.
      Si veis fallos, que los habrá, comentarlos y lo arreglaré