No debe ser muy habitual que se de el caso de que tengamos que utilizar ‘hacks‘ para Safari o Opera, pero a veces, se puede dar el caso.
Si es así, hay una forma muy sencilla de incluir código css especifico para estos navegadores:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Reglas de Safari 3.0 y Opera 9 */
}Ale. Happy Hacking!
Hoy dejo un pequeño repaso de los selectores, pseudo-class y pseudo-elements para CSS2 y CSS3. Lo hago porque ultimamente he utilizado los clasicos :last-child y :first-child, pero buscando he encontrado otros también muy interesantes, sobre todo el :after y el :before.
CSS2:
* Selector niversal, son todos los elementos del CSS
E E representa cualquier elemento del tipo E (span, p, …)
E F Todos los elementos F que sean descendentes de E
E > F Todos los elementos F que sean hijos de E
E:first-child De esta forma podemos seleccionar el primer elemento de tipo E
E:last-child De esta forma podemos seleccionar el ultimo elemento de tipo E
E:link , E:visited Selecciona los elementos E que sean un enlaces y no hayan sido visitados (:link) y los si visitandos (:visited)
E:active , E:hover , E:focus Selecciona los elementos de tipo E , en sus correspondientes acciones.
E:lang(c) Cogemos los elementos del tipo E que estén en el idioma (humano) especificado en (c).
E + F Se trata de cualquier elemento F inmediatamente despues del elemento del tipo E
E[foo] Elementos del tipo E con el atributo foo
E[foo=»ejemplo»] Elementos del tipo E con el atributo foo igual a “ejemplo”
E[foo~=»ejemplo»] Elementos del tipo E con el atributo foo contenga “ejemplo”. Se pueden añadir varias palabras separadas por espacios. ( ~ =ALT + 0126)
E[lang|=»es»] Similar al anterior, pero se referirá a todos los elemento E tal que su atributo lang comienze por “es”. Por ejemplo: “es_ES”, “es_CA”,…
E[foo$=»ejemplo»] Elementos del tipo E en el que el atributo foo termine con “ejemplo”.
DIV.ejemplo Todos los elementos DIV que sean de la clase ejemplo
E#miID El elemento E en el que su ID sea igual miID
:first-line Se refiere a la primera línea del elemento, normalmente usado para para elemetos de texto.
:first-letter La primera letra del elemento, tambien suele usarse para elementos de texto.
:before Elemento usado para insertar algún contenido delante de un elemento.
:after Elemento usado para insertar algún contenido al final del elemento.
CSS3:
:nth-child(N) Se utiliza para tablas normalmente. N puede ser 5, 2n+1, 3n+3 …
ul li:nth-child(5) {
color: #ccc;
}
ul li:nth-child(5) {
color: #ccc;
}
tr:nth-child(2n+2) {background: #eee}Conforme vaya encontrado más (que los hay), iré publicando más post.
Less es una herramienta que permite extender tus hojas de estilo (CSS) con variables, reglas anidadas, mixins u operaciones, por poner algunos ejemplos.
Os dejo algo de código de ejemplo:
@brand-color: #3879BD;
.rounded(@radius: 3px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded(5px);
a {
color: @brand-color;
&:hover {
color: #000;
}
}
}
Es muy común encontrarse con el caso de tener una columna muy estrecha, en la que un texto sin espacios (por ejemplo una url), se sale de la misma.
Para que el navegador corte el texto, se lo tenemos que indicar mediante css con la propiedad ‘word-wrap‘ al valor ‘break-word‘.
Por ejemplo, para aplicarlo a un párrafo, pondríamos:
p {
word-wrap: break-word;
}Esto funciona en IE6, IE7, Firefox, Safari, Chrome.
Vía: eisabainyo.net
A veces cuando clicamos sobre un enlace, en algunos exploradores se queda un recuadro de puntitos alrededor de los enlaces de la pagina. Y lo curioso es que en la CSS no tiene bordes. ¿Para qué sirve esto? Pues muy simple, es un propósito para mejorar la accesibilidad del usuario. Para las personas que no puedan usar un ratón, deben tener una señal sobre el enlace que está activo, para que puedan saber a qué enlace vamos a ir al pulsar Intro en el teclado.
Esto lo hace la propiedad outline de css. Depende del navegador este la interpretara como none o la mostrara. Para quitarla, simplemente ponemos outline:none; en la css y problema resuelto.
Internet explorer cada vez tiene mas problemas: seguridad, incompatibilidades, mala gestion de recursos… Por algo algunas grandes empresas le estan dando la espalda. Por suerte, hay gente que les echa un cable (no se si son tragajadores o desarrolladores libres).
En este aext.net podemos encontrar un hack (parche) para que las diferentes versiones del IE (6,7,8) soporten propiedades del CSS3 como: border-radius, box-shadow, text-shadow … entre otras. CSS3 indudablemente le da otra cara a las paginas webs y mas potencia, por lo que Microsoft deberia tenerlo en cuenta.
Descargar desde Microteching: aquí