From cb9e359a51c3249d8f5157db69d43fd413ddeda6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:12 +0100 Subject: unslug ca: move --- files/ca/learn/css/css_layout/flexbox/index.html | 330 ++++++++++ files/ca/learn/css/css_layout/floats/index.html | 516 +++++++++++++++ files/ca/learn/css/css_layout/grids/index.html | 699 ++++++++++++++++++++ files/ca/learn/css/css_layout/index.html | 66 ++ .../learn/css/css_layout/introduction/index.html | 700 +++++++++++++++++++++ .../ca/learn/css/css_layout/normal_flow/index.html | 95 +++ .../ca/learn/css/css_layout/positioning/index.html | 467 ++++++++++++++ .../practical_positioning_examples/index.html | 404 ++++++++++++ .../css/css_layout/responsive_design/index.html | 324 ++++++++++ .../supporting_older_browsers/index.html | 237 +++++++ 10 files changed, 3838 insertions(+) create mode 100644 files/ca/learn/css/css_layout/flexbox/index.html create mode 100644 files/ca/learn/css/css_layout/floats/index.html create mode 100644 files/ca/learn/css/css_layout/grids/index.html create mode 100644 files/ca/learn/css/css_layout/index.html create mode 100644 files/ca/learn/css/css_layout/introduction/index.html create mode 100644 files/ca/learn/css/css_layout/normal_flow/index.html create mode 100644 files/ca/learn/css/css_layout/positioning/index.html create mode 100644 files/ca/learn/css/css_layout/practical_positioning_examples/index.html create mode 100644 files/ca/learn/css/css_layout/responsive_design/index.html create mode 100644 files/ca/learn/css/css_layout/supporting_older_browsers/index.html (limited to 'files/ca/learn/css/css_layout') diff --git a/files/ca/learn/css/css_layout/flexbox/index.html b/files/ca/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..37f31f619b --- /dev/null +++ b/files/ca/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,330 @@ +--- +title: Flexbox +slug: Learn/CSS/Disseny_CSS/Flexbox +tags: + - Article + - Beginner + - CSS + - CSS layouts + - CodingScripting + - Flexible Boxes + - Guide + - Layout + - Layouts + - Learn + - flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
+ +

Flexbox és un mètode de disseny de pàgina web unidimensional que distribueix els elements de la pàgina web en files o en columnes. Els elements són «flexibles» i omplen tot l’espai de més o s’encongeixen per caber en espais més petits. Aquest article n’explica els fonaments.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a l’HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Aprendre a utilitzar el sistema de disseny de pàgines web Flexbox.
+ +

Per què Flexbox?

+ +

Durant molt de temps, les úniques eines fiables compatibles amb els navegadors, disponibles per crear dissenys de pàgina web amb CSS eren mètodes com ara els elements flotants (floats) i el posicionament. Estan bé i funcionen, però d'alguna manera també són més limitats i frustrants.

+ +

Uns requisits senzills de disseny de pàgina web com els que enumerem a continuació són difícils o impossibles d'aconseguir amb aquestes eines d’una manera còmoda i flexible:

+ + + +

Com veureu en les properes seccions, Flexbox facilita moltes tasques de disseny de pàgina web. Aprofundim-hi!

+ +

Un exemple senzill

+ +

En aquest article, et farem treballar en un seguit d'exercicis que t’ajudaran a entendre com funciona Flexbox. Per començar, fes una còpia local del primer fitxer d'inici, flexbox0.html, que trobaràs en el nostre repositori de GitHub; carrega’l en un navegador modern (com Firefox o Chrome) i consulta’n el codi en el teu editor. També ho pots veure en viu aquí.

+ +

Observa que hi ha un element {{htmlelement("header")}} amb un títol d’encapçalament de nivell superior i un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. Els farem servir per a crear un disseny de tres columnes força habitual.

+ +

+ +

Especificar els elements flexbox

+ +

Per començar hem de decidir quins elements volem configurar perquè es comportin com caixes flexibles. Per tal de fer-ho, establim un valor especial de {{cssxref("display")}} en l'element pare dels elements als quals afectarà. En aquest cas, volem que siguin els elements {{htmlelement("article")}}, per la qual cosa ho configurem en l’element {{htmlelement("section")}}:

+ +
section {
+  display: flex;
+}
+ +

Això fa que l'element <section> esdevingui un contenidor flexible i els seus fills ítems flexibles. El resultat d'això hauria de presentar un aspecte semblant a això:

+ +

+ +

Per tant, aquesta declaració única, ens dona tot el que necessitem; increïble, oi? Tenim el nostre disseny de pàgina de columna múltiple amb columnes de la mateixa mida, i que tenen la mateixa alçada. Això és perquè els valors predeterminats que s’han donat als elements flex (els fills del contenidor flex) estan dissenyats per a resoldre problemes comuns com aquest.

+ +

Per deixar-ho clar, reiterem el que passa aquí. L’element al qual hem donat un valor de {{cssxref("display")}} de flex actua com un element de nivell de bloc en termes de com interactua amb la resta de la pàgina, però els seus fills es presenten com a elements flexibles. La següent secció explicarà amb més detall què significa això. Fixeu-vos també que podeu utilitzar un valor de display d'inline-flex si voleu disposar els fills d'un element com a elements flexibles, però que aquest element es comporti com un element en línia.

+ +

El model flex

+ +

Els elements que es disposen com caixes flexibles, es distribueixen al llarg de dos eixos:

+ +

flex_terms.png

+ + + +

Tingues present aquesta terminologia a mesura que avances en les seccions. Sempre pots tornar enrere si en algun moment l’ús d’aquests termes et genera confusions.

+ +

Columnes o files?

+ +

Flexbox proporciona una propietat anomenada {{cssxref("flex-direction")}}, que especifica en quina direcció discorre l'eix principal (en quina direcció es disposen les caixes flexibles fill); per defecte, està definida en row, que fa que els elements flexibles es disposin en una fila en la direcció de l'idioma predeterminat amb què funciona el teu navegador (d'esquerra a dreta, en el cas d'un navegador en català).

+ +

Prova d'afegir a la teva regla <section> la declaració següent:

+ +
flex-direction: column;
+ +

Observa que això posa de nou els elements en una disposició en columna, igual que estaven abans d’afegir-hi el CSS. Abans de continuar, elimina aquesta declaració del teu exemple.

+ +
+

Nota: També pots disposar elements flexibles en direcció inversa amb els valors row-reverse i column-reverse. Experimenta també amb aquests valors.

+
+ +

Ajust

+ +

Un problema que sorgeix quan tens un disseny de pàgina amb una amplada o una alçada fixa és que els fills de l’element flexbox poden desbordar el contenidor i trencar el disseny de la pàgina. Fes un cop d'ull al nostre exemple flexbox-wrap0.html i mira’l en directe (fes primer una còpia local d'aquest fitxer, si vols seguir amb aquest exemple):

+ +

+ +

Aquí observem que els fills desborden el contenidor. Una manera de solucionar això és afegir a la teva regla <section> la declaració següent:

+ +
flex-wrap: wrap;
+ +

Afegeix també la declaració següent a la teva regla <article>

+ +
flex: 200px;
+ +

Ara prova-ho; observa que el disseny es veu força més bé ara que hi has inclòs això:

+ +

Ara hi ha diverses files, i a cada fila hi ha tantes elements fill flexbox com és raonable que hi hagi, i si hi ha cap desbordament, es genera una altra línia. La declaració flex: 200px que hem establer per als elements <article> significa que cada article tindrà com a mínim una amplada de 200px; més endavant parlarem d'aquesta propietat amb més detall. També pots observar que els últims fills de l'última fila s’han fet més amples, de manera que la fila està igualment tota plena.

+ +

Però encara hi podem fer més. Primer de tot, prova de canviar el valor de la propietat {{cssxref("flex-direction")}} a row-reverse; observa que encara tens el disseny de files múltiples, però ara comença des de la cantonada oposada de la finestra del navegador i flueix en sentit invers.

+ +

La propietat flex-flow abreujada

+ +

En aquest punt, val la pena observar que hi ha una propietat abreujada per a {{cssxref("flex-direction")}} i {{cssxref("flex-wrap")}}, que és: {{cssxref("flex-flow")}}. Per exemple, pots substituir:

+ +
flex-direction: row;
+flex-wrap: wrap;
+ +

per

+ +
flex-flow: row wrap;
+ +

Dimensió flexible dels elements flexibles

+ +

Tornem ara al nostre primer exemple i observem com podem controlar quina proporció d'espai poden ocupar els elements flexibles. Fes servir la teva còpia local de flexbox0.html, o fes una còpia de flexbox1.html com a punt de partida nou (també el pots veure en viu).

+ +

Primer, afegeix la regla següent al final del teu CSS:

+ +
article {
+  flex: 1;
+}
+ +

Es tracta d'un valor de proporció sense unitat que determina quina quantitat de l'espai disponible al llarg de l'eix principal ocupa cada element flexible. En aquest cas donem a cada element {{htmlelement("article")}} un valor de 1, que significa que tots ocuparan una quantitat igual de l'espai que sobri després que s'hagin establert elements com ara l’àrea de farciment i el marge. És una proporció, que significa que donar a cada element flexible un valor de 400.000 tindria exactament el mateix efecte.

+ +

A continuació, afegeix la regla següent a sota de l'anterior:

+ +
article:nth-of-type(3) {
+  flex: 2;
+}
+ +

Aleshores, actualitza. Observa que el tercer element {{htmlelement("article")}} ocupa el doble de l'amplada disponible que els altres dos; perquè ara hi ha en total quatre unitats proporcionals disponibles. Els dos primers elements flexibles en tenen una cadascun, i prenen 1/4 de l'espai disponible cadascun. El tercer té dues unitats, de manera que ocupa 2/4 de l'espai disponible (o el que és el mateix, la meitat).

+ +

També pots especificar un valor de mida mínima per al valor flex. Actualitza les teves regles per als elements <article>, així:

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}
+ +

Això bàsicament estableix que «Es dona a cada element flexible primer 200px de l'espai disponible. A continuació, la resta de l'espai disponible es reparteix segons les unitats de proporció». Actualitza i observa com es reparteix l'espai ara.

+ +

+ +

El valor real de flexbox es pot apreciar en la flexibilitat / capacitat de resposta; si canvies la mida de la finestra del navegador o afegeixes un altre element {{htmlelement("article")}}, el disseny de pàgina encara funciona.

+ +

Propietat flex abreujada o no abreujada

+ +

{{Cssxref("flex")}} és una propietat de abreujada que pot especificar fins a tres valors diferents:

+ + + +

Recomanem evitar l'ús de les propietats flex no abreujades, si no és que t’és realment necessari (per exemple, perquè has de substituir alguna configuració anterior). Comporta escriure una gran quantitat de codi addicional, i pot acabar sent una mica confús.

+ +

Alineació horitzontal i vertical

+ +

També pots utilitzar funcions flexbox per a alinear elements flexibles al llarg dels eixos principals o transversals. Ho expliquem amb un nou exemple, flex-align0.html (també el pots veure en viu), que convertirem en una bonica barra d'eines/botons flexible. De moment, observa aquesta barra de menú horitzontal amb alguns botons agrupats a la cantonada superior esquerra.

+ +

+ +

Primer, fes una còpia local d'aquest exemple.

+ +

A continuació, afegeix a la part inferior del CSS de l'exemple el codi següent:

+ +
div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Actualitza la pàgina i observa que els botons estan ben centrats, horitzontalment i verticalment. Ho hem fet amb dues propietats noves.

+ +

El control {{cssxref("align-items")}} disposa els elements flexibles sobre l'eix transversal.

+ + + +

Pots anul·lar el comportament {{cssxref("align-items")}} per a elements flexibles individuals amb la propietat {{cssxref("align-self")}}. Per exemple, afegeix al teu CSS el codi el següent:

+ +
button:first-child {
+  align-self: flex-end;
+}
+ +

Dona un cop d'ull a l'efecte que hi produeix i retira de nou aquest codi quan hagis acabat.

+ +

La propietat {{cssxref("justify-content")}} controla on s’ubiquen els elements flexibles sobre l'eix principal.

+ + + +

T’animem a jugar amb aquests valors i veure com funcionen abans de continuar.

+ +

Ordena els elements flexibles

+ +

Flexbox també té una característica que canvia l'ordre de disposició dels elements flexibles sense afectar l'ordre d'origen. Aquesta és una altra característica que és impossible de fer amb els mètodes tradicionals de disseny de pàgines web.

+ +

El codi per a això és senzill: afegeix al codi d'exemple de la barra de botons el codi CSS següent:

+ +
button:first-child {
+  order: 1;
+}
+ +

Actualitza, i observa que ara el botó «Smile» s'ha mogut al final de l'eix principal. Parlarem de com això funciona amb una mica més detall:

+ + + +

Pots establir valors d'ordre negatius i fer que els elements apareguin abans que els elements amb un ordre 0. Per exemple, pots fer que el botó «Blush» aparegui al principi de l'eix principal amb la següent regla:

+ +
button:last-child {
+  order: -1;
+}
+ +

Caixes flexibles imbricades

+ +

Amb flexbox és possible crear dissenys força complexos. És del tot correcte establir que un element flexible sigui també un contenidor flexible, de manera que els elements fills també es disposin com caixes flexibles. Dona un cop d'ull a complex-flexbox.html (o també el pots veure en viu).

+ +

+ +

L'HTML d’això és força senzill. Hi ha un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. El tercer element {{htmlelement("article")}} conté tres elements {{htmlelement("div")}}:

+ +
section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button
+ +

Observa el codi que hem utilitzat per al disseny.

+ +

En primer lloc, establim que els fills de {{htmlelement("section")}} es disposin com caixes flexibles.

+ +
section {
+  display: flex;
+}
+ +

A continuació, establim alguns valors flex en els propis elements {{htmlelement("article")}}. Aquí cal tenir en compte la 2a regla; configurem el tercer element {{htmlelement("article")}} de manera que els seus elements fills es disposin també com elements flexibles, però aquesta vegada en columna.

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+
+ +

A continuació, seleccionem el primer element {{htmlelement("div")}}. Utilitzem la declaració flex: 1 100px; perquè hi doni efectivament una alçada mínima de 100px, aleshores en configurem els elements fills (els elements {{htmlelement("button")}}) perquè també siguin elements flexibles. Els distribuïm en fila perquè ocupin tot l’espai amb la propietat wrap i els alineem al centre de l'espai disponible, com hem fet en l'exemple del botó individual que hem vist abans.

