Resuelto: Safari no muestra el poster del video html5

Safari (y al parecer los móviles también) no muestran el poster del video que sirve como referencia de los videos.
Usando css podemos usar la misma imagen del poster para que se muestre detrás del video y lograr el mismo efecto.

<div class="contenido">
	<div class="contenedor_video">
		<video poster="poster-del-video.jpg" controls>
				<source src="el-video.mp4" type="video/mp4">
				Tu explorador no soporta la etiqueta de video.
		</video>	
	</div>
</div>
.contenedor {
	position: relative;
}

.contenedor_video video {
	width: 650px;
	height: 365px;
	position: relative;
	top:0;
	left:0;
	z-index: 2;
}

.contenedor_video::before {
	background: transparent url('poster-del-video.jpg') no-repeat top left;
	width: 650px;
	height: 365px;
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	top: 6px;
	left: 8px;
}

Puedes verlo en codepen.io

Como desaparecer los < hr />

Hace aprendi que semanticamente hablando es buena idea separar los contenidos mas grandes de un documento con Reglas Horizontales o <hr />.

Es buena idea, por que separa cada seccion conceptualmente hablando y ademas lei que es una forma muy comoda de limpiar los float por completo. Entonces me quedo con un codigo parecido a este

<div id="cabeza"> ...</div>
<hr />
<div id="contenido"> ...</div>
<hr />
<div id="pie"> ...</div>

Y los estilos
hr {
display:block;
clear:both;
margin:-1px 0;
}

En principio esto funciona para la mayoria de los exploradores, PEEROO adivinen quien no lo rendea bien? IE6, que tiene la maravillosa costumbre de hacer que nuestro trabajo sea mas interesante llenandonos de misterio y aventura en la busqueda de soluciones para que el vea bien las cosas.

Entonces es necesario “desaparecer” la regla para que explorer no la muestre por ahi colada. Para eso agregamos un par de reglas que no rompen el modelo del documento y que nos garantizan que ninguno de los exploradores lo muestre.

hr {
display:block;
clear:both;
margin:-1px 0;
position:relative;
left:-9999px;

}

Ahora el ultimo pequeñisimo detalle es que queda un pequeño margen extra que tenemos que quitar y listo ¿que es un hack mas para IE?

*+html hr { margin: 0em 0 -7px 0; /*IE 7 bugfix*/ }
* html hr { margin: 0em 0 -7px 0; /*IE 6 bugfix*/ }

Final feliz para el destino del resto del contenido que no tendra que verselas con unas reglas horizontales fantasmas que aparecen despues de muertas.
Hasta ahora funciona en
Windows: IE 6, IE 7, Netscape, Opera, FF
Mac: Safari, FF, IE 5.5, Opera, Camino, Netscape

Listas desordenadas con FontAwesome

Cambiar los bullets de las listas desordenadas a iconos de FontAwesome es más fácil de lo que parece.

Hacemos una lista de ejemplo:

<ul>
    <li>Primer elemento de la lista</li>
    <li>Segundo elemento de la lista</li>
    <li>Tercer elemento de la lista</li>
</ul>

Y luego en el CSS la lista de cosas por hacer:

  1. Importar Font Awesome. En este ejemplo lo importamos desde un CDN pero lo puedes tener local si solo vas a necesitar unos iconos
  2. Quitar los estilos nativos de la lista con list-style:none;
  3. Poner el icono antes de la lista con li:before
/* importa fontawesome (o la que necesites) */
/* para esta prueba lo importé desde http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css */

@font-face{
    font-family:FontAwesome;
    src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
    font-weight:400;font-style:normal;}

/* estilos para la lista y quitar el predeterminado */
ul { padding-left:20px; list-style:none; }
li { margin-bottom:10px; }

/* aqui viene la magia */
li:before {
    font-family: 'FontAwesome';
    content:"\f0a4";
    margin:0 5px 0 -15px;
}

Aquí está la lista en acción: http://jsfiddle.net/corchoweb/AHunC/

¿Cual es el icono mas raro que has usado en una lista?

Hacks de CSS específicos para Firefox

Traducción del artículo CSS Hacks Targeting Firefox de css-tricks.com

Con estos pedazos de código puedes hacer ajustes exclusivos para Firefox que, aunque lo hace muy bien, hace algunas cosas raras de vez en cuando con el código.
Para esos momentos incomodos en que el viejo zorro hace lo que quiere con el código lo podemos poner en cintura con estos tres códigos específicos.

Firefox 2

html>/**/body .selector, x:-moz-any-link {
  color:lime;
}

Firefox 3

html>/**/body .selector, x:-moz-any-link, x:default {
  color:lime;
}

Cualquier Firefox

@-moz-document url-prefix() {
  .selector {
     color:lime;
  }
}

Via: CSS Hacks Targeting Firefox