Imatges, media i elements de formulari

En aquest article analitzarem com es tracten certs elements especials en CSS. Les imatges, altres media i els elements de formulari es comporten una mica diferent que les caixes pel que fa a la possibilitat d’aplicar-los disseny amb CSS. Entendre què és possible i què no ens estalviarà unes quantes frustracions, i en aquest article destacarem alguns dels conceptes principals que has de conèixer.

Prerequisits: Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu: Comprendre el comportament inusual d'alguns elements quan se’ls aplica disseny amb CSS.

Elements de recol·locació

Les imatges i els vídeos es descriuen com elements de recol·locació. Això significa que no es pot actuar sobre el disseny intern d'aquests elements amb CSS, sinó només sobre la seva posició en la pàgina web entre la resta d’elements. Com veurem, però, hi ha diverses coses que el CSS pot fer amb una imatge.

Alguns elements de recol·locació, com ara les imatges i els vídeos, també presenten una relació d'aspecte. Això vol dir que tenen una mida tant en la dimensió horitzontal (x) com en la vertical (y), i de manera predeterminada es mostren amb les dimensions intrínseques del fitxer.

Les mides de les imatges

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

En l'exemple següent hi ha dues caixes, totes dues de 200 píxels:

  • Una conté una imatge més petita de 200 píxels: és més petita que la caixa i no l’ocupa tota per a omplir-la.
  • L'altra és més gran de 200 píxels i desborda més enllà dels límits de la caixa.

Què podem fer amb el problema del desbordament?

Com hem vist en l'article anterior, una tècnica habitual és assignar a la propietat max-width de la imatge una amplada del 100%. Això permet fer la imatge més petita que la caixa, però no més gran. Aquesta tècnica funciona amb altres elements de recol·locació com ara <video> o <iframe>.

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

Pots prendre altres decisions sobre el comportament de les imatges dins dels contenidors. Per exemple, pots voler donar a una imatge una mida perquè ompli completament una caixa.

La propietat object-fit et pot ajudar amb això. La propietat object-fit et permet donar a l'element de recol·locació la mida adequada per adaptar-se a una caixa de diverses maneres.

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

Si fem servir el valor contain, la imatge es redueix fins que és prou petita 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 omple la caixa però no manté la relació d’aspecte.

Elements de recol·locació en el disseny de pàgines web

A mesura que vagis fent servir diverses tècniques de disseny de pàgines web amb CSS en elements de reemplaçament, és possible que t’adonis que es comporten una mica diferent d'altres elements. Per exemple, els elements d’un disseny de pàgina flexible o de graella per defecte ocupen tota l’àrea. Les imatges, en canvi, no s’estiren, sinó que s’alineen amb l’inici de l’àrea de la graella o del contenidor flexible.

Observa que això passa en l'exemple següent, en què hi ha un contenidor amb dues columnes i dues files, que inclou quatre elements. Tots els elements <div> tenen un color de fons i s’estiren fins que ocupen tota la fila i la columna. Però la imatge no s’estira.

Si has seguit aquests articles en ordre, potser encara no has arribat a al disseny de pàgina web. Aleshores, senzillament tingues en compte que els elements de recol·locació tenen comportaments predeterminats diferents quan passen a formar part d'un disseny en graella o d'un disseny flexible, essencialment per a evitar que el disseny de pàgina web els deformi de manera estranya.

Pots aconseguir que la imatge ocupi tot l’espai de la cel·la de la quadrícula en què es troba, si fas això:

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

Però això deformaria també la imatge, de manera que probablement no és el que busques.

Els elements de formulari

Els elements de formulari poden ser un problema a l’hora de fer un disseny de pàgina web 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. Tanmateix, en aquesta secció val la pena que destaquem uns quants elements bàsics.

Molts controls de formulari s'afegeixen amb l’element <input>; això defineix des de camps de formulari senzills, com ara entrades de text, fins a camps més complexos que s’han afegit en l'HTML5 com ara els selectors de color i de dates. I encara hi ha altres elements, com ara <textarea>, per a entrades de text multilínia, i elements que s'utilitzen per a 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 obligatoris, 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 coherència ni homogeneïtzació pel que fa a l’estil que apliquen a aquests elements.