+ +
article:nth-of-type(3) div:first-child {
+  flex: 1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Finalment, establim les dimensions del botó, però la qüestió interessant és que hi donem un valor de flex de 1. Això té un efecte molt interessant, que pots observar si canvies la mida de l'amplada de la finestra del navegador. Els botons ocuparan tant d’espai com puguin i es disposaran sobre la mateixa línia tant com sigui possible, però quan ja no càpiguen amb comoditat a la mateixa línia, cauran a la línia següent.

+ +
button {
+  flex: 1;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}
+ +

Compatibilitat amb altres navegadors

+ +

Flexbox és compatible amb la majoria de navegadors nous: Firefox, Chrome, Opera, Microsoft Edge i IE 11, i les versions més noves d'Android/iOS, etc. No obstant això, cal tenir en compte que encara hi ha navegadors antics en ús que no admeten Flexbox (o bé n’admeten una versió antiga i desactualitzada).

+ +

Mentre ets en procés d’aprendre i experimentar, això no importa gaire; però si consideres l'ús de flexbox en un lloc web real, has de fer proves i assegurar-te que la teva experiència d'usuari continua sent acceptable en el màxim nombre de navegadors possible.

+ +

Flexbox és una mica més complicat que altres característiques CSS. Per exemple, si un navegador no té ombres CSS, probablement el lloc web serà encara usable. En canvi, la no-compatibilitat amb les característiques de flexbox probablement trencarà del tot el disseny i inutilitzarà el lloc web.

+ +

En un altre mòdul parlarem de les estratègies per a superar els complexos problemes de compatibilitat dels navegadors.

+ +

Posa a prova les teves habilitats

+ +

Hem vist moltes coses en aquest article. En recordes la informació més important? Trobaràs més tests per poder comprovar si has retingut la informació abans de seguir a Test your skills: Flexbox.

+ +

Resum

+ +

Això clou el nostre recorregut pels fonaments de flexbox. Esperem que t’hagis divertit i que sàpigues jugar-hi mentre continues endavant amb el teu aprenentatge. A continuació, veurem un altre aspecte important dels dissenys CSS, els sistemes de graella.

+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
diff --git a/files/ca/learn/css/css_layout/floats/index.html b/files/ca/learn/css/css_layout/floats/index.html new file mode 100644 index 0000000000..25d2fe01a6 --- /dev/null +++ b/files/ca/learn/css/css_layout/floats/index.html @@ -0,0 +1,516 @@ +--- +title: Flotadors (Floats) +slug: Learn/CSS/Disseny_CSS/Flotadors +tags: + - Article + - Beginner + - CSS + - Clearing + - CodingScripting + - Floats + - Guide + - Layout + - columns + - multi-column +translation_of: Learn/CSS/CSS_layout/Floats +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
+ +

Originalment pensada per a flotar imatges dins de blocs de text, la propietat {{cssxref("float")}} va esdevenir una de les eines més utilitzades per a crear dissenys multicolumna a les pàgines web. Amb l'arribada de Flexbox i Grid ha tornat ara al seu propòsit original, tal com s'explica en aquest article.

+ + + + + + + + + + + + +
Requisits previs:HTML bàsic (vegeu Introducció a l'HTML), i una idea de com funciona CSS (vegeu Introducció a CSS.)
Objectiu:Aprendre a crear elements flotants a les pàgines web, i a fer servir la propietat clear i altres mètodes per a netejar els elements flotants.
+ +

La història dels elements flotants

+ +

La propietat {{cssxref("float")}} fou introduïda per a permetre als desenvolupadors implementar dissenys senzills que incloguessin una imatge flotant dins d'una columna de text, amb el text envoltant la part esquerra o dreta de la imatge. El tipus de cosa que trobes habitualment en el disseny d'un diari.

+ +

Però els desenvoupadors web aviat s'adonaren que podien flotar qualsevol cosa, i no només les imatges, pel que el seu ús s'amplià, per exemple, creant efectes de disseny divertits com els d'aquestes caplletres.

+ +

Els elements flotants han estat utitlitzats habitualment per a crear dissenys web complets amb múltiples columnes situades l'una al costat de l'altra (el comportament per defecte seria que les columnes se situessin les unes sota les altres, en el mateix ordre en què apareixen al codi font). Ara hi ha disponibles tècniques més modernes i millors, que explorarem més endavant en aquest mòdul, per la qual cosa l'ús de {{cssxref("float")}} d'aquesta manera s'hauria de contemplar com una tècnica antiquada.

+ +

En aquest article ens centrarem en l'ús apropiat de la propietat {{cssxref("float")}}.

+ +

Un exemple de float simple

+ +

Explorem com utilitzar els float. Començarem amb un exemple realment simple que inclou un bloc de text flotant al voltant d'un element. Pots acompanyar-nos creant un fitxer index.html al teu ordinador, omplint-lo amb una plantilla HTML simple, i inserint el codi següent als llocs adequats. Al final de la secció podràs veure un exemple en viu de com hauria de ser el codi final.

+ +

Primer, comencem amb una mica d'HTML simple — afegeix el següent al cos del teu HTML, eliminant qualsevol altra cosa que hi hagués abans:

+ +
<h1>Exemple simple de caixa flotant</h1>
+
+<div class="box">Caixa flotant</div>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>
+
+<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ +

Ara aplica el següent CSS al teu HTML (fent servir un element {{htmlelement("style")}} o un {{htmlelement("link")}} per a separar el fitxer .css  — tu tries):

+ +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+ +

Si deses y recarregues la pàgina, veuràs quelcom semblant a allò que esperaries: la caixa es troba per sobre del text, en un flux normal. Per a flotar el text al voltant, afegeix les propietats {{cssxref("float")}} i {{cssxref("margin-right")}} a la regla .box:

+ +
.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+ +

Ara, si deses i recarregues, podràs veure alguna cosa semblant a això:

+ +
+ +
+ +

{{ EmbedLiveSample('Float_1', '100%', 500) }}

+ +

Analitzem ara com funciona el float — l'element amb el float aplicat (l'element {{htmlelement("div")}} en aquest cas) és extret del flux normal del document i està enganxat al costat esquerre del seu element contenidor pare ({{htmlelement("body")}}, en aquest cas). Qualsevol contingut que estigui per sota de l'element flotat en el flux normal, ara l'envoltarà, omplint l'espai a la dreta fins a la part superior de l'element flotant. Allà s'aturarà.

+ +

Flotar el contingut a la dreta té exactament el mateix efecte, però a la inversa — l'element flotat s'enganxarà a la dreta, i el contingut l'envoltarà per l'esquerra. Prova de canviar el valor de la propietat float a right i substitueix {{cssxref("margin-right")}} per {{cssxref("margin-left")}} al darrer conjunt de regles per veure el resultat.

+ +

Tot i que podem afegir un marge a l'element flotant per alunyar el text, no podem afegir un marge al text per allunyar-lo del flotant. Això es deu al fet que un element flotant s'extreu del flux normal i les caixes dels següents elements segueixen per darrera del flotador. Pots comprovar-ho fent alguns canvis a l'exemple.

+ +

Afegeix una clase special al primer paràgraf de text, el que succeeix immediatament a la caixa flotant, i després afegeix al teu CSS les següents regles. Això li donarà al paràgraf següent un color de fons.

+ +
.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+ +

Per tal que l'efecte sigui més fàcil de veure, canvia el margin-right del teu element flotant a margin, per obtener espai al voltant de l'element flotant. Veuràs que el fons del paràgraf passa just per sota de la caixa flotant, com en l'exemple inferior.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_2', '100%', 500) }}

+ +

Els quadres de línia del següent element s'han escurçat perquè el text discorri al voltant del flotador, però com que el flotador s'ha eliminat del flux normal, el quadre al voltant del paràgraf encara manté l'ample complet.

+ +

Netejant floats

+ +

Hem vist que el flotador s'elimina del flux normal i que els altres elements es mostraran al seu costat. Per tant, si volem evitar que un element a continuació es mogui cap amunt, hem de netejar el float. Això s'aconsegueix amb la propietat {{cssxref ("clear")}}.

+ +

En l'HTML de l'exemple anterior, afegeix una classe cleared al segon paràgraf sota de l'element flotant. Després, afegeix això al teu CSS:

+ +
.cleared {
+  clear: left;
+}
+
+ +
+ +
+ +

{{ EmbedLiveSample('Float_3', '100%', 600) }}

+ +

Hauries de veure que el següent paràgraf neteja l'element flotant i ja no apareix al seu costat. La propietat clear accepta els següents valors:

+ + + +

Netejar la caixa contenidora d'un float

+ +

Ara ja saps com netejar un element que es troba a continuació d'un element flotant, però observa el que succeeix si tens un flotant alt i un paràgraf curt, amb una caixa convenidora que envolta ambdós elements. Modifica el teu document per tal que el primer paràgraf i la caixa flotant es trobin dins d'un {{htmlelement("div")}} amb una classe wrapper.

+ +
<div class="wrapper">
+  <div class="box">Caixa flotant</div>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
+</div>
+
+ +

Al teu CSS, afegeix la següent regla per a la teva classe .wrapper i després recarrega la pàgina:

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+ +

A més, elimina la classe .cleared anterior:

+ +
.cleared {
+    clear: left;
+}
+ +

Veuràs que, como en l'exemple on hem posat un color de fons al paràgraf, el color de fons passa per darrere de l'element flotant.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_4', '100%', 600) }}

+ +

Un cop més, això és així perquè el flotador s'ha extret del flux normal. Netejar el següent elemento no ajuda a resoldre aquest problema de neteja de la caixa, on volem que la part inferior de la caixa envolti l'element flotant i que envolti el contingut fins i tot si el coningut és més curt. Hi ha tres maneres posssibles de resoldre això, dues que funcionen en tots els navegadors, però que tenen una mica de truc, i una tercera, nova manera de resoldre aquesta situació correctament.

+ +

El hack clearfix

+ +

La forma com aquesta situació s'ha tractat tradicionalment és utilitzant un truc conegut com el "truc clearfix". Això implica inserir algun contingut generat després de la caixa que conté el contingut flotant i envolvent, i configurar-lo per netejar ambdós.

+ +

Afefeix el següent CSS a l'exemple:

+ +
.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+ +

Ara recarrega la pàgina i la caixa hauria de netejar-se. Això és bàsicament el mateix que si haguessis afegit un element HTML com un <div> a sota dels elements i li haguessis afegit la propietat clear: both.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_5', '100%', 600) }}

+ +

Fent servir overflow

+ +

Un mètode alternatiu és establir la propietat {{cssxref("overflow")}} de l'element contenidor amb un valor diferent de visible.

+ +

Elimina el CSS clearfix que has afegit en l'anterior secció i, en el seu lloc, afegeix overflow: auto a les regles de la caixa contenidora. Altre cop, la caixa hauria de netejar-se.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Float_6', '100%', 600) }}

+ +

Aquest exemple funciona creant el que s'anomena un block formatting context (BFC) o context de format de bloc. És com un petit disseny dins de la nostra pàgina (dins la qual tot està contingut, per tant, el nostre element flotant està contingut dins del BFC i el fons es troba darrere d'ambdós elements. Això generalment funcionarà. Això no obstant, en certs casos, és possible que et trobis amb barres de desplaçament no desitjades o ombres retallades com a conseqüències no desitjades de l'ús del desbordament..

+ +

display: flow-root

+ +

La manera moderna de resoldre aquest problema és fer servir el valor flow-root de la propietat display. Això existeix només per a crear un BFC sense fer servir trucs; no hi haurà conseqüències no desitjades quan el facis servir. Elimina overflow: auto de la regla .wrapper i afegeix display: flow-root. Assumint que el teu navegador sigui compatible, la caixa es netejarà.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Float_7', '100%', 600) }}

+ +

Resum

+ +

Ara ja saps tot el que has de saber sobre els flotadors en el desenvolupament web modern. Consulta l'article sobre els mètodes de disseny antiquats per obtenir informació de com es feien servir, cosa que pot ser-te útil si has de treballar en projectes antics.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul

+ + diff --git a/files/ca/learn/css/css_layout/grids/index.html b/files/ca/learn/css/css_layout/grids/index.html new file mode 100644 index 0000000000..af97c6f989 --- /dev/null +++ b/files/ca/learn/css/css_layout/grids/index.html @@ -0,0 +1,699 @@ +--- +title: Graelles (Grids) +slug: Learn/CSS/Disseny_CSS/Graelles +tags: + - Article + - Beginner + - CSS + - CSS Grids + - CodingScripting + - Grids + - Guide + - Layout + - Learn + - Tutorial + - grid design + - grid framework + - grid system +translation_of: Learn/CSS/CSS_layout/Grids +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}
+ +

Les graelles són una eina de disseny de pàgines web consolidada i molts dissenys de pàgines web moderns basen els seus dissenys de pàgina web en una graella regular. En aquest article analitzarem el disseny de pàgines web basats en graella i com es pot utilitzar CSS per a crear graelles, tant amb les eines presents com amb les noves tecnologies que comencen a estar disponibles en els navegadors.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS i Aplicar estil a les caixes.)
Objectiu:Entendre els conceptes fonamentals que hi ha darrere dels sistemes de disseny de pàgines web amb graella i la manera com implementar un disseny de pàgina web basat en graella.
+ +

Què és el disseny de pàgines web basat en graella?

+ +

Una graella és senzillament una col·lecció de línies horitzontals i verticals que creen un patró que ens serveix per a alinear els elements del disseny d’una pàgina web. Ens ajuden a crear dissenys en què els elements no es mouen ni canvien d'amplada a mesura que naveguem de pàgina en pàgina, i proporcionen més coherència als nostres llocs web.

+ +

Normalment, una graella té columnes (columns), files (rows) i espais entre cada fila i columna, que anomenem comunament canals (gutters).

+ +

+ +

Crear la teva graella en CSS

+ +

Després d'haver decidit la graella que necessita el vostre disseny, podeu utilitzar el disseny de graella (o grid) de CSS per crear aquesta quadrícula a CSS i col·locar-hi elements. Primer veurem les característiques bàsiques del disseny de quadrícula i després explorarem com crear un sistema de quadrícula simple per al vostre projecte.

+ +

Com a punt de partida, descarregueu i obriu el fitxer del punt de partida a l’editor de text i al navegador (també el podeu veure en directe aquí). Veureu un exemple amb un contenidor que conté alguns elements secundaris. Per defecte, es mostren en un flux normal, de manera que els quadres es mostren un sota l’altre. Treballarem amb aquest fitxer durant la primera part d’aquesta lliçó, fent canvis per veure com es comporta la quadrícula.

+ +

Per definir una graella utilitzem el valor grid de la propietat display. Com passa amb Flexbox, això activa el disseny de graella i tots els fills directes del contenidor es converteixen en elements de la quadrícula. Afegiu això al CSS del vostre fitxer:

+ +
.container {
+    display: grid;
+}
+ +

A diferència de flexbox, els articles no tindran cap aspecte immediatament diferent. Declarar display: grid  us dona una quadrícula d'una columna, de manera que els vostres articles continuaran mostrant-se un per sota de l'altre tal com ho fan en el flux normal.

+ +

Per veure alguna cosa que sembli més una graella, haurem d’afegir algunes columnes a la quadrícula. Afegim aquí tres columnes de 200 píxels. Podeu utilitzar qualsevol unitat de longitud o percentatges per crear aquestes pistes de columna.

+ +
.container {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+}
+ +

Afegiu la segona declaració a la vostra regla CSS i, a continuació, torneu a carregar la pàgina i hauríeu de veure que els elements s'han reordenat un a cada cel·la de la quadrícula creada.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_1', '100%', 400) }}

+ +

Graelles flexibles amb la unitat fr

+ +

A més de crear quadrícules amb longituds i percentatges, podem utilitzar la unitat fr per dimensionar de manera flexible les files i les columnes de la quadrícula. Aquesta unitat representa una fracció de l'espai disponible al contenidor de la quadrícula.

+ +

Canvieu el llistat de pistes a la següent definició, creant tres pistes d'1fr.

+ +
.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+ +

Ara hauríeu de veure que teniu pistes flexibles. La unitat fr distribueix espai proporcionalment, per tant, podeu donar diferents valors positius a les vostres pistes, per exemple, si canvieu la definició així:

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+}
+ +

La primera pista ara té 2fr de l’espai disponible i les altres dues pistes 1fr, fent que la primera pista sigui més gran. Podeu barrejar unitats de fr i pistes de longitud fixa; en aquest cas, l’espai necessari per a les pistes fixes s’elimina abans de distribuir l’espai a les altres pistes.

+ +

+

+ +
+ + +

{{ EmbedLiveSample('Grid_2', '100%', 400) }}

+ +
+

Nota: La unitat fr distribueix l'espai disponible, no tot l'espai. Per tant, si una de les vostres pistes té alguna cosa gran al seu interior, hi haurà menys espai lliure per compartir.

+
+ +

Espais entre pistes

+ +

Per crear espais entre pistes, fem servir les propietats {{cssxref ("grid-column-gap")}} per a espais entre columnes, {{cssxref ("grid-row-gap")}} per a espais entre files i {{ cssxref ("grid-gap")}} per establir tots dos alhora.

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-gap: 20px;
+}
+ +

Aquests buits poden especificar-se en qualsevol unitat de longitud o percentatge, però no en unitats fr.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_3', '100%', 400) }}

+ +
+

Nota: Les propietats *gap solien portar el prefix grid-, però això s'ha canviat a l'especificació, ja que la intenció és fer-les útils en diversos mètodes de disseny. Les versions prefixades es mantindran com a àlies, de manera que es podran utilitzar amb seguretat durant algun temps. Per estar segur, podeu duplicar i afegir les dues propietats per fer el vostre codi més a prova de bales.

+
+ +
.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+  gap: 20px;
+}
+ +

Repetició de llistes de pistes

+ +

Podeu repetir tot o una secció de la vostra llista de pistes mitjançant la notació de repetició. Canvieu la llista de pistes pel següent:

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}
+ +

Ara tindreu 3 pistes d’1fr igual que abans. El primer valor que es passa a la funció de repetició és el nombre de vegades que voleu que es repeteixi el llistat, mentre que el segon valor és un llistat de pistes, que consisteix d’una o més pistes que vulgueu repetir.

+ +

La quadrícula implícita i explícita

+ +

Fins ara, només hem especificat pistes de columnes i, tot i això, s’estan creant files per contenir el nostre contingut. Aquest és un exemple de la quadrícula explícita contra la quadrícula implícita. La quadrícula explícita és la que creeu utilitzant grid-template-columns o grid-template-rows. La quadrícula implícita es crea quan el contingut es col·loca fora d’aquesta, com ara a les nostres files. Les quadrícules explícites i implícites són anàlogues als eixos flexbox principal i transversal.

+ +

Per defecte, les pistes creades a la quadrícula implícita tenen una mida auto, cosa que en general vol dir que són prou grans per adaptar-se al seu contingut. Si voleu donar una mida implícita a les pistes de quadrícula, podeu utilitzar les propietats {{cssxref ("grid-auto-rows")}} i {{cssxref ("grid-auto-columns")}}. Si afegiu grid-auto-rows amb un valor de 100px al vostre CSS, veureu que aquestes files creades ara tenen una alçada de 100 píxels.

+ +
+ + +
.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 20px;
+}
+ +

{{ EmbedLiveSample('Grid_4', '100%', 400) }}

+ +

La funció minmax()

+ +

Les nostres pistes de 100 píxels d’alçada no seran molt útils si afegim contingut a les pistes de més de 100 píxels, ja que aquest cas provocaria un desbordament. Podria ser millor tenir pistes de com a mínim 100 píxels d’alçada i que es puguin expandir si hi entra més contingut. Un fet bastant bàsic sobre el web és que mai no se sap realment la mida que tindrà alguna cosa; contingut addicional o mides de lletra més grans poden causar problemes amb els dissenys que intenten ser perfectes en píxels en totes les dimensions.

+ +

La funció {{cssxref ("minmax")}} ens permet establir una mida mínima i màxima per a una pista, per exemple, minmax(100 px, auto). La mida mínima és de 100 píxels, però la màxima és automàtica, i s’ampliarà per adaptar-se al contingut. Proveu de canviar grid-auto-rows per utilitzar un valor min-max:

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 20px;
+}
+ +

Si afegiu contingut addicional, veureu que la pista s'expandeix per permetre que encaixi. Tingueu en compte que l'expansió es produeix al llarg de la fila.

+ +

Tantes columnes com encaixin

+ +

Podem combinar algunes de les coses que hem après sobre el llistat de pistes, la notació de repetició i {{cssxref ("minmax")}} per crear un patró útil. De vegades, és útil poder demanar a la quadrícula que creï tantes columnes com càpiguen al contenidor. Ho fem establint el valor de grid-template-columns mitjançant la notació {{cssxref ("repeat")}}}), però en lloc de passar un número, introduïu la paraula clau auto-fill. Per al segon paràmetre de la funció utilitzem minmax(), amb un valor mínim igual a la mida mínima de la pista que ens agradaria tenir i un màxim de 1fr.

