Propiedades CSS que probablemente no conocías

Ya otras veces hemos publicado entradas que tratan de enseñar algunas propiedades de esas herramientas de desarrollo que utilizamos a diario:

5 cosas que no sabías hacer con PHP
Tags HTML que posiblemente no conoces

Esta vez le toca el turno a las hojas de estilo, todas estas propiedades son de nivel 2, pero son compatibles con todos los navegadores de todas formas haz los tests necesarios para comprobar su compatibilidad antes de colgarlos en tu sitio.

1. clip

clip: rect(5px, 40px, 45px, 5px)

Con esta propiedad definiremos el área visible de un elemento y es posible aplicarlo a cualquier elemento.

2. visibility

visibility: (inherit | visible | hidden)

Especifica si el elemento es visible. El espacio del elemento es reservado en cualquier caso. Los dos posibles valores son: visible; hidden.
{ visibility: hidden }

3. text-shadow

text-shadow: color, x-coordinate, y-coordinate, blur radiustext-shadow: #000000 10px -5px 1px

Especifica el color y tamaño de la sombra de un texto. El formato es: text-shadow: color distancia-h-texto, distancia-v-texto. Hay problemas de compatibilidad con Mozilla.

4. content

content: “Tu navegador soporta content”

La propiedad content nos permite insertar marcadores y junto a los valores before y after podremos colocar un trozo de texto antes o despues de un elemento en concreto.

DIV.example:after {
content: Fin del ejemplo
}

5. quotes

q { quotes: ‘”‘ ‘”‘ }

La propiedad ‘quotes’ especifica pares de comillas para cada nivel de citas anidadas.
Se puede combinar con la propiedad anteriormente comentada “content”:

Q { quotes: ‘”‘ ‘”‘ “‘” “‘” }
Q:before { content: open-quote }
Q:after { content: close-quote }

6. page-break-before y page-break-after

page-break-before: (always|auto|empty string|left|right);
page-break-after: (always|auto|empty string|left|right);

Propiedad que nos permite definir los tipos de salto de línea de un determinado elemento.

7. orphans y widows

orphans: <integer>
widows: <integer>

Propiedad que determina el mínimo número de líneas de un párrafo que deben ser dejadas como mínimo al final o all principio de una página.

8. font-size-adjust

font-size-adjust: number

El valor de relación (tamaño de la fuente dividido por la altura de la x) esto significa que a mayor valor de relación es más probable que una fuente de pequeño tamaño resulte legible.

Esta propiedad permite a los autores especificar un valor de relación para un elemento que preserve la altura de la x de la fuente elegida en primera instancia en la fuente sustituta.

9. font-stretch

font-stretch: (normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit)

La propiedad ‘font-stretch’ selecciona un tipo normal, condensado o expandido de una familia de fuentes. Los valores de las palabras clave absolutas tienen el siguiente orden, del más estrecho al más ancho:

1. ultra-condensed
2. extra-condensed
3. condensed
4. semi-condensed
5. normal
6. semi-expanded
7. expanded
8. extra-expanded
9. ultra-expanded

10. font-variant

font-variant: (normal | small-caps)

En una fuente small-caps, los signos para la letras minúsculas son iguales a las mayúsculas, pero en un tamaño menor y con proporciones ligeramente diferentes. La propiedad font-variant solicita tales fuentes.

Más propiedades “raras” en inglés

Enlaces Relacionados

Generar passwords accesibles con Php
Codigo Fuente del generador de passwords en PHP
Ejemplo de ejecución del script
PHP y MySql una estrecha relación
5 cosas que no sabías hacer con PHP
Generar documentos OpenOffice con PHP
Nueva versión de Notepad++
Hola Mundo!
Identificar las consultas más lentas de MySql
Crea sencillas gráficas con MySql
Programar un script PHP para saber quién está en línea
Consejos para optimizar PHP
Editando en Opera páginas web en tiempo real