Desactivar detección de errores de CSS en VS2008

Visual Studio 2008

Desde luego para mi la ventana de errores del visual studio no es para sacar errores de CSS, para eso ya está el validador de la W3C. ;-D

El tema es que si queremos que se dejen de mezclar este tipo de errores entre los realmente importantes y no encontramos la opción, la ruta es la siguiente:

Herramientas> Opciones> Editor de texto> CSS> CSS específicos‘.

Entonces desmarcamos la opción ‘Detectar los errores‘.

Por supuesto, acordaros de marcar el check de bajo a la izquierda para poder ver todas las opciones completas!

Espero que os sea útil.

Problema del flash, el lightbox, y el z-index

Diseño web

Ahora vamos a hablar del clásico problema de cuando tenemos un lightbox y los vídeos de youtube salen por encima, o en general de cuando al abrir/expander/mostrar cualquier capa de nuestro html por javascript mediante un lightbox jQuery, o un drop down menu de mootools, o lo que sea, se nos queda cualquier SWF de flash que tengamos por encima.

Y ya le podemos poner z-index ya, que para el flash como si nada.

Esto como ya se ha dicho muchas veces es cuestión del wmode=»transparent».

El problema bien cuando el que luego se va a encargar de meter los vídeos de youtube en la pagina que estamos haciendo es el cliente mediante el Tiny Editor o cualquiera de estos, o incluso poniéndolo a pelo en un textarea.

Si no nos curramos nada para que automáticamente se detecte el caso y añada el parámetro el sistema, al menos, si nos podemos currar una aviso muy sencillo para ponerlo encima del editor, y así cuando vaya a incluir el vídeo, podrá ver como hacerlo.

Aquí os dejo una imagen de como queda integrado en Joomla…

y el código:

<div>
Nota: <a href="#" onclick="jQuery('#yt_explain').toggle(); return false;">cómo debemos insertar vídeos de youtube</a> <br/>
<p id="yt_explain" style="display:none;">
    Para incluir videos de youtube <strong>utilizar el código antiguo</strong> (no el iframe).<br/>
    Además de tener en cuenta el tamaño del ancho (360px máximo) para obetner el codigo, una vez lo tengamos lo tendriamos que modificar ligeramente.<br/>
    Para que al mostrar la ventana de la/s imagen/es el video no se quede por encima, hay que añadir un parametro.<br/>
    Veremos que el código es de la forma:<br/>
    &lt;object&gt;&lt;param name=&quot;XXX&quot; value=&quot;YYY&quot;/&gt;<br/>
    Pues bien. Al final de todos los que aparecen, debes añadir uno m&aacute;s: <span style="color:red;">&lt;param name=&quot;wmode&quot; value=&quot;transparent&quot;/&gt;</span><br/>
    Ademas, veremos que tambien hay una cadena <span style="color:red;">&lt;embed</span> con xxxx=&quot;yyyy&quot;.<br/>
    Pues al final, antes del &gt; tambien añadiremos: <span style="color:red;">wmode=&quot;transparent&quot;</span>
</p>
</div>

Seguro que nos ahorra un montón de llamadas por teléfono o mails.

xD

No se ven los botones de close, prev, next de lytebox en IE8

programacion

Esto pasa con la versión 3.22 de lytebox.

No se ven ninguno de los botones (close, play, prev, next), ni tampoco el fondo oscuro del lightbox.

Para solucionarlo tenemos que hacer algunos cambios en la lytebox.css.

Se trata de pasar el estilo que se determina para un elemento en la subclase .gray a la clase principal.

Así, por ejemplo, el código:

#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px;}
#lbClose.grey { background: url(../images/admin/close_grey.png) no-repeat; }

Pasaría a:

#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px; background: url(../images/admin/close_grey.png) no-repeat;}
#lbClose.grey { background: url(../images/admin/close_grey.png) no-repeat; }

Esto lo tenemos que ir haciendo también para #lbPause, #lbPlay, y #lbOverlay.

Ojo con los #lbPrev, y #lbNext.

En este caso tendremos que incluir una linea como:

#lbNext:hover, #lbNext:visited:hover { background: url(images/next_grey.gif) right 15% no-repeat; }

Saludos!

Cómo hacer Nth-child cross browser

Diseño web

Muchos de vosotros conoceréis el selector css “nth-child”, y los que no lo conozcáis, pues deberías! xD.

Nos permite decir adiós a tener que ir marcando en el html los típicos ‘odd’ y ‘even’ como class en nuestras tablas y listados. Un simple “nth-child(2n+1)” y fuera! Nos ahorramos un montón de trabajo.

Podéis ver mejor como funciona en este artículo: http://css-tricks.com/5452-how-nth-child-works/
El problema de esto, como siempre, es que no es cross browser, y es nuestro amigo IE quien no se entera de esta propiedad… 🙁 Incluso en IE8!!

Como dice al final del artículo, para solucionar este tema, es posible usar jQuery, y así es!
Con una línea de jQuery, podemos obtener los mismos resultados que con la css, pero para todos los navegadores!!

Y aquí viene el valor añadido sobre el artículo anterior… El ejemplo que nos aclarará como es la cosa:

Css:
<<table.myclass tr:nth-child(2n+1) { background-color: #F6F6F6; }>>

jQuery:
<<$(«table.myclass tr:nth-child(2n+1)»).css(«background-color», «#F6F6F6»);>>

Espero que os sirva!

Hack CSS para Safari 3.0 y Opera 9

css

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!

Selectores en CSS2 y CSS3 – pseudo-classes

css

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.