+ +

Proveu-ho ara al vostre fitxer amb el CSS següent:

+ +
+ + +
.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
+}
+
+ +

{{ EmbedLiveSample('Grid_5', '100%', 400) }}

+ +

Això funciona perquè Grid crea tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteix l’espai que sobri entre totes les columnes: el màxim és 1fr que, com ja sabem, distribueix l’espai de manera uniforme entre les pistes.

+ +

Ubicació basada en línies

+ +

Ara passem de crear una graella a col·locar coses a la quadrícula. La nostra quadrícula sempre té línies, que comencen per 1 i es relacionen amb el mode d’escriptura del document. Per tant, en anglès, la línia de columna 1 es troba a la part esquerra de la quadrícula i la línia de fila 1 a la part superior. En àrab, la línia 1 de la columna estaria a la dreta, ja que l'àrab s'escriu de dreta a esquerra.

+ +

Podem situar les coses segons aquestes línies especificant la línia inicial i final. Ho fem utilitzant les propietats següents:

+ + + +

Totes aquestes propietats poden tenir un número de línia com a valor. També podeu utilitzar les propietats abreujades:

+ +

    {{cssxref ("grid-column")}}
+     {{cssxref ("grid-row")}}

+ +

Aquests us permeten especificar les línies inicial i final alhora, separades per un /, un caràcter de barra inclinada cap endavant.

+ +

Descarregueu aquest fitxer com a punt de partida o vegeu-lo en directe aquí. Ja té una quadrícula definida i article senzill. Podeu veure que la col·locació automàtica col·loca elements un a cada cel·la de la quadrícula que hem creat.

+ +

En lloc d'això, col·locarem tots els elements del nostre lloc a la quadrícula, mitjançant les línies de la quadrícula. Afegiu les regles següents a la part inferior del vostre CSS:

+ +
header {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 3;
+  grid-row: 3;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Grid_6', '100%', 400) }}

+ +
+

Nota: també podeu utilitzar el valor -1 per referir-vos a la columna o la línia final i comptar cap a l'interior des del final mitjançant valors negatius. Tanmateix, això només funciona per a la quadrícula explícita. El valor -1 no es referirà a la línia final de la quadrícula implícita.

+
+ +

Posicionament amb grid-template-areas

+ +

Una forma alternativa de col·locar elements a la quadrícula és fer servir la propietat {{cssxref ("grid-template-areas")}} i donar un nom als diversos elements del vostre disseny.

+ +

Traieu el posicionament basat en línies de l'últim exemple (o torneu a descarregar el fitxer per tenir un punt de partida nou) i afegiu el CSS següent.

+ +
.container {
+  display: grid;
+  grid-template-areas:
+      "header header"
+      "sidebar content"
+      "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}
+ +

Torneu a carregar la pàgina i veureu que els vostres articles s'han col·locat igual que abans, sense que hàgim d'utilitzar cap número de línia!

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_7', '100%', 400) }}

+ +

Les regles per a les grid-template-areas són les següents:

+ + + +

Podeu jugar amb el nostre disseny canviant el peu de pàgina per situar-se només a sota del contingut i la barra lateral, per exemple, per abastar fins a baix de tot. Aquesta és una manera molt agradable de descriure un disseny, ja que és obvi a partir del CSS exactament el que està passant.

+ +

Un framework de graella amb CSS Grid

+ +

Els "frameworks" de quadrícula tendeixen a basar-se al voltant de 12 o 16 quadrícules i, amb CSS Grid, no necessiteu cap eina de tercers que us proporcioni aquest framework: ja hi és, a l’especificació.

+ +

Descarregueu el fitxer de punt de partida. Conté un contenidor amb una quadrícula de 12 columnes definida i el mateix marcatge que hem utilitzat en els dos exemples anteriors. Ara podem utilitzar la ubicació basada en línies per col·locar el nostre contingut a la quadrícula de 12 columnes.

+ +
header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Grid_8', '100%', 400) }}

+ +

Si feu servir el Firefox Grid Inspector per superposar les línies de quadrícula del vostre disseny, podreu veure com funciona la nostra quadrícula de 12 columnes.

+ +

+
+ +

Posa a prova els teus coneixements

+ +

Hem arribat al final de l'article. Recordes la informació més rellevant? Trobaràs més proves per comprovar si retens aquesta informació abans de seguir a Test your skills: Grids.

+ +

Resum

+ +

Després de la lectura d’aquest article, hauries de ser capaç d’entendre com funcionen els dissenys de pàgina web amb CSS Grid. Per aprofundir en l'especificació, llegeix les nostres guies sobre Disposició amb Grid, que trobaràs a continuació.

+ +

Veieu també

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/css_layout/index.html b/files/ca/learn/css/css_layout/index.html new file mode 100644 index 0000000000..e74e5da0b9 --- /dev/null +++ b/files/ca/learn/css/css_layout/index.html @@ -0,0 +1,66 @@ +--- +title: Disseny CSS +slug: Learn/CSS/Disseny_CSS +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - Positioning + - flexbox + - float +translation_of: Learn/CSS/CSS_layout +--- +
{{LearnSidebar}}
+ +

En aquest punt, ja hem examinat els fonaments de CSS, com l'estil del text, i l'estil i la manipulació de les caixes en el que estroba dins el contingut. Ara és hora de veure com col·locar les caixes al lloc correcte en relació amb la finestra de visualització, entre elles. Hem cobert els requisits previs necessaris de manera que ara podem aprofundir en el disseny CSS, provant diferents paràmetres de visualització, mètodes tradicionals de disseny que inclouen flotants i posicionament, i noves eines de disseny modernas, com flexbox.

+ +

Requisits previs

+ +

Abans de començar aquest mòdul, ja hauríeu de:

+ +
    +
  1. Estar familiaritzats amb els principis bàsics d' HTML, tal com es descriu en el mòdul Introducció a HTML.
    2. +
  2. Sentir-vos còmodes amb els fonaments CSS, tal com s'ha tractat a la Introducció a CSS.
    3. +
  3. Entendre com fer caixes d'estil.
    4. +
+ +
+

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) d'exemples de codi, en un programa de codificació en línia com JSBin o Thimble.

+
+ +

Guies

+ +

Aquests articles proporcionaran instruccions sobre les eines i tècniques fonamentals de disseny, disponibles a CSS.

+ +
+
Introducció al disseny CSS
+
Aquest article recapitularà algunes de les característiques de disseny de CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref("display")}} - i introduïm alguns dels conceptes que cobrirem al llarg d'aquest mòdul.
+
Flotants
+
Originalment per a imatges flotants dins dels blocs de text, la propietat {{cssxref("float")}} s'ha convertit en una de les eines més utilitzades per crear diversos dissenys de columnes a les pàgines web. Aquest article ho explica tot.
+
Posicionament
+
El posicionament us permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseguts un damunt de l'altre o quedant sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.
+
Exemples pràctics de posicionament
+
Amb els conceptes bàsics de posicionament coberts en l'últim article, veurem, ara, com construir un parell d'exemples del món real per il·lustrar quin tipus de coses podeu fer amb el posicionament.
+
Flexbox
+
Una nova tecnologia, però amb suport, ara, bastant estès en tots els navegadors, Flexbox està començant a estar preparat per a un ús generalitzat. Flexbox proporciona eines que permeten crear ràpidament dissenys complexos i flexibles i característiques que històricament resulten difícils amb CSS. Aquest article explica tots els fonaments.
+
Graelles
+
Els sistemes de graella són una altra característica molt comuna que s'utilitza en els dissenys de CSS, que solen implementar-se mitjançant flotadors o altres característiques de disseny. Imagineu el disseny com un nombre establert de columnes (p. Ex. 4, 6 o 12) i, a continuació, ajusteu les columnes de contingut dins d'aquestes columnes imaginàries. En aquest article explorarem la idea bàsica sobre la creació d'un sistema de graella, mireu l'ús d'un sistema de graella confeccionat per un marc (framework) de graella i finalitzeu l'experimentació amb les Graelles CSS - una incipient nova funció de navegador fa que l'implementació de disseny de graella a la Web sigui molt més fàcil.
+
+ +

Avaluacions

+ +

Les següents avaluacions posaran a prova la vostra capacitat per dissenyar pàgines web amb CSS.

+ +
+
Creació d'un disseny flexible multicolumna (TBD)
+
Aquesta avaluació provarà la vostra capacitat per crear un disseny estàndard de diverses columnes, amb algunes característiques interessants.
+
Creació d'un widget de control fix (TBD)
+
Aquesta avaluació desafia la vostra comprensió del posicionament, demanant-vos que creeu un widget de control de posició fix que permeti a l'usuari accedir als controls d'una aplicació web independentment d'on es desplaci.
+
diff --git a/files/ca/learn/css/css_layout/introduction/index.html b/files/ca/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..88a924dc00 --- /dev/null +++ b/files/ca/learn/css/css_layout/introduction/index.html @@ -0,0 +1,700 @@ +--- +title: Introducció al disseny CSS +slug: Learn/CSS/Disseny_CSS/Introduccio_disseny_CSS +tags: + - Article + - Beginner + - CSS + - Floats + - Grids + - Introduction + - Layout + - Learn + - Positioning + - Tables + - flexbox + - flow +translation_of: Learn/CSS/CSS_layout/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
+ +

Aquest article recapitula algunes de les característiques de disseny CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref ("display")}}, i introdueix alguns dels conceptes que exposem al llarg d'aquest mòdul.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Adquirir una visió general de les tècniques de disseny de pàgines web amb CSS. Cada tècnica es pot aprendre amb més detall en tutorials posteriors.
+ +

Les tècniques de disseny de pàgina web amb CSS ens permeten prendre els elements que hi ha en una pàgina web i controlar on estan posicionats en relació amb la seva posició predeterminada en el flux de disseny normal, els altres elements del voltant, l’element pare contenidor o la finestra de visualització / finestra principal. Les tècniques de disseny de pàgines que exposem amb més detall en aquest mòdul són:

+ + + +

Cada tècnica té els seus usos, avantatges i inconvenients, i cap tècnica s'ha dissenyat per utilitzar-se aïllada. Entenent per a què s’ha dissenyat cada mètode estaràs en una bona posició per entendre quina és la millor disposició per a cada tasca.

+ +

Flux normal

+ +

El flux normal és la manera com el navegador estableix les pàgines HTML de manera predeterminada quan no es fa res per controlar el disseny de pàgina. Vegem-ne un exemple HTML ràpid:

+ +
<p>I love my cat.</p>
+
+<ul>
+  <li>Buy cat food</li>
+  <li>Exercise</li>
+  <li>Cheer up friend</li>
+</ul>
+
+<p>The end!</p>
+ +

Per defecte, el navegador mostra aquest codi de la manera següent:

+ +

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

+ +

Tingues en compte que aquí l'HTML es mostra en l'ordre exacte en què apareix en el codi d’origen, amb elements apilats l’un sobre l’altre: el primer paràgraf, seguit de la llista no ordenada, seguit del segon paràgraf.

+ +

Per a molts dels elements de la pàgina el flux normal crea exactament la disposició que cal, però per dissenys més complexos et farà falta alterar aquest comportament per defecte fent ús d'alguna de les eines disponibles en CSS. Començar amb un document HTML ben estructurat és molt important, donat que així pots treballar amb com les coses es disposen per defecte, en comptes de barallar-t'hi.

+ +

Les tècniques de disseny tendeixen a substituir aquest comportament predeterminat, utilitzant les tècniques següents:

+ + + +

La propietat display

+ +

Els mètodes principals per aconseguir un disseny de pàgina amb CSS són tots els valors de la propietat display (visualització). Aquesta propietat ens permet canviar la manera per defecte com es mostren les coses. Tot el que hi ha al flux normal té un valor de display, que s'utilitza com la forma per defecte en què es comporten els elements que hi estan configurats. Per exemple, el fet que els paràgrafs en català es mostrin un per sota de l’altre es deu al fet que s’estilen amb display: block. Si creeu un enllaç al voltant d'un text dins d'un paràgraf, aquest enllaç romandrà en línia amb la resta del text i no es dividirà en cap línia nova. Això es deu al fet que l'element {{htmlelement("a")}} és display: inline per defecte.

+ +

Pots canviar aquest comportament de visualització per defecte. Per exemple, l'element {{htmlelement("li")}} és display: block per defecte, és a dir, que els elements de la llista es mostren l'un a sota de l'altre al nostre document en català. Si canviem el valor de display a inline, ara es mostraran un al costat de l’altre, com ho farien les paraules en una frase. El fet que puguis canviar el valor de display de qualsevol element significa que pots triar elements HTML pel seu significat semàntic, sense preocupar-te de com quedaran. La seva aparença és una cosa que es pot canviar.

+ +

A més de poder canviar la presentació predeterminada, canviant un element de block a inline i viceversa, hi ha alguns mètodes de disseny més grans que comencen com amb un valor de display. Tanmateix, quan els feu servir, generalment haureu d'invocar propietats addicionals. Els dos valors més importants per als nostres propòsits a l’hora de parlar del disseny són display: flex i display: grid.

+ +

Caixes flexibles (Flexbox)

+ +

Flexbox és el nom breu del mòdul de disseny de caixa flexible, dissenyat per facilitar-nos la distribució de les coses en una dimensió, sigui com a fila o com a columna. Per utilitzar flexbox, apliqueu display: flex a l'element pare dels elements que vulgueu disposar; tots els seus fills directes es converteixen en ítems flexibles. Ho podem veure en un exemple senzill.

+ +

L'etiquetatge HTML següent ens proporciona un element contenidor, amb una classe wrapper, dins del qual hi ha tres elements {{htmlelement("div")}}. Per defecte, es mostrarien com a elements de bloc, un a sota de l’altre, al nostre document.

+ +

Tanmateix, si afegim display: flex al pare, els tres elements ara es disposen en columnes. Això es deu al fet que es converteixen en ítems flexibles (flex items) i es veuen afectats per alguns valors inicials que flexbox estableix al contenidor flex. Es mostren en una fila, perquè el valor inicial de {{cssxref("flex-direction")}} establert al seu pare és row. Tots semblen estirar-se fins a l’alçada de l’element més alt, perquè el valor inicial de la propietat {{cssxref("align-items")}} establert al seu pare és stretch. Això significa que els ítems s’estenen fins a l’alçada del contenidor flex, que en aquest cas està definida per l’element més alt. Tots els articles s’alineen a l’inici del contenidor, deixant qualsevol espai addicional al final de la fila.

