MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Depuració CSS

There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.

This translation is incomplete. Please help translate this article from English.

{{LearnSidebar}}
{{PreviousMenuNext("Learn/CSS/Introduction_to_CSS/Box_model","Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension", "Learn/CSS/Introduction_to_CSS")}}

En l'article final d'aquest mòdul, fem una ullada als aspectes bàsics de la depuració de CSS, incloent l'exploració del CSS aplicat a una pàgina i altres eines que us poden ajudar a trobar errors al codi CSS.

Requisits previs: Coneixements bàsics d'informàtica, el programari bàsic instal.lat, coneixement bàsic del treball amb fitxers , els fonaments d'HTML (estudi d'Introducció a HTML), i una idea de com funciona CSS (estudiar els articles anteriors d'aquest mòdul).
Objectiu: Conèixer els conceptes bàsics de com es pot depurar CSS.

Igual que amb la depuració d'HTML, la depuració de CSS no és molt espantosa en comparació amb la depuració de molts altres tipus de codi. Us recomanem que llegiu sense por la depuració abans de continuar.

CSS i depuració

De la mateixa manera que HTML, CSS és permissiu (llegir codi permissiu abans de continuar). En el cas de CSS, si una declaració no és vàlida (conté un error de sintaxi o el navegador no admet aquesta característica), el navegador només ho ignora per complet i es mou al següent que troba.

Si un selector no és vàlid, no selecciona res, i tota la regla no fa res - de nou, el navegador simplement es mou a la següent regla.

Això és excel·lent de moltes maneres - en la majoria dels casos el vostre contingut es mostrarà als vostres usuaris, encara que no estigui ben dissenyat. Però això no és molt útil quan intenteu depurar el problema i ni tan sols s'obté cap tipus de missatge d'error per ajudar-vos a trobar-ho. Això és encara més dolorós, quan el contingut no és visible pels vostres usuaris - potser un estil crític no s'estigui aplicant, cosa que fa que el disseny no funcioni correctament?

Afortunadament, hi ha algunes eines disponibles per ajudar-vos. Vegem ara aquestes.

Inspecció del DOM i CSS

Actualment, tots els navegadors web proporcionen eines de desenvolupador que us ajudaran a inspeccionar i comprendre les pàgines web. Entre les diferents eines que proporcionen, hi ha dues que estan disponibles en tots els navegadors: l Inspector DOM i l'Editor de CSS, que estan disponibles a Firefox a l'eina d'inspector de pàgina. Ja hem examinat l'inspector DOM en la Depuració HTML i com es pot utilitzar per inspeccionar HTML. Aquí veurem això i l'editor de CSS, i com utilitzar-los junts per depurar problemes de CSS.

Nota: En el següent exemple, estem utilitzant Firefox, però tots els navegadors proporcionen el mateix tipus d'eines - és possible que estiguin disponibles en llocs lleugerament diferents. Llegiu Descobreix les eines de desenvolupadors del navegador per obtenir més informació sobre com accedir-hi en diferents navegadors.

En passar a aquest exemple, abans voldríem que obríssiu el nostre exemple de depuració de CSS en una nova pestanya del navegador. Si voleu treballar i solucionar els problemes de codi per crear una versió acabada de l'exemple, us aconsellem que feu una còpia dels fitxers HTML i CSS, i que implementeu les correccions localment.

Es tracta d'una pàgina web senzilla i clara, d'una columna, que conté un article senzill:

our example webpage with the problems fixed. The Firefox logo has been floated to the right, and the main heading and body text are now visible and well placed.

De moment, però, és una mica un embolic:

Our example webpage in a broken state. There is a heading of My article in the middle and a Firefox logo, but everything else is small and not easily visible.

Comencem a investigar la pàgina amb les funcions de l'inspector de pàgines. A Firefox, podeu obrir l'inspector de pàgines usant Cmd/Ctrl + I ( o triant Eines> Desenvolupador web> Inspector del menú), que us proporcionarà un conjunt d'eines obertes en una finestra a la part inferior del navegador, com aixó:

The Firefox page inspector, showing the DOM inspector on the left, and the CSS editor on the right. invalid CSS is crossed out and has a warning symbol

Si feu clic a un element dins de l'inspector DOM de l'esquerra, l'editor CSS de la dreta s'actualitzarà per mostrar totes les regles CSS aplicades a aquest element. Això és realment útil, especialment perquè hi ha propietats no vàlides que apareixen amb una línia a través d'elles i un petit símbol d'alerta al costat d'elles. Això serà molt útil a continuació.

