Imatges, media i elements de formulari

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

En aquest articles analitzarem com es tracten certs elements especials en CSS. Les imatges, altres medis i els elements de formulari es comporten una mica diferent pel que fa a la possibilitat de disseyar-los amb CSS en contraposició a les caixes. Entendre què és i què no és possible que ens estalviarà una mica de frustració, i en aquest articles es destacaran alguns dels conceptes principals que cal conèixer.

Prerequisits: Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i una idea de com funciona el CSS (mira Primers passos amb CSS).
Objectiu: Comprendre la manera inusual de comportar-se d'alguns elements quan es dissenyen amb CSS.

Elements de reemplaç

Les imatges i els vídeos es descriuen com a elements de reemplaç. Això significa que el CSS no pot afectar la disposició interna d'aquests elements, sinó la seva posició a la pàgina entre altres elements. Com veurem, però, hi ha diverses coses que el CSS pot fer amb una imatge.

També es descriuen certs elements de reemplaçament que, com les imatges i vídeos, presenten una relació d'aspecte. Això vol dir que tenen una mida tant en la dimensió horitzontal (x) com en la vertical (y), i es mostrarà de manera predeterminada amb les dimensions intrínseques del fitxer.

Dimensionar les imatges

Com ja saps d'aquests articles, tot en CSS genera una caixa. Si col·loques una imatge dins d’una caixa més petita o més gran que les dimensions intrínseques del fitxer d’imatges en qualsevol direcció, apareixerà més petita que la caixa o bé es desbordarà. Has de prendre una decisió sobre què passa amb el desbordament.

A l'exemple següent tenim dues caixes, ambdues de 200 píxels:

  • Una conté una imatge inferior a 200 píxels: és més petita que la caixa i no s’estén per omplir-la.
  • L'altra és més gran de 200 píxels i desborda la caixa.

Què podem fer, doncs, amb el problema del desbordament?

Com vam veure a l'article anterior, una tècnica habitual és fer que l'amplada d'una imatge sigui 100%. Això permetrà que la imatge sigui més petita que la caixa, però no més gran. Aquesta tècnica funcionarà amb altres elements de reemplaç com ara <video> o <iframe>.

Intenta afegir max-width: 100% a l'element <img> de l'exemple anterior. Veuràs que la imatge més petita es manté inalterada, però la més gran es fa més petita per encaixar a la caixa.

Pot prendre altres decisions sobre les imatges dins dels contenidors. Per exemple, pot ser que vulguis dimensionar una imatge perquè ompli completament una caixa.

La propietat object-fit et pot ajudar. Quan s'utilitza object-fit, l'element de reemplaç es pot dimensionar per adaptar-se a una caixa de diverses maneres.

A continuació, hem utilitzat el valor cover, que disminueix la mida de la imatge, mantenint la relació d’aspecte de manera que omple la caixa perfectament. Com que es manté la relació d’aspecte, la caixa talla algunes parts de la imatge.

Si fem servir el valor contain, la imatge es reduirà fins que sigui prou petita com per adaptar-se a la caixa. Això pot donar lloc a un format panoràmic si la imatge no presenta la mateixa relació d'aspecte que la caixa.

També pots provar el valor fill, que omplirà la caixa però no mantindrà la relació d’aspecte.

Elements de reemplaç a la compaginació

A mesura que vagis fent servir diverses tècniques de disseny CSS en elements de reemplaç, és possible que trobis que es comporten lleugerament diferent d'altres elements. Per exemple, en un disseny flexible o de quadrícula, els elements s’estenen per defecte per omplir tota l’àrea. Les imatges no s’estiraran i, en canvi, s’alinearan amb l’inici de l’àrea de la quadrícula o del contenidor flexible.

Pots veure com això suceeix en l'exemple següent, en què hi ha un contenidor amb dues columnes i dues files, que té quatre elements. Tots els elements <div> tenen un color de fons i s’estiren per omplir la fila i la columna. La imatge, però, no s’estira.

Si has seguit aquests articles en ordre, potser encara no has arribat a la compaginació. Tingues en compte que els elements de reemplaç, quan passen a formar part d'una quadrícula o d'un disseny flexible, tenen comportaments predeterminats diferents, essencialment per evitar que s'estirin de forma estranya.

Per forçar que la imatge s'expandeixi per omplir la cel·la de la quadrícula en la qual es troba, hauràs de fer això:

img {
  width: 100%;
  height: 100%;
}

Tot i així, això deformaria la imatge, així que probablement no és el que busques.

Els elements de formulari

Els elements de formulari poden ser un problema a l’hora de dissenyar amb CSS, i l'article sobre formularis web conté guies detallades sobre els aspectes més complicats relatius a aquest tema, que no reproduirem completament en aquest article. Hi ha alguns elements bàsics que cal destacar en aquesta secció.

Molts controls de formulari s'afegeixen a través de l’element <input>; això defineix camps des de formulari senzills com ara les entrades de text, fins a camps més complexos afegits a l'HTML5 com ara els selectors de color i de dates. Hi ha alguns elements addicionals, com <textarea> per a l'entrada de text multilínia, i també elements que s'utilitzen per contenir i etiquetar parts de formularis com <fieldset> i <legend>.