+ +
+ + +
.wrapper {
+  display: flex;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_1', '300', '200') }}

+ +

A més de les propietats anteriors que es poden aplicar al contenidor flex, hi ha propietats que es poden aplicar als ítems flex. Aquestes propietats, entre altres coses, poden canviar la manera com es “flexionen” els ítems, cosa que els permet expandir-se i contraure’s per adaptar-se a l’espai disponible.

+ +

Com a exemple senzill d'això, podem afegir la propietat {{cssxref ("flex")}} a tots els nostres elements fill, amb un valor d'1. Això farà que tots els ítems creixin i omplin el contenidor, en comptes de deixar espai al final. Si hi ha més espai, els elements s’ampliaran; si hi ha menys espai es tornaran més estrets. A més, si afegiu un altre element al marcatge, tots els elements es faran més petits per fer-hi espai; ajustaran la seva mida per ocupar la mateixa quantitat d’espai, sigui quin sigui.

+ +
+ + +
.wrapper {
+    display: flex;
+}
+
+.wrapper > div {
+    flex: 1;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_2', '300', '200') }}

+ +
+

Nota: Aquesta ha estat una molt breu introducció al que és possible amb Flexbox. Per obtenir més informació, consulteu el nostre article de Flexbox.

+
+ +

Disposició en graella (Grid)

+ +

Mentre que Flexbox està dissenyat per al disseny unidimensional, el disseny de quadrícula està pensat per a dues dimensions: alinear les coses en files i columnes.

+ +

Una vegada més, podeu activar el disseny de quadrícula amb un valor específic de display - display: grid. L'exemple següent utilitza un marcatge similar a l'exemple de flex, amb un contenidor i alguns elements fills. A més d’utilitzar display: grid, també definim files i columnes al pare mitjançant les propietats {{cssxref("grid-template-rows")}} i {{cssxref("grid-template-columns")}}, respectivament. Hem definit tres columnes cadascuna d'1fr i dues files de 100px. No necessito posar cap regla sobre els elements infantils; es col·loquen automàticament a les cel·les que ha creat la nostra graella.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
+    <div class="box4">Four</div>
+    <div class="box5">Five</div>
+    <div class="box6">Six</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_1', '300', '330') }}

+ +

Un cop tingueu una graella, podeu col·locar-hi explícitament els elements, en lloc de confiar en el comportament de la ubicació automàtica que acabem de veure. Al segon exemple que teniu a continuació hem definit la mateixa graella, però aquesta vegada amb tres elements fills. Hem definit la línia inicial i final de cada element mitjançant les propietats {{cssxref("grid-column")}} i {{cssxref("grid-row")}}. Això fa que els elements abastin diverses pistes.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_2', '300', '330') }}

+ +
+

Nota: Aquests dos exemples són només una petita part de la potència del disseny de graella; per obtenir més informació, consulteu el nostre article sobre Graelles (Grids).

+
+ +

La resta d'aquesta guia cobreix altres mètodes de disseny, que són menys importants per a les principals estructures de disseny de la pàgina, però que poden ajudar-vos a realitzar tasques específiques. En comprendre la naturalesa de cada tasca de disseny, aviat trobareu que, quan mireu un component concret del vostre disseny, el tipus de disseny més adequat sovint serà clar.

+ +

Elements flotants (Floats)

+ +

Flotar un element canvia el comportament d’aquest element i dels elements de nivell de bloc que el segueixen en un flux normal. L'element es mou cap a l'esquerra o cap a la dreta i s'elimina del flux normal i el contingut circumdant flota al voltant de l'element flotat.

+ +

La propietat {{cssxref("float")}} té quatre valors possibles:

+ + + +

A l'exemple següent, flotem un <div> a l'esquerra i li donem un {{cssxref("margin")}}} per la dreta per apartar el text de l'element. Això ens dona l’efecte del text rodejant aquesta caixa i és la major part del que heu de saber sobre els elements flotants tal com s’utilitzen en el disseny web modern.

+ +
+ + +
<h1>Simple float example</h1>
+
+<div class="box">Float</div>
+
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+
+ +
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+
+
+ +

{{ EmbedLiveSample('Float_1', '100%', 600) }}

+ +
+

Nota: Els floats s’expliquen completament a la nostra lliçó sobre les propietats float i clear. Abans de tècniques com Flexbox i Grid es feien servir floats com a mètode per crear dissenys de columnes. És possible que encara trobeu aquests mètodes al web; els tractarem a la lliçó sobre mètodes de disseny heretats.

+
+ +

Tècniques de posicionament

+ +

El posicionament us permet moure un element des d'on es col·locaria quan estigués en un flux normal a una altra ubicació. El posicionament no és un mètode per crear el disseny principal de la pàgina, sinó que es tracta més de gestionar i ajustar la posició d’elements específics de la pàgina.

+ +

Tot i això, hi ha tècniques útils per a certs patrons de disseny que depenen de la propietat {{cssxref("position")}}. La comprensió del posicionament també ajuda a entendre el flux normal, i què significa moure un element fora del flux normal.

+ +

Hi ha cinc tipus de posicionament principals, que hauries de conèixer:

+ + + +

Un exemple senzill de posicionament

+ +

Per familiaritzar-te amb aquestes tècniques de disseny de pàgina, el mostrem un parell d'exemples ràpids. Tots els nostres exemples tenen el mateix codi HTML, que és el següent:

+ +
<h1>Positioning</h1>
+
+<p>I am a basic block level element.</p>
+<p class="positioned">I am a basic block level element.</p>
+<p>I am a basic block level element.</p>
+ +

Apliquem a aquest codi HTML un estil predeterminat amb el codi CSS següent:

+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+ +

La sortida que dona és la següent:

+ +

{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

+ +

Posicionament Relatiu (Relative positioning)

+ +

El posicionament relatiu et permet desplaçar un element de la posició que tindria per defecte en flux normal. Això vol dir que pots assolir una tasca com ara moure una icona cap avall de manera que quedi alineada amb una etiqueta de text. Per fer-ho, podríem afegir la següent regla per afegir un posicionament relatiu:

+ +
.positioned {
+  position: relative;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+ +

Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} de relative; això no fa res per si mateix, de manera que també afegim les propietats {{cssxref("top")}} i {{cssxref("left")}}, que serveixen per a moure l'element afectat cap avall i cap a la dreta; això podria semblar el contrari del que s'esperava, però cal pensar que l'element és empès des dels costats esquerre i superior, cosa que fa que es mogui cap a la dreta i avall.

+ +

Si afegeixes aquest codi, es mostra el resultat següent:

+ + + +

{{ EmbedLiveSample('Relative_positioning_example', '100%', 300) }}

+ +

Posicionament absolut (Absolute)

+ +

El posicionament absolut s’utilitza per eliminar completament un element del flux normal i col·locar-lo mitjançant desplaçaments des de les vores d’un bloc contenidor.

+ +

Tornant al nostre exemple original no posicionat, podríem afegir la regla CSS següent per a implementar el posicionament absolut:

+ +
.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+ +

Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} d'absolute, i les mateixes propietats {{cssxref("top")}} i {{cssxref("left")}}, com abans. L'addició d'aquest codi, però, dona el resultat següent:

+ + + +

{{ EmbedLiveSample('Absolute_positioning_example', '100%', 300) }}

+ +

Això és molt diferent. L'element ha quedat totalment separat de la resta del disseny de la pàgina i s’hi ha col·locat a sobre en l’extrem superior. Els altres dos paràgrafs ara es disposen junts, com si el germà posicionat no existís. Les propietats {{cssxref("top")}} i {{cssxref("left")}} tenen un efecte diferent sobre elements amb posicionament absolut que sobre elements amb posicionament relatiu. En aquest cas, s'especifica la distància a la qual l'element s’ha de situar dels costats superior i esquerre de la pàgina. És possible canviar l'element pare que es converteix en aquest contenidor i ho veurem a la lliçó sobre posicionament.

+ +

Posicionament fix (fixed positioning)

+ +

El posicionament fix elimina el nostre element del flux de documents de la mateixa manera que el posicionament absolut. Tanmateix, en lloc d'aplicar els desplaçaments des del contenidor, s'apliquen des de la finestra gràfica. Com que l'element es manté fix en relació amb la finestra gràfica, podem crear efectes com un menú que es manté fix a mesura que la pàgina es desplaça per sota.

+ +

Per a aquest exemple, el nostre HTML inclou tres paràgrafs de text, per tal que puguem fer que la pàgina es desplaci, i un quadre al qual donarem position: fixed.

+ +
<h1>Fixed positioning</h1>
+
+<div class="positioned">Fixed</div>
+
+<p>Paragraph 1.</p>
+<p>Paragraph 2.</p>
+<p>Paragraph 3.</p>
+
+ +
+ + +
.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

+ +

Posicionament enganxós (sticky positioning)

+ +

El posicionament enganxós és el mètode de posicionament final que tenim a la nostra disposició. Combina el posicionament estàtic per defecte amb el posicionament fix. Quan un element té position: sticky, es desplaçarà en flux normal fins que arribi al desplaçament sobre la finestra de visualització del navegador que definit. En aquest moment es queda "enganxat" com si tingués position: fixed aplicat.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +
+

Nota: per aprendre més sobre posicionament, aneu a l'article sobre posicionament.

+
+ +

Taules CSS

+ +

Les taules HTML són perfectes per a mostrar dades tabulades, però fa molts anys, fins i tot abans que el CSS bàsic fos compatible de manera fiable entre els navegadors, els desenvolupadors web solien utilitzar taules per als dissenys de pàgines web senceres; col·locaven els encapçalaments, els peus de pàgina, les diferents columnes, etc., en files i columnes d’una taula. Això va funcionar en el moment, però presenta molts problemes: els dissenys de taules no són flexibles, l’etiquetatge és feixuc, són difícils de depurar, i són semànticament erronis (els usuaris de lectors de pantalla, per exemple, tenen problemes per navegar en dissenys de pàgina web amb taules).

+ +

La forma en què es mostra una taula en una pàgina web quan utilitzeu el marcatge de taula es deu a un conjunt de propietats CSS que defineixen el disseny de la taula. Aquestes propietats es poden utilitzar per disposar elements que no són taules, un ús que de vegades es descriu com "utilitzar taules CSS".

+ +

L'exemple següent mostra un d'aquests usos; L'ús de taules CSS per al disseny s'hauria de considerar un mètode heretat en aquest moment, per a aquelles situacions en què tingueu navegadors molt antics sense compatibilitat amb Flexbox o Grid.

+ +

Vegem-ne un exemple. Primer, un marcatge senzill que crea un formulari HTML. Cada element d'entrada té una etiqueta i també hem inclòs un text dins d'un paràgraf. Cada parell label/input està envoltat d'un element {{htmlelement("div")}}, amb finalitats de disseny.

+ +
<form>
+  <p>First of all, tell us your name and age.</p>
+  <div>
+    <label for="fname">First name:</label>
+    <input type="text" id="fname">
+  </div>
+  <div>
+    <label for="lname">Last name:</label>
+    <input type="text" id="lname">
+  </div>
+  <div>
+    <label for="age">Age:</label>
+    <input type="text" id="age">
+  </div>
+</form>
+ +

Ara afegim el CSS al nostre exemple. La major part del CSS és bastant comú, excepte els usos de la propietat {{cssxref("display")}}. A l’element {{htmlelement("form")}} i als elements {{htmlelement("div")}}, {{htmlelement("label")}} i {{htmlelement("input")}} se'ls hi ha dit que es mostrin com una taula, files de la taula i cel·les de la taula, respectivament; bàsicament actuaran com un marcatge de taula HTML que alinea les etiquetes de text i les entrades de manera predeterminada. Tot el que hem de fer és afegir una mica de mida, marges, etc. perquè tot es vegi una mica més agradable, i ja haurem acabat.

+ +

Observa que s’ha assignat al paràgraf de descripció (caption) la declaració display: table-caption;, que fa que aquest paràgraf actuï com un títol de taula ({{htmlelement("caption")}}), i també caption-side: bottom;, que indica que el títol es posa a la part inferior de la taula amb finalitats d'estil, encara que va abans de les entrades de la taula en l’ordre del codi d’origen. Això permet una mica de flexibilitat.

+ +
html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}
+ +

Això ens dona el resultat següent:

+ +

{{ EmbedLiveSample('CSS_tables', '100%', '170') }}

+ +

També pots veure aquest exemple en viu en el fitxer css-tables-example.html (i també consultar-ne el codi d’origen).

+ +

Disseny multicolumna

+ +

El mòdul de disseny de múltiples columnes ens proporciona una manera de distribuir contingut en columnes, de manera similar a com flueix el text en un diari. Tot i que la lectura de columnes cap amunt i cap avall és menys útil en un context web, ja que no voleu obligar els usuaris a desplaçar-se cap amunt i cap avall, la disposició del contingut en columnes pot ser una tècnica útil.

+ +

Per convertir un bloc en un contenidor multicolumna, utilitzem la propietat {{cssxref("column-count")}}, que indica al navegador quantes columnes voldríem tenir o bé {{cssxref("column-width" )}}, que indica al navegador que ompli el contenidor amb tantes columnes d'almenys aquesta amplada.

+ +

A l'exemple següent, comencem amb un bloc d'HTML dins d'un element <div> que conté una classe de container.

+ +
<div class="container">
+    <h1>Multi-column layout</h1>
+
+    <p>Paragraph 1.</p>
+    <p>Paragraph 2.</p>
+
+</div>
+ +

Utilitzem una column-width (amplada de columna) de 200 píxels en aquest contenidor, cosa que provoca que el navegador creï tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteixi l’espai restant entre les columnes creades.

+ +
+ + +
    .container {
+        column-width: 200px;
+    }
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

+ +

Resum

+ +

Aquest article ha proporcionat un breu resum de totes les tecnologies de disseny que has de conèixer. Continua llegint per a obtenir més informació sobre cadascuna d’aquestes tecnologies!

+ +

{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/css_layout/normal_flow/index.html b/files/ca/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..ac44f6a95a --- /dev/null +++ b/files/ca/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,95 @@ +--- +title: Flux normal +slug: Learn/CSS/Disseny_CSS/Flux_normal +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Aquest article explica el flux normal o la manera com es disposen els elements de la pàgina web si tu no en canvies la disposició.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Entendre la manera com els navegadors disposen per defecte els elements en les pàgines web abans que l'usuari comenci a fer-hi canvis.
+ +

Com es detalla en l’últim article d’introducció al disseny de pàgines web, els elements d’una pàgina web es distribueixen segons el flux normal si no s'hi aplica CSS que en canviï el comportament. Com ja hem començat a veure, pots canviar la manera com es comporten els elements, bé ajustant-ne la posició dins d’aquest flux normal, o bé suprimint-los-en del tot. Un document sòlid i ben estructurat que sigui llegible en el sentit del flux normal és la millor manera de començar qualsevol pàgina web. Garanteix que el contingut serà llegible, fins i tot si l’usuari fa servir un navegador molt limitat o un dispositiu com un lector de pantalla, que llegeix el contingut de la pàgina. A més, com que el flux normal està dissenyat per a fer llegible un document, començar d'aquesta manera significa que treballes amb el document en lloc de lluitar-hi en contra perquè hi fas canvis d’ordre.

+ +

Abans d’aprofundir més en diferents mètodes de disseny, val la pena revisar algunes de les qüestions que has estudiat en mòduls anteriors pel que fa al flux normal dels documents.

+ +

Com es disposen per defecte els elements?

+ +

Primer de tot s'agafa el contingut dels elements de les caixes, i a continuació s’hi afegeixen l'àrea de farciment, les vores i els marges al voltant. Es tracta del model de caixes, que ja coneixem.

+ +

De manera predeterminada, el contingut d'un element de nivell de bloc és del 100% de l'amplada de l’element pare, i l‘alçada està determinada pel contingut. Els elements de línia tenen l’amplada i l’alçada determinades pel contingut. En els elements de línia no pots establir l’amplada i l’alçada, senzillament s’inclouen dins del contingut d’elements de nivell de bloc. Si vols controlar la mida d'un element de línia d'aquesta manera, has de configurar-lo perquè es comporti com un element de nivell de bloc amb display: block; (o fins i tot, display: inline-block;, que barreja característiques de tots dos).

+ +

Això pel que fa a elements individuals; però què passa amb la manera com interactuen els elements entre ells? El flux normal del disseny d’una pàgina web (que s’esmenta en l’article d’introducció al disseny de pàgines web) és el sistema pel qual els elements s’ubiquen dins de la finestra gràfica del navegador. Per defecte, els elements de nivell de bloc estan configurats en la direcció del flux dels blocs, en funció del mode d'escriptura de l’element pare (inicialment: en horitzontal): cada element de bloc apareix en una línia nova per sota de l’anterior i estan separats per qualsevol marge que s’hi hagi establert. Per tant, en català, o en qualsevol altre sistema d'escriptura horitzontal i de dalt a baix, els elements de nivell de bloc es disposen verticalment.

+ +

Els elements de línia es comporten de manera diferent: no es disposen en línies noves; en lloc d’això, es disposen sobre la mateixa línia que l’anterior i que qualsevol contingut textual contigu (o que el delimiti), mentre hi hagi espai dins de l’amplada de l’element pare de nivell de bloc. Quan ja no hi ha espai, el text o els elements que desborden passen a una línia nova.

+ +

Si dos elements adjacents tenen configurat un marge i els marges dels dos es toquen, predomina el que és més gran, i el més petit desapareix; es diu que els marges col·lapsen, i això també ho coneixem.

+ +

Vegem un exemple senzill que il·lustra tot això:

+ +
+
<h1>Flux bàsic d’un document</h1>
+
+<p>Sóc un element de nivell de bloc bàsic. Els meus elements de nivell de bloc adjacents es distribueixen en línies noves per sota meu.</p>
+
+<p>Per defecte ocupem el 100% de l'amplada de l'element pare i som tan alts com el contingut dels nostres elements fill. L‘amplada i l’alçada total són el nostre contingut + l’àrea de farciment + l’amplada/alçada de la vora.</p>
+
+<p>Tenim marges que ens separen. Però pel col·lapse dels marges, ens separa només l'amplada d'un dels dos marges, però no l’amplada dels dos.</p>
+
+<p>Els elements de línia <span> com aquest </span> i <span> aquest </span> es disposen sobre la mateixa línia que els altres i que els nodes de text adjacents, si hi ha espai en la mateixa línia. Quan els elements de línia desborden, <span>continuen per la línia següent, si és possible (com el que conté aquest text)</span>; o si no és possible, passen a una línia nova, com és el cas d’aquesta imatge: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

+ +

Resum

+ +

Ara que saps com funciona el flux normal del disseny de pàgina i quines són les opcions que el navegador estableix per defecte, avança i descobreix com pots canviar aquesta visualització per defecte i crear la composició de pàgina que necessita el teu disseny de pàgina web.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul

+ + diff --git a/files/ca/learn/css/css_layout/positioning/index.html b/files/ca/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..213293ff4e --- /dev/null +++ b/files/ca/learn/css/css_layout/positioning/index.html @@ -0,0 +1,467 @@ +--- +title: Posicionament +slug: Learn/CSS/Disseny_CSS/Posicionament +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Layout + - Positioning + - absolute + - fixed + - relative +translation_of: Learn/CSS/CSS_layout/Positioning +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}
+ +

El posicionament permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseient-se un damunt de l'altre o mantenint-se sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.

+ + + + + + + + + + + + +
Requisits previs:Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu:Aprendre com funciona el posicionament CSS.
+ +

Flux del document

+ +

El posicionament és un tema bastant complex, per tant, abans de submergir-nos en el codi, anem a revisar i ampliar una mica de teoria de disseny per donar-nos una idea de com funciona això.

+ +

En primer lloc, les caixes d'elements individuals es defineixen tenint en compte el contingut dels elements, afegint-hi qualsevol farciment, vora i marge al voltant d'ells - és a dir, aquell model de caixa nou, que vam mirar abans. Per defecte, el contingut d'un element de nivell de bloc és del 100% de l'ample de l'element pare i tan alt com el seu contingut. Els elements en línia són tan alts  i tan amples com el seu contingut. No es pot definir l'ample o alçada en elements en línia - simplement s'assenten dins del contingut dels elements de nivell de bloc. Si es vol controlar la mida d'un element en línia d'aquesta manera, s'ha d'establir perquè es comporti com un element de nivell de bloc amb display: block;.

+ +

