Archivo de la categoría: CSS

Recargar CSS sin actualizar caché

Cuando estamos haciendo cambios cada poco en el CSS de nuestra web, puede darse el caso de que no se actualice el CSS a no ser que entremos en sesión de incógnito, cambiemos de navegador, dispositivo, o borremos la caché del navegador. Muchas veces con presionar Alt + Actualizar puede ser suficiente, pero muchas otras el navegador se pone un poco pesadito.
Una posible opción es cambiar el nombre del archivo css cada vez que recargamos la página web. Para ello si nuestro servidor cuenta con php podemos hacer lo siguiente:

En lugar de escribir el habitual:

<link rel="stylesheet" href="estilo.css">

Escribimos:

<link rel="stylesheet" href="estilo.css?id=<php date('u'); ?>">

El Resultado en nuestro navegador será algo así:

<link rel="stylesheet" href="estilo.css?id=1545079036">

De tal forma, que de cara al navegador, será un archivo nuevo.
Al escribir en php date(‘u’); Lo que hemos hecho ha sido insertar los segundos pasados desde el el 1 de enero de 1970. Otra opción menos friky es poner date(‘Ymdhms’); que hará que aparezcan los Years, months, days, hours, minutes y seconds… pero es más corta la otra opción.

Para saber más sobre los date(); de php consultar la guia de referencia oficial de php


Aunque esta técnica es ideal para desarrollar la web, es probable que Google Speed Test te lo notifique como una cosa a mejorar en tu web.

Selectores CSS

Los selectores CSS es la forma en la que tenemos de decirle al navegador qué elemento queremos pintar de una forma determinada. Las formas más sencillas es hacerlo con etiquetas, clases o ids, pero existen muchísimas más opciones, y el siguiente enlace de w3schools aquí los muestra de una forma, fácil, comprensible e interactiva:

Ver enlace de selectores css

Una de las mejores herramientas para aprender selectores en CSS

Scroll Animado “Smooth” con CSS y sin JQuery ni JavaScript

Para crear un scroll que realice una transición animada entre dos puntos de la página web; utilizado generalmente en enlaces a ids tipo <a href=”#contacto”> ir a contacto </a> , elemento que vincula a <div id=”contacto”>… </div>, puedes utilizar javascript con JQuery, pero el siguiente turco evitará esto, permitiéndote hacerlo con una sola línea de código. Pega lo siguiente en tu código CSS:

html {  scroll-behavior: smooth; }

Puedes ver un ejemplo aquí

Wordpres theme twentytwelve CSS hacks

Twentytwelve es uno de los temas gratuitos de wordpress más limpios y versátiles.

Aquí traemos una serie de fragmentos de código CSS para mejorar ciertas características:

/* Google Fonts*/
@import url('https://fonts.googleapis.com/css?family=Oswald');

// ENLACES
// Desactiva punteado de los enlaces tras el click
a:focus{ outline: none;}

// PÁRRAFOS
p{
// Texto de párrafo justificado por defecto
text-align: justify;}


#page.site{
	margin:0px auto;
	
	max-width:100%;
	box-shadow: 0 0 0;
}

// IMÁGENES
// desactiva el borde redondeado y sombra de las imágenes
img{
	border-radius:0 !important;
	box-shadow:none;
}