A close up of the Firefox page inspector, showing the DOM inspector on the left, and the CSS editor on the right. invalid CSS is crossed out and has a warning symbol

Nota: Cada propietat té també una casella de verificació al costat d'ella, la qual pot ser activada/desactivada per habilitar/deshabilitar la propietat CSS mitjançant la propietat. Això també és molt útil per esbrinar què podria estar causant un error.

Aprenentatge actiu: trobar els errors!

Per tant, amb els fonaments bàsics de l'eina, intentem trobar els nostres errors. En cada cas, haureu d'intentar fer clic a l'element on es troba la falla, per veure quins aspectes del CSS s'aplicat.

  1. Els elements {{htmlelement("header")}} i {{htmlelement("footer")}} se suposa que tenen un color de fons, però no apareix cap color.
  2. El {{htmlelement("h1")}} i el {{htmlelement("p")}} dins del peu de pàgina estan massa alts a la pàgina: això és especialment evident en <h1>, que està gairebé fora de la pantalla! Podeu provar de fer clic en <h1> i desmarcar les declaracions aplicades per esbrinar quina causa el problema.
  3. Es suposa que {{htmlelement("img"}}} flota cap avall i a la dreta, per la qual cosa es troba a la dreta d'algun text, però no ho està: està directament sobre tot del text.
  4. El text en l'àrea de contingut {{htmlelement("main")}} és massa petit - els paràgrafs i els elements de la llista haurien de tenir una mida de font més gran, però no sembla haver-se aplicat a cap. Suggeriment: aquesta és una mica més difícil, ja que és un problema amb el selector en lloc d'una propietat. És possible que hàgiu d'estudiar el codi font per trobar-ho: podeu trobar-lo a l'Editor d'Estils a les eines de desenvolupador de Firefox.

Si esteu encallats, podeu consultar el codi font fixat a Github.

Validació CSS

Ja vam mirar el W3C HTML Validator, però també disposen d'un CSS Validator. Això funciona de la mateixa manera, permetent-vos validar CSS en un URL concret, mitjançant la càrrega de un fitxer local, o mitjançant l'entrada de CSS directa.

a visual of the CSS Validation Service mentioned and linked to nearby

Aprenentatge actiu: validar el nostre CSS

Proveu d'introduir el nostre CSS al validador per veure el que escup.

  1. Aneu al CSS Validation Service a la vista per Validació per entrada directa.
  2. Copieu el nostre CSS, ple d'errors, a l'àrea de text del servei de validació.
  3. Premeu el botó Check.

Ara se us mostrarà una llista d'errors. Només es retornen dos:

The validator results as they appear on the CSS validation service.

Aquest són missatges útils, especialment perquè inclouen els nombres de línia i el selector que està en acció en cada cas. Vegem com podem interpretar-los.

  • La propietat background-colour no existeix: teal - simple; Això ens està dient que una propietat no existeix, cosa que deixa clar què cal fer.
  • Error valor: float intenta trobar un punt i coma abans del nom de la propietat. Afegiu-lo - això ens indica que falta un punt i coma. Mirant el nombre de línia d'on està ocorrent això fa que sigui fàcil de trobar.

Podrieu argumentar que això és menys útil que les eines per a desenvolupadors de navegador - no et permet mirar el codi representat mentre fa referència al que està malament, i no serveix per trobar instàncies en les quals el selector és incorrecte o la sintaxi és correcte i heu triat simplement un valor incorrecte per al vostre disseny. Però diríem que per a una gran fulla d'estil, val la pena executar-ho a través d'aquest servei, primer per desfer-se de qualsevol error de sintaxi bàsic, abans de confiar en les eines del desenvolupador del navegador per identificar altres problemes.

Nota CSS Lint és una eina similar per validar CSS i descobrir errors, que també pot presentar alguns consells útils i donar advertències interessants.

Resum

Ben fet per completar l'últim article del primer mòdul CSS! Ara que heu arribat tan lluny, podeu fer un seguiment per completar la nostra avaluació CSS, i començar a explorar altres mòduls CSS i HTML

{{PreviousMenuNext("Learn/CSS/Introduction_to_CSS/Box_model","Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension", "Learn/CSS/Introduction_to_CSS")}}

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,