Això explica els elements individuals, però què passa amb els elements que interactuen els uns amb els altres? El flux de disseny normal (esmentat en l'article de presentació de disseny) és el sistema mitjançant el qual es col·loquen els elements dins de la finestra de visualització del navegador. De manera predeterminada, els elements de nivell de bloc es distribueixen verticalment a la finestra de visualització: cadascun d'ells apareixerà en una nova línia,per sota d l'última i se separaran per qualsevol marge que s'estableixi en ells.

+ +

Els elements en línia es comporten de manera diferent - no apareixen en noves línies; en canvi, s'assenten en la mateixa línia que els altres i amb qualsevol contingut de text adjacent (o embolicat), sempre que hi hagi espai perquè ho facin dins de l'amplada de l'element a nivell de bloc pare. Si no hi ha espai, el text desbordat o els elements es desplacen cap a una nova línia.

+ +

Si dos elements adjacents tenen un marge establert i els dos marges es toquen, el més gran dels dos es queda i el més petit desapareix - això es diu col.lapsació del marge, i també ho hem conegut abans.

+ +

Vegem un exemple senzill que expliqui tot això:

+ +
<h1>Basic document flow</h1>
+
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
+
+<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
+
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
+
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+ +

{{ EmbedLiveSample('Document_flow', '100%', 500) }}

+ +

Revisarem aquest exemple diverses vegades al llarg d'aquest article, ja que mostrarem els efectes de les diferents opcions de posicionament disponibles per a nosaltres.

+ +

Ens agradaria que seguíssiu els exercicis en el vostre ordinador, si és possible - agafeu una còpia de 0_basic-flow.html del nostre repositori de Github (codi font aquí) i utilitzeu-lo com a punt de partida.

+ +

Introducció al posicionament

+ +

Tota la idea del posicionament és permetre'ns anul·lar el comportament bàsic del flux de documents descrit anteriorment, per produir efectes interessants. Què passa si voleu canviar lleugerament la posició d'algunes caixes dins d'un disseny des de la seva posició de flux de disseny per defecte, per donar-li un toc lleugerament peculiar i molest? El posicionament és la vostra eina. O si voleu crear un element d'interfície d'usuari que floti a la part superior d'altres parts de la pàgina i/o sempre es trobi al mateix lloc dins de la finestra del navegador, sense importar quant es desplaça la pàgina? El posicionament fa possible aquest treball de disseny.

+ +

Hi ha una sèrie de diferents tipus de posicionament que podeu implementar en elements HTML. Per fer un tipus específic de posicionament actiu en un element, utilitzem la propietat {{cssxref("position")}}.

+ +

Posicionament estàtic (Static)

+ +

El posicionament estàtic és el valor predeterminat que cada element obté - significa "posar l'element en la seva posició normal en el flux del disseny del document - res especial per veure aquí".

+ +

Per demostrar això i preparar el vostre exemple per a futures seccions, primer afegiu una class de positioned al segon {{htmlelement("p")}} en l'HTML:

+ +
<p class="positioned"> ... </p>
+ +

Ara afegiu la següent regla a la part inferior del vostre CSS:

+ +
.positioned {
+   position: static;
+  background: yellow;
+}
+ +

Si ara deseu i actualitzeu, no veureu cap diferència en absolut, excepte el color de fons actualitzat del segon paràgraf. Està bé - com hem dit abans, el posicionament estàtic és el comportament predeterminat!

+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 1_static-positioning.html (vegeu el codi font).

+
+ +

Posicionament relatiu (Relative)

+ +

El posicionament relatiu és el primer tipus de posició que veurem. Això és molt semblant al posicionament estàtic, tret que una vegada que l'element posicionat ha tingut el seu lloc en el flux de disseny normal, podeu modificar la seva posició final, incloent-hi la superposició d'altres elements a la pàgina. Seguiu i actualitzeu la declaració de posició del vostre codi:

+ +
position: relative;
+ +

Si deseu i actualitzeu en aquesta etapa, no veureu cap canvi en el resultat en absolut, així, com modifiqem la posició de l'element? Heu d'utilitzar les propietats {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} , Que explicarem en la següent secció.

+ +

Introduir top, bottom, left i right

+ +

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} s'utilitzen juntament amb {{cssxref("position")}} per especificar exactament a on moure l'element posicionat. Per provar-ho, afegiu les següents declaracions a la regla .positioned al vostre CSS:

+ +
top: 30px;
+left: 30px;
+ +
+

Nota: Els valors d'aquestes propietats pot prendre totes les unitats que s'esperaria lògicament - píxels, mm, rems,%, etc.

+
+ +

Si ara deseu i actualitzeu, obtindreu un resultat com aquest:

+ + + +

{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}

+ +

Genial, eh? D'acord, aixó es probablement el que no esperaves: per què s'ha mogut a la part inferior i la dreta si s'especificat a dalt i a l'esquerra? Pot sonar Il·lògic inicialment, però aquesta és la forma en què funciona el posicionament relatiu: cal pensar en una força invisible que empeny el costat de la caixa posicionada, movent-la en la direcció oposada. Així, per exemple, si especifiqueu un top: 30px;, una força empeny la part superior de la caixa, fent que es mogui cap avall en 30px.

+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 2_relative-positioning.html (vegeu el codi font).

+
+ +

Posicionament absolut (Absolute)

+ +

El posicionament absolut porta resultats molt diferents. Intenteu canviar la declaració de posició del vostre de la manera següent:

+ +
position: absolute;
+ +

Si ara deseu i actualitzeu, obtindreu un resultat com aquest:

+ + + +

{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}

+ +

En primer lloc, tingueu en compte que el buit on l'element posicionat hauria d'estar en el flux del document ja no hi és - el primer i el tercer element s'han tancat junts, com que ja no existeix!. Bé, en certa manera, això és cert. Un element absolutament posicionat ja no existeix en el flux de disseny normal del document. En lloc d'això, s'asseu a la seva pròpia capa separada de tota la resta. Això és molt útil - vol dir que podem crear funcions d'interfície d'usuari aïllades que no interfereixin amb la posició d'altres elements de la pàgina - per exemple, les caixes d'informació emergents i els menús de control, els panells de rollover, les funcions d'interfície d'usuari que es poden arrossegar i deixar anar a qualsevol lloc en la pàgina, i així successivament.

+ +

En segon lloc, observeu que la posició de l'element ha canviat - això es deu al fet que {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} es comporten d'una manera diferent amb el posicionament absolut. En lloc d'especificar la direcció en què l'element s'ha de moure, especifiquen la distància que ha de tenir l'element en cada costat dels elements que contingui. Així que, en aquest cas, estem dient que l'element absolutament posicionat hauria de situar-se 30px des de la part superior del "element que conté" i 30px des de l'esquerra.

+ +
+

Nota: Podeu utilitzar {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} per canviar la mida dels elements si és necessari. Intenteu establir top: 0; bottom: 0; left: 0; right: 0; and margin: 0; en els elements posicionats i veureu què passa! Torneu a posar-ho de nou després...

+
+ +
+

Nota: Sí, els marges encara afecten els elements posicionats. Tanmateix, el col·lapse de marges no existeix.

+
+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 3_absolute-positioning.html (vegeu el codi font).

+
+ +

Contextos de posicionament

+ +

Quin element és el "element que conté" un element absolutament posicionat? Per defecte, és l'element {{htmlelement("html")}} - l'element posicionat està niat dins del {{htmlelement("body")}} en la font HTML, però en el disseny final, es troba a 30px de distància des de la part superior i esquerra de la vora de la pàgina, que és l'element {{htmlelement("html")}}. Això s'anomena més exactament com a context de posicionament de l'element.

+ +

Podem canviar el context de posicionament - quin element posiciona l'element absolutament posicionat en relació a. Això es fa establint el posicionament en un dels altres avantpassats del element - un dels elements que està niat a l'interior (no es pot col·locar en relació amb un element que no està niat a l'interior). Per demostrar-ho, afegiu la següent declaració a la regla del cos:

+ +
position: relative;
+ +

Això hauria de donar el següent resultat:

+ + + +

{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}

+ +

L'element posicionat ara es troba en relació amb l'element {{htmlelement("body")}}.

+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 4_positioning-context.html (vegeu el codi font).

+
+ +

Introducció a z-index

+ +

Tot aquest posicionament absolut és una bona diversió, però hi ha una altra cosa que encara no hem considerat - quan els elements comencen a superposar-se, què determina que uns elements apareguin sobre quins altres elements? En l'exemple que hem vist fins ara, només tenim un element posicionat en el context de posicionament, i apareix a la part superior, ja que els elements posicionats guanyen elements no posicionats. Què passa quan tenim més d'un?

+ +

Intenteu afegir el següent, al vostre CSS, perquè el primer paràgraf estigui absolutament posicionat també:

+ +
p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}
+ +

En aquest punt, veureu el primer paràgraf de color verd, desplaçat del flux del document i colocat una mica per sobre d'on era originalment. També s'apil·la a sota del paràgraf original .positioned, on els dos es superposen. Això és degut a que el paràgraf .positioned és el segon paràgraf de l'ordre d'origen, i els elements posicionats més endavant en l'ordre d'origen guanyen sobre els elements posicionats anteriorment en l'ordre d'origen.

+ +

