En este artículo vamos a ver cómo personalizar el color de la barra de direcciones en dispositivos móviles y la barra de desplazamiento o scroll con CSS.
Cómo cambiar el color de la barra de direcciones en móviles
Si estás leyendo esto desde tu móvil verás que la barra de direcciones y la barra de estado tienen un aspecto y color distintos al habitual. Si no estás en un móvil fíjate en la parte superior de esta captura móvil de elFinalde.com
Para hacer que cuando alguien visite tu web desde su móvil (con alguno de estos navegadores: Chrome, Firefox OS, Safari, Internet Explorer y Opera Coast) vea la barra de direcciones de otro color sólo tienes que añadir esta etiqueta <meta> en el <head> de tu web.
<!-- Chrome, Firefox OS y Opera --> <meta name="theme-color" content="#4285f4"/> <!-- Windows Phone --> <meta name="msapplication-navbutton-color" content="#4285f4"/>
Estas dos etiquetas cambiarán el fondo de la barra de estado en iOS Safari
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
La primera es necesaria para que la segunda tenga efecto, acepta estos valores:
black: fondo negroblack-translucent: fondo negro y traslúcido y el contenido se muestra a toda pantalla dejando la barra de estado parcialmente oscura.
Cambiar la barra de direcciones en móviles en WordPress
Si usas WordPress puedes editar el archivo header.php aunque si el tema no es tuyo y no quieres repetir el proceso cuando lo actualices será mejor que le crees un tema hijo y en él un archivo functions.php con este código.
add_action('wp_head','cambiar_color_barra_direcciones');
function cambiar_color_barra_direcciones() {
$output = '<!-- Chrome, Firefox OS y Opera --> <meta name="theme-color" content="#4285f4"/> <!-- Windows Phone --> <meta name="msapplication-navbutton-color" content="#4285f4"/>';
echo $output; }
Cómo cambiar el aspecto de la barra de scroll con CSS
En Webkit
Ya puestos puedes también cambiar el aspecto de la barra de desplazamiento, de la barra de scroll de tu sitio o de algún contenedor. Puedes usar Javascript, algún plugin de jQuery o estos pseudo elementos CSS creados en 2009 para navegadores basados en WebKit.
::-webkit-scrollbar ::-webkit-scrollbar-button ::-webkit-scrollbar-track ::-webkit-scrollbar-track-piece ::-webkit-scrollbar-thumb ::-webkit-scrollbar-corner ::-webkit-resizer
Para explorar todas las opciones visita este generador. Aquí tienes una demo de CodePen y de paso un mixin para SASS, por cierto si te fijas en las barras de scroll de CodePen verás que están personalizadas.
Y puedes concretar más con las pseudo clases :enabled, :disabled, :hover y :active además de estas específicas de scroll:
:horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive
La explicación de cada pseudo clase la tienes muy bien explicadas en este artículo de PoseLab Barras de scroll personalizadas en WebKit
En Internet Explorer
Para Internet Explorer 9 puedes usar:
scrollbar-face-color: blue; scrollbar-arrow-color: blue;
Y todas estas propiedades, si quieres compatinilidad con versiones anteriores a IE9 utiliza el prefijo -ms
scrollbar-3dlight-color scrollbar-darkshadow-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-track-color
En todos los navegadores
En este ejemplo tenemos una solución CSS compatibles con todos los navegadores
Algo que me ha gustado es traerte el scroll dentro de la página con unas simples reglas a <html> y <body> Demo
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}
Os recuerdo que la propiedad overflow-x con valor hidden ocultará la barra de scroll horizontal aunque estoy seguro que no la usas porque tu sitio es 100% responsive ;)
Opinión personal
Personalmente me ha costado cambiar el color de la barra de direcciones, creo que sirve para identificar mejor tu sitio. Me ha costado porque cambiar elementos del interfaz del navegador nunca me gustó, me trae recuerdos de IE 5.5 :O.
Otro inconveniente es la compatibilidad y la consistencia en distintas plataformas, usar vendor prefixes nunca debe ser una recomendación.
Sobre la barra de desplazamiento pasa lo mismo, quizás le veo sentido en contenedores que no sean el html.
¿Qué opinas tú de estas opciones? ¿Las tienes o las vas a implementar en tus sitios?
Deja una respuesta