Como sobreescribir el atributo html "style" desde css

No es raro que en nuestros desarrollos nos tengamos que enfrentar con algún elemento html al que se aplican estilos desde javascript, normalmente porque esos estilos son necesarios para el funcionamiento del plugin javascript de turno, como puede ser darle posicionamiento relativo a un elemento o darle un alto determinado. Pero en ocasiones, por requisitos de diseño, debemos cambiar este valor, o bien cambiarlo para determinados casos, como puede ser una cierta resolución de pantalla.

Javascript aplica estos estilos escribiendo en el atributo style del elemento html en cuestión. La mala noticia es que el atributo style tiene prioridad sobre cualquier otra regla de css que apliquemos... o casi. Si bien en las últimas versiones de chorme suele ser suficiente con un !important, esto no funciona para todas las versiones y navegadores modernos. Vamos a ver como lidiar con ello. Pongamos un ejemplo típico, google maps:

<div id="map" style="height: 360px; position: relative; overflow: hidden; 
transform: translateZ(0px); background-color: rgb(229, 227, 223);"> ... </div>

imaginemos que queremos cambiar el alto a 300px en tablet, en una resolución entre 768px y 992px:

@media (min-width: 768px) and (max-width: 992) {
  #map, #map[style] {
    height: 300px !important;
  }
}

Listo!

¿Qué hemos hecho?

Hemos utilizado el selector de atributo de css3, esto le dá a nuestro selector un peso extra, haciendo que tenga prioridad sobre los estilos del atributo style.

Ahora veremos otros usos del selector de atributo:

 

Bonus track 1: Seleccionamos los campos input tipo teléfono e email

input[type="tel"], input[type="email"] {
  border-color: blue;
}

Bonus Track 2: icono en enlaces con attributo target

a[target] {
  padding-left: 20px; /* icon-width + separation */
  background: url(../img/external-link-icon.png) no-repeat left center;
}