Es pot canviar l'ordre d'apilament? Sí, podeu fer-ho, utilitzant la propietat {{cssxref("z-index")}}. "z-index" és una referència a l'eix z. Recordareu que en punts anteriors, en la font, parlàvem de la utilització en pàgines web de coordenades horitzontals (eixos x) i verticals (eixos-y) per tal de determinar el posicionament de coses com ara imatges de fons i desplaçaments d'ombra. (0,0) es troba a la part superior esquerra de la pàgina (o element), i els eixos x i y es desplaçan cap a la dreta i avall de la pàgina (per als idiomes d'esquerra a dreta, de totes maneres).

+ +

Les pàgines web també tenen un eix z - una línia imaginària que s'estén des de la superfície de la pantalla, cap a la nostra cara (o el que vulgueu tenir davant de la pantalla). Els valors de {{cssxref("z-index")}} afecten on els elements posicionats se situen en aquest eix; els valors positius els mouen més amunt per la pila, i els valors negatius els mouen més avall a la pila. De manera predeterminada, els elements posicionats tenen un z-index d'auto, que és efectivament 0.

+ +

Per canviar l'ordre d'apilament, proveu d'afegir la següent declaració a la vostra regla p:nth-of-type(1):

+ +
z-index: 1;
+ +

Ara hauríeu de veure l'exemple acabat:

+ + + +

{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}

+ +

Tingueu en compte que z-index només accepta valors d'índex, sense unitat; No podeu especificar que desitgeu que un element tingui 23 píxels a dalt de l'eix Z - no funciona així. Els valors més alts van per sobre dels valors inferiors, i depèn de vosaltres quins valors utilitzar. L'ús de 2 i 3 donaria el mateix efecte que 300 i 40000.

+ +

Tingueu en compte que aquí només hem tractat un únic context de posicionament. Si tinguéssiu dos conjunts separats d'elements posicionats a la mateixa pàgina, i volguéssiu que es  superposessin i que l'ordre d'apilament funcionés d'una manera específica, les coses es complicarien. Afortunadament, molt poques vegades trobareu tal complexitat amb z-index. Si voleu llegir amb molt més detall sobre com funciona exactament z-index, consulteu la Web Standards Curriculum z-index writeup. En aquest article us hem proporcionat tot el que necessiteu saber en aquesta etapa del vostre aprenentatge.

+ +
+

Note: Podeu veure l'exemple en aquest moment en directe a 5_z-index.html (vegeu el codi font).

+
+ +

Posicionament Fixa (Fixed)

+ +

Hi ha un altre tipus de posicionament a cobrir - fixed. Això funciona exactament igual que el posicionament absolut, amb una diferència clau - mentre que el posicionament absolut fixa un element en el lloc en relació amb l'element {{htmlelement("html")}} o seu més proper avantpassat posicionat, el posicionament fix fixa un element en el lloc en relació a la finestra de visualització del navegador. Això vol dir que podeu crear elements útils de la interfície d'usuari que es fixen en el lloc, com ara menús de navegació persistents.

+ +

Fem un exemple senzill per mostrar el que volem dir. Abans de res, elimineu les regles existents p:nth-of-type(1) i .positioned del vostre CSS.

+ +

Ara, actualitzeu la regla del cos per eliminar la declaració position: relative; i afegiu una alçada fixa, com aixó:

+ +
body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+ +

Ara donarem a l'element {{htmlelement("h1")}} position: fixed;, i aconseguirem que s'assegui en el centre superior de la finestra de visualització. Afegiu la regla següent al vostre CSS:

+ +
h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+ +

El top: 0; és necesari per fer que s'adhereixi a la part superior de la pantalla; Donem a l'encapçalament el mateix ample que la columna de contingut i utilitzarem el fidel antic margin: 0 auto; com a truc per centrar-ho. A continuació, li donem un fons blanc i algun farcit, de manera que el contingut no estigui visible per sota d'ell.

+ +

Si deseu i actualitzeu ara, veureu un petit efecte divertit pel qual l'encapçalament es manté fix, i el contingut apareix en desplaçar-se cap amunt i desaparèixer per sota d'ell. Però podríem millorar més, això - de moment, alguns dels continguts començan per sota de l'encapçalament, perquè el encapçalament posicionat ja no apareix en el flux del document, de manera que la resta del contingut es mou cap amunt. Necessitem moure-ho tot cap avall una mica; podem fer-ho establint un marge superior al primer paràgraf. Afegiu-ho ara:

+ +
p:nth-of-type(1) {
+  margin-top: 60px;
+}
+ +

Ara hauríeu de veure l'exemple acabat:

+ + + +

{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}

+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 6_fixed-positioning.html (vegeu el codi font).

+
+ +

Experimental: posició adherent (sticky)

+ +

Hi ha un nou valor de posicionament disponible anomenat position: sticky, el suport del mateix no està molt estès. Aquest és bàsicament un híbrid entre una posició relativa i una fixa, que permet que un element posicionat actuï com si estigués relativament posicionat fins que es desplaci a un determinat llindar (per ex., 10px des de la part superior de la finestra de visualització), i després es torna fix.  Vegeu la nostra entrada de referéncia de position: sticky per més detalls i un exemple.

+ +

Resum

+ +

Estic segur que us heu divertir jugant amb el posicionament bàsic - és una de les eines essencials que està darrera en le creació de complexos dissenys CSS i funcions d'interfície d'usuari. Tenint en compte això, en el proper article tindrem encara més diversió amb el posicionament, allà anirem un pas més enllà i començarem a construir algunes coses útils del món real amb ell.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/css_layout/practical_positioning_examples/index.html b/files/ca/learn/css/css_layout/practical_positioning_examples/index.html new file mode 100644 index 0000000000..dfaac7f63c --- /dev/null +++ b/files/ca/learn/css/css_layout/practical_positioning_examples/index.html @@ -0,0 +1,404 @@ +--- +title: Exemples pràctics de posicionament +slug: Learn/CSS/Disseny_CSS/Exemples_pràctics_posicionament +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Layout + - Learn + - absolute + - fixed + - relative +translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
+ +

Amb els fonaments del posicionament coberts en l'últim article, ara veurem com crear alguns exemples del món real, per il·lustrar quin tipus de coses podeu fer amb el posicionament.

+ + + + + + + + + + + + +
Requisits previs:Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu:Tenir una idea dels aspectes pràctics del posicionament
+ +

Una caixa d'informació amb pestanyes

+ +

El primer exemple que veurem és una caixa d'informació amb pestanyes clàssica - una característica molt freqüent que es fa servir quan voleu empaquetar molta informació en una petita àrea. Això inclou aplicacions de gran abast d'informació, com ara jocs d'estratègia/guerra, versions mòbils de llocs web on la pantalla és estreta i l'espai és limitat, i caixes d'informació compactes on és possible que vulgueu tenir molta informació disponible sense haver d'omplir tota la IU. El nostre senzill exemple es veurà així una vegada que hàgim acabat:

+ +

+ +
+

Nota: Podeu veure l'exemple acabat executant-ho en directa a info-box.html (codi font). Consulteu-ho per tenir una idea del que estareu construint en aquesta secció de l'article.

+
+ +

Podeu estar pensant "per què no crear les pestanyes separades com a pàgines web independents, i només les pestanyes, fent clic a través de les pàgines independents per crear l'efecte?" Aquest codi seria més senzill, sí, però cada visualització de "pàgina" per separat seria en realitat una pàgina web recentment carregada, la qual cosa faria més difícil guardar la informació entre les vistes i integrar aquesta característica en un disseny de d'interfície d'usuari més gran. A més, les anomenades "aplicacions de pàgina única" s'estan tornant molt populars - especialment per a les d'interfície d'usuari web mòbils - ja que tenir tot el que serveix com un únic arxiu redueix el nombre de sol·licituds HTTP necessàries per visualitzar tot el contingut, millorant així el rendiment.

+ +
+

Nota: Alguns desenvolupadors web porten les coses encara més lluny, només tenen una pàgina d'informació carregada alhora i canvien dinàmicament la informació que es mostra utilitzant, una funció de JavaScript com XMLHttpRequest. En aquest punt de l'aprenentatge, però, volem que les coses siguin tan simples com sigui possible. Hi ha una mica de JavaScript més endavant, però només una mica.

+
+ +

Per començar, ens agradaria que féssiu una còpia del fitxer HTML d'inici - info-box-start.html. Deseu-lo en algun lloc sensible a l'ordinador i obrir-ho en el vostre editor de text. Vegem l'HTML contingut en el cos:

+ +
<section class="info-box">
+  <ul>
+    <li><a href="#" class="active">Tab 1</a></li>
+    <li><a href="#">Tab 2</a></li>
+    <li><a href="#">Tab 3</a></li>
+  </ul>
+  <div class="panels">
+    <article class="active-panel">
+      <h2>The first tab</h2>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
+    </article>
+    <article>
+      <h2>The second tab</h2>
+
+      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
+    </article>
+    <article>
+      <h2>The third tab</h2>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
+
+      <ol>
+        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
+        <li>Aliquam ut porttitor urna.</li>
+        <li>Nulla facilisi</li>
+      </ol>
+    </article>
+  </div>
+</section>
+ +

Així que aquí tenim un element {{htmlelement("section")}} amb una class info-box, que conté un {{htmlelement("ul")}} i un {{htmlelement("div")}}. La llista desordenada conté tres elements de llista amb enllaços a l'interior, que es convertiran en les pestanyes reals per fer clic, per visualitzar els nostres panells de contingut. El div conté tres elements {{htmlelement("article")}}, que formaran els panells de contingut que corresponen a cada pestanya. Cada panell conté alguns continguts d'exemple.

+ +

La idea, aquí, és fer que l'estil de pestanyes pogui semblar-se a un menú estàndard de navegació horitzontal i donant-li estil els panells per a que s'asseguin un damunt de l'altre mitjançant el posicionament absolut. També us donarem una mica de JavaScript per incloure a la vostra pàgina, per mostrar el panell corresponent quan es pressiona una pestanya i l'estil de la pestanya en si. No necessitareu entendre el JavaScript en aquesta etapa, però haureu de pensar en aprendre una mica de JavaScript bàsic, el més aviat possible - com més complexes siguin les característiques de la vostra interfície d'usuari, més probable és que necessiteu implementar JavaScript a la vostra funcionalitat desitjada.

+ +

Configuració general

+ +

Per començar, afegiu el següent entre l'obertura i tancament de les etiquetes {{HTMLElement("style")}}:

+ +
html {
+  font-family: sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+ +

Aquesta és només una configuració general per establir una font sans-serif a la nostra pàgina, utilitzar el model border-box de {{cssxref("box-sizing")}} i desfer-se del marge predeterminat de {{htmlelement("body")}}.

+ +

A continuació, afegiu el següent just a sota del vostre CSS anterior:

+ +
.info-box {
+  width: 450px;
+  height: 400px;
+  margin: 0 auto;
+}
+ +

Això estableix un ample i alçada específic sobre el contingut i el centra a la pantalla mitjançant el antic truc margin: 0 auto;. Anteriorment en el curs, vam aconsellar no establir una alçada fixa en contenidors de contingut, si fos possible; Està bé en aquesta circumstància, perquè tenim contingut fix en les nostres pestanyes. També sembla una mica discordant tenir diferents pestanyes a diferents alçades.

+ +

Estilitzar les nostres pestanyes

+ +

Ara volem que les pestanyes d'estil semblin com a pestanyes - bàsicament, aquest és un menú de navegació horitzontal, però en comptes de carregar diferents pàgines web quan es fa clic, com hem vist prèviament al curs, fa que es mostrin panells diferents en la mateixa pàgina. Primer, afegiu la següent regla a la part inferior del vostre CSS per eliminar el valor predeterminat {{cssxref("padding-left")}} i {{cssxref("margin-top")}} de la llista no ordenada:

+ +
.info-box ul {
+  padding-left: 0;
+  margin-top: 0;
+}
+ +
+

Nota: Estem utilitzant selectors descendents amb .info-box al principi de la cadena a través d'aquest exemple - això és per poguer inserir aquesta funció en una pàgina amb un altre contingut ja en ella, sense por a interferir amb els estils aplicats a altres parts de la pàgina.

+
+ +

A continuació, dissenyarem les pestanyes horitzontals - els elements de la llista es flotant tots cap a l'esquerra per fer que s'asseguin en una sola línia, el seu {{cssxref("list-style-type")}} s'estableix a none per desfer-se de les vinyetes i el seu {{cssxref("width")}} s'estableix a 150px perquè s'ajusti còmodament a través de la caixa d'informació (info-box). Els elements {{htmlelement("a")}} estan configurats en {{cssxref("display")}} inline-block, perquè s'asseguin en una línia però que encara siguin estilitzables, i estiguin dissenyats adequadament per als botons de pestanya, usant una varietat d'altres propietats.

+ +

Afegiu el següent CSS:

+ +
.info-box li {
+  float: left;
+  list-style-type: none;
+  width: 150px;
+}
+
+.info-box li a {
+  display: inline-block;
+  text-decoration: none;
+  width: 100%;
+  line-height: 3;
+  background-color: red;
+  color: black;
+  text-align: center;
+}
+ +

Finalment, per a aquesta secció, establirem alguns estils als estats de l'enllaç. En primer lloc, configurarem els estats :focus i :hover de les pestanyes, perquè es vegin diferents quan estan enfocats/planejats, oferint als usuaris alguna infomació visual. En segon lloc, establirem una regla que posi el mateix estil en una de les pestanyes quan hi hagi una class active present en ella. Definirem això mitjançant JavaScript quan es faci clic a una pestanya. Col·loqueu els següents CSS per sota dels altres estils:

+ +
.info-box li a:focus, .info-box li a:hover {
+  background-color: #a60000;
+  color: white;
+}
+
+.info-box li a.active {
+  background-color: #a60000;
+  color: white;
+}
+ +

Estilitzar els panells

+ +

El següent treball és dissenyar els nostres panells. Anem a engegar-ho!

+ +

Primer de tot, afegiu la següent regla per dissenyar el contenidor .panels {{htmlelement("div")}}. Aquí, simplement, hem establert un {{cssxref("height")}} fix per assegurar-nos que els panells s'ajustin bé a l'interior de la caixa d'informació, {{cssxref("position")}} relative pel que fa a {{htmlelement("div" )}} com a context de posicionament, de manera que podeu col·locar elements fills posicionats relatius a ell i no a l'element {{htmlelement("html")}} i finalment el flotador {{cssxref("clear")}} establert en el CSS anterior perquè no interfereixi amb la resta del disseny.

+ +
.info-box .panels {
+  height: 352px;
+  position: relative;
+  clear: both;
+}
+ +

Finalment, per a aquesta secció, dissenyarem els elements individuals {{htmlelement("article")}} que componen els nostres panells. La primera regla que afegirem serà {{cssxref("position")}} absolute dels panells, i farà que tots quedin asseguts, alineats a {{cssxref("top")}} i {{cssxref("left")}} del seu contenidor {{htmlelement ("div")}} - aquesta part és absolutament clau per a tota aquesta característica de disseny, ja que fa que els panells s'asseguin uns sobre els altres. La regla també proporciona als panells la mateixa alçada de conjunt que el contenidor, i dóna al contingut un farciment, un text {{cssxref("color")}} i un {{cssxref("background-color")}}.

+ +

La segona regla que afegirem aquí fa que un panell amb una class active-panel, establert en ell, tindrà un {{cssxref("z-index")}} d'1, que se li aplicarà, la qual cosa farà que s'asseguin per sobre dels altres panells (els elements posicionats tenen un z-index de 0 per defecte, la qual cosa els posaria a continuació). Una vegada més, afegirem aquesta classe utilitzant JavaScript en el moment adequat.

+ +
.info-box article {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 352px;
+  padding: 10px;
+  color: white;
+  background-color: #a60000;
+}
+
+.info-box .active-panel {
+  z-index: 1;
+}
+ +

Afegir el nostre JavaScript

+ +

L'últim pas per fer funcionar aquesta característica és afegir JavaScript. Col·loqueu el següent bloc de codi, exactament com s'escriu, entre les etiquetes d'obertura i tancament {{htmlelement("script")}} (trobareu aquestes a sota del contingut HTML):

+ +
var tabs = document.querySelectorAll('.info-box li a');
+var panels = document.querySelectorAll('.info-box article');
+
+for(i = 0; i < tabs.length; i++) {
+  var tab = tabs[i];
+  setTabHandler(tab, i);
+}
+
+function setTabHandler(tab, tabPos) {
+  tab.onclick = function() {
+    for(i = 0; i < tabs.length; i++) {
+      tabs[i].className = '';
+    }
+
+    tab.className = 'active';
+
+    for(i = 0; i < panels.length; i++) {
+      panels[i].className = '';
+    }
+
+    panels[tabPos].className = 'active-panel';
+  }
+}
+ +

Aquest codi fa el següent:

+ + + +

Això és tot pel primer exemple. Manteniu obert el vostre codi, ja que l'afegirem a la segona.

+ +

Una caixa d'informació amb pestanyes de posició fixa

+ +

En el nostre segon exemple, farem el nostre primer exemple - la nostra caixa d'informació - i l'afegirem al context d'una pàgina web completa. Però no només això - li donarem una posició fixa perquè es mantingui en la mateixa posició en la finestra del navegador. Quan el contingut principal es desplaci, la caixa d'informació romandrà en la mateixa posició en la pantalla. El nostre exemple acabat tindrà aquest aspecte:

+ +

+ +
+

Nota: Podeu veure l'exemple acabat, executant-ho en directe a fixed-info-box.html (codi font). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.

+
+ +

Com a punt de partida, podeu fer servir l'exemple complet de la primera secció de l'article o fer una còpia local de info-box.html des del nostre repositori de Github.

+ +

Addicions HTML

+ +

En primer lloc, necessitem un codi HTML addicional per representar el contingut principal del lloc web. Afegiu el següent {{htmlelement("section")}} just a sota de l'etiqueta d'apertura {{htmlelement("body")}}, just abans de la secció existent:

+ +
<section class="fake-content">
+  <h1>Fake content</h1>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+</section>
+ +
+

Nota: Us podeu sentir lliures de canviar el contingut fals per a algun contingut real si ho desitjeu.

+
+ +

Canvis al CSS existent

+ +

A continuació, hem de fer petits canvis al CSS existent, per tenir la caixa d'informació col·locada i posicionada Canvieu la regla .info-box per desfer-vos del margin: 0 auto;  (Ja no volem que la caixa d'informació estigui centrada), afegiu {{cssxref("position")}}: fixed;, i enganxeu-ho en el {{cssxref("top")}} de la finestra de visualització del navegador.

+ +

Ara ha de ser així:

+ +
.info-box {
+  width: 450px;
+  height: 400px;
+  position: fixed;
+  top: 0;
+}
+ +

Estilitzar el contingut principal

+ +

L'únic que queda per a aquest exemple és proporcionar al contingut principal amb un estil. Afegiu la següent regla sota la resta del vostre CSS:

+ +
.fake-content {
+  background-color: #a60000;
+  color: white;
+  padding: 10px;
+  height: 2000px;
+  margin-left: 470px;
+}
+ +

Per començar, donem al contingut el mateix {{cssxref("background-color")}}, {{cssxref("color")}}, i {{cssxref("padding")}} com els panells de caixa d'informació. A continuació, li donem un gran {{cssxref("margin-left")}} per moure-ho cap a la dreta, fent espai perquè la caixa d'informació s'assegui, de manera que no se superposi amb qualsevol altre cosa.

+ +

Això marca el final del segon exemple; esperem que trobeu el tercer tan interessant.

+ +

Un panell amagat lliscant

+ +

L'exemple final que presentarem aquí és un panell que es llisca des de dins i fora de la pantalla en prémer una icona - com s'ha esmentat anteriorment, això és popular per a situacions com ara dissenys de mòbils, on els espais de pantalla disponibles són petits, per la qual cosa no es desitja usar la major part d'ella, mostrant un menú o panell d'informació en lloc de contingut útil.

+ +

El nostre exemple acabat tindrà aquest aspecte:

+ +

+ +
+

Nota: Podeu veure l'exemple acabat, executant-ho en directe a hidden-info-panel.html (codi font). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.

+
+ +

Com a punt de partida, feu una còpia local de hidden-info-panel-start.html des del nostre repositori de Github. Això no segueix l'exemple anterior, de manera que cal un nou fitxer d'inici. Fem un cop d'ull al codi HTML del fitxer:

+ +
<label for="toggle">❔</label>
+<input type="checkbox" id="toggle">
+<aside>
+
+  ...
+
+</aside>
+ +

Per començar, tenim un element {{htmlelement("label")}} i un element {{htmlelement("input")}} - els elements <label> normalment s'utilitzen per associar una etiqueta de text amb un element de formulari amb finalitats d'accessibilitat (permetent que un usuari de pantalla vegi quina descripció fa amb quin element del formulari). Aquí s'associa amb la casella de verificació <input> amb els atributs for i id.

+ +
+

Nota: Hem posat un gran signe d'interrogació en el nostre HTML perquè actuï com la nostra icona d'informació - aquest representa el botó que es premut per mostrar/amagar el panell.

+
+ +

Aquí utilitzarem aquests elements per un propòsit lleugerament diferent - un altre efecte secundari útil dels elements <label> és que podeu fer clic a l'etiqueta de la casella de verificació per a marcar la casella de verificació, així com només la casella de verificació. Això ha portat a la coneguda checkbox hack, que proporciona una forma lliure de JavaScript per controlar un  element mitjançant la commutació d'un botó. L'element que anem a controlar és l'element {{htmlelement("aside")}} que segueix els altres dos (hem deixat el seu contingut fora del llistat del codi anterior per brevetat).

+ +

A les seccions següents explicarem com funciona tot això.

+ +

Estilitzar els elements de formulari

+ +

Primer tractarem els elements de formulari - afegiu el següent CSS entre les etiquetes {{htmlelement("style")}}:

+ +
label[for="toggle"] {
+  font-size: 3rem;
+  position: absolute;
+  top: 4px;
+  right: 5px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
+}
+ +

La primera regla donar estil el <label>; aquí tenim:

+ + + +

La segona regla estableix {{cssxref("position")}} absolute en l'element <input> de casella de verificació real i l'oculta a la part superior de la pantalla. De fet, no volem veure això a la nostra interfície d'usuari.

+ +

Estilitzar el panell

+ +

Ara és hora de donar-li estil el propi panell lliscant. Afegiu la següent regla al final del vostre CSS:

+ +
aside {
+  background-color: #a60000;
+  color: white;
+
+  width: 340px;
+  height: 98%;
+  padding: 10px 1%;
+
+  position: fixed;
+  top: 0;
+  right: -370px;
+
+  transition: 0.6s all;
+}
+ +

Hi ha molt a fer aquí, analitzem-ho a poc a poc:

+ + + +

Seleccionar el estat marcat

+ +

Hi ha una mica de CSS per afegir - poseu el següent al final del vostre CSS:

+ +
input[type=checkbox]:checked + aside {
+  right: 0px;
+}
+ +

El selector és bastant complex aquí - estem seleccionant l'element <aside> adjacent a l'element <input>, però només quan està marcat (tingueu en compte l'ús de la pseudo-classe {{cssxref (": checked")}} per aconseguir això). Quan aquest és el cas, estem establint la propietat {{cssxref("right")}} de <aside> a 0px, el que fa que el panell aparegui novament en la pantalla (suaument a causa de la transició). En fer clic en l'etiqueta, torna a desmarcar la casella de verificació, que torna a ocultar el panell.

+ +

Així que aquí ho teniu - una manera bastant intel·ligent, lliure de Javascript, per crear un efecte de botó alternatiu. Això funcionarà en IE9 i superiors (la transició suau funcionarà en IE10 i superiors). Aquest efecte té algunes preocupacions - això és abusar una mica d'elements de forma (no estan destinats per a aquest propòsit), i l'efecte no és el millor en termes d'accessibilitat - l'etiqueta no es pot enfocar de manera predeterminada, i l'ús no semàntic dels elements de formulari pot causar problemes amb els lectors de pantalla. JavaScript i un enllaç o un botó poden ser més apropiat, però encara és divertit experimentar.

+ +

Resum

+ +

Així que arrodonim el nostre cop d'ull en el posicionament - ara com ara, heu de tenir una idea de com funciona la mecànica bàsica, així com la comprensió de com començar a aplicar-los en la construcció d'algunes característiques interessants de la interfície d'usuari. No us preocupeu sinó vau rebre tot això immediatament - el posicionament és un tema bastant avançat, i sempre podeu treballar a través dels articles de nou, per ajudar-vos en la vostra comprensió. El següent tema al que ens referirem és a Flexbox.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/css_layout/responsive_design/index.html b/files/ca/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..5bf909e6e7 --- /dev/null +++ b/files/ca/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,324 @@ +--- +title: Disseny responsiu +slug: Learn/CSS/Disseny_CSS/Disseny_responsiu +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
+ +

En els primers dies del disseny de pàgines web es creaven pàgines per a una mida de pantalla determinada. Si l’usuari tenia una pantalla més gran o més petita que la que el dissenyador s’esperava, els resultats anaven des de barres de desplaçament no desitjades fins a línies excessivament llargues i un mal ús de l’espai. A mesura que apareixien mides de pantalla més diverses, va aparéixer el concepte de disseny web responsiu (RWD o responsive web design), un conjunt de pràctiques que permeten a les pàgines web alterar el disseny i l’aparença per a adaptar-se a diferents amplades, resolucions, etc. És una idea que ha canviat la manera de dissenyar una pàgina web per a diversos dispositius, i en aquest article t’ajudarem a entendre les principals tècniques que has de conèixer per a dominar-la.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d’HTML (consulta la Introducció a l’HTML), i nocions de com funciona el CSS (consulta els Primers passos amb el CSS i els elements bàsics del CSS).
Objectiu:Entendre els conceptes fonamentals i la història del disseny responsiu.
+ +

Història dels dissenys de pàgina web

+ +

En un moment de la història, només tenies dues opcions a l’hora de dissenyar un lloc web:

+ + + +

Aquests dos enfocaments tenien com a resultat un lloc web que s’adequava essencialment a la pantalla de la persona que havia dissenyat el lloc web. El lloc web líquid donava un disseny aixafat en pantalles més petites (com es pot veure a continuació), i línies molt llargues que costaven molt de llegir en les pantalles grans.

+ +
Una disposició amb dues columnes aixafades en una finestra de visualització de la mida d’un dispositiu mòbil. +
+
+ +
+

Nota: Observa aquest disseny de pàgina web líquid senzill: exemple, codi d’origen. Amplia o redueix la finestra del navegador i observa com en canvia l’aspecte segons les diferents mides.

+
+ +

Amb llocs web amb amplada fixa es corria el risc d’aparició d’una barra de desplaçament horitzontal en les pantalles que eren més petites que l’amplada del lloc web (com es pot veure a continuació) i de molta superfície blanca a les vores del disseny en les pantalles que eren més grans.

+ +
Disseny amb barra de desplaçament horitzontal en una finestra de visualització de la mida d’un dispositiu mòbil. +
+
+ +
+

Nota: Observa aquest disseny de pàgina web senzill d’amplada fixa: exemple, codi d’origen. Un cop més, canvia la mida de la finestra del navegador i observa’n el resultat.

+
+ +
+

Nota: Les captures de pantalla de dalt es fan amb el mode de disseny responsiu de les DevTools de Firefox.

+
+ +

A mesura que la web per a dispositius mòbils va començar a esdevenir una realitat amb els primers telèfons mòbils, les companyies que volien adherir-se en general a la tecnologia mòbil creaven una versió del lloc web especial per a dispositius mòbils amb una URL diferent (sovint alguna cosa com ara m.example.com o example.mobi). Això volia dir que calia desenvolupar i mantenir actualitzades dues versions independents de la mateixa pàgina web.

+ +

A més, aquests llocs web per a dispositius mòbils solien oferir una experiència d’usuari molt reduïda. Com que els dispositius mòbils es van tornar més potents i van poder mostrar llocs web complets, això frustrava els usuaris de dispositius mòbils, que es trobaven atrapats en la versió mòbil del lloc web i no podien accedir a informació que sabien que hi havia en la versió d’escriptori, que incloïa totes les funcions de la pàgina web.

+ +

Disseny flexible abans del disseny responsiu

+ +

Es van desenvolupar diversos enfocaments per a intentar resoldre els inconvenients dels mètodes líquids o d’amplada fixa per a crear llocs web. El 2004, Cameron Adams va escriure una publicació titulada Resolution dependent layout, on descriu un mètode per a crear un disseny de pàgina web que s’adapta a diferents resolucions de pantalla. Aquest enfocament requeria JavaScript per a detectar la resolució de la pantalla i carregar el CSS correcte.

+ +

Zoe Mickley Gillenwater va ser fonamental en la seva tasca de descriure i formalitzar les diferents maneres de crear llocs web flexibles, per a intentar trobar una situació intermèdia entre omplir tota la pantalla o tenir una mida completament fixa.

+ +

El disseny responsiu

+ +

El terme disseny responsiu va ser creat per Ethan Marcotte el 2010, que va descriure l’ús de tres tècniques combinades.

+ +
    +
  1. La primera va ser la idea de les graelles fluides, cosa que ja explorava Gillenwater, i que es pot llegir en l’article de Marcotte, Fluid grids (publicat el 2009 en A list apart).
    2. +
  2. La segona tècnica va ser la idea d’imatges fluides. Utilitzant una tècnica molt senzilla d’establir la propietat max-width al 100%, les imatges es farien més petites si la columna que les contenia es feia més estreta que la mida intrínseca de la imatge, però mai no augmentaria. D’aquesta manera, una imatge s’escala per a poder-se incloure en una columna de mida flexible sense que desbordi, però no es fa més gran i es pixela si la columna s’amplia més que la imatge.
    3. +
  3. El tercer component clau va ser la consulta de mèdia (o media query). Les consultes de mèdia habiliten el tipus de canvi de disseny de pàgina web que Cameron Adams havia explorat abans amb JavaScript, però utilitzant només CSS. En lloc de tenir un disseny de pàgina web per a cada mida de pantalla, se’n podria tenir un i canviar-ne la disposició dels elements. Es podrien fer aparèixer barres laterals per a les pantalles més petites, o es podia mostrar una navegació alternativa.
    4. +
+ +

És important entendre que el disseny web responsiu no és una tecnologia independent: és un terme que s’utilitza per a descriure un enfocament del disseny de pàgines web o un conjunt de bones pràctiques que s’utilitzen per a crear un disseny de pàgines web que pugui respondre segons el dispositiu que s’utilitza per a visualitzar el contingut. En l’exploració original de Marcotte, això va donar lloc a les graelles flexibles (amb elements flotants) i les consultes de mèdia; però en els gairebé deu anys des que es va escriure aquest article, treballar de manera responsiva s’ha convertit en la norma. Els mètodes de disseny amb CSS moderns són intrínsecament responsius, i hi ha novetats integrades a la plataforma web que faciliten el disseny de llocs web responsius.

+ +

La resta d’aquest article t’indica les diverses funcions de la plataforma web que pots utilitzar per a crear un lloc web responsiu.

+ +

Les consultes a mèdia (media queries)

+ +

El disseny responsiu només va poder sorgir a causa de les consultes a mèdia. L’especificació del nivell 3 de les consultes a mèdia es va convertir en una Candidate Recommendation el 2009, cosa que significa que es considerava llesta per a implementar-la en els navegadors. Les consultes a mèdia ens permeten fer un seguit de proves (per exemple, si la pantalla de l’usuari és més gran que una certa amplada o una determinada resolució) i aplicar CSS de manera selectiva per a dissenyar la pàgina web més adequada segons les necessitats de l’usuari.

+ +

Per exemple, la consulta als mèdia següent esbrina si la pàgina web que es mostra ho fa com una pantalla (per tant, no és un document imprès), i si la finestra té almenys 800 píxels d’ample. El CSS per al selector .container només s’aplica si aquestes dues coses són certes.

+ +
@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} 
+
+ +

Pots afegir diverses consultes a mèdia dins d’un full d’estil, i ajustar el disseny sencer o només unes parts perquè s’adapti més bé a les diverses mides de pantalla. Els punts en què s’introdueix una consulta de mèdia i es canvia la disposició dels elements de la pàgina web es coneixen com punts de ruptura.

+ +

Un enfocament habitual quan s’utilitzen les consultes als mèdia és crear un disseny senzill d’una sola columna per a dispositius de pantalla estreta (per exemple, telèfons mòbils), després comprovar si hi ha pantalles més grans i implementar una disposició en múltiples columnes quan saps que tens prou amplada de pantalla per a fer-ho. Sovint es descriu com disseny mobile first.

+ +

Trobaràs més informació en la documentació de MDN per a les consultes als mèdia.

+ +

Graelles flexibles

+ +

Els llocs responsius no només canvien la distribució entre punts de ruptura, sinó que es basen en graelles flexibles. Una graella flexible significa que no cal delimitar el lloc web a totes les mides possibles de dispositius que hi ha i crear un disseny en píxels perfecte. Aquest plantejament seria impossible, atès el gran nombre de dispositius de mida diferent que hi ha, i del fet que, com a mínim en la versió d’escriptori, la finestra del navegador no sempre es maximitza.

+ +

Si fas servir una graella flexible, només has d’afegir un punt de ruptura i canviar el disseny en el punt en què el contingut es comença a veure malament. Per exemple, si les longituds de les línies es fan il·legibles a mesura que augmenta la mida de la pantalla, o si una caixa s’encongeix fins a una amplada de dues paraules en cada línia a mesura que la mida de la pantalla es redueix.

+ +

En els primers dies del disseny responsiu, l’única opció per a dissenyar pàgines web era utilitzar elements flotants. Els dissenys de pantalla amb elements flotants flexibles s’aconseguien donant a cada element una amplada en percentatge i assegurar-se que no s’atenyia més del 100% per a tota la pàgina. En la seva obra original sobre graelles flexibles, Marcotte va detallar una fórmula per a convertir en percentatges un disseny de pàgina dissenyat en píxels.

+ +
target / context = result 
+
+ +

Per exemple, si la mida de la nostra columna de destinació és de 60 píxels i el context (o contenidor) en què es troba és de 960 píxels, dividim 60 per 960 i obtenim un valor que podem utilitzar en el nostre CSS, després de traslladar el punt decimal dos llocs a la dreta.

+ +
.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} 
+
+ +