L'HTML5 també inclou atributs que permeten als desenvolupadors web indicar quins camps són obligatòris i fins i tot el tipus de contingut que cal introduir. Si l’usuari introdueix alguna cosa inesperada o deixa un camp obligatori en blanc, el navegador pot mostrar un missatge d’error. Els diversos navegadors no presenten cap estil coherent ni cap homogeneïtzació pel que fa a la personalització que permeten per a aquests elements.

Aplicar estil a elements d'entrada de text

Els elements que permeten la introducció de text, com <input type="text">, alguns tipus específics com <input type="email"> i l'element <textarea> són força fàcils de dissenyar i tendeixen a comportar-se igual que altres caixes a la teva pàgina web. L'estil predeterminat d'aquests elements variarà en funció del sistema operatiu i del navegador amb què l'usuari visiti el lloc web.

A l'exemple següent hem dissenyat algunes entrades de text mitjançant CSS; pots veure que coses com ara les vores, els marges i l'àrea de farciment s'apliquen tal com s'esperaria. Utilitzem selectors d’atribut per orientar els diferents tipus d’entrada. Prova de canviar com es veu aquest formulari ajustant les vores, afegint colors de fons als camps i canviant el tipus de lletra i l'àrea de farciment.

Important: Has de tenir cura quan canvies l'estil dels elements del formulari per assegurar-te que encara és evident per a l'usuari que són elements de formulari. Pots crear una entrada de formulari sense vores i un fons que gairebé no es distingeix del contingut que l’envolta, això faria que fos molt difícil de reconèixer i omplir.

Tal com s’explica a les lliçons sobre el disseny de formularis de la part HTML d’aquest curs, el sistema operatiu presenta molts dels tipus d'entrada més complexos i són inaccessibles per al disseny. Per tant, sempre has d’assumir que els formularis es veuran ben diferents per als diferents visitants i hauràs de provar els formularis complexos en diversos navegadors.

Elements de formulari i l'herència

En alguns navegadors, els elements de formulari no hereten l'estil de lletra per defecte. Per tant, si vols estar segur que els teus camps de formulari utilitzen el tipus de lletra definit al cos o en un element pare, hauràs d’afegir aquesta regla al teu CSS.

button, 
input, 
select, 
textarea { 
  font-family : inherit; 
  font-size : 100%; 
} 

Elements de forma i dimensionament de caixa

Els elements de formulari dels navegadors utilitzen regles diferents pel dimensionament de caixes per a diferents ginys de formulari. Al nostre article sobre el model de caixa has conegut la propietat box-sizing, has obtingut informació sobre la propietat que es fa servir per dimensionar les caixes i pots fer servir aquests coneixements a l’hora de dissenyar formularis per garantir una experiència constant a l’hora d’establir les amplades i les alçades dels elements de formulari.

Per obtenir coherència, és una bona idea establir els marges i l'àrea de farciment a 0 en tots els elements, i després afegir-los a l’hora de dissenyar controls concrets.

button, 
input, 
select, 
textarea {  
  box-sizing: border-box; 
  padding: 0;
  margin: 0; 
}

Altres paràmetres útils

A més de les regles esmentades anteriorment, també hauries de configurar overflow: auto a <textarea> per evitar que Internet Explorer mostri una barra de desplaçament quan no faci falta:

textarea {
  overflow: auto;
}

Combinar-ho tot amb «Reiniciar»

Com a últim pas, podem agrupar les diverses propietats comentades anteriorment en el següent «reiniciar el formulari» per proporcionar una base consistent sobre la qual treballar. Això inclou tots els elements esmentats en les últimes tres seccions:

button, 
input, 
select, 
textarea { 
  font-family: inherit; 
  font-size: 100%; 
  box-sizing: border-box; 
  padding: 0; margin: 0; 
} 

textarea { 
  overflow: auto; 
} 

Nota: Molts desenvolupadors utilitzen fulls d'estils de normalització per crear un conjunt d'estils de referència per utilitzar-los en tots els projectes. Normalment, aquests fulls d'estil fan coses semblants a les descrites anteriorment, per assegurar-se que qualsevol cosa que pugui ser diferent en diversos navegadors està configurada de manera predeterminada abans de fer el teu propi treball amb CSS. No són tan importants com abans, ja que els navegadors solen ser més coherents que en el passat. Tanmateix, si vols fer un cop d’ull a un exemple, mira Normalize.css, que és un full d’estil molt popular utilitzat com a base per molts projectes.

Per obtenir més informació sobre com aplicar disseny als formularis, fes un cop d’ull als dos articles de la secció HTML d’aquestes guies.

Resum

Aquest article ha destacat algunes de les diferències que trobaràs quan treballis amb imatges, media i altres elements poc habituals en CSS. En el següent article examinarem alguns consells que trobaràs útils quan hagis de dissenyar taules HTML.

En aquest mòdul

  1. La cascada i l'herència
  2. Selectors CSS
  3. El model de caixa
  4. Fons i vores
  5. El maneig de diferents direccions de text
  6. El contingut que es desborda
  7. Els valors i les unitats
  8. Dimensionar elements en CSS
  9. Imatges, media i elements de formulari
  10. Donar estil a les taules
  11. Depurar el CSS
  12. Organitzar el CSS