diff options
Diffstat (limited to 'files/ca/web/progressive_web_apps')
| -rw-r--r-- | files/ca/web/progressive_web_apps/index.html | 49 | ||||
| -rw-r--r-- | files/ca/web/progressive_web_apps/responsive/media_types/index.html | 402 |
2 files changed, 451 insertions, 0 deletions
diff --git a/files/ca/web/progressive_web_apps/index.html b/files/ca/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..53bd5eb866 --- /dev/null +++ b/files/ca/web/progressive_web_apps/index.html @@ -0,0 +1,49 @@ +--- +title: Disseny sensible (Responsive design) +slug: Web_Development/Mobile/Responsive_design +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Guide/Responsive_design +--- +<p>Com una resposta als problemes associats a l'enfoc de desenvolupament basat en dos <a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">dissenys web separats</a> per a cada plataforma, mòbil i escriptori, una idea relativament nova (de fet <a class="external" href="http://www.alistapart.com/articles/dao/">no tant</a>) ha crescut en popularitat: oblidar-se de la detecció del <em>user-agent</em> des del servidor, i sustituir-ho per una plana que respongui del costat del client a les possibilitats del navegador. Aquest enfoc del problema s'ha convingut en anomenar-lo <a class="external" href="http://www.alistapart.com/articles/responsive-web-design/">disseny web sensible</a>. Igual que l'enfoc dels dissenys separats, el disseny web sensible té els seus avantatges i inconvenients.</p> +<h2 id="Avantatges">Avantatges</h2> +<p>Encara que inicialment no va ser proposat com a métode de creació de webs per a mòbils, el disseny sensible darrerament ha guanyat força atenció com una manera de construir webs amigables amb els mòbils evitant el doble esforç de desenvolupar un nou disseny només per a aquests dispositius de pantalla petita. Amb aquesta tècnica es pot abordar dos dels tres <a class="external" href="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/" title="Approaches to Mobile Web Development Part 1 – What is Mobile Friendliness?">objectius</a> del desenvolupament web per a mòbils:</p> +<ul> + <li><strong>Presentació</strong> — Emprant un <em>layout</em> flexible a la teva web juntament amb <em>media queries</em> de CSS [NT: fulls d'estils diferents aplicats pel navegador -compatible amb CSS3- segons les dimensions de la pantalla i altres variables configurables des dels meta-tags HTML], pots fer que la teva web es vegi bé independentment del tamany de la pantalla de l'usuari.</li> + <li><strong>Contingut</strong> — Alterant el contingut basant-te en les característiques del navegador <a class="external" href="http://www.quirksmode.org/blog/archives/2010/08/combining_media.html">via JavaScript</a>, pots adaptar el missatge a cada usuari.</li> +</ul> +<p>Certament hi ha un quants detalls xulos en aquest enfoc. Donat que no depén de la detecció del <em>user-agent</em> del navegador (des del servidor), és molt més resistent a canvis futurs en els navegadors que l'enfoc de fer un disseny per separat. Per a webs senzilles, pot ser també significativament més senzill d'implementar i mantenir que les altres opcions.</p> +<h2 id="Inconvenients">Inconvenients</h2> +<p>Malgrat tot, aquest enfoc també té les seves limitacions. Donat que el contingut és modificat en el navegador amb Javascript, s'aconsella fer canvis mínims en el contingut. Perqué en general, les coses poden anar malament molt ràpidament si intentes modificar dos conjunts de javascript que operen en paralel sobre el mateix DOM de la plana. Aquesta és la principal raó per la qual les aplicacions web no solen emprar aquest enfoc per a les seves versions mòbils.</p> +<p>Donar a la teva web actual un disseny sensible d'aquest tipus significa una reescriptura dels teus estils CSS si ara mateix no tens implementat un <a class="external" href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/"><em>layout</em> flexible</a>. Encara que això podria ser una bona oportunitat per a modernitzar el CSS de la teva web.</p> +<p>Per acabar, donat que has d'afegir més codi al teu javascript existent i als teus estils, l'eficiència d'aquest nou disseny pot estar per sota possiblement de l'enfoc dels dissenys web separats. No hi ha cap manera d'evitar aquest inconvenient, encara que un acurada refactorització del teu codi i dels teus estils pot estalviar-te uns quants bytes.</p> +<h2 id="Quan_és_adient_escollir_aquesta_opció">Quan és adient escollir aquesta opció</h2> +<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img align="right" alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="width: 300px; height: 177px;"></a>Tal com s'ha mencionat abans, donat que els canvis de contingut poden ser peliaguts, quan adoptes aquest enfoc de disseny, no podràs donar als teus visitants mòbils una experiència notablement millor sense incrementar significativament la complexitat del teu codi.<br> + <br> + Dit això, si les versions d'escriptori i de mòbil de la teva web són bastant similars llavors aquest enfoc és una gran opció. S'escau molt bé per a webs centrades en els documents que és un cas molt bàsic que encaixa bé en qualsevol dispositiu, com per exemple planes de productes. Notaràs que els exemples a sota són tots blocs o portafolis.</p> +<h2 id="Exemples">Exemples</h2> +<p>Encara que no és un enfoc tan popular com el dels dissenys separats, augmenta cada dia el nombre de webs emprant el disseny sensible. Afortunadament, puix que tot el codi és per al navegador, si vols veure com un portal web implementa tècnicament aquest disseny és tan senzill com visitar la web i premer "Veure el codi font de la plana". Aquí tens uns quants exemples:</p> +<ul> + <li><a class="external" href="http://teixido.co/">http://teixido.co/</a> – un dels meus dissenys sensibles favorits, que tambè he capturat abans en la imatge!</li> + <li><a class="external" href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – un bon article per a llegir, que inclou més enllaços amb exemples</li> + <li><a class="external" href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li> + <li><a class="external" href="http://stephencaver.com/">http://stephencaver.com/</a></li> + <li><a class="external" href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li> +</ul> +<p>Malgrat ser un enfoc relativament jove, ja hi han escrites algunes recomanacions de bones pràtiques. Per exemple, si estàs desenvolupant una web desde zero amb aquest disseny sensible en ment, val la pena que <a class="external" href="http://www.lukew.com/ff/entry.asp?1117">primer generis un disseny per a pantalla petita</a>, i d'aquesta manera tindràs en compte des del principi els condicionants d'aquestes pantalles.</p> +<p>També és més convenient fer un realçament progressiu dels teus estils en lloc d'amagar elements del teu lloc usant <em>media queries</em> [NT: fulls d'estils css especifics per a certes configuracions de navegador]. D'aquesta manera, els navegadors més antics que poden no ser compatibles amb els <em>media queries</em> encara renderitzaran d'alguna manera el contingut de la web. Una excelent presentació dels avantatges d'aquest métode la trobaràs <a class="external" href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">aquí</a>.</p> +<h2 id="Enfocs_del_desenvoulpament_web">Enfocs del desenvoulpament web</h2> +<p>Fes una ullada als següents articles de fons i d'enfocs i tècniques diferents per resoldre el disseny de webs pels mòbils.</p> +<ul> + <li><a href="/en/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">Què vol dir ser un disseny amigable amb els mòbils?</a></li> + <li><a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">Dissenys diferents per a diferents pantalles</a></li> + <li><a href="/en/Web_development/Mobile/A_hybrid_approach" title="en/Web development/Mobile/Hybrid approach">Un enfoc híbrid</a></li> +</ul> +<h2 id="Llegeix_també">Llegeix també</h2> +<ul> + <li><a href="/en/Web_Development/Responsive_Web_design" title="Responsive Web design">Disseny web sensible</a> per obtenir més recursos</li> +</ul> +<div class="originaldocinfo"> + <h3 id="Document_d'informació_original">Document d'informació original</h3> + <p>Originalment publicat al 27 Maig, 2011 al bloc Mozilla Webdev com "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", per Jason Grlicky.</p> +</div> +<p> </p> diff --git a/files/ca/web/progressive_web_apps/responsive/media_types/index.html b/files/ca/web/progressive_web_apps/responsive/media_types/index.html new file mode 100644 index 0000000000..f3b14fb062 --- /dev/null +++ b/files/ca/web/progressive_web_apps/responsive/media_types/index.html @@ -0,0 +1,402 @@ +--- +title: Mitjà +slug: Web/Guide/CSS/Inici_en_CSS/Mitjà +tags: + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +<p>{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Taules")}}</p> + +<p>Aquesta és la 14th secció de la Part I del tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> Moltes de les pàgines d'aquest tutorial s'han centrat en les propietats CSS i els valors que es poden utilitzar per especificar com mostrar un document. Aquesta pàgina es veu de nou en el propòsit i l'estructura de les fulles d'estil CSS.</p> + +<h2 class="clearLeft" id="Informació_Mitjà">Informació: Mitjà</h2> + +<p>El propòsit de CSS és especificar com els documents es presenten a l'usuari. La presentació pot tenir més d'una forma.</p> + +<p>Per exemple, és probable que estigueu llegint aquesta pàgina en un dispositiu de visualització. Però també pot ser que el vulgueu projectar en una pantalla per a una gran audiència, o imprimir-ho. Aquests diferents mitjans poden tenir característiques diferents. CSS proporciona formes de presentar un document de manera diferent en diferents mitjans.</p> + +<p>Per especificar regles que són específiques d'un tipus de mitjà, utilitzeu {{CSSXref("@media")}} seguit pel tipus de mitjà, seguit de claus que tanquen les regles.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Un document, en un lloc web, té una àrea de navegació per permetre a l'usuari moure's pel lloc.</p> + +<p>En el llenguatge de marcat, l'element pare de l'àrea de navegació té el <strong>id</strong> <code>nav-area</code>. (A {{HTMLVersionInline (5)}}, això pot ser marcat amb l'element {{HTMLElement("nav")}} en lloc de {{HTMLElement("div")}} amb un atribut id.)</p> + +<p>Quan s'imprimeix el document, l'àrea de navegació no té cap propòsit, de manera que la fulla d'estil l'elimina per complet:</p> + +<pre class="brush:css">@media print { + #nav-area {display: none;} + } +</pre> +</div> + +<p><span class="short_text" id="result_box" lang="ca"><span>Alguns dels tipus</span> <span>de mitjans</span> <span>comuns</span> <span>són</span><span>:</span></span></p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>screen</code></td> + <td>Color pantalla ordinador</td> + </tr> + <tr> + <td><code>print</code></td> + <td>Mitjans paginats</td> + </tr> + <tr> + <td style="padding-right: 1em;"><code>projection</code></td> + <td>Pantalla projectada</td> + </tr> + <tr> + <td><code>all</code></td> + <td>Tots els mitjans (per defecte)</td> + </tr> + </tbody> +</table> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Hi ha altres formes d'especificar el tipus de mitjà d'un conjunt de regles.</p> + +<p>El llenguatge de marcat del document pot permetre que s'especifiqui el tipus de mitjà quan la fulla d'estil està vinculada al document. Per exemple, en HTML es pot especificar opcionalment el tipus de mitjà amb un atribut <code>media</code> en l'etiqueta LINK.</p> + +<p>En CSS podeu utilitzar {{CSSXref("@import")}} a l'inici d'una fulla d'estil per importar un altre fulla d'estil des d'una URL, especificant opcionalment el tipus de mitjà.</p> + +<p>Mitjançant l'ús d'aquestes tècniques es poden separar regles d'estil per a diferents tipus de mitjans en diferents arxius. Això de vegades és una forma útil d'estructurar les fulles d'estil.</p> + +<p>Per a més detalls sobre els tipus de mitjans, vegeu <a href="http://www.w3.org/TR/CSS21/media.html">Mtjà</a> en l'especificació CSS.</p> + +<p>Hi ha més exemples de la propietat {{cssxref ("display")}} en una pàgina posterior d'aquest tutorial: <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en-US/docs/Web/Guide/CSS/Getting_Started/XML_data">dades XML</a>.</p> +</div> + +<h3 id="Impressió">I<span id="result_box" lang="ca"><span>mpressió</span></span></h3> + +<p>CSS té algun suport específic per a la impressió i dels mitjans paginats en general.</p> + +<p>Un regla {{cssxref("@page")}} pot establir els marges de pàgina. Per a la impressió a doble cara, es poden definir els marges per separat per a <code>@page:left</code> i <code>@page:right</code>.</p> + +<p>Per als mitjans d'impressió, normalment s'utilitza com a unitats de longitud les polzades (<code>in</code>) i punts (pt = 1/72 polzades) o centímetres (<code>cm</code>) i mil·límetres (<code>mm</code>). És igualment apropiat utilitzar ems (<code>em</code>) perquè coincideixi amb la mida de font i percentatges (<code>%</code>).</p> + +<p>Podeu controlar la forma en què el contingut del document es divideix entre els límits de pàgina, mitjançant l'ús de les propietats {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} i {{cssxref("page-break-inside")}}.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Aquesta regla estableix els marges de pàgina a una polzada en els quatre costats:</p> + +<pre class="brush:css">@page {margin: 1in;} +</pre> + +<p>Aquesta regla assegura que cada element <code>H1</code> comença en una nova pàgina:</p> + +<pre class="brush:css">h1 {page-break-before: always;} +</pre> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Per als detalls complets de suport de CSS per als mitjans paginats, veure <a href="http://www.w3.org/TR/CSS21/page.html">Mitjans paginats</a> en l'especificació CSS.</p> + +<p>Igual que altres característiques de CSS, la impressió depèn del navegador i la seva configuració. Per exemple, el navegador Mozilla subministra marges predeterminats, capçaleres i peus quan s'imprimeix. Quan altres usuaris imprimeixin el document, és probable que no sapigan quin navegador és i quina configuració té, de manera que és possible que no poguin controlar completament els resultats.</p> +</div> + +<h3 id="Interfícies_d'usuari">I<span id="result_box" lang="ca"><span>nterfícies</span> <span>d'usuari</span></span></h3> + +<p>CSS té algunes propietats especials per als dispositius que suporten una interfície d'usuari, com pantalles d'ordinador. Això fa que l'aspecte del document canvii dinàmicament a mesura que l'usuari treballa amb la interfície.</p> + +<p>No hi ha cap tipus de mitjà especial per als dispositius amb interfícies d'usuari.</p> + +<p>Hi ha cinc selectors especials:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr> + <td><code>E{{cssxref(":hover")}}</code></td> + <td><span id="result_box" lang="ca"><span>Qualsevol</span> <span>element</span> <span>E</span> <span>que té</span> <span>el punter</span> <span>sobre ell</span></span></td> + </tr> + <tr> + <td><code>E{{cssxref(":focus")}}</code></td> + <td><span id="result_box" lang="ca"><span>Qualsevol</span> <span>element</span> <span>E</span> <span>que té</span> <span>el focus del</span> <span>teclat</span></span></td> + </tr> + <tr> + <td><code>E{{cssxref(":active")}}</code></td> + <td><span id="result_box" lang="ca"><span>L'element</span> <span>E</span> <span>que està</span> <span>implicat</span> <span>en l'acció</span> <span>de l'usuari actual</span></span></td> + </tr> + <tr> + <td><code>E{{cssxref(":link")}}</code></td> + <td><span id="result_box" lang="ca"><span>Qualsevol</span> <span>element</span> <span>E que és</span> <span>un hipervincle</span> <span>a una adreça</span> <span>URL</span> <span>que l'usuari <em>no</em></span> <span>ha visitat</span> <span>recentment</span></span></td> + </tr> + <tr> + <td><code>E{{cssxref(":visited")}}</code></td> + <td><span id="result_box" lang="ca"><span>Qualsevol</span> <span>element</span> <span>E que és</span> <span>un hipervincle</span> <span>a una adreça</span> <span>URL</span> <span>que l'usuari ha</span> <span>visitat</span> <span>recentment</span></span></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota: </strong>La informació que es pot obtenir del selector :visited està restringida a {{gecko("2.0")}}. Veure <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector" title="en-US/docs/Web/Guide/CSS/Privacy and the :visited selector">Privacitat i el selector :visited</a> per a més detalls.</p> +</div> + +<p>La propietat {{cssxref("cursor")}} especifica la forma del punter: Algunes de les formes comunes són els següents. Col·loqueu el ratolí sobre els elements de la llista per veure les formes de punter reals en el vostre navegador:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td>Indica un vincle</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td>Indica que el programa no pot acceptar l'entrada</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td>Indica que el programa està funcionant, encara pot acceptar l'entrada</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td><span class="short_text" id="result_box" lang="ca"><span>El</span> <span>valor per</span> <span>defecte</span> <span>(</span><span>normalment una</span> <span>fletxa</span><span>)</span></span></td> + </tr> + </tbody> +</table> + +<p>Una propietat {{cssxref("outline")}} crea un contorn que sovint s'utilitza per indicar el focus del teclat. Els seus valors són similars a la propietat {{cssxref("border")}}, excepte que no es poden definir els costats individualment.</p> + +<p>Algunes altres característiques de les interfícies d'usuari s'implementen utilitzant atributs, en la forma normal. Per exemple, un element que és deshabilitat o de només lectura té l'atribut <strong>disabled</strong> o l'atribut <strong>readonly</strong>. Els selectors poden especificar aquests atributs com qualsevol altre atribut, mitjançant l'ús de claudàtors: <code>{{mediawiki.external('disabled')}}</code> o <code>{{mediawiki.external('readonly')}}</code>.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p><span id="result_box" lang="ca"><span>Aquestes regles</span> <span>especifiquen els</span> <span>estils</span> <span>per a un</span> <span>botó</span> <span>que canvia</span> <span>dinàmicament</span> <span>a mesura</span> <span>que l'usuari</span> <span>interactua</span> <span>amb</span> <span>ell</span><span>:</span></span></p> + +<pre class="brush:css">.green-button { + background-color:#cec; + color:#black; + border:2px outset #cec; + } + +.green-button[disabled] { + background-color:#cdc; + color:#777; + } + +.green-button:active { + border-style: inset; + } +</pre> + +<p>Aquest wiki no és compatible amb una interfície d'usuari en la pàgina, pel que aquests botons no "fan clic". Aquestes són algunes de les imatges estàtiques per il·lustrar la idea:</p> + +<table style="background-color: #ffffff; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table> + <tbody> + <tr> + <td><span style="background-color: #ccddcc; border: 2px outset #cceecc; color: #777777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + <td><span style="background-color: #cceecc; border: 2px outset #cceecc; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + <td><span style="background-color: #cceecc; border: 2px inset #cceecc; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + </tr> + <tr style="line-height: 25%;"> + <td> </td> + </tr> + <tr style="font-style: italic;"> + <td>deshabilitat</td> + <td>normal</td> + <td>actiu</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<p>Un botó completament funcional també té un contorn fosc al voltant de tot el botó quan el valor és per defecte, i un contorn en línia de punts a la cara del botó quan té el focus del teclat. També podria tenir un efecte estacionari quan el punter es troba a sobre d'ell.</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Per obtenir més informació sobre les interfícies d'usuari en el CSS, vegeu <a href="http://www.w3.org/TR/CSS21/ui.html">Interfície d'usuari</a> en l'especificació CSS.</p> + +<p>Hi ha un exemple del llenguatge de marcat de Mozilla per a interfícies d'usuari, XUL, en la Part II d'aquest tutorial.</p> +</div> + +<h2 id="Acció_Impressió_d'un_document">A<span id="result_box" lang="ca"><span>cció</span><span>:</span> <span>Impressió</span> <span>d'un</span> <span>document</span></span></h2> + +<ol> + <li><span id="result_box" lang="ca"><span>Feu</span> <span>un nou</span> <span>document HTML,</span> <code><span>doc4.html</span></code><span>.</span> <span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí:</span></span> + + <pre class="brush:html"><!DOCTYPE html> +<html> + <head> + <title>Print sample</title> + <link rel="stylesheet" href="style4.css"> + </head> + <body> + <h1>Section A</h1> + <p>This is the first section...</p> + <h1>Section B</h1> + <p>This is the second section...</p> + <div id="print-head"> + Heading for paged media + </div> + <div id="print-foot"> + Page: + </div> +</body> +</html> +</pre> + </li> + <li>Feu una nova fulla d'estil, <code>style4.css</code>. <span id="result_box" lang="ca"><span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí:</span></span> + <pre class="brush:css">/*** Print sample ***/ + +/* defaults for screen */ +#print-head, +#print-foot { + display: none; + } + +/* print only */ +@media print { + +h1 { + page-break-before: always; + padding-top: 2em; + } + +h1:first-child { + page-break-before: avoid; + counter-reset: page; + } + +#print-head { + display: block; + position: fixed; + top: 0pt; + left:0pt; + right: 0pt; + + font-size: 200%; + text-align: center; + } + +#print-foot { + display: block; + position: fixed; + bottom: 0pt; + right: 0pt; + + font-size: 200%; + } + +#print-foot:after { + content: counter(page); + counter-increment: page; + } + +} /* end print only */ +</pre> + </li> + <li>Vegeu aquest document en el vostre navegador; utilitza l'estil per defecte del navegador.</li> + <li>Imprimir (o vista prèvia d'impressió) el document; la fulla d'estil col·loca cada secció en una pàgina separada, i s'afegeix una capçalera i peu de pàgina per a cada pàgina. Si el navegador és compatible amb els comptadors, s'agrega un número de pàgina al peu de pàgina. + <table> + <tbody> + <tr> + <td> + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> + + <div style="font-size: 150%; font-weight: bold;">Section A</div> + + <div style="font-size: 75%;">This is the first section...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> + + <div style="font-size: 150%; font-weight: bold;">Section B</div> + + <div style="font-size: 75%;">This is the second section...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </li> +</ol> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Reptes</caption> + <tbody> + <tr> + <td>Moveu les regles d'estil específiques d'impressió en un fitxer CSS independent. + <p>Llegiu la pàgina de referència {{CSSXref("@import")}} per trobar detalls de com importar el nou arxiu CSS específic de la impressió en el vostre full d'estil <code>style4.css</code>.</p> + + <p>Feu que els encapçalaments es tornin blaus quan el punter del ratolí estigui sobre ells.</p> + </td> + </tr> + </tbody> +</table> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media" title="en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#Media">Veure la solució per el repte.</a></p> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>Si teniu dificultats per entendre aquesta pàgina, o si teniu altres comentaris al respecte, si us plau, contribuïu a la vostre pàgina de <a href="/Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media">Discussió</a>.</p> + +<p>Fins al moment, totes les regles d'estil en aquest tutorial s'han especificat en els arxius. Les regles i els seus valors són fixos. La pàgina següent descriu com poden canviar les regles de forma dinàmica mitjançant l'ús d'un llenguatge de programació: <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a></strong></p> |