Aplicar estil a elements d'entrada de text

Resulta força fàcil aplica estil als elements que permeten l’entrada de text, com <input type="text">, alguns tipus específics, com <input type="email">, i l'element <textarea>, i tendeixen a comportar-se igual que les altres caixes de la teva pàgina web. L'estil predeterminat d'aquests elements varia segons del sistema operatiu i el navegador amb què l'usuari visita el lloc web.

En l'exemple següent hem aplicar estil a algunes entrades de text amb CSS; observa que alguns elements com ara les vores, els marges i l'àrea de farciment s'apliquen tal com s'esperaria. Utilitzem selectors d’atribut per a seleccionar els diferents tipus d’entrada. Ajusta les vores, afegeix colors de fons als camps i canvia el tipus de lletra i l'àrea de farciment; prova de canviar la manera com es veu aquest formulari.

Important: Quan canvies l'estil dels elements de formulari t’has d’assegurar-te que a l'usuari encara li resulta evident que són elements de formulari. Podries crear una entrada de formulari sense vores i amb un fons que gairebé no es distingís del contingut que l’envolta, que potser seria difícil de reconèixer per a emplenar-la.

Tal com s’explica en els articles sobre l’aplicació d’estil a formularis de la part d’HTML d’aquest curs, molts dels tipus d'entrada més complexos els proporciona el sistema operatiu i no és possible aplicar-los disseny. Per tant, has d’assumir que els diferents visitants sempre veuran els formularis ben diferents, i hauràs de provar els formularis complexos en diversos navegadors.

Elements de formulari i 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 en el cos (body) de l’HTML o en un element pare, has d’afegir al teu CSS aquesta regla:

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

Elements de formulari i mida de les caixes

En els diversos navegadors els elements de formulari utilitzen regles diferents per a assignar les mides de les caixes per a diferents controls de formulari. En el nostre article sobre el model de caixes has après com assignar una mida a les caixes amb la propietat box-sizing i pots fer servir aquests coneixements a l’hora d’aplicar disseny als formularis per a garantir una experiència coherent a l’hora d’establir les amplades i les alçades dels elements d’un formulari.

Una bona idea per a obtenir una experiència d’usuari coherent és establir els marges i l'àrea de farciment a 0 per a tots els elements i afegir-los després en aplicar un disseny concret a cada control.

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

Altres paràmetres útils

A més de les regles que hem esmentat, 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;
}

Posar-ho tot «a zero»

Com a últim pas, podem agrupar les diverses propietats que hem comentat en el «formulari base» següent, que proporciona una base coherent sobre la qual treballar. Això inclou tots els elements que hem esmentat 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'estil de normalització, que creen un conjunt d'estils de referència que utilitzen en tots els projectes. Normalment, aquests fulls d'estil fan coses semblants a les que acabem de descriure i garanteixen que qualsevol cosa que en navegadors diferents pugui ser diferent està configurada de manera predeterminada abans de fer la teva feina amb el CSS. Ara aquests fulls d’estil de normalització no són tan importants com abans, perquè els navegadors acostuma a presentar visualitzacions més coherents que en el passat. Tanmateix, si vols fer un cop d’ull a un exemple, ves a Normalize.css, que és un full d’estil molt popular que s’ha utilitzat com a base per molts projectes.

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

Resum

En aquest article s’han destacat algunes de les diferències amb què et trobaràs quan treballis amb imatges, media i altres elements poc habituals en CSS. En l’article següent examinarem alguns consells que et seran d’utilitat quan hagis de dissenyar taules HTML.

En aquest mòdul

  1. La cascada i l'herència
  2. Els selectors CSS
  3. El model de caixes
  4. Fons i vores
  5. El tractament del text en diverses direccions
  6. El desbordament dels continguts
  7. Els valors i les unitats
  8. Dimensionar elements amb el CSS
  9. Imatges, media i elements de formulari
  10. Aplicar estil a les taules
  11. Depura el teu CSS
  12. Organitza el teu CSS