All posts in CSS

En una plana HTML, si volem un salt de pàgina en una posició concreta del document, afegirem l’estil CSS page-break-before:
h1 {
font-size: 3em;
page-break-before: always;
}

Aquest estil indica al navegador que quan s’imprimeixi la plana, sempre que trobi una capçalera principal H1, executi un salt de pàgina abans d’imprimir el contingut d’aquest.

Per sol·lucionar el problema de tenir la primera plana en blanc per un salt de pàgina provocat per la primera capçalera del document, emprarem la pseudo-classe :first-child
h1:first-child {
page-break-before: auto;
}

Establint el valor per omissió que te la propietat page-break-before per al primer element H1 del document.

bring-down-IE6

S’ha iniciat la campanya que tot creador de web estava esperant. La petició als navegants que empren Internet Explorer 6 que es passin a la versió 7 o 8 o qualsevol altre navegador que compleixi amb els estandards W3C.

No es tracta d’una campanya anti-Microsoft, l’organtizar la mateixa .NET Magazine. Si calculèssim la d’hores que es perden testejant que les planes web es visualitzin correctament en aquest navegador que no compleix la normativa, la quantitat seria astronòmica.

A la plana de la campanya It’s time to unite Bring Down IE6 fan una crida per a afegir el logotip i enllaçar al lloc web de la campanya.

Webmasovers del món, uniu-vos!

Codi a implementar per a que s’avisi als navegants que estan emprant IE6 que s’actualitzin:

$.browser.msie6 = $.browser.msie && /MSIE 6.0/i.test(window.navigator.userAgent) && !/MSIE 7.0/i.test(window.navigator.userAgent);
if (jQuery.browser.msie6)
{
alert("Esteu navegant amb una versió antiga i descontinuada d'Internet Explorer. Podeu actualitzar-vos a la versió 7 o navegar en català amb el Firefox.");
}

scrollbar

Modificant els CSS d’una plana, aconseguirem canviar el color de les barres d’scroll en navegadors Internet Explorer.


body {
scrollbar-arrow-color: #464646;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-darkshadow-color: #999999;
scrollbar-face-color: #D4D0C8;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #CCCCCC;
scrollbar-track-color: #e6e6e6;
}

Per a Firefox no està habilitada aquesta possibilitat, ni que sigui via JavaScript

document.body.style.scrollbarArrowColor="green";

cantonades-arrodonides

Una de les funcionalitats més vistoses de la propera CSS3 serà l’arrodoniment de les cantonades. Això ens estalviarà als dissenyadors de llocs web un munt de temps i als administradors de sistemes un munt d’ample de banda en imatges i codi que dibuixen aquest arrodoniment.

Doncs bé, abans de que arribi la CSS3, els desenvolupadors de webs orientades al codi obert, podem fer servir algunes de les CSS Mozilla Extensions per aconseguir l’objectiu.

Amb aquest codi, aconseguim el resultat de la dreta:
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px

Així que desde navegadors tant populars com Mozilla, Firefox, Swiftweasel i d’altres, podrem anticiparnos a la CSS3. Amb navegadors tipus Microsoft Internet Explorer es veuran les catonades quadrades.