Quines són les fulles d'estil en cascada?
Els llocs web es componen d'una sèrie de peces individuals, incloses les imatges, el text i diversos documents. Aquests documents no només inclouen els que es poden enllaçar des de diverses pàgines, com ara fitxers PDF, sinó també els documents que s'utilitzen per construir les pàgines, com ara documents HTML per determinar l'estructura d'una pàgina i els documents CSS (Cascading Style Sheet) per dictar l'aspecte d'una pàgina. Aquest article aprofundirà en CSS, cobrint el que és i on s'utilitza en els llocs web d'avui.
Una lliçó d'història CSS
CSS es va desenvolupar per primera vegada el 1997 com una manera de desenvolupadors web per definir l'aparença visual de les pàgines web que estaven creant. Tenia la intenció de permetre als professionals de la xarxa separar el contingut i l'estructura del codi d'un lloc web des del disseny visual, cosa que no havia estat possible abans d'aquest moment.
La separació d'estructura i estil permet que HTML realitzi més de la funció en què es basava originalment: el marcat de contingut, sense haver de preocupar-se pel disseny i el disseny de la pàgina en si, alguna cosa que comunament es coneix com "look and feel" de la pàgina.
CSS no va guanyar popularitat fins a l'any 2000, quan els navegadors web van començar a utilitzar més elements bàsics de fonts i colors d'aquest llenguatge de marques. Avui en dia, tots els navegadors moderns admeten tot el Nivell 1 CSS, la majoria de CSS Nivell 2, i fins i tot la majoria dels aspectes de CSS Nivell 3. A mesura que CSS continua evolucionant i s'introdueixen nous estils, els navegadors web han començat a implementar mòduls que aporten un nou suport CSS als navegadors i proporcionen als dissenyadors web eines noves i potents d'estil per treballar.
En (molts) anys passats, hi va haver selectes dissenyadors web que es van negar a utilitzar CSS per al disseny i el desenvolupament de llocs web, però aquesta pràctica no ha passat mai de la indústria actual. CSS és ara un estàndard molt utilitzat en el disseny web i difícilment trobeu a ningú que treballa en la indústria actual que no tingués almenys una comprensió bàsica d'aquest idioma.
CSS és una abreviatura
Com ja s'ha dit, el terme CSS significa "Full d'estil en cascada". Anem a trencar aquesta frase una mica per explicar més plenament el que fan aquests documents.
La paraula "full d'estil" fa referència al propi document (com ara HTML, els fitxers CSS són només documents de text que es poden editar amb diversos programes). S'han utilitzat fulls d'estil per al disseny del document durant molts anys. Són les especificacions tècniques d'un disseny, ja sigui imprès o en línia. Els dissenyadors d'impressió han utilitzat llargues fulles d'estil per assegurar que els seus dissenys estan impresos exactament a les seves especificacions. Un full d'estil per a una pàgina web serveix per al mateix propòsit, però amb la funcionalitat afegida de dir també al navegador web com fer que es visualitzi el document. Avui dia, els fulls d'estil CSS també poden utilitzar consultes multimèdia per canviar la manera en què una pàgina busca diferents dispositius i mides de pantalla . Això és increïblement important perquè permet que un únic document HTML es representi de manera diferent segons la pantalla que s'utilitzi per accedir-hi.
Cascade és la part realment especial del terme "full d'estil en cascada". Un full d'estil web està pensat per fer cascades a través d'una sèrie d'estils d'aquesta fulla, com un riu sobre una cascada. L'aigua del riu travessa totes les roques de la cascada, però només les que hi ha al fons afecten exactament l'aigua que fluirà. El mateix passa amb la cascada dels fulls d'estil del lloc web.
Cada pàgina web es veu afectada per almenys un full d'estil, fins i tot si el dissenyador web no aplica cap estil. Aquest full d'estils és el full d'estil del agent d'usuari, també conegut com els estils predeterminats que el navegador web usarà per mostrar una pàgina si no es proporcionen altres instruccions. Per exemple, els hipervincles predeterminats tenen un estil blau i estan subratllats. Aquests estils prové del full d'estil per defecte del navegador web. Si el dissenyador web proporciona altres instruccions, però, el navegador haurà de saber quines instruccions tenen prioritat. Tots els navegadors tenen els seus propis estils per defecte, però molts d'aquests valors predeterminats (com ara els enllaços de text subratllat blau) es comparteixen a tots els navegadors i versions principals.
Per a un altre exemple d'un navegador per defecte, al meu navegador web, el tipus de lletra predeterminat és " Times New Roman ", que es mostra a la talla 16. Gairebé cap de les pàgines que visito mostra en aquesta família i mida de font. Això és degut a que la cascada defineix que els segres fulls d'estils, que els propis dissenyadors configuren, redefineixen la grandària de la font i la família, i substitueixen els valors predeterminats del meu navegador web. Qualsevol full d'estil que creeu per a una pàgina web tindrà més especificitat que els estils predeterminats d'un navegador, de manera que els valors predeterminats només s'aplicaran si el vostre full d'estils no els anul·la. Si voleu que els enllaços siguin blaus i subratllats, no cal fer res, ja que és el valor predeterminat, però si el fitxer CSS del vostre lloc diu que els vincles han de ser verds, aquest color anul·larà el blau predeterminat. El subratllat romandrà en aquest exemple, ja que no heu especificat el contrari.
On es fa servir CSS?
CSS també es pot definir com s'han de veure les pàgines web quan es visualitza en altres mitjans que un navegador web. Per exemple, podeu crear un full d'estils d'impressió que definirà com s'ha d'imprimir la pàgina web. Com que els elements de la pàgina web com a botons de navegació o formularis web no tenen cap finalitat a la pàgina impresa, es pot utilitzar una fulla d'estil d'impressió per "desactivar" aquestes àrees quan s'imprimeix una pàgina. Tot i que no és una pràctica habitual en molts llocs, l'opció per crear fulls d'estil d'impressió és potent i atractiva (en la meva experiència, la majoria dels professionals de la xarxa no ho fan simplement perquè l'abast del pressupost d'un lloc no implica que es faci aquest treball addicional ).
Per què és important CSS?
CSS és una de les eines més poderoses que un dissenyador web pot aprendre perquè amb això pot afectar l'aparença visual completa d'un lloc web. Els fulls d'estil ben escrits es poden actualitzar ràpidament i permetre que els llocs canviïn el que es prioritza visualment a la pantalla, que al seu torn mostra el valor i el focus als visitants, sense que calgui fer canvis al marcat HTML subjacent.
El principal repte de CSS és que hi ha una mica d'aprenentatge, i amb els navegadors que canvien cada dia, el que funciona bé avui pot ser que no tingui sentit demà, ja que els nous estils són compatibles i uns altres es deixen caure o es desmarca per una raó o una altra .
Atès que CSS pot en cascada i combinar, i considerant com els diferents navegadors poden interpretar i implementar les directives d'una manera diferent, CSS pot ser més difícil que l'HTML simple per dominar. CSS també canvia en els navegadors d'una manera que HTML no ho fa. Tanmateix, una vegada que comenceu a utilitzar CSS, veureu que aprofitar el poder dels fulls d'estil us oferirà una flexibilitat increïble a l'hora de dissenyar pàgines web i definir-ne l'aspecte. Al llarg del recorregut, s'agruparà una "borsa de trucs" d'estils i enfocaments que ja han funcionat en el passat i que podeu tornar a activar a mesura que creeu noves pàgines web en el futur.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 17/07/17,