Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/08/2012, 07:04
Avatar de Pentaxeros
Pentaxeros
 
Fecha de Ingreso: mayo-2008
Mensajes: 173
Antigüedad: 16 años
Puntos: 3
Optimizar CSS

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!

Última edición por Pentaxeros; 27/08/2012 a las 07:44