Optimizar CSS

Pentaxeros · #1 (**permalink**) 27/08/2012, 07:04

Hola, estoy tratando de optimizar (usando gtmetrix.com) una pagina web que estoy realizando.

Cuando me reporta el informe me dice que estoy usando CSS que no no eficaces.

Os pongo el reporte:

Cita:

Inefficient rules (good to fix on interactive pages):
#nav-tabs .off:hover span Tag key with 2 descendant selectors
#nav-tabs .current span Tag key with 2 descendant selectors

Rules that use the :hover pseudo-selector on non-anchor elements. This can cause performance problems in Internet Explorer versions 7 and 8 when a strict doctype is used.
#nav-tabs .off:hover span
.sprite-carta-menu-png:hover
.sprite-carta-vinos-png:hover
.sprite-compartir-png:hover
.sprite-google-maps-png:hover
.sprite-hotel-reservas-png:hover
.sprite-mas-informacion-png:hover
.sprite-pantalla-completa-png:hover
.sprite-precios-png:hover
.sprite-prevision-png:hover
.sprite-qr-a-movil-png:hover
.sprite-servicios-png:hover
.sprite-logo-gigapan-360-png:hover
.sprite-logo-pentax-360-png:hover
.sprite-logo-samyang-360-png:hover
.sprite-logo-sigma-360-png:hover

Mi archivo CSS es este:

Código:

#nav-tabs {
position:absolute;
top:0px;
left:470px;
width:490px;
top:0px;
color:#FFF;
}

#nav-tabs ul {
margin:0;
padding:0;
}

#nav-tabs li {
float:left;
margin:0 5px 0 0;
display:inline;
height:25px;
line-height:25px;
}

#nav-tabs a {
float:left;
padding:0 15px 0 0;
font-size:0.94em;
background:#0c141e url(imagenes/bg-nav-tabs4.png) 100% 0 no-repeat;
color:#4D4D4D;
font-weight:bold;
text-transform:capitalize;
}

#nav-tabs span {
float:left;
height:25px;
padding:0 0 0 15px;
background:url(imagenes/bg-nav-tabs4.png) 0 0 no-repeat;
}

#nav-tabs a:hover, #nav-tabs .current {
text-decoration:none;
background-color:#0c141e;
background-position:100% -36px;
color:#fff;

}

#nav-tabs .off:hover span {
text-decoration:none;
color:#fff;
background-position:0 -36px;
}

#nav-tabs .current span {
padding-left:15px;
background-position:0 -180px;
}


.sprite-carta-menu-png {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -108px -144px;
}

.sprite-carta-menu-png:hover {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -72px -144px;
}

.sprite-carta-vinos-png {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -36px -144px;
}

.sprite-carta-vinos-png:hover {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -0px -144px;
}

.sprite-compartir-png {
    float:left;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -144px -108px;
}

.sprite-compartir-png:hover {
    float:left;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -108px -108px;
}

.sprite-google-maps-png {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -72px -108px;
}

.sprite-google-maps-png:hover {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -36px -108px;
}

.sprite-hotel-reservas-png {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -0px -108px;
}

.sprite-hotel-reservas-png:hover {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -144px -72px;
}

.sprite-mas-informacion-png {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -108px -72px;
}

.sprite-mas-informacion-png:hover {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -72px -72px;
}

.sprite-pantalla-completa-png {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -36px -72px;
}

.sprite-pantalla-completa-png:hover {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -0px -72px;
}

.sprite-precios-png {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -159px -36px;
}

.sprite-precios-png:hover {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -123px -36px;
}

.sprite-prevision-png {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 47px;
    height: 32px;
    background-position: -0px -36px;
}

.sprite-prevision-png:hover {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 47px;
    height: 32px;
    background-position: -124px -0px;
}

.sprite-qr-a-movil-png {
    float:left;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 58px;
    height: 32px;
    background-position: -62px -0px;
}

.sprite-qr-a-movil-png:hover {
    float:left;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 58px;
    height: 32px;
    background-position: -0px -0px;
}

.sprite-servicios-png {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -87px -36px;
}

.sprite-servicios-png:hover {
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -51px -36px;
}

.sprite-logo-gigapan-360-png:hover {
    background: url(imagenes/iconospatrocinador.png) no-repeat; 
    width: 74px;
    height: 15px;
    background-position: -0px -54px;
}

.sprite-logo-gigapan-360-png {
    background: url(imagenes/iconospatrocinador.png) no-repeat; 
    width: 74px;
    height: 15px;
    background-position: -0px -36px;
}

.sprite-logo-pentax-360-png:hover {
    background: url(imagenes/iconospatrocinador.png) no-repeat; 
    width: 71px;
    height: 15px;
    background-position: -0px -90px;
}

.sprite-logo-pentax-360-png {
    background: url(imagenes/iconospatrocinador.png) no-repeat; 
    width: 71px;
    height: 15px;
    background-position: -0px -72px;
}

.sprite-logo-samyang-360-png:hover {
    background: url(imagenes/iconospatrocinador.png) no-repeat; 
    width: 78px;
    height: 15px;
    background-position: -0px -18px;
}

.sprite-logo-samyang-360-png {
    background: url(imagenes/iconospatrocinador.png) no-repeat; 
    width: 78px;
    height: 15px;
    background-position: -0px -0px;
}

.sprite-logo-sigma-360-png:hover {
    background: url(imagenes/iconospatrocinador.png) no-repeat; 
    width: 63px;
    height: 15px;
    background-position: -81px -0px;
}

.sprite-logo-sigma-360-png {
    background: url(imagenes/iconospatrocinador.png) no-repeat; 
    width: 63px;
    height: 15px;
    background-position: -0px -108px;
}

La verdad no se muy bien a que se refiere con lo que me reporta.

Puede alguien ayudarme?

Saludos!

Pentaxeros · #2 (**permalink**) 04/09/2012, 09:05

Hola!, nadie tiene alguna idea de como poder optimizar estos CSS???

Con que me deis una pista de uno de ellos ya el resto lo encauzo yo, pero de CSS no soy ningún experto y me vendría bien una mano.

Saludos y GRACIAS DE ANTEMANO!

ArturoGallegos · #3 (**permalink**) 04/09/2012, 13:16

Tu problema es claro, repites demaciadas veces codigo que podria evitarse... debes anidar las clases CSS con estilos en comun por ejemplo:

Código CSS:

Ver original.sprite-carta-menu-png,
.sprite-carta-vinos-png,
.sprite-compartir-png{
    float:right;
    background: url(imagenes/iconos-tuciudad2.png) no-repeat; 
    width: 32px;
    height: 32px;
    background-position: -108px -144px;
}
 
.sprite-carta-menu-png:hover {
    background-position: -72px -144px;
}
 
.sprite-carta-vinos-png {
    background-position: -36px -144px;
}
 
.sprite-carta-vinos-png:hover {
    background-position: -0px -144px;
}
 
.sprite-compartir-png {
    float:left;
    background-position: -144px -108px;
}
 
.sprite-compartir-png:hover {
    background-position: -108px -108px;
}

Pentaxeros · #4 (**permalink**) 04/09/2012, 14:10

Gracias!!! Entendido!!!