Avui dia trobaràs aquest enfocament en molts llocs web, i també el trobaràs documentat aquí, en la secció dedicada al disseny de l’article de mètodes heretats de disseny de pàgines web. És probable que en el transcurs del teu treball et trobis amb llocs web que usen aquest enfocament, de manera que val la pena entendre’l, tot i que no construiràs un lloc modern amb una graella flexible basada en elements flotants.

+ +

L’exemple següent mostra un disseny senzill i sensible amb consultes a mèdia i una graella flexible. En pantalles estretes, el disseny mostra les caixes apilades les unes sobre les altres:

+ +
Una vista d’un dispositiu mòbil amb una disposició de caixes apilades verticalment l’una sobre l’altra. +
+
+ +

En pantalles més amples es passa a dues columnes:

+ +
Una vista d’un dispositiu d’escriptori d’un disseny amb dues columnes. +
+
+ +
+

Nota: Pots trobar l’exemple en viu i el codi d’origen d’aquest exemple a GitHub.

+
+ +

Tecnologies modernes de disseny de pàgines web

+ +

De manera predeterminada, els mètodes moderns de disseny de pàgines web com ara el disseny en múltiples columnes, el Flexbox i el Grid són responsius per defecte. Tots aquests mètodes parteixen de la base que vols crear una graella flexible i et proporcionen les maneres de fer-ho més fàcils.

+ +

Multicol

+ +

El més antic d’aquests mètodes de disseny de pàgines web és multicol: quan especifiques un nombre de columnes (column-count), indiques en quantes columnes vols dividir el contingut. El navegador llavors calcula la mida d’aquestes columnes, que canvia d’acord amb la mida de la pantalla.

+ +
.container {
+  column-count: 3;
+} 
+
+ +

Si en lloc d’això estableixes l’atribut column-width, especifiques una amplada mínima. El navegador crea tantes columnes d’aquesta amplada com càpiguen còmodament en el contenidor, i reparteix l’espai entre totes les columnes. Per tant, el nombre de columnes canvia segons la quantitat d’espai que hi ha.

+ +
.container {
+  column-width: 10em;
+} 
+
+ +

Flexbox

+ +

Amb la tecnologia Flexbox, els elements flexibles es redueixen i distribueixen l’espai entre els elements d’acord amb l’espai que hi ha en el contenidor segons el comportament inicial que tenen predeterminat. Si canvies els valors de flex-grow i flex-shrink, pots indicar com vols que es comportin els elements quan hi ha més o menys espai al voltant.

+ +

En l’exemple següent, els elements flexibles ocupen cada un la mateixa quantitat d’espai en el contenidor flexible, mitjançant la propietat abreviada flex: 1, com es descriu en l’article Flexbox: Dimensions flexibles d’elements flex.

+ +
.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} 
+
+ +
+

Nota: Com a exemple hem reconstruït el disseny responsiu senzill anterior, aquest cop amb Flexbox. Pots veure que ja no cal fer servir valors percentuals estranys per a calcular la mida de les columnes: exemple, codi d’origen.

+
+ +

Graella CSS

+ +

En el disseny de pàgines web amb graella CSS, la unitat fr permet distribuir l’espai disponible en les traces d’una graella. L’exemple següent crea un contenidor de graella amb tres traces de mida 1fr. Es creen tres traces de columna, i cadascuna ocupa una part de l’espai disponible en el contenidor. Pots obtenir més informació sobre aquest enfocament per a crear una graella en la secció Aprendre a dissenyar graelles, de l’article Graelles flexibles amb la unitat fr.

+ +
.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} 
+
+ +
+

Nota: La versió del disseny de pàgines web amb graella és encara més senzilla, perquè permet definir les columnes amb .wrapper: exemple, codi d’origen.

+
+ +

Imatges responsives

+ +

L’enfocament més senzill de les imatges responsives es va descriure en els primers articles de Marcotte sobre el disseny de pàgines web responsiu. Bàsicament, agafes una imatge de la mida més gran que puguis necessitar, i la redueixes. Aquest és encara un enfocament emprat avui, i en la majoria de fulls d’estil trobaràs en algun lloc el CSS següent:

+ +
img {
+  max-width: 100%:
+} 
+
+ +

Hi ha inconvenients evidents en aquest enfocament. És possible que la imatge es mostri molt més petita que la seva mida intrínseca, i això representa una pèrdua d’amplada de banda: un usuari de dispositiu mòbil pot acabar descarregant una imatge que és diverses vegades de la mida del que realment veu a la finestra del navegador. A més, pot ser que no vulguis la mateixa relació d’aspecte de la imatge al mòbil i a l’escriptori. Per exemple, pot ser bo tenir una imatge quadrada per a mòbils, i mostrar la mateixa imatge en format apaïsat a l’escriptori. O bé, tenint en compte la mida més petita del dispositiu mòbil, pot ser que hi vulguis mostrar una imatge diferent, que s’entengui més fàcilment en una pantalla petita. Aquestes coses no es poden aconseguir simplement reduint una imatge.

+ +

Les imatges responsives, amb l’element {{htmlelement("picture")}} i els atributs srcset i sizes de {{htmlelement("img")}} resolen tots dos problemes. Pots proporcionar diverses mides, juntament amb «suggeriments» (metadades que descriuen la mida de la pantalla i la resolució a la qual s’adapta la imatge), i el navegador tria la imatge més adequada per a cada dispositiu i procura que l’usuari descarregui la mida adequada de la imatge en el dispositiu que utilitza.

+ +

També pots usar imatges de director artístic, que proporcionen un retall o una imatge completament diferent per a diferents mides de pantalla.

+ +

Pots trobar una guia detallada sobre Imatges responsives en el mòdul Aprendre HTML de MDN.

+ +

Tipografia responsiva

+ +

Un element de disseny responsiu que encara no hem tractat en articles anteriors és la idea de la tipografia responsiva. Aquest concepte descriu essencialment el fet de canviar la mida de lletra segons l’espai de pantalla que reflecteixen les consultes a mèdia.

+ +

En aquest exemple, volem establir el nostre títol d’encapçalament de nivell 1 en 4rem, és a dir, que serà quatre vegades la mida de la nostra lletra base. És un títol molt gran! Només volem aquest títol d’encapçalament tan gran en mides de pantalla grans, per tant, primer creem un títol d’encapçalament més petit i després utilitzem les consultes a mèdia per a sobreescriure’l amb la mida més gran si sabem que l’usuari té una mida de pantalla d’almenys 1200px.

+ +
html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} 
+
+ +

Hem editat el nostre exemple de graella responsiva per a incloure el tipus responsiu amb el mètode descrit. Pots veure com el títol d’encapçalament canvia de mida a mesura que el disseny canvia a la versió de dues columnes.

+ +

En el dispositiu mòbil, el títol d’encapçalament és més petit:

+ +
Un esquema apilat amb una mida de títol d’encapçalament petita. +
+
+ +

Tanmateix, en el dispositiu d’escriptori veiem la mida del títol d’encapçalament més gran:

+ +
Un disseny de dues columnes amb un títol d’encapçalament gran. +
+
+ +
+

Nota: Observa aquest exemple en acció: exemple, codi d’origen.

+
+ +

Tal com mostra aquest enfocament de la tipografia, no cal restringir les consultes a mèdia a canviar només el disseny de pàgina web. Es poden utilitzar per a ajustar qualsevol element i fer-lo més útil o atractiu a les diverses mides de pantalla.

+ +

L’ús d’unitats de finestra de visualització per a tipografies responsives

+ +

Un enfocament interessant és utilitzar la unitat vw de finestra de visualització per a habilitar la tipografia responsiva. 1vw és igual a un 1 per cent de l’amplada de la visualització, cosa que significa que si defineixes la mida de la lletra amb vw, sempre es relacionarà amb la mida de la finestra de visualització.

+ +
h1 {
+  font-size: 6vw;
+}
+ +

El problema de fer servir la unitat vw és que l’usuari perd la capacitat d’ampliar un bloc de text, perquè aquest text sempre està relacionat amb la mida de la finestra de visualització. Per tant, mai no hauries de definir text fent servir només les unitats de finestra de visualització.

+ +

Hi ha una solució, que implica l’ús de calc(). Si afegeixes la unitat vw a un conjunt de valors amb una mida fixa com em o rem, encara es pot fer zoom del text. Essencialment, la unitat vw s’afegeix a sobre d’aquest valor ampliat:

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

Això vol dir que només hem d’especificar la mida de la lletra per al títol d’encapçalament, en lloc de configurar-la per a dispositius mòbils i redefinir-la segons les consultes a mèdia. A continuació, la lletra augmenta gradualment a mesura que augmenta la mida de la finestra de visualització.

+ +
+

Observa aquest exemple en acció: exemple, codi d’origen.

+
+ +

L’etiqueta meta de la finestra de visualització

+ +

Si observes el tipus de lletra d’una pàgina HTML responsiva, normalment trobaràs l’etiqueta {{htmlelement("meta")}} a la capçalera (<head>) del document.

+ +
<meta name="viewport" content="width=device-width,initial-scale=1">
+
+ +

Aquesta etiqueta meta indica als navegadors dels dispositius mòbils que han d’establir l’amplada de la finestra de visualització a l’amplada del dispositiu i escalar el document al 100% de la mida prevista, cosa que mostra el document a la mida optimitzada per a dispositius mòbils.

+ +

Per què cal, això? Perquè els navegadors dels dispositius mòbils tendeixen a mentir sobre l’amplada de la finestra de visualització.

+ +

Aquesta etiqueta meta existeix perquè quan es va llançar l’iPhone original i la gent va començar a veure llocs web en una petita pantalla de telèfon, la majoria dels llocs web no estaven optimitzats per a dispositius mòbils. Per tant, el navegador del dispositiu mòbil establia l’amplada de la visualització a 960 píxels, la representava a aquella amplada i mostrava el resultat com la versió ampliada del disseny per al dispositiu d’escriptori. Altres navegadors de dispositius mòbils (per exemple, el de Google Android) van fer el mateix. Els usuaris podien fer zoom i desplaçar-se per la web per a veure els fragments que els interessaven, però allò no era còmode. Encara ho podràs veure si tens la mala sort d’anar a parar a un lloc web que no té un disseny responsiu.

