En escriure codi CSS de vegades et pots trobar que el teu CSS no fa el que esperes. Pot ser que esperis que un determinat selector coincideixi amb un element, i no passa; o que una caixa tingui una mida diferent de la que t’esperaves. Aquest article et proporciona orientacions sobre com es pot emprendre la depuració d’un problema en CSS i et mostra com les eines de desenvolupador (DevTools) que tots els navegadors moderns inclouen et poden ajudar a esbrinar què passa.
| Prerequisits: | Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS. |
|---|---|
| Objectiu: | Adquirir informació bàsica sobre les eines de desenvolupador dels navegadors i aprendre a inspeccionar i editar el CSS de manera senzilla. |
L'article Què són les eines de desenvolupador dels navegadors és una guia actualitzada que explica com accedir a les eines de desenvolupament web en diversos navegadors i plataformes. Tot i que pots decidir fer el desenvolupament web majoritàriament en un navegador determinat, i per tant et familiaritzaràs amb les eines que inclou aquell navegador, val la pena saber com accedir-hi des d'altres navegadors. Això t’ajudarà si fas proves de les representacions que donen diferents navegadors.
També t’adonaràs que els diversos navegadors han decidit centrar-se en àrees diferents a l’hora de crear les eines de desenvolupador. Per exemple, en Firefox hi ha algunes eines excel·lents per a treballar visualment amb la compaginació amb CSS, que et permeten inspeccionar i editar Dissenys de graella, Flexbox i Formes. Ara bé, tots els diferents navegadors tenen eines fonamentals semblants; per exemple, per a inspeccionar les propietats i els valors que s’apliquen als elements de la teva pàgina i modificar-los des de l'editor.
En aquest article analitzarem algunes funcions útils de les eines de desenvolupador de Firefox per a treballar amb CSS. Per fer-ho, utilitzarem un fitxer d'exemple. Carrega’l en una pestanya nova si vols seguir-nos alhora, i obre les eines de desenvolupador tal com es descriu en l'article de l'enllaç anterior.
Una cosa que pot sorprendre els nouvinguts a DevTools és la diferència entre el que es veu quan mires el codi font d'una pàgina web o el fitxer HTML que hi ha penjat al servidor, i el que pots veure en la finestra HTML de DevTools. Tot i que s’assembla força al que es pot veure des de View Source, hi ha algunes diferències.
En el processat pel DOM, el navegador pot haver corregit un codi HTML mal escrit. Si has tancat un element de manera incorrecta, per exemple perquè has obert un <h2> però l’has tancat amb un </h3>, el navegador esbrina què volies fer i l'HTML del DOM tanca correctament l’etiqueta d’obertura <h2> amb l’etiqueta de tancament </h2> corresponent. El navegador també normalitza tot el codi HTML i el DOM mostra, a més, tots els canvis que s’hi fan amb JavaScript.
En canvi, View Source és simplement el codi font HTML que hi ha emmagatzemat en el servidor. L’arbre HTML de DevTools mostra exactament el que representa el navegador, de manera que et proporciona una visió detallada del que passa realment.
Selecciona un element de la teva pàgina, ja sigui fent clic amb el botó dret del ratolí o prement la tecla ctrl per seleccionar l'opció Inspeccionar, o selecciona’l en l'arbre HTML de l'esquerra de la pantalla de la interfície DevTools. Selecciona l'element amb la classe box1; aquest és el primer element de la pàgina que té una caixa que l’envolta.
Si observes la vista de visualització de regles, Rules view, que hi ha a la dreta de l’HTML, pots veure les propietats i els valors CSS que s’apliquen a aquest element. S’hi veuen les regles que s’apliquen directament a la classe box1 i també les regles de CSS que la caixa hereta de l’element pare, en aquest cas <body>. Això és útil per a veure si s’aplica algun codi CSS que no esperes. Potser hi ha una regla que s’hereta d’un element pare i has d’afegir una regla que l’anul·li en el context d’aquest element.
També és útil la capacitat d’ampliar les propietats abreviades. En el nostre exemple hem fet servir la propietat abreviada margin.
Fes clic a la fletxa petita per a ampliar la vista i que se’n mostrin les diferents propietats sense abreviar i els valors.
Pots activar i desactivar els valors en la finestra de Visualització de regles quan aquest plafó està actiu; si hi passes el ratolí per sobre, apareixeran les caselles de verificació. Desmarca la casella de verificació d’una regla, per exemple border-radius i aquell CSS deixarà d’aplicar-se.
Pots utilitzar-ho per a fer una comparació entre A i B i decidir si alguna cosa es veu més bé amb una regla aplicada o no, i també per a ajudar a depurar-la. Per exemple, quan un disseny de pàgina web no funciona correctament i intentes esbrinar quina propietat provoca el problema.
A més d’activar i desactivar propietats, pots editar-ne els valors. Pot ser que vulguis veure si un altre color escau més, o modificar la mida d'alguna cosa. Les DevTools et poden ajudar a estalviar molt de temps a l'hora d'editar un full d’estil i tornar a carregar la pàgina.
Amb l’element box1 seleccionat, fes clic en la mostra (el petit cercle de color) que mostra el color que s’aplica a la vora. S'obrirà un selector de colors i podràs provar amb colors diferents, que s'actualitzaran en temps real a la pàgina. De manera semblant pots canviar l'amplada o l'estil de la vora.
Amb les DevTools pots afegir propietats. Que t'has adonat que no vols que la caixa hereti la mida de la lletra de l'element <body> i vols definir-hi una mida de lletra pròpia? Fes-ne primer la prova en les DevTools abans d’afegir-ho al teu fitxer CSS.
Fes clic en la clau de tancament de la regla i comença a introduir-hi una altra declaració; en el moment que comences a escriure, DevTools mostra una llista completa de les propietats que hi coincideixen. Selecciona la propietat per a la mida de la lletra (font-size) i introdueix-hi el valor que vols provar. També pots fer clic al botó + per a afegir una altra regla amb el mateix selector, i afegir-hi les regles noves.
Nota: També hi ha altres funcions útils en la vista de visualització de regles; per exemple, es ratllen les declaracions que tenen valors no vàlids. Pots obtenir més informació en l’article Examinar i editar el CSS.
En articles anteriors hem parlat del model de caixes i del fet que tenim un model de caixes alternatiu que canvia la manera com es calculen les mides dels elements segons la mida que els proporciones, i també de l'àrea de farciment i els marges. Les DevTools et poden ajudar a entendre com es calcula la mida d'un element.
La vista de disposició mostra un esquema del model de caixes de l’element seleccionat, juntament amb una descripció de les propietats i els valors que canvien la manera com es disposa l’element en la pàgina. Inclou una descripció de les propietats que potser no has utilitzat explícitament sobre l'element, però que tenen valors inicials definits.
Una de les propietats que es detallen en aquesta taula és la propietat de dimensionament de caixa (box-sizing), que controla quin model de caixes utilitza l'element.
Compara les dues caixes amb les classes box1 i box2. Totes dues tenen definida la mateixa amplada (400px), però box1 és visualment més ampla. En la finestra de disseny pots veure que utilitza content-box. Aquest valor pren la mida que dones a l’element, i a continuació hi suma l’amplada de l'àrea de farciment i de les vores.
L’element amb una classe box2 fa servir border-box, de manera que aquí l’àrea de farciment i les vores es resten de la mida que has donat a l’element. Això significa que l'espai que ocupa la caixa en la pàgina és la mida exacta que has especificat, en el nostre cas: width: 400px.
Nota: Obtén més informació sobre com examinar i inspeccionar el model de caixes.
De vegades durant el desenvolupament, però en particular quan necessites editar el CSS en un lloc que ja està en actiu, et trobes amb problemes per aconseguir que s’apliquin algunes regles CSS. No importa què facis, l'element simplement sembla que no entén la regla CSS. El que acostuma a passar és que un selector més específic anul·la els teus canvis, i aquí les DevTools et poden ajudar molt.
En el nostre fitxer d’exemple hi ha dues paraules incloses en un element <em>. Una es mostra de color carabassa, i l’altra de color rosa brillant. Al CSS hi hem aplicat:
em {
color: hotpink;
font-weight: bold;
}
Per sobre de tot això, en el full d’estil hi ha una regla amb un selector .special:
.special {
color: orange;
}
Com recordaràs de l'article sobre la cascada i l’herència en què comentem l’especificitat, els selectors de classe són més específics que els selectors d’elements, així que aquest és el valor que s’aplica. Les DevTools et poden ajudar a trobar aquest tipus de problemes, sobretot si la informació està amagada en algun lloc d'un extens full d'estil.
Inspecciona l'element <em> amb la classe .special i DevTools et mostrarà que el color que s'aplica és orange, i la propietat color aplicada a l'em està ratllada. Aquí pots veure que el selector de classe supera el selector d’elements.
Hi ha molta informació sobre les DevTools de Firefox aquí a MDN. Dona una ullada a la secció principal de DevTools i consulta les Guies pràctiques per a obtenir més detalls sobre les qüestions que hem tractat breument en aquest article.
Les DevTools poden ser de gran ajuda a l’hora de resoldre problemes en CSS, de manera que, què has de fer quan et trobes en una situació en què el CSS no es comporta com esperes? Els passos següents t’haurien d’ajudar.
Qualsevol problema de codificació pot ser frustrant, sobretot els problemes amb el CSS, perquè sovint no reps cap missatge d’error que et permeti de cercar en línia per ajudar-te a trobar una solució. Si et sents frustrat, allunyat de la qüestió durant un temps: passeja, pren-te un refresc, parla amb un company de feina o treballa en una altra cosa durant un temps. De vegades la solució apareix màgicament quan deixes de pensar en el problema i, fins i tot si no arriba, resulta molt més fàcil treballar quan et sent fresc.
Els navegadors esperen que tant el teu CSS com el teu HTML estiguin escrits correctament, però els navegadors també són molt indulgents i fan tot el possible per mostrar les teves pàgines web, encara que hi hagi errors d'etiquetatge. Si hi ha errors en el codi, el navegador ha de suposar què vols dir, i pot ser que prengui una decisió diferent de la que tenies en ment. A més, dos navegadors diferents podrien fer front al problema de maneres diferents. Per tant, un bon primer pas és executar tant el codi HTML com el CSS amb un validador, per a descobrir qualsevol error i esmenar-lo.
Els navegadors simplement ignoren el CSS que no entenen. Si la propietat o el valor que utilitzes no és compatible amb el navegador amb què fas les proves, no es trencarà res, però no s’aplicarà el CSS. Les DevTools en general ressalten d’alguna manera les propietats i els valors que no són compatibles. En la captura de pantalla següent, el navegador no admet el subvalor {{cssxref("grid-template-columns")}}.
També pots donar una ullada a les taules de compatibilitat del navegador que hi ha a la part inferior de cada pàgina de propietat del projecte MDN. Et mostren la compatibilitat del navegador per a aquesta propietat, sovint desglossada si hi ha compatibilitat per a algun ús de la propietat però no d’altres. La taula següent mostra les dades de compatibilitat per a la propietat {{cssxref("shape-outside")}}.
{{compat("css.shape-outside")}}
Aquí és on la informació que has après sobre l’especificitat et resultarà molt útil. Si hi ha alguna regla que anul·la el que vols fer perquè té més especificitat, pots entrar en un joc molt frustrant per a intentar esbrinar què passa. Tanmateix, com es descriu més amunt, les DevTools et mostraran quin CSS s’aplica i podràs esbrinar com anul·lar-ho amb un nou selector que sigui prou específic.
Si el problema no es resol amb els passos anteriors, has d'investigar més. El millor que pots fer en aquest moment és crear una cosa que es coneix com a prova reduïda. Ser capaç de «reduir un problema» és una habilitat molt útil. T'ajuda a trobar problemes en el teu codi propi i en el dels teus companys, i també et permet informar d’errors i demanar ajuda de manera més efectiva.
Una prova reduïda és un exemple de codi que mostra el problema de la manera més senzilla possible, sense contingut ni estil. Això de vegades significa eliminar del teu disseny de pàgina web el codi problemàtic i fer-ne un petit exemple que només mostri aquest codi o aquesta funció.
Per a crear una prova reduïda:
En aquest procés podràs descobrir què causa el problema, o com a mínim el podràs activar i desactivar en eliminar-ne quelcom específic. Val la pena afegir alguns comentaris al codi a mesura que descobreixes coses. Si has de demanar ajuda, aquests comentaris mostraran a la persona que t'ajuda el que ja has provat. O també et pot acabar de donar prou informació per a poder cercar problemes i situacions semblants.
Si encara no trobes la solució del problema, tenir una prova reduïda et permet demanar ajuda, publicar-la en un fòrum o mostrar-la a un col·laborador. És molt més probable obtenir ajuda si mostres que abans de fer-ho t’has pres la feina de reduir el problema i esbrinar exactament on passa. Aleshores, un desenvolupador amb més experiència pot ser capaç de detectar el problema ràpidament i orientar-te en la direcció correcta; o, encara que no sigui així, la teva prova reduïda els permetrà de donar-hi una ullada ràpida i, potser, oferir-te una mica d'ajuda.
En el cas que el problema sigui un error en un navegador, la prova reduïda també es pot fer servir per a enviar un informe d’errors al proveïdor del navegador corresponent (per exemple, a la pàgina web bugzilla de Mozilla).
A mesura que adquireixis més experiència amb el CSS aprendràs a veure amb més facilitat on hi ha els problemes. Tanmateix, fins i tot els més experimentats de nosaltres ens trobem de vegades barrinant què dimonis passa aquí. Adoptar un enfocament metòdic, fer una prova reduïda i explicar el problema a algú són possibilitats que acostumen a donar un bon resultat a l'hora de trobar una solució.
{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}