+ +

El problema és que el teu disseny responsiu amb punts de ruptura i consultes a mèdia no funciona tal com es preveu per als navegadors mòbils. Si tens un disseny de pantalla estret que s’inicia amb una amplada de visualització de 480px o menys i la ruptura s’estableix a 960px, mai no veuràs la disposició de pantalla estreta al dispositiu mòbil. En canvi, si defineixes width=device-width, sobreescrius l’amplada predeterminada d’Apple width=960px amb l’amplada real del dispositiu, de manera que les consultes a mèdia permetran que funcioni com es preveu.

+ +

Per tant, sempre has d’incloure la línia HTML anterior a la capçalera dels teus documents.

+ +

Hi ha altres opcions de configuració que pots utilitzar amb l’etiqueta meta de la finestra de visualització, però, en general, t’anirà bé utilitzar la línia anterior.

+ + + +

Has d’evitar l’ús de minimum-scale, maximum-scale, i en particular la configuració de user-scalable en no. Els usuaris haurien de poder fer zoom en la mesura que necessitin; impedir això genera problemes d’accessibilitat.

+ +
+

Nota: Hi ha una @rule CSS dissenyada per a substituir l’etiqueta meta de la finestra de visualització (@viewport), però té una compatibilitat de navegadors deficient. Es va implementar a Internet Explorer i Edge, però un cop entri en funcionament Edge basat en Chromium, deixarà de formar part del navegador Edge.

+
+ +

Resum

+ +

El disseny responsiu es refereix a un disseny de lloc o d’aplicació que respon a l’entorn en què es visualitza. Comprèn diverses funcions i tècniques CSS i HTML, i ara és essencialment l’única manera com construïm els llocs web per defecte. Tingues en compte els llocs web que visites amb el dispositiu mòbil: probablement és poc habitual trobar-te amb un lloc que és la versió reduïda de la d’escriptori, o en què cal desplaçar-se de costat per a trobar-hi coses. Això és perquè la xarxa web s’ha orientat cap a aquest enfocament de disseny responsiu.

+ +

També ha estat molt més fàcil aconseguir dissenys responsius amb l’ajuda dels mètodes de disseny que has après en aquests articles. Si ets nou en el desenvolupament web, avui tens moltes més eines a la teva disposició que en els primers dies del disseny responsiu. Per tant, val la pena comprovar la data dels materials de referència que consultes. Tot i que els articles històrics continuen sent útils, l’ús modern de CSS i HTML facilita molt la creació de dissenys elegants i útils, i independents del dispositiu del visitant.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul

+ + diff --git a/files/ca/learn/css/css_layout/supporting_older_browsers/index.html b/files/ca/learn/css/css_layout/supporting_older_browsers/index.html new file mode 100644 index 0000000000..5a689b6437 --- /dev/null +++ b/files/ca/learn/css/css_layout/supporting_older_browsers/index.html @@ -0,0 +1,237 @@ +--- +title: Suport en navegadors antics +slug: Learn/CSS/Disseny_CSS/Suport_en_navegadors_antics +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul et recomanem que utilitzis els mètodes Flexbox i Grid com a eines principals per als teus dissenys. Tot i això, hi haurà visitants del teu lloc web que utilitzin navegadors més antics o navegadors que no admetin els mètodes que has utilitzat. Això sempre serà així a la xarxa: a mesura que es desenvolupen funcions noves, els diferents navegadors prioritzen coses diferents. Aquest article explica com utilitzar tècniques web modernes sense perjudicar els usuaris que empren una tecnologia més antiga.

+ + + + + + + + + + + + +
Prerequisits:Els conceptes bàsics d'HTML (consulta la Introducció a l'HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS i Aplicar estil a les caixes).
Objectiu:Entendre com proporcionar assistència per als dissenys en navegadors antics que potser no són compatibles amb les funcions que vols utilitzar.
+ +

El panorama de compatibilitat dels navegadors per al teu lloc web?

+ +

Cada lloc web és diferent en termes de públic objectiu. Abans de decidir l’enfocament que cal adoptar, esbrina el nombre de visitants que accedeixen al teu lloc web amb navegadors més antics. Això és senzill si ja tens un lloc web que simplement modifiques o reemplaces, perquè probablement tinguis analítiques que t'indiquin la tecnologia que utilitzen les persones que hi accedeixen. Si no tens analítiques o es tracta un lloc web totalment nou, hi ha llocs com ara Statcounter que poden proporcionar estadístiques filtrades segons la ubicació.

+ +

També has de considerar el tipus de dispositius i la manera com la gent utilitza el teu lloc web; per exemple, potser esperes un nombre de dispositius mòbils superior a la mitjana. Sempre s’ha de tenir en compte l’accessibilitat i les persones que utilitzen tecnologia d’assistència, però per a alguns llocs pot ser encara més crític. Segons experiència pròpia, els desenvolupadors sovint es preocupen massa per l’experiència de l’1% d’usuaris en una versió antiga d’Internet Explorer, i no consideren del tot el nombre molt més gran d'usuaris que tenen necessitats d’accessibilitat especials.

+ +

La compatibilitat de les funcions que empres

+ +

Un cop coneixes els navegadors que accedeixen al teu lloc web, pots valorar qualsevol tecnologia que vulguis utilitzar segons la compatibilitat que presenten i la facilitat amb què pots proporcionar una alternativa als visitants que no tenen aquesta tecnologia disponible. Intentem facilitar-te aquesta experiència proporcionant informació de compatibilitat dels navegadors en cadascuna de les pàgines que detallen una propietat CSS. Per exemple, consulta la pàgina de {{cssxref("grid-template-columns")}}. Al final d'aquesta pàgina hi ha una taula que mostra els navegadors principals juntament amb la versió que va començar a admetre aquesta propietat.

+ +

+ +

Una altra manera més popular d'esbrinar què és compatible amb una funció és el lloc web Can I Use. Aquest lloc web enumera la majoria de funcions de la plataforma web amb informació sobre l'estat de compatibilitat del navegador. Pots veure les estadístiques d’ús per ubicació, fet que resulta útil si treballes en un lloc que té usuaris d'una àrea del món determinada. Fins i tot pots enllaçar el teu compte de Google Analytics per a obtenir anàlisis basades en les teves dades d’usuari.

+ +

Entendre la tecnologia que tenen els teus usuaris i les compatibilitats de les funcions que potser vulguis fer servir et proporciona una bona base per a prendre totes les decisions i saber quina és la millor manera de donar suport a tots els teus usuaris.

+ +

Compatibilitat no significa «veure's igual»

+ +

És possible que un lloc web no es vegi de la mateixa manera a tots els navegadors, perquè alguns dels teus usuaris accediran al lloc web des d’un dispositiu mòbil i d’altres des de l'ordinador de taula. De la mateixa manera, alguns dels teus usuaris tindran una versió antiga del navegador, i d'altres una de més nova. És possible que alguns dels teus usuaris n’escoltin el contingut amb un lector de pantalla o hagin fet zoom a la pàgina per a poder-la llegir. Donar suport a tothom significa servir una versió del contingut dissenyada estratègicament, de manera que es vegi genial en els navegadors moderns, però que encara puguin utilitzar a un nivell bàsic els usuaris de navegadors més antics.

+ +

Un nivell bàsic de compatibilitat prové d’estructurar bé el contingut perquè el flux normal de la pàgina tingui sentit. Pot ser que un usuari amb un telèfon mòbil amb funcions molt limitades no obtingui gran part del teu CSS, però el contingut fluirà de manera que faciliti la lectura. Per tant, un document HTML ben estructurat hauria de ser sempre el punt de partida. El teu contingut té sentit si suprimeixes el full d’estil?

+ +

Una opció és deixar aquesta visió senzilla del lloc web com a alternativa per a les persones que utilitzen navegadors molt antics o limitats. Si tens un nombre reduït de persones que visiten el lloc amb aquests navegadors, és possible que no tingui sentit comercial dedicar temps a intentar donar-los una experiència similar a la gent que utilitza navegadors moderns. Seria millor dedicar temps a coses que facin més accessible el lloc web, perquè així dones servei a molts més usuaris. Hi ha un punt intermedi entre una pàgina HTML simple i tots aquests recursos, i el CSS ha permès que la creació d'aquestes alternatives sigui bastant senzilla.

+ +

La creació d’alternatives d'emergència amb CSS

+ +

Les especificacions CSS contenen informació que explica què fa el navegador quan s'apliquen dos mètodes de disseny al mateix element. Això vol dir que hi ha una definició per a què passa si un element flotant, per exemple, també és un element de graella que utilitza disseny de graella CSS. Combina aquesta informació amb el fet que els navegadors ignoren el CSS que no entenen, i tens una manera de crear dissenys senzills amb les tècniques heretades que ja hem explicat, que després se sobreescriuen amb el teu disseny de graella en els navegadors moderns que l’entenen.

+ +

En l'exemple següent hem especificat que tres elements de flotació <div> es mostrin en fila. Qualsevol navegador que no admeti el disseny de graella CSS veurà la fila de caixes com un disseny amb el mètode de flotació. Un element de flotació que es converteix en un element de graella perd el comportament de flotació, i això significa que si convertim l'embolcall en un contenidor de graella, els elements de flotació es converteixen en elements de graella. Si el navegador admet el disseny de graella, mostrarà la pàgina en forma de graella; si no l’admet, ignorarà les propietats relacionades amb el disseny de graella i utilitzarà el disseny de flotació.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+ +
<div class="wrapper">
+  <div class="item">Primer element</div>
+  <div class="item">Segon element</div>
+  <div class="item">Tercer element</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example1', '100%', '200') }}

+
+ +
+

Nota: La propietat {{cssxref("clear")}} tampoc té cap efecte un cop l'element es converteix en un element de graella, de manera que pots tenir un composició amb un peu de pàgina esborrat, que es convertirà en un disseny de graella.

+
+ +

Mètodes de les solucions alternatives

+ +

Hi ha diversos mètodes de disseny que es poden utilitzar de manera similar a aquest exemple de flotació. Pots triar el que tingui més sentit per al patró de disseny que has de crear.

+ +
+
Float i clear
+
Com s'ha mostrat abans, les propietats float i clear deixen d'afectar el disseny si els elements que passen a ser de flotació o els esborrats es converteixen en elements flexibles o de graella.
+
display: inline-block
+
Aquest mètode es pot utilitzar per a crear dissenys de columnes si un element té display: inline-block, però si després es converteix en un element de disseny de tipus flexible o de graella, el comportament inline-block s'ignora.
+
display: table
+
El mètode per a crear taules CSS que es descriu en la introducció d'aquests articles es pot utilitzar com a mètode de solució alternativa. Els elements que estiguin configurats en la taula CSS perdran aquest comportament si es converteixen en elements Flexbox o Grid. Però és important destacar que les caixes sense nom que s’han creat per a corregir l'estructura de la taula, no es creen.
+
Disseny en diverses columnes
+
Pots utilitzar multi-col com a solució alternativa en certs dissenys; si el teu contenidor té definida alguna propietat column-* i es converteix en un contenidor amb comportament de graella, s'anul·la el comportament en columnes.
+
Flexbox com a solució alternativa a la graella
+
Flexbox té una compatibilitat de navegador més gran que Grid perquè ha rebut el suport d’Internet Explorer 10 i 11, tot i que et recomanem que comprovis la informació que trobaràs més endavant en aquest article sobre la compatibilitat força irregular i confusa de Flexbox en navegadors més antics. Si converteixes un contenidor flexible en un contenidor de graella, s'ignorarà qualsevol propietat flex aplicada als descendents.
+
+ +

Observa que si fas servir el CSS d'aquesta manera pots proporcionar una experiència d'usuari decent per ajustar moltes compaginacions en navegadors antics. Afegim un disseny més senzill basat en tècniques més antigues i amb bona compatibilitat, i després utilitzem el CSS més recent per a crear el disseny que veurà més del 90% del públic. Hi ha casos, però, en què el codi alternatiu haurà d’incloure alguna cosa que els navegadors nous també interpretaran. Un bon exemple d’això és si afegim amplades percentuals als nostres elements de flotació per aconseguir que les columnes s’assemblin més a la visualització de graella i s’estirin per omplir el contenidor.

+ +

En el disseny de flotació, el percentatge es calcula a partir del contenidor: el 33,333% és un terç de l'amplada del contenidor. Tanmateix, a la graella es calcula que el 33,333% es calcula a partir de l’àrea de la graella en què es troba l’element, de manera que es converteix en un terç de la mida que volem un cop introduït el disseny de graella.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+ +
<div class="wrapper">
+  <div class="item">Primer element</div>
+  <div class="item">Segon element</div>
+  <div class="item">Tercer element</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example2', '100%', '200') }}

+
+ +

Per resoldre aquest problema, hem de tenir una manera de detectar si la graella és compatible i, per tant, si anul·larà l'amplada. El CSS té una solució.

+ +

Consultar les propietats

+ +

Consultar les propietats et permet provar si un navegador admet alguna funció CSS en concret. Això vol dir que pots escriure algun CSS per a navegadors que no admetin una característica determinada, i a continuació comprovar si el navegador és compatible i introduir el teu disseny.

+ +

Si afegim una consulta de propietats en l’exemple anterior, podem utilitzar-la per a configurar les amplades dels nostres articles de manera automàtica (auto) si sabem que hi ha compatibilitat amb el disseny de graella.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+@supports (display: grid) {
+  .item {
+      width: auto;
+  }
+}
+
+ +
<div class="wrapper">
+  <div class="item">Primer element</div>
+  <div class="item">Segon element</div>
+  <div class="item">Tercer element</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example3', '100%', '200') }}

+
+ +

La compatibilitat per a la consulta de propietats és molt bona en tots els navegadors moderns, però cal tenir en compte que són els navegadors que no admeten la graella CSS els que tampoc no admeten la consulta de propietats. Això significa que per a aquells navegadors funcionarà un enfocament com el que es detalla més amunt. El que fem és escriure primer el nostre CSS anterior, sense fer cap consulta de propietats. Els navegadors que no admeten la graella i no admeten la consulta de propietats faran servir la informació de disseny que poden comprendre i ignoraran completament la resta. Els navegadors que admeten la consulta de propietats també admeten la graella, i per tant executaran el codi de graella i el codi de la consulta de propietats.

+ +

L'especificació per a la consulta de propietats també inclou la possibilitat de comprovar si un navegador no admet una propietat; això només és útil si el navegador admet consultes de propietats. En el futur tindrà sentit un enfocament que comprovi la falta de compatibilitats, perquè ja no existiran els navegadors que no disposen de compatibilitats per a la consulta. Ara, però, utilitza l’enfocament de fer servir el CSS anterior i sobreescriure'l per a obtenir la millor compatibilitat.

+ +

Les versions anteriors de Flexbox

+ +

En versions anteriors dels navegadors, pots trobar versions anteriors de l'especificació Flexbox. En el moment d’escriure això, es tracta principalment d’un problema amb Internet Explorer 10, que utilitza el prefix -ms- per a Flexbox. Això també significa que hi ha articles i tutorials obsolets; aquesta guia útil t'ajuda a comprovar el que busques, i també pot ajudar-te si necessites compatibilitat Flexbox en navegadors molt antics.

+ +

La versió prefixada de graella de l’Internet Explorer 10 i 11

+ +

L'especificació de graella CSS es va prototipar inicialment en Internet Explorer 10; això vol dir que, tot i que IE10 i IE11 no disposen de compatibilitat de graella moderna, sí que tenen una versió de disseny de graella molt útil, tot i que diferent de l’especificació moderna que documentem en aquest lloc. Les implementacions d’IE10 i 11 tenen el prefix -ms-, que significa que les pots utilitzar per a aquests navegadors i que s'ignoraran en els navegadors que no formin part de Microsoft. Tanmateix, Edge encara entén la sintaxi antiga, així que tingues cura que tot es sobreescrigui de manera segura al teu CSS de graella moderna.

+ +

La guia per a la Millora progressiva del disseny de graella et pot ajudar a comprendre la versió de la graella d’Internet Explorer, i hem inclòs alguns enllaços útils addicionals al final d'aquest article. Tanmateix, a menys que tinguis un nombre molt elevat de visitants en versions d’Internet Explorer més antigues, potser és millor centrar-te en la creació d’una alternativa que funcioni per a tots els navegadors no compatibles.

+ +

Proves amb navegadors antics

+ +

Atès que la majoria de navegadors admeten Flexbox i la graella, pot ser raonablement difícil fer proves amb navegadors més antics. Una de les maneres és utilitzar una eina de prova en línia com Sauce Labs, tal i com es detalla en el mòdul de comprovació de compatibilitat entre navegadors.

+ +

També pots descarregar i instal·lar màquines virtuals i executar versions anteriors de navegadors en un entorn contingut en el teu ordinador. Tenir accés a versions anteriors d’Internet Explorer és especialment útil, i amb aquest propòsit Microsoft ha posat a disposició dels usuaris una varietat de màquines virtuals de descàrrega gratuïta. Estan disponibles per als sistemes operatius Mac, Windows i Linux, i per tant són una bona manera de fer proves en navegadors Windows antics i moderns, encara que no utilitzis un ordinador amb sistema operatiu de Windows.

+ +

Resum

+ +

Ara tens el coneixement per utilitzar tècniques de confiança com ara Grid i Flexbox, crear solucions alternatives per a navegadors més antics i utilitzar qualsevol tècnica nova que pugui aparèixer en el futur.

+ +

Consulta també

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul

+ + -- cgit v1.2.3-54-g00ecf