From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ca/web/api/canvas_api/index.html | 187 +++ .../animacions_avan\303\247ades/index.html" | 380 +++++ .../animacions_b\303\240siques/index.html" | 335 +++++ .../tutorial/aplicar_estils_i_colors/index.html | 733 ++++++++++ .../tutorial/composici\303\263/index.html" | 113 ++ .../canvas_api/tutorial/dibuixar_text/index.html | 165 +++ .../canvas_api/tutorial/drawing_shapes/index.html | 579 ++++++++ files/ca/web/api/canvas_api/tutorial/index.html | 63 + .../manipular_p\303\255xels_amb_canvas/index.html" | 307 ++++ .../canvas_api/tutorial/transformacions/index.html | 290 ++++ .../canvas_api/tutorial/using_images/index.html | 339 +++++ .../tutorial/\303\272s_b\303\240sic/index.html" | 158 ++ files/ca/web/api/index.html | 8 + files/ca/web/api/webgl_api/index.html | 276 ++++ files/ca/web/api/window/index.html | 477 ++++++ files/ca/web/api/window/sidebar/index.html | 56 + files/ca/web/css/_colon_active/index.html | 166 +++ files/ca/web/css/_colon_any-link/index.html | 78 + files/ca/web/css/_colon_any/index.html | 197 +++ files/ca/web/css/_colon_checked/index.html | 252 ++++ files/ca/web/css/_colon_default/index.html | 145 ++ files/ca/web/css/_colon_dir/index.html | 105 ++ files/ca/web/css/_colon_disabled/index.html | 182 +++ files/ca/web/css/_colon_empty/index.html | 135 ++ files/ca/web/css/_colon_enabled/index.html | 155 ++ files/ca/web/css/_colon_first-child/index.html | 203 +++ files/ca/web/css/_colon_first-of-type/index.html | 159 ++ files/ca/web/css/_colon_first/index.html | 147 ++ files/ca/web/css/_colon_focus-within/index.html | 146 ++ files/ca/web/css/_colon_focus/index.html | 144 ++ files/ca/web/css/_colon_fullscreen/index.html | 241 +++ files/ca/web/css/_colon_hover/index.html | 178 +++ files/ca/web/css/_colon_in-range/index.html | 110 ++ files/ca/web/css/_colon_indeterminate/index.html | 132 ++ files/ca/web/css/_colon_invalid/index.html | 141 ++ files/ca/web/css/_colon_lang/index.html | 149 ++ files/ca/web/css/_colon_last-child/index.html | 197 +++ files/ca/web/css/_colon_last-of-type/index.html | 158 ++ files/ca/web/css/_colon_left/index.html | 122 ++ files/ca/web/css/_colon_link/index.html | 150 ++ files/ca/web/css/_colon_not/index.html | 176 +++ files/ca/web/css/_colon_nth-child/index.html | 276 ++++ files/ca/web/css/_colon_nth-last-child/index.html | 217 +++ .../ca/web/css/_colon_nth-last-of-type/index.html | 141 ++ files/ca/web/css/_colon_nth-of-type/index.html | 150 ++ files/ca/web/css/_colon_only-child/index.html | 199 +++ files/ca/web/css/_colon_only-of-type/index.html | 142 ++ files/ca/web/css/_colon_optional/index.html | 128 ++ files/ca/web/css/_colon_out-of-range/index.html | 158 ++ .../ca/web/css/_colon_placeholder-shown/index.html | 166 +++ files/ca/web/css/_colon_read-only/index.html | 98 ++ files/ca/web/css/_colon_read-write/index.html | 98 ++ files/ca/web/css/_colon_required/index.html | 128 ++ files/ca/web/css/_colon_right/index.html | 124 ++ files/ca/web/css/_colon_root/index.html | 112 ++ files/ca/web/css/_colon_scope/index.html | 146 ++ files/ca/web/css/_colon_target/index.html | 260 ++++ files/ca/web/css/_colon_valid/index.html | 74 + files/ca/web/css/_colon_visited/index.html | 178 +++ .../css/_doublecolon_-moz-progress-bar/index.html | 55 + .../_doublecolon_-moz-range-progress/index.html | 117 ++ .../css/_doublecolon_-moz-range-thumb/index.html | 117 ++ .../css/_doublecolon_-moz-range-track/index.html | 117 ++ .../web/css/_doublecolon_-ms-fill-lower/index.html | 91 ++ .../web/css/_doublecolon_-ms-fill-upper/index.html | 91 ++ files/ca/web/css/_doublecolon_-ms-fill/index.html | 108 ++ files/ca/web/css/_doublecolon_-ms-thumb/index.html | 41 + files/ca/web/css/_doublecolon_-ms-track/index.html | 45 + .../_doublecolon_-webkit-progress-bar/index.html | 110 ++ .../_doublecolon_-webkit-progress-value/index.html | 109 ++ .../index.html | 35 + .../_doublecolon_-webkit-slider-thumb/index.html | 34 + files/ca/web/css/_doublecolon_after/index.html | 260 ++++ files/ca/web/css/_doublecolon_backdrop/index.html | 143 ++ files/ca/web/css/_doublecolon_before/index.html | 329 +++++ files/ca/web/css/_doublecolon_cue/index.html | 78 + .../web/css/_doublecolon_first-letter/index.html | 219 +++ .../ca/web/css/_doublecolon_first-line/index.html | 117 ++ .../ca/web/css/_doublecolon_placeholder/index.html | 150 ++ files/ca/web/css/_doublecolon_selection/index.html | 160 ++ files/ca/web/css/at-rule/index.html | 77 + files/ca/web/css/box-sizing/index.html | 287 ++++ .../dominar_el_col.lapse_del_marge/index.html | 89 ++ files/ca/web/css/css_box_model/index.html | 163 +++ .../index.html" | 67 + .../ca/web/css/css_flexible_box_layout/index.html | 111 ++ files/ca/web/css/height/index.html | 236 +++ files/ca/web/css/index.html | 65 + files/ca/web/css/margin-bottom/index.html | 192 +++ files/ca/web/css/margin-left/index.html | 219 +++ files/ca/web/css/margin-right/index.html | 218 +++ files/ca/web/css/margin-top/index.html | 156 ++ files/ca/web/css/margin-trim/index.html | 96 ++ files/ca/web/css/margin/index.html | 302 ++++ files/ca/web/css/max-height/index.html | 223 +++ files/ca/web/css/max-width/index.html | 234 +++ files/ca/web/css/min-height/index.html | 211 +++ files/ca/web/css/min-width/index.html | 257 ++++ files/ca/web/css/overflow-x/index.html | 192 +++ files/ca/web/css/overflow-y/index.html | 196 +++ files/ca/web/css/overflow/index.html | 273 ++++ .../web/css/overscroll-behavior-block/index.html | 133 ++ .../web/css/overscroll-behavior-inline/index.html | 134 ++ files/ca/web/css/overscroll-behavior/index.html | 106 ++ files/ca/web/css/padding-bottom/index.html | 149 ++ files/ca/web/css/padding-left/index.html | 147 ++ files/ca/web/css/padding-right/index.html | 147 ++ files/ca/web/css/padding-top/index.html | 149 ++ files/ca/web/css/padding/index.html | 255 ++++ .../ca/web/css/refer\303\251ncia_css/index.html" | 206 +++ files/ca/web/css/selectors_css/index.html | 156 ++ .../index.html | 69 + files/ca/web/css/selectors_d'atribut/index.html | 250 ++++ files/ca/web/css/selectors_de_classe/index.html | 139 ++ .../ca/web/css/selectors_de_descendents/index.html | 170 +++ files/ca/web/css/selectors_de_fills/index.html | 135 ++ .../css/selectors_de_germans_adjacents/index.html | 135 ++ files/ca/web/css/selectors_de_tipus/index.html | 135 ++ .../css/selectors_general_de_germans/index.html | 129 ++ files/ca/web/css/selectors_id/index.html | 134 ++ files/ca/web/css/selectors_universal/index.html | 176 +++ files/ca/web/css/sintaxi/index.html | 79 + files/ca/web/css/visibility/index.html | 242 ++++ files/ca/web/css/width/index.html | 204 +++ files/ca/web/guide/ajax/index.html | 26 + files/ca/web/guide/ajax/primers_passos/index.html | 192 +++ .../web/guide/css/inici_en_css/caixes/index.html | 341 +++++ .../cascada_i_her\303\250ncia/index.html" | 150 ++ .../ca/web/guide/css/inici_en_css/color/index.html | 353 +++++ .../inici_en_css/com_funciona_el_css/index.html | 129 ++ .../guide/css/inici_en_css/css_llegible/index.html | 173 +++ .../guide/css/inici_en_css/dades_xml/index.html | 241 +++ .../web/guide/css/inici_en_css/disseny/index.html | 382 +++++ .../css/inici_en_css/estils_de_text/index.html | 161 ++ files/ca/web/guide/css/inici_en_css/index.html | 55 + .../guide/css/inici_en_css/javascript/index.html | 146 ++ .../web/guide/css/inici_en_css/llistes/index.html | 275 ++++ .../css/inici_en_css/mitj\303\240/index.html" | 402 +++++ .../per_qu\303\250_utilitzar_css/index.html" | 110 ++ .../css/inici_en_css/que_\303\251s_css/index.html" | 119 ++ .../guide/css/inici_en_css/selectors/index.html | 455 ++++++ .../guide/css/inici_en_css/svg_i_css/index.html | 223 +++ .../web/guide/css/inici_en_css/taules/index.html | 474 ++++++ "files/ca/web/guide/gr\303\240fics/index.html" | 49 + .../index.html" | 186 +++ files/ca/web/guide/html/html5/index.html | 171 +++ .../us_de_seccions_i_esquemes_en_html/index.html | 341 +++++ files/ca/web/guide/index.html | 56 + files/ca/web/html/block-level_elements/index.html | 127 ++ files/ca/web/html/element/a/index.html | 531 +++++++ files/ca/web/html/element/abbr/index.html | 131 ++ files/ca/web/html/element/acronym/index.html | 125 ++ files/ca/web/html/element/address/index.html | 161 ++ files/ca/web/html/element/applet/index.html | 121 ++ files/ca/web/html/element/area/index.html | 247 ++++ files/ca/web/html/element/article/index.html | 172 +++ files/ca/web/html/element/aside/index.html | 126 ++ files/ca/web/html/element/audio/index.html | 371 +++++ files/ca/web/html/element/b/index.html | 155 ++ files/ca/web/html/element/base/index.html | 150 ++ files/ca/web/html/element/basefont/index.html | 112 ++ files/ca/web/html/element/bdi/index.html | 140 ++ files/ca/web/html/element/bdo/index.html | 152 ++ files/ca/web/html/element/bgsound/index.html | 106 ++ files/ca/web/html/element/big/index.html | 107 ++ files/ca/web/html/element/blink/index.html | 101 ++ files/ca/web/html/element/blockquote/index.html | 154 ++ files/ca/web/html/element/body/index.html | 229 +++ files/ca/web/html/element/br/index.html | 136 ++ files/ca/web/html/element/button/index.html | 345 +++++ files/ca/web/html/element/canvas/index.html | 192 +++ files/ca/web/html/element/caption/index.html | 159 ++ files/ca/web/html/element/center/index.html | 57 + files/ca/web/html/element/cite/index.html | 152 ++ files/ca/web/html/element/code/index.html | 143 ++ files/ca/web/html/element/col/index.html | 326 +++++ files/ca/web/html/element/colgroup/index.html | 333 +++++ files/ca/web/html/element/command/index.html | 156 ++ files/ca/web/html/element/content/index.html | 168 +++ files/ca/web/html/element/data/index.html | 136 ++ files/ca/web/html/element/datalist/index.html | 150 ++ files/ca/web/html/element/dd/index.html | 133 ++ files/ca/web/html/element/del/index.html | 125 ++ files/ca/web/html/element/details/index.html | 152 ++ files/ca/web/html/element/dfn/index.html | 172 +++ files/ca/web/html/element/dialog/index.html | 208 +++ files/ca/web/html/element/dir/index.html | 49 + files/ca/web/html/element/div/index.html | 138 ++ files/ca/web/html/element/dl/index.html | 214 +++ files/ca/web/html/element/dt/index.html | 131 ++ files/ca/web/html/element/element/index.html | 93 ++ files/ca/web/html/element/em/index.html | 159 ++ files/ca/web/html/element/embed/index.html | 127 ++ files/ca/web/html/element/fieldset/index.html | 414 ++++++ files/ca/web/html/element/figcaption/index.html | 126 ++ files/ca/web/html/element/figure/index.html | 219 +++ files/ca/web/html/element/font/index.html | 53 + files/ca/web/html/element/footer/index.html | 140 ++ files/ca/web/html/element/form/index.html | 252 ++++ files/ca/web/html/element/frame/index.html | 56 + files/ca/web/html/element/frameset/index.html | 45 + files/ca/web/html/element/head/index.html | 147 ++ files/ca/web/html/element/header/index.html | 141 ++ .../web/html/element/heading_elements/index.html | 183 +++ files/ca/web/html/element/hgroup/index.html | 120 ++ files/ca/web/html/element/hr/index.html | 167 +++ files/ca/web/html/element/html/index.html | 168 +++ files/ca/web/html/element/i/index.html | 157 ++ files/ca/web/html/element/iframe/index.html | 471 ++++++ files/ca/web/html/element/image/index.html | 19 + files/ca/web/html/element/img/index.html | 359 +++++ files/ca/web/html/element/index.html | 94 ++ files/ca/web/html/element/input/index.html | 1532 ++++++++++++++++++++ files/ca/web/html/element/ins/index.html | 122 ++ files/ca/web/html/element/isindex/index.html | 64 + files/ca/web/html/element/kbd/index.html | 150 ++ files/ca/web/html/element/keygen/index.html | 189 +++ files/ca/web/html/element/label/index.html | 169 +++ files/ca/web/html/element/legend/index.html | 138 ++ files/ca/web/html/element/li/index.html | 210 +++ files/ca/web/html/element/link/index.html | 428 ++++++ files/ca/web/html/element/listing/index.html | 48 + files/ca/web/html/element/main/index.html | 167 +++ files/ca/web/html/element/map/index.html | 163 +++ files/ca/web/html/element/mark/index.html | 146 ++ files/ca/web/html/element/marquee/index.html | 203 +++ files/ca/web/html/element/menu/index.html | 184 +++ files/ca/web/html/element/menuitem/index.html | 192 +++ files/ca/web/html/element/meta/index.html | 481 ++++++ files/ca/web/html/element/meter/index.html | 189 +++ files/ca/web/html/element/multicol/index.html | 21 + files/ca/web/html/element/nav/index.html | 124 ++ files/ca/web/html/element/nextid/index.html | 138 ++ files/ca/web/html/element/nobr/index.html | 30 + files/ca/web/html/element/noembed/index.html | 35 + files/ca/web/html/element/noframes/index.html | 38 + files/ca/web/html/element/noscript/index.html | 145 ++ files/ca/web/html/element/object/index.html | 196 +++ files/ca/web/html/element/ol/index.html | 277 ++++ files/ca/web/html/element/optgroup/index.html | 162 +++ files/ca/web/html/element/option/index.html | 150 ++ files/ca/web/html/element/output/index.html | 150 ++ files/ca/web/html/element/p/index.html | 148 ++ files/ca/web/html/element/param/index.html | 151 ++ files/ca/web/html/element/picture/index.html | 141 ++ files/ca/web/html/element/plaintext/index.html | 48 + files/ca/web/html/element/pre/index.html | 211 +++ files/ca/web/html/element/progress/index.html | 173 +++ files/ca/web/html/element/q/index.html | 111 ++ files/ca/web/html/element/rp/index.html | 133 ++ files/ca/web/html/element/rt/index.html | 134 ++ files/ca/web/html/element/rtc/index.html | 134 ++ files/ca/web/html/element/ruby/index.html | 120 ++ files/ca/web/html/element/s/index.html | 71 + files/ca/web/html/element/samp/index.html | 101 ++ files/ca/web/html/element/script/index.html | 255 ++++ files/ca/web/html/element/section/index.html | 173 +++ files/ca/web/html/element/select/index.html | 196 +++ files/ca/web/html/element/shadow/index.html | 164 +++ files/ca/web/html/element/small/index.html | 109 ++ files/ca/web/html/element/source/index.html | 223 +++ files/ca/web/html/element/spacer/index.html | 46 + files/ca/web/html/element/span/index.html | 160 ++ files/ca/web/html/element/strike/index.html | 51 + files/ca/web/html/element/strong/index.html | 83 ++ files/ca/web/html/element/style/index.html | 193 +++ files/ca/web/html/element/sub/index.html | 80 + files/ca/web/html/element/summary/index.html | 139 ++ files/ca/web/html/element/sup/index.html | 74 + files/ca/web/html/element/table/index.html | 442 ++++++ files/ca/web/html/element/tbody/index.html | 281 ++++ files/ca/web/html/element/td/index.html | 299 ++++ files/ca/web/html/element/template/index.html | 197 +++ files/ca/web/html/element/textarea/index.html | 182 +++ files/ca/web/html/element/tfoot/index.html | 280 ++++ files/ca/web/html/element/th/index.html | 303 ++++ files/ca/web/html/element/thead/index.html | 189 +++ files/ca/web/html/element/time/index.html | 167 +++ files/ca/web/html/element/tr/index.html | 228 +++ files/ca/web/html/element/track/index.html | 233 +++ files/ca/web/html/element/tt/index.html | 58 + files/ca/web/html/element/u/index.html | 99 ++ files/ca/web/html/element/ul/index.html | 181 +++ files/ca/web/html/element/var/index.html | 65 + files/ca/web/html/element/video/index.html | 394 +++++ files/ca/web/html/element/wbr/index.html | 112 ++ files/ca/web/html/element/xmp/index.html | 46 + .../web/html/elements_en_l\303\255nia/index.html" | 82 ++ .../html/global_attributes/accesskey/index.html | 143 ++ .../ca/web/html/global_attributes/class/index.html | 106 ++ .../global_attributes/contenteditable/index.html | 107 ++ .../html/global_attributes/contextmenu/index.html | 117 ++ .../html/global_attributes/data-_star_/index.html | 119 ++ files/ca/web/html/global_attributes/dir/index.html | 130 ++ .../html/global_attributes/draggable/index.html | 104 ++ .../web/html/global_attributes/dropzone/index.html | 99 ++ .../web/html/global_attributes/hidden/index.html | 109 ++ files/ca/web/html/global_attributes/id/index.html | 113 ++ files/ca/web/html/global_attributes/index.html | 463 ++++++ .../web/html/global_attributes/itemid/index.html | 149 ++ .../web/html/global_attributes/itemprop/index.html | 463 ++++++ .../web/html/global_attributes/itemref/index.html | 181 +++ .../html/global_attributes/itemscope/index.html | 315 ++++ .../web/html/global_attributes/itemtype/index.html | 295 ++++ .../ca/web/html/global_attributes/lang/index.html | 102 ++ .../html/global_attributes/spellcheck/index.html | 215 +++ .../ca/web/html/global_attributes/style/index.html | 107 ++ .../web/html/global_attributes/tabindex/index.html | 116 ++ .../ca/web/html/global_attributes/title/index.html | 139 ++ .../html/global_attributes/translate/index.html | 99 ++ files/ca/web/html/index.html | 106 ++ .../index.html | 29 + files/ca/web/index.html | 101 ++ .../a_re-introduction_to_javascript/index.html | 930 ++++++++++++ files/ca/web/javascript/data_structures/index.html | 258 ++++ .../index.html | 243 ++++ files/ca/web/javascript/eventloop/index.html | 75 + .../guide/details_of_the_object_model/index.html | 746 ++++++++++ .../guide/expressions_i_operadors/index.html | 846 +++++++++++ files/ca/web/javascript/guide/functions/index.html | 697 +++++++++ files/ca/web/javascript/guide/index.html | 127 ++ .../guide/introducci\303\263/index.html" | 140 ++ files/ca/web/javascript/index.html | 105 ++ .../inheritance_and_the_prototype_chain/index.html | 299 ++++ .../index.html" | 361 +++++ .../web/javascript/language_resources/index.html | 98 ++ .../web/javascript/quant_a_javascript/index.html | 55 + .../ca/web/javascript/reference/errors/index.html | 31 + .../reference/errors/nomes-lectura/index.html | 78 + .../functions/arguments/caller/index.html | 93 ++ .../reference/functions/arguments/index.html | 211 +++ .../functions/arguments/length/index.html | 117 ++ .../javascript/reference/functions/get/index.html | 217 +++ .../web/javascript/reference/functions/index.html | 617 ++++++++ .../reference/functions/parameters_rest/index.html | 156 ++ .../global_objects/dataview/buffer/index.html | 101 ++ .../global_objects/dataview/getfloat32/index.html | 122 ++ .../reference/global_objects/dataview/index.html | 174 +++ .../global_objects/dataview/prototype/index.html | 146 ++ .../reference/global_objects/evalerror/index.html | 161 ++ .../global_objects/evalerror/prototype/index.html | 123 ++ .../global_objects/function/arguments/index.html | 125 ++ .../global_objects/function/arity/index.html | 70 + .../global_objects/function/caller/index.html | 124 ++ .../reference/global_objects/function/index.html | 236 +++ .../global_objects/function/length/index.html | 134 ++ .../global_objects/function/name/index.html | 153 ++ .../global_objects/function/tosource/index.html | 97 ++ .../global_objects/object/assign/index.html | 252 ++++ .../global_objects/object/count/index.html | 82 ++ .../global_objects/object/eval/index.html | 85 ++ .../global_objects/object/freeze/index.html | 193 +++ .../object/getprototypeof/index.html | 124 ++ .../reference/global_objects/object/index.html | 213 +++ .../global_objects/object/isextensible/index.html | 138 ++ .../global_objects/object/isfrozen/index.html | 182 +++ .../global_objects/object/keys/index.html | 189 +++ .../global_objects/object/observe/index.html | 191 +++ .../global_objects/object/prototype/index.html | 214 +++ .../global_objects/weakmap/clear/index.html | 91 ++ .../global_objects/weakmap/delete/index.html | 114 ++ .../global_objects/weakmap/get/index.html | 115 ++ .../global_objects/weakmap/has/index.html | 118 ++ .../reference/global_objects/weakmap/index.html | 279 ++++ .../global_objects/weakmap/prototype/index.html | 132 ++ .../global_objects/weakmap/set/index.html | 120 ++ .../global_objects/weakset/add/index.html | 103 ++ .../global_objects/weakset/clear/index.html | 87 ++ .../global_objects/weakset/delete/index.html | 112 ++ .../global_objects/weakset/has/index.html | 113 ++ .../reference/global_objects/weakset/index.html | 201 +++ .../global_objects/weakset/prototype/index.html | 131 ++ .../referencia/classes/constructor/index.html | 129 ++ .../web/javascript/referencia/classes/index.html | 382 +++++ .../referencia/classes/static/index.html | 116 ++ files/ca/web/javascript/referencia/index.html | 46 + .../objectes_globals/array/entries/index.html | 105 ++ .../objectes_globals/array/every/index.html | 220 +++ .../objectes_globals/array/fill/index.html | 173 +++ .../objectes_globals/array/filter/index.html | 213 +++ .../objectes_globals/array/find/index.html | 191 +++ .../objectes_globals/array/findindex/index.html | 173 +++ .../objectes_globals/array/foreach/index.html | 238 +++ .../objectes_globals/array/includes/index.html | 158 ++ .../referencia/objectes_globals/array/index.html | 482 ++++++ .../objectes_globals/array/indexof/index.html | 235 +++ .../objectes_globals/array/isarray/index.html | 135 ++ .../objectes_globals/array/join/index.html | 123 ++ .../objectes_globals/array/keys/index.html | 115 ++ .../objectes_globals/array/lastindexof/index.html | 197 +++ .../objectes_globals/array/length/index.html | 128 ++ .../objectes_globals/array/map/index.html | 317 ++++ .../objectes_globals/array/observe/index.html | 128 ++ .../objectes_globals/array/of/index.html | 120 ++ .../objectes_globals/array/pop/index.html | 123 ++ .../objectes_globals/array/prototype/index.html | 203 +++ .../objectes_globals/array/push/index.html | 146 ++ .../objectes_globals/array/reduce/index.html | 304 ++++ .../objectes_globals/array/reverse/index.html | 119 ++ .../objectes_globals/array/shift/index.html | 129 ++ .../objectes_globals/array/slice/index.html | 268 ++++ .../objectes_globals/array/some/index.html | 213 +++ .../objectes_globals/array/splice/index.html | 171 +++ .../referencia/objectes_globals/boolean/index.html | 196 +++ .../objectes_globals/boolean/prototype/index.html | 117 ++ .../objectes_globals/boolean/tosource/index.html | 98 ++ .../objectes_globals/boolean/tostring/index.html | 121 ++ .../objectes_globals/boolean/valueof/index.html | 117 ++ .../objectes_globals/date/getdate/index.html | 119 ++ .../objectes_globals/date/getday/index.html | 121 ++ .../objectes_globals/date/getfullyear/index.html | 121 ++ .../objectes_globals/date/gethours/index.html | 120 ++ .../date/getmilliseconds/index.html | 118 ++ .../objectes_globals/date/getminutes/index.html | 120 ++ .../objectes_globals/date/getmonth/index.html | 120 ++ .../objectes_globals/date/getseconds/index.html | 120 ++ .../objectes_globals/date/gettime/index.html | 135 ++ .../date/gettimezoneoffset/index.html | 109 ++ .../objectes_globals/date/getutcdate/index.html | 119 ++ .../objectes_globals/date/getutcday/index.html | 119 ++ .../date/getutcfullyear/index.html | 118 ++ .../objectes_globals/date/getutchours/index.html | 118 ++ .../date/getutcmilliseconds/index.html | 116 ++ .../objectes_globals/date/getutcminutes/index.html | 116 ++ .../objectes_globals/date/getutcmonth/index.html | 116 ++ .../objectes_globals/date/getutcseconds/index.html | 118 ++ .../objectes_globals/date/getyear/index.html | 162 +++ .../referencia/objectes_globals/date/index.html | 250 ++++ .../objectes_globals/date/now/index.html | 126 ++ .../objectes_globals/date/prototype/index.html | 221 +++ .../objectes_globals/date/setdate/index.html | 122 ++ .../objectes_globals/date/setfullyear/index.html | 128 ++ .../objectes_globals/date/sethours/index.html | 129 ++ .../date/setmilliseconds/index.html | 117 ++ .../objectes_globals/date/setminutes/index.html | 127 ++ .../objectes_globals/date/setmonth/index.html | 126 ++ .../objectes_globals/date/setseconds/index.html | 125 ++ .../objectes_globals/date/settime/index.html | 118 ++ .../objectes_globals/date/setutcdate/index.html | 119 ++ .../date/setutcfullyear/index.html | 123 ++ .../objectes_globals/date/setutchours/index.html | 125 ++ .../date/setutcmilliseconds/index.html | 117 ++ .../objectes_globals/date/setutcminutes/index.html | 123 ++ .../objectes_globals/date/setutcmonth/index.html | 121 ++ .../objectes_globals/date/setutcseconds/index.html | 121 ++ .../objectes_globals/date/setyear/index.html | 124 ++ .../objectes_globals/date/todatestring/index.html | 115 ++ .../objectes_globals/date/togmtstring/index.html | 115 ++ .../objectes_globals/date/toisostring/index.html | 134 ++ .../objectes_globals/date/tojson/index.html | 108 ++ .../objectes_globals/date/tostring/index.html | 142 ++ .../objectes_globals/date/totimestring/index.html | 115 ++ .../objectes_globals/date/utc/index.html | 142 ++ .../objectes_globals/date/valueof/index.html | 118 ++ .../objectes_globals/error/columnnumber/index.html | 83 ++ .../objectes_globals/error/filename/index.html | 87 ++ .../referencia/objectes_globals/error/index.html | 224 +++ .../objectes_globals/error/linenumber/index.html | 94 ++ .../objectes_globals/error/message/index.html | 110 ++ .../objectes_globals/error/name/index.html | 111 ++ .../objectes_globals/error/prototype/index.html | 150 ++ .../objectes_globals/error/stack/index.html | 161 ++ .../objectes_globals/error/tosource/index.html | 91 ++ .../objectes_globals/error/tostring/index.html | 146 ++ .../referencia/objectes_globals/index.html | 167 +++ .../objectes_globals/infinity/index.html | 114 ++ .../referencia/objectes_globals/json/index.html | 242 ++++ .../objectes_globals/map/clear/index.html | 104 ++ .../objectes_globals/map/delete/index.html | 109 ++ .../objectes_globals/map/entries/index.html | 104 ++ .../objectes_globals/map/foreach/index.html | 136 ++ .../referencia/objectes_globals/map/get/index.html | 116 ++ .../referencia/objectes_globals/map/has/index.html | 114 ++ .../referencia/objectes_globals/map/index.html | 385 +++++ .../objectes_globals/map/keys/index.html | 104 ++ .../objectes_globals/map/prototype/index.html | 125 ++ .../referencia/objectes_globals/map/set/index.html | 122 ++ .../objectes_globals/map/size/index.html | 105 ++ .../objectes_globals/map/values/index.html | 103 ++ .../objectes_globals/math/abs/index.html | 129 ++ .../objectes_globals/math/acos/index.html | 131 ++ .../objectes_globals/math/acosh/index.html | 126 ++ .../objectes_globals/math/asin/index.html | 133 ++ .../objectes_globals/math/asinh/index.html | 125 ++ .../objectes_globals/math/atan/index.html | 127 ++ .../objectes_globals/math/atan2/index.html | 139 ++ .../objectes_globals/math/atanh/index.html | 127 ++ .../objectes_globals/math/cbrt/index.html | 122 ++ .../objectes_globals/math/ceil/index.html | 197 +++ .../objectes_globals/math/clz32/index.html | 155 ++ .../objectes_globals/math/cos/index.html | 128 ++ .../objectes_globals/math/cosh/index.html | 130 ++ .../referencia/objectes_globals/math/e/index.html | 118 ++ .../objectes_globals/math/exp/index.html | 123 ++ .../objectes_globals/math/expm1/index.html | 122 ++ .../objectes_globals/math/floor/index.html | 194 +++ .../objectes_globals/math/fround/index.html | 118 ++ .../objectes_globals/math/hypot/index.html | 139 ++ .../objectes_globals/math/imul/index.html | 120 ++ .../referencia/objectes_globals/math/index.html | 205 +++ .../objectes_globals/math/ln10/index.html | 118 ++ .../objectes_globals/math/ln2/index.html | 118 ++ .../objectes_globals/math/log/index.html | 137 ++ .../objectes_globals/math/log10/index.html | 126 ++ .../objectes_globals/math/log10e/index.html | 118 ++ .../objectes_globals/math/log1p/index.html | 125 ++ .../objectes_globals/math/log2/index.html | 127 ++ .../objectes_globals/math/log2e/index.html | 118 ++ .../objectes_globals/math/max/index.html | 134 ++ .../objectes_globals/math/min/index.html | 140 ++ .../referencia/objectes_globals/math/pi/index.html | 116 ++ .../objectes_globals/math/pow/index.html | 140 ++ .../objectes_globals/math/random/index.html | 126 ++ .../objectes_globals/math/round/index.html | 207 +++ .../objectes_globals/math/sign/index.html | 131 ++ .../objectes_globals/math/sin/index.html | 127 ++ .../objectes_globals/math/sinh/index.html | 129 ++ .../objectes_globals/math/sqrt/index.html | 127 ++ .../objectes_globals/math/sqrt1_2/index.html | 117 ++ .../objectes_globals/math/sqrt2/index.html | 117 ++ .../objectes_globals/math/tan/index.html | 140 ++ .../objectes_globals/math/tanh/index.html | 142 ++ .../objectes_globals/math/trunc/index.html | 129 ++ .../referencia/objectes_globals/nan/index.html | 125 ++ .../referencia/objectes_globals/null/index.html | 125 ++ .../objectes_globals/number/epsilon/index.html | 102 ++ .../referencia/objectes_globals/number/index.html | 214 +++ .../objectes_globals/number/isfinite/index.html | 118 ++ .../objectes_globals/number/isinteger/index.html | 118 ++ .../objectes_globals/number/isnan/index.html | 129 ++ .../number/issafeinteger/index.html | 117 ++ .../number/max_safe_integer/index.html | 100 ++ .../objectes_globals/number/max_value/index.html | 118 ++ .../number/min_safe_integer/index.html | 100 ++ .../objectes_globals/number/min_value/index.html | 118 ++ .../objectes_globals/number/nan/index.html | 100 ++ .../number/negative_infinity/index.html | 134 ++ .../objectes_globals/number/parsefloat/index.html | 103 ++ .../objectes_globals/number/parseint/index.html | 102 ++ .../number/positive_infinity/index.html | 137 ++ .../objectes_globals/number/prototype/index.html | 125 ++ .../number/toexponential/index.html | 136 ++ .../objectes_globals/number/tofixed/index.html | 135 ++ .../objectes_globals/number/tointeger/index.html | 95 ++ .../objectes_globals/number/toprecision/index.html | 134 ++ .../objectes_globals/number/tostring/index.html | 141 ++ .../objectes_globals/parsefloat/index.html | 166 +++ .../referencia/objectes_globals/set/add/index.html | 119 ++ .../objectes_globals/set/clear/index.html | 105 ++ .../objectes_globals/set/delete/index.html | 112 ++ .../objectes_globals/set/entries/index.html | 104 ++ .../referencia/objectes_globals/set/has/index.html | 114 ++ .../referencia/objectes_globals/set/index.html | 380 +++++ .../objectes_globals/set/prototype/index.html | 123 ++ .../objectes_globals/set/values/index.html | 106 ++ .../objectes_globals/string/anchor/index.html | 118 ++ .../objectes_globals/string/big/index.html | 114 ++ .../objectes_globals/string/blink/index.html | 110 ++ .../objectes_globals/string/bold/index.html | 106 ++ .../objectes_globals/string/charat/index.html | 283 ++++ .../objectes_globals/string/concat/index.html | 125 ++ .../objectes_globals/string/endswith/index.html | 133 ++ .../objectes_globals/string/fixed/index.html | 103 ++ .../objectes_globals/string/fontcolor/index.html | 122 ++ .../objectes_globals/string/fontsize/index.html | 121 ++ .../string/fromcharcode/index.html | 126 ++ .../referencia/objectes_globals/string/index.html | 340 +++++ .../objectes_globals/string/indexof/index.html | 190 +++ .../objectes_globals/string/italics/index.html | 104 ++ .../objectes_globals/string/length/index.html | 121 ++ .../objectes_globals/string/link/index.html | 119 ++ .../objectes_globals/string/normalize/index.html | 154 ++ .../objectes_globals/string/quote/index.html | 107 ++ .../objectes_globals/string/small/index.html | 110 ++ .../objectes_globals/string/startswith/index.html | 128 ++ .../objectes_globals/string/sub/index.html | 109 ++ .../objectes_globals/string/substr/index.html | 156 ++ .../objectes_globals/string/sup/index.html | 107 ++ .../string/tolocalelowercase/index.html | 110 ++ .../string/tolocaleuppercase/index.html | 110 ++ .../objectes_globals/string/tolowercase/index.html | 111 ++ .../objectes_globals/string/tostring/index.html | 113 ++ .../objectes_globals/string/touppercase/index.html | 110 ++ .../objectes_globals/string/trim/index.html | 123 ++ .../objectes_globals/string/trimleft/index.html | 94 ++ .../objectes_globals/string/trimright/index.html | 94 ++ .../objectes_globals/syntaxerror/index.html | 166 +++ .../syntaxerror/prototype/index.html | 121 ++ .../objectes_globals/undefined/index.html | 174 +++ .../operadors/arithmetic_operators/index.html | 286 ++++ .../operadors/bitwise_operators/index.html | 718 +++++++++ .../operadors/conditional_operator/index.html | 170 +++ .../referencia/operadors/function/index.html | 146 ++ .../referencia/operadors/grouping/index.html | 128 ++ .../web/javascript/referencia/operadors/index.html | 282 ++++ .../operadors/logical_operators/index.html | 301 ++++ .../referencia/operadors/operador_coma/index.html | 129 ++ .../referencia/operadors/super/index.html | 119 ++ .../referencia/operadors/typeof/index.html | 240 +++ .../referencia/operadors/void/index.html | 138 ++ .../referencia/operadors/yield/index.html | 152 ++ .../referencia/sentencies/block/index.html | 138 ++ .../referencia/sentencies/break/index.html | 154 ++ .../referencia/sentencies/buida/index.html | 138 ++ .../referencia/sentencies/continue/index.html | 199 +++ .../referencia/sentencies/debugger/index.html | 116 ++ .../referencia/sentencies/do...while/index.html | 124 ++ .../referencia/sentencies/export/index.html | 158 ++ .../referencia/sentencies/for...of/index.html | 181 +++ .../referencia/sentencies/for/index.html | 190 +++ .../referencia/sentencies/function/index.html | 171 +++ .../referencia/sentencies/if...else/index.html | 203 +++ .../javascript/referencia/sentencies/index.html | 129 ++ .../referencia/sentencies/return/index.html | 183 +++ .../referencia/sentencies/throw/index.html | 228 +++ .../referencia/sentencies/while/index.html | 131 ++ .../ca/web/javascript/referencia/sobre/index.html | 44 + files/ca/web/reference/api/index.html | 65 + files/ca/web/reference/index.html | 27 + files/ca/web/tutorials/index.html | 253 ++++ files/ca/web/xslt/index.html | 19 + 621 files changed, 102960 insertions(+) create mode 100644 files/ca/web/api/canvas_api/index.html create mode 100644 "files/ca/web/api/canvas_api/tutorial/animacions_avan\303\247ades/index.html" create mode 100644 "files/ca/web/api/canvas_api/tutorial/animacions_b\303\240siques/index.html" create mode 100644 files/ca/web/api/canvas_api/tutorial/aplicar_estils_i_colors/index.html create mode 100644 "files/ca/web/api/canvas_api/tutorial/composici\303\263/index.html" create mode 100644 files/ca/web/api/canvas_api/tutorial/dibuixar_text/index.html create mode 100644 files/ca/web/api/canvas_api/tutorial/drawing_shapes/index.html create mode 100644 files/ca/web/api/canvas_api/tutorial/index.html create mode 100644 "files/ca/web/api/canvas_api/tutorial/manipular_p\303\255xels_amb_canvas/index.html" create mode 100644 files/ca/web/api/canvas_api/tutorial/transformacions/index.html create mode 100644 files/ca/web/api/canvas_api/tutorial/using_images/index.html create mode 100644 "files/ca/web/api/canvas_api/tutorial/\303\272s_b\303\240sic/index.html" create mode 100644 files/ca/web/api/index.html create mode 100644 files/ca/web/api/webgl_api/index.html create mode 100644 files/ca/web/api/window/index.html create mode 100644 files/ca/web/api/window/sidebar/index.html create mode 100644 files/ca/web/css/_colon_active/index.html create mode 100644 files/ca/web/css/_colon_any-link/index.html create mode 100644 files/ca/web/css/_colon_any/index.html create mode 100644 files/ca/web/css/_colon_checked/index.html create mode 100644 files/ca/web/css/_colon_default/index.html create mode 100644 files/ca/web/css/_colon_dir/index.html create mode 100644 files/ca/web/css/_colon_disabled/index.html create mode 100644 files/ca/web/css/_colon_empty/index.html create mode 100644 files/ca/web/css/_colon_enabled/index.html create mode 100644 files/ca/web/css/_colon_first-child/index.html create mode 100644 files/ca/web/css/_colon_first-of-type/index.html create mode 100644 files/ca/web/css/_colon_first/index.html create mode 100644 files/ca/web/css/_colon_focus-within/index.html create mode 100644 files/ca/web/css/_colon_focus/index.html create mode 100644 files/ca/web/css/_colon_fullscreen/index.html create mode 100644 files/ca/web/css/_colon_hover/index.html create mode 100644 files/ca/web/css/_colon_in-range/index.html create mode 100644 files/ca/web/css/_colon_indeterminate/index.html create mode 100644 files/ca/web/css/_colon_invalid/index.html create mode 100644 files/ca/web/css/_colon_lang/index.html create mode 100644 files/ca/web/css/_colon_last-child/index.html create mode 100644 files/ca/web/css/_colon_last-of-type/index.html create mode 100644 files/ca/web/css/_colon_left/index.html create mode 100644 files/ca/web/css/_colon_link/index.html create mode 100644 files/ca/web/css/_colon_not/index.html create mode 100644 files/ca/web/css/_colon_nth-child/index.html create mode 100644 files/ca/web/css/_colon_nth-last-child/index.html create mode 100644 files/ca/web/css/_colon_nth-last-of-type/index.html create mode 100644 files/ca/web/css/_colon_nth-of-type/index.html create mode 100644 files/ca/web/css/_colon_only-child/index.html create mode 100644 files/ca/web/css/_colon_only-of-type/index.html create mode 100644 files/ca/web/css/_colon_optional/index.html create mode 100644 files/ca/web/css/_colon_out-of-range/index.html create mode 100644 files/ca/web/css/_colon_placeholder-shown/index.html create mode 100644 files/ca/web/css/_colon_read-only/index.html create mode 100644 files/ca/web/css/_colon_read-write/index.html create mode 100644 files/ca/web/css/_colon_required/index.html create mode 100644 files/ca/web/css/_colon_right/index.html create mode 100644 files/ca/web/css/_colon_root/index.html create mode 100644 files/ca/web/css/_colon_scope/index.html create mode 100644 files/ca/web/css/_colon_target/index.html create mode 100644 files/ca/web/css/_colon_valid/index.html create mode 100644 files/ca/web/css/_colon_visited/index.html create mode 100644 files/ca/web/css/_doublecolon_-moz-progress-bar/index.html create mode 100644 files/ca/web/css/_doublecolon_-moz-range-progress/index.html create mode 100644 files/ca/web/css/_doublecolon_-moz-range-thumb/index.html create mode 100644 files/ca/web/css/_doublecolon_-moz-range-track/index.html create mode 100644 files/ca/web/css/_doublecolon_-ms-fill-lower/index.html create mode 100644 files/ca/web/css/_doublecolon_-ms-fill-upper/index.html create mode 100644 files/ca/web/css/_doublecolon_-ms-fill/index.html create mode 100644 files/ca/web/css/_doublecolon_-ms-thumb/index.html create mode 100644 files/ca/web/css/_doublecolon_-ms-track/index.html create mode 100644 files/ca/web/css/_doublecolon_-webkit-progress-bar/index.html create mode 100644 files/ca/web/css/_doublecolon_-webkit-progress-value/index.html create mode 100644 files/ca/web/css/_doublecolon_-webkit-slider-runnable-track/index.html create mode 100644 files/ca/web/css/_doublecolon_-webkit-slider-thumb/index.html create mode 100644 files/ca/web/css/_doublecolon_after/index.html create mode 100644 files/ca/web/css/_doublecolon_backdrop/index.html create mode 100644 files/ca/web/css/_doublecolon_before/index.html create mode 100644 files/ca/web/css/_doublecolon_cue/index.html create mode 100644 files/ca/web/css/_doublecolon_first-letter/index.html create mode 100644 files/ca/web/css/_doublecolon_first-line/index.html create mode 100644 files/ca/web/css/_doublecolon_placeholder/index.html create mode 100644 files/ca/web/css/_doublecolon_selection/index.html create mode 100644 files/ca/web/css/at-rule/index.html create mode 100644 files/ca/web/css/box-sizing/index.html create mode 100644 files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html create mode 100644 files/ca/web/css/css_box_model/index.html create mode 100644 "files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" create mode 100644 files/ca/web/css/css_flexible_box_layout/index.html create mode 100644 files/ca/web/css/height/index.html create mode 100644 files/ca/web/css/index.html create mode 100644 files/ca/web/css/margin-bottom/index.html create mode 100644 files/ca/web/css/margin-left/index.html create mode 100644 files/ca/web/css/margin-right/index.html create mode 100644 files/ca/web/css/margin-top/index.html create mode 100644 files/ca/web/css/margin-trim/index.html create mode 100644 files/ca/web/css/margin/index.html create mode 100644 files/ca/web/css/max-height/index.html create mode 100644 files/ca/web/css/max-width/index.html create mode 100644 files/ca/web/css/min-height/index.html create mode 100644 files/ca/web/css/min-width/index.html create mode 100644 files/ca/web/css/overflow-x/index.html create mode 100644 files/ca/web/css/overflow-y/index.html create mode 100644 files/ca/web/css/overflow/index.html create mode 100644 files/ca/web/css/overscroll-behavior-block/index.html create mode 100644 files/ca/web/css/overscroll-behavior-inline/index.html create mode 100644 files/ca/web/css/overscroll-behavior/index.html create mode 100644 files/ca/web/css/padding-bottom/index.html create mode 100644 files/ca/web/css/padding-left/index.html create mode 100644 files/ca/web/css/padding-right/index.html create mode 100644 files/ca/web/css/padding-top/index.html create mode 100644 files/ca/web/css/padding/index.html create mode 100644 "files/ca/web/css/refer\303\251ncia_css/index.html" create mode 100644 files/ca/web/css/selectors_css/index.html create mode 100644 files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html create mode 100644 files/ca/web/css/selectors_d'atribut/index.html create mode 100644 files/ca/web/css/selectors_de_classe/index.html create mode 100644 files/ca/web/css/selectors_de_descendents/index.html create mode 100644 files/ca/web/css/selectors_de_fills/index.html create mode 100644 files/ca/web/css/selectors_de_germans_adjacents/index.html create mode 100644 files/ca/web/css/selectors_de_tipus/index.html create mode 100644 files/ca/web/css/selectors_general_de_germans/index.html create mode 100644 files/ca/web/css/selectors_id/index.html create mode 100644 files/ca/web/css/selectors_universal/index.html create mode 100644 files/ca/web/css/sintaxi/index.html create mode 100644 files/ca/web/css/visibility/index.html create mode 100644 files/ca/web/css/width/index.html create mode 100644 files/ca/web/guide/ajax/index.html create mode 100644 files/ca/web/guide/ajax/primers_passos/index.html create mode 100644 files/ca/web/guide/css/inici_en_css/caixes/index.html create mode 100644 "files/ca/web/guide/css/inici_en_css/cascada_i_her\303\250ncia/index.html" create mode 100644 files/ca/web/guide/css/inici_en_css/color/index.html create mode 100644 files/ca/web/guide/css/inici_en_css/com_funciona_el_css/index.html create mode 100644 files/ca/web/guide/css/inici_en_css/css_llegible/index.html create mode 100644 files/ca/web/guide/css/inici_en_css/dades_xml/index.html create mode 100644 files/ca/web/guide/css/inici_en_css/disseny/index.html create mode 100644 files/ca/web/guide/css/inici_en_css/estils_de_text/index.html create mode 100644 files/ca/web/guide/css/inici_en_css/index.html create mode 100644 files/ca/web/guide/css/inici_en_css/javascript/index.html create mode 100644 files/ca/web/guide/css/inici_en_css/llistes/index.html create mode 100644 "files/ca/web/guide/css/inici_en_css/mitj\303\240/index.html" create mode 100644 "files/ca/web/guide/css/inici_en_css/per_qu\303\250_utilitzar_css/index.html" create mode 100644 "files/ca/web/guide/css/inici_en_css/que_\303\251s_css/index.html" create mode 100644 files/ca/web/guide/css/inici_en_css/selectors/index.html create mode 100644 files/ca/web/guide/css/inici_en_css/svg_i_css/index.html create mode 100644 files/ca/web/guide/css/inici_en_css/taules/index.html create mode 100644 "files/ca/web/guide/gr\303\240fics/index.html" create mode 100644 "files/ca/web/guide/html/_consells_per_crear_p\303\240gines_html_de_c\303\240rrega_r\303\240pida/index.html" create mode 100644 files/ca/web/guide/html/html5/index.html create mode 100644 files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html create mode 100644 files/ca/web/guide/index.html create mode 100644 files/ca/web/html/block-level_elements/index.html create mode 100644 files/ca/web/html/element/a/index.html create mode 100644 files/ca/web/html/element/abbr/index.html create mode 100644 files/ca/web/html/element/acronym/index.html create mode 100644 files/ca/web/html/element/address/index.html create mode 100644 files/ca/web/html/element/applet/index.html create mode 100644 files/ca/web/html/element/area/index.html create mode 100644 files/ca/web/html/element/article/index.html create mode 100644 files/ca/web/html/element/aside/index.html create mode 100644 files/ca/web/html/element/audio/index.html create mode 100644 files/ca/web/html/element/b/index.html create mode 100644 files/ca/web/html/element/base/index.html create mode 100644 files/ca/web/html/element/basefont/index.html create mode 100644 files/ca/web/html/element/bdi/index.html create mode 100644 files/ca/web/html/element/bdo/index.html create mode 100644 files/ca/web/html/element/bgsound/index.html create mode 100644 files/ca/web/html/element/big/index.html create mode 100644 files/ca/web/html/element/blink/index.html create mode 100644 files/ca/web/html/element/blockquote/index.html create mode 100644 files/ca/web/html/element/body/index.html create mode 100644 files/ca/web/html/element/br/index.html create mode 100644 files/ca/web/html/element/button/index.html create mode 100644 files/ca/web/html/element/canvas/index.html create mode 100644 files/ca/web/html/element/caption/index.html create mode 100644 files/ca/web/html/element/center/index.html create mode 100644 files/ca/web/html/element/cite/index.html create mode 100644 files/ca/web/html/element/code/index.html create mode 100644 files/ca/web/html/element/col/index.html create mode 100644 files/ca/web/html/element/colgroup/index.html create mode 100644 files/ca/web/html/element/command/index.html create mode 100644 files/ca/web/html/element/content/index.html create mode 100644 files/ca/web/html/element/data/index.html create mode 100644 files/ca/web/html/element/datalist/index.html create mode 100644 files/ca/web/html/element/dd/index.html create mode 100644 files/ca/web/html/element/del/index.html create mode 100644 files/ca/web/html/element/details/index.html create mode 100644 files/ca/web/html/element/dfn/index.html create mode 100644 files/ca/web/html/element/dialog/index.html create mode 100644 files/ca/web/html/element/dir/index.html create mode 100644 files/ca/web/html/element/div/index.html create mode 100644 files/ca/web/html/element/dl/index.html create mode 100644 files/ca/web/html/element/dt/index.html create mode 100644 files/ca/web/html/element/element/index.html create mode 100644 files/ca/web/html/element/em/index.html create mode 100644 files/ca/web/html/element/embed/index.html create mode 100644 files/ca/web/html/element/fieldset/index.html create mode 100644 files/ca/web/html/element/figcaption/index.html create mode 100644 files/ca/web/html/element/figure/index.html create mode 100644 files/ca/web/html/element/font/index.html create mode 100644 files/ca/web/html/element/footer/index.html create mode 100644 files/ca/web/html/element/form/index.html create mode 100644 files/ca/web/html/element/frame/index.html create mode 100644 files/ca/web/html/element/frameset/index.html create mode 100644 files/ca/web/html/element/head/index.html create mode 100644 files/ca/web/html/element/header/index.html create mode 100644 files/ca/web/html/element/heading_elements/index.html create mode 100644 files/ca/web/html/element/hgroup/index.html create mode 100644 files/ca/web/html/element/hr/index.html create mode 100644 files/ca/web/html/element/html/index.html create mode 100644 files/ca/web/html/element/i/index.html create mode 100644 files/ca/web/html/element/iframe/index.html create mode 100644 files/ca/web/html/element/image/index.html create mode 100644 files/ca/web/html/element/img/index.html create mode 100644 files/ca/web/html/element/index.html create mode 100644 files/ca/web/html/element/input/index.html create mode 100644 files/ca/web/html/element/ins/index.html create mode 100644 files/ca/web/html/element/isindex/index.html create mode 100644 files/ca/web/html/element/kbd/index.html create mode 100644 files/ca/web/html/element/keygen/index.html create mode 100644 files/ca/web/html/element/label/index.html create mode 100644 files/ca/web/html/element/legend/index.html create mode 100644 files/ca/web/html/element/li/index.html create mode 100644 files/ca/web/html/element/link/index.html create mode 100644 files/ca/web/html/element/listing/index.html create mode 100644 files/ca/web/html/element/main/index.html create mode 100644 files/ca/web/html/element/map/index.html create mode 100644 files/ca/web/html/element/mark/index.html create mode 100644 files/ca/web/html/element/marquee/index.html create mode 100644 files/ca/web/html/element/menu/index.html create mode 100644 files/ca/web/html/element/menuitem/index.html create mode 100644 files/ca/web/html/element/meta/index.html create mode 100644 files/ca/web/html/element/meter/index.html create mode 100644 files/ca/web/html/element/multicol/index.html create mode 100644 files/ca/web/html/element/nav/index.html create mode 100644 files/ca/web/html/element/nextid/index.html create mode 100644 files/ca/web/html/element/nobr/index.html create mode 100644 files/ca/web/html/element/noembed/index.html create mode 100644 files/ca/web/html/element/noframes/index.html create mode 100644 files/ca/web/html/element/noscript/index.html create mode 100644 files/ca/web/html/element/object/index.html create mode 100644 files/ca/web/html/element/ol/index.html create mode 100644 files/ca/web/html/element/optgroup/index.html create mode 100644 files/ca/web/html/element/option/index.html create mode 100644 files/ca/web/html/element/output/index.html create mode 100644 files/ca/web/html/element/p/index.html create mode 100644 files/ca/web/html/element/param/index.html create mode 100644 files/ca/web/html/element/picture/index.html create mode 100644 files/ca/web/html/element/plaintext/index.html create mode 100644 files/ca/web/html/element/pre/index.html create mode 100644 files/ca/web/html/element/progress/index.html create mode 100644 files/ca/web/html/element/q/index.html create mode 100644 files/ca/web/html/element/rp/index.html create mode 100644 files/ca/web/html/element/rt/index.html create mode 100644 files/ca/web/html/element/rtc/index.html create mode 100644 files/ca/web/html/element/ruby/index.html create mode 100644 files/ca/web/html/element/s/index.html create mode 100644 files/ca/web/html/element/samp/index.html create mode 100644 files/ca/web/html/element/script/index.html create mode 100644 files/ca/web/html/element/section/index.html create mode 100644 files/ca/web/html/element/select/index.html create mode 100644 files/ca/web/html/element/shadow/index.html create mode 100644 files/ca/web/html/element/small/index.html create mode 100644 files/ca/web/html/element/source/index.html create mode 100644 files/ca/web/html/element/spacer/index.html create mode 100644 files/ca/web/html/element/span/index.html create mode 100644 files/ca/web/html/element/strike/index.html create mode 100644 files/ca/web/html/element/strong/index.html create mode 100644 files/ca/web/html/element/style/index.html create mode 100644 files/ca/web/html/element/sub/index.html create mode 100644 files/ca/web/html/element/summary/index.html create mode 100644 files/ca/web/html/element/sup/index.html create mode 100644 files/ca/web/html/element/table/index.html create mode 100644 files/ca/web/html/element/tbody/index.html create mode 100644 files/ca/web/html/element/td/index.html create mode 100644 files/ca/web/html/element/template/index.html create mode 100644 files/ca/web/html/element/textarea/index.html create mode 100644 files/ca/web/html/element/tfoot/index.html create mode 100644 files/ca/web/html/element/th/index.html create mode 100644 files/ca/web/html/element/thead/index.html create mode 100644 files/ca/web/html/element/time/index.html create mode 100644 files/ca/web/html/element/tr/index.html create mode 100644 files/ca/web/html/element/track/index.html create mode 100644 files/ca/web/html/element/tt/index.html create mode 100644 files/ca/web/html/element/u/index.html create mode 100644 files/ca/web/html/element/ul/index.html create mode 100644 files/ca/web/html/element/var/index.html create mode 100644 files/ca/web/html/element/video/index.html create mode 100644 files/ca/web/html/element/wbr/index.html create mode 100644 files/ca/web/html/element/xmp/index.html create mode 100644 "files/ca/web/html/elements_en_l\303\255nia/index.html" create mode 100644 files/ca/web/html/global_attributes/accesskey/index.html create mode 100644 files/ca/web/html/global_attributes/class/index.html create mode 100644 files/ca/web/html/global_attributes/contenteditable/index.html create mode 100644 files/ca/web/html/global_attributes/contextmenu/index.html create mode 100644 files/ca/web/html/global_attributes/data-_star_/index.html create mode 100644 files/ca/web/html/global_attributes/dir/index.html create mode 100644 files/ca/web/html/global_attributes/draggable/index.html create mode 100644 files/ca/web/html/global_attributes/dropzone/index.html create mode 100644 files/ca/web/html/global_attributes/hidden/index.html create mode 100644 files/ca/web/html/global_attributes/id/index.html create mode 100644 files/ca/web/html/global_attributes/index.html create mode 100644 files/ca/web/html/global_attributes/itemid/index.html create mode 100644 files/ca/web/html/global_attributes/itemprop/index.html create mode 100644 files/ca/web/html/global_attributes/itemref/index.html create mode 100644 files/ca/web/html/global_attributes/itemscope/index.html create mode 100644 files/ca/web/html/global_attributes/itemtype/index.html create mode 100644 files/ca/web/html/global_attributes/lang/index.html create mode 100644 files/ca/web/html/global_attributes/spellcheck/index.html create mode 100644 files/ca/web/html/global_attributes/style/index.html create mode 100644 files/ca/web/html/global_attributes/tabindex/index.html create mode 100644 files/ca/web/html/global_attributes/title/index.html create mode 100644 files/ca/web/html/global_attributes/translate/index.html create mode 100644 files/ca/web/html/index.html create mode 100644 files/ca/web/html/optimizing_your_pages_for_speculative_parsing/index.html create mode 100644 files/ca/web/index.html create mode 100644 files/ca/web/javascript/a_re-introduction_to_javascript/index.html create mode 100644 files/ca/web/javascript/data_structures/index.html create mode 100644 files/ca/web/javascript/enumerability_and_ownership_of_properties/index.html create mode 100644 files/ca/web/javascript/eventloop/index.html create mode 100644 files/ca/web/javascript/guide/details_of_the_object_model/index.html create mode 100644 files/ca/web/javascript/guide/expressions_i_operadors/index.html create mode 100644 files/ca/web/javascript/guide/functions/index.html create mode 100644 files/ca/web/javascript/guide/index.html create mode 100644 "files/ca/web/javascript/guide/introducci\303\263/index.html" create mode 100644 files/ca/web/javascript/index.html create mode 100644 files/ca/web/javascript/inheritance_and_the_prototype_chain/index.html create mode 100644 "files/ca/web/javascript/introducci\303\263_al_javascript_orientat_a_objectes/index.html" create mode 100644 files/ca/web/javascript/language_resources/index.html create mode 100644 files/ca/web/javascript/quant_a_javascript/index.html create mode 100644 files/ca/web/javascript/reference/errors/index.html create mode 100644 files/ca/web/javascript/reference/errors/nomes-lectura/index.html create mode 100644 files/ca/web/javascript/reference/functions/arguments/caller/index.html create mode 100644 files/ca/web/javascript/reference/functions/arguments/index.html create mode 100644 files/ca/web/javascript/reference/functions/arguments/length/index.html create mode 100644 files/ca/web/javascript/reference/functions/get/index.html create mode 100644 files/ca/web/javascript/reference/functions/index.html create mode 100644 files/ca/web/javascript/reference/functions/parameters_rest/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/dataview/buffer/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/dataview/getfloat32/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/dataview/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/dataview/prototype/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/evalerror/prototype/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/function/arguments/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/function/arity/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/function/caller/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/function/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/function/name/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/function/tosource/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/object/assign/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/object/count/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/object/eval/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/object/freeze/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/object/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/object/isextensible/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/object/isfrozen/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/object/keys/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/object/observe/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/object/prototype/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/weakmap/clear/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/weakmap/delete/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/weakmap/get/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/weakmap/has/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/weakmap/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/weakmap/prototype/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/weakmap/set/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/weakset/add/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/weakset/clear/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/weakset/delete/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/weakset/has/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/weakset/index.html create mode 100644 files/ca/web/javascript/reference/global_objects/weakset/prototype/index.html create mode 100644 files/ca/web/javascript/referencia/classes/constructor/index.html create mode 100644 files/ca/web/javascript/referencia/classes/index.html create mode 100644 files/ca/web/javascript/referencia/classes/static/index.html create mode 100644 files/ca/web/javascript/referencia/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/entries/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/every/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/fill/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/filter/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/find/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/findindex/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/foreach/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/includes/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/indexof/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/isarray/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/join/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/keys/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/lastindexof/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/length/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/map/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/observe/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/of/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/pop/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/prototype/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/push/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/reduce/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/reverse/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/shift/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/slice/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/some/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/array/splice/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/boolean/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/boolean/prototype/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/boolean/tosource/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/boolean/tostring/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/boolean/valueof/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getdate/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getday/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getfullyear/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/gethours/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getmilliseconds/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getminutes/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getmonth/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getseconds/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/gettime/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/gettimezoneoffset/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcdate/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcday/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcfullyear/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutchours/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcmilliseconds/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcminutes/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcmonth/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getutcseconds/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/getyear/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/now/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/prototype/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setdate/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setfullyear/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/sethours/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setmilliseconds/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setminutes/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setmonth/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setseconds/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/settime/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutcdate/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutcfullyear/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutchours/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutcmilliseconds/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutcminutes/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutcmonth/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setutcseconds/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/setyear/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/todatestring/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/togmtstring/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/toisostring/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/tojson/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/tostring/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/totimestring/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/utc/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/date/valueof/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/columnnumber/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/filename/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/linenumber/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/message/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/name/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/prototype/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/stack/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/tosource/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/error/tostring/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/infinity/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/json/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/clear/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/delete/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/entries/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/foreach/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/get/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/has/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/keys/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/prototype/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/set/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/size/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/map/values/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/abs/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/acos/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/acosh/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/asin/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/asinh/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/atan/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/atan2/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/atanh/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/cbrt/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/ceil/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/clz32/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/cos/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/cosh/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/e/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/exp/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/expm1/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/floor/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/fround/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/hypot/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/imul/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/ln10/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/ln2/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/log/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/log10/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/log10e/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/log1p/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/log2/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/log2e/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/max/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/min/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/pi/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/pow/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/random/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/round/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/sign/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/sin/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/sinh/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/sqrt/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/sqrt1_2/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/sqrt2/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/tan/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/tanh/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/math/trunc/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/nan/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/null/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/epsilon/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/isfinite/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/isinteger/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/isnan/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/issafeinteger/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/max_safe_integer/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/max_value/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/min_safe_integer/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/min_value/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/nan/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/negative_infinity/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/parsefloat/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/parseint/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/positive_infinity/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/prototype/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/toexponential/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/tofixed/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/tointeger/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/toprecision/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/number/tostring/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/parsefloat/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/add/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/clear/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/delete/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/entries/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/has/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/prototype/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/set/values/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/anchor/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/big/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/blink/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/bold/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/charat/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/concat/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/endswith/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/fixed/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/fontcolor/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/fontsize/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/fromcharcode/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/indexof/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/italics/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/length/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/link/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/normalize/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/quote/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/small/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/startswith/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/sub/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/substr/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/sup/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/tolocalelowercase/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/tolocaleuppercase/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/tolowercase/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/tostring/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/touppercase/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/trim/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/trimleft/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/string/trimright/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/syntaxerror/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/syntaxerror/prototype/index.html create mode 100644 files/ca/web/javascript/referencia/objectes_globals/undefined/index.html create mode 100644 files/ca/web/javascript/referencia/operadors/arithmetic_operators/index.html create mode 100644 files/ca/web/javascript/referencia/operadors/bitwise_operators/index.html create mode 100644 files/ca/web/javascript/referencia/operadors/conditional_operator/index.html create mode 100644 files/ca/web/javascript/referencia/operadors/function/index.html create mode 100644 files/ca/web/javascript/referencia/operadors/grouping/index.html create mode 100644 files/ca/web/javascript/referencia/operadors/index.html create mode 100644 files/ca/web/javascript/referencia/operadors/logical_operators/index.html create mode 100644 files/ca/web/javascript/referencia/operadors/operador_coma/index.html create mode 100644 files/ca/web/javascript/referencia/operadors/super/index.html create mode 100644 files/ca/web/javascript/referencia/operadors/typeof/index.html create mode 100644 files/ca/web/javascript/referencia/operadors/void/index.html create mode 100644 files/ca/web/javascript/referencia/operadors/yield/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/block/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/break/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/buida/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/continue/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/debugger/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/do...while/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/export/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/for...of/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/for/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/function/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/if...else/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/return/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/throw/index.html create mode 100644 files/ca/web/javascript/referencia/sentencies/while/index.html create mode 100644 files/ca/web/javascript/referencia/sobre/index.html create mode 100644 files/ca/web/reference/api/index.html create mode 100644 files/ca/web/reference/index.html create mode 100644 files/ca/web/tutorials/index.html create mode 100644 files/ca/web/xslt/index.html (limited to 'files/ca/web') diff --git a/files/ca/web/api/canvas_api/index.html b/files/ca/web/api/canvas_api/index.html new file mode 100644 index 0000000000..cb61814e66 --- /dev/null +++ b/files/ca/web/api/canvas_api/index.html @@ -0,0 +1,187 @@ +--- +title: Canvas API +slug: Web/API/Canvas_API +tags: + - API + - Canvas + - Overview + - Reference +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Afegit en HTML5, l'element HTML {{HTMLElement("canvas")}} pot ser usat per dibuixar gràfics a través de scripts en JavaScript. Per exemple, es pot utilitzar per dibuixar gràfics, fer composicions fotogràfiques, crear animacions o, fins i tot, processar o representar vídeos en temps real.

+ +

Les aplicacions de Mozilla van obtenir compatibilitat amb <canvas> a partir de Gecko 1.8 (és a dir Firefox 1.5). L'element va ser introduït originalment per Apple per al tauler OS X i Safari. Internet Explorer suporta <canvas> a partir de la versió 9; per a versions anteriors de IE, una pàgina pot efectivament afegir suport per <canvas> en incloure un script del projecte Google's Explorer Canvas. Google Chrome i Opera 9 també són compatibles amb <canvas>.

+ +

L'element <canvas> també és utilitzat per WebGL per dibuixar gràfics 3D accelerats per maquinari en pàgines web.

+ +

Exemple

+ +

Aquest és només un fragment de codi senzill que utilitza el mètode {{domxref("CanvasRenderingContext2D.fillRect()")}}.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Editeu el codi següent i vegeu els canvis actualitzats en directe al llenç:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Referència

+ +
+ +
+ +

Les interfícies relacionades amb WebGLRenderingContext estan referenciades en WebGL.

+ +

{{domxref("CanvasCaptureMediaStream")}} està relacionat.

+ +

Guies i tutorials

+ +
+
Tutorial Canvas
+
Un tutorial complet que abasta tant l'ús bàsic de <canvas> com les seves funcions avançades.
+
Fragments de codi: Canvas
+
Alguns fragments de codi orientats a desenvolupadors d'extensions que involucren <canvas>.
+
Demostració: Un llançador de rajos bàsic
+
Una demostració d'animació de traçat de rajos usant canvas.
+
Dibuixar objectes DOM en canvas
+
Com dibuixar contingut DOM, com ara elements HTML, dins de canvas.
+
Manipular vídeo utilitzant canvas
+
Combinar {{HTMLElement("video")}} i {{HTMLElement("canvas")}} per manipular dades de vídeo en temps real.
+
+ +

Recursos

+ +

Genèric

+ + + +

Biblioteques

+ + + +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
+ +

Vegeu també

+ + diff --git "a/files/ca/web/api/canvas_api/tutorial/animacions_avan\303\247ades/index.html" "b/files/ca/web/api/canvas_api/tutorial/animacions_avan\303\247ades/index.html" new file mode 100644 index 0000000000..4aebb46529 --- /dev/null +++ "b/files/ca/web/api/canvas_api/tutorial/animacions_avan\303\247ades/index.html" @@ -0,0 +1,380 @@ +--- +title: Animacions avançades +slug: Web/API/Canvas_API/Tutorial/Animacions_avançades +tags: + - Canvas + - Graphics + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
+ +
+

En l'últim capítol vam fer algunes animacions bàsiques i vam conèixer maneres de fer moure les coses. En aquesta part veurem més d'a prop el moviment en si i afegirem una mica de física per fer que les nostres animacions siguin més avançades.

+
+ +

Dibuixar una bola

+ +

Usarem una bola per als nostres estudis d'animació, així que primer dibuixarem aquesta bola sobre el llenç. El següent codi ens configurarà.

+ +
<canvas id="canvas" width="600" height="300"></canvas>
+
+ +

Com és habitual, primer necessitem un context de dibuix. Per dibuixar la bola, hem crear un objecte ball que contingui propietats i un mètode draw() per pintar-la sobre el llenç.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();
+ +

Aquí no hi ha res especial, la bola és en realitat un cercle senzill i es dibuixa amb l'ajuda del mètode {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

+ +

Afegir velocitat

+ +

Ara que tenim la bola, estem preparats per afegir una animació bàsica tal com hem après en l'últim capítol d'aquest tutorial. Novament, {{domxref("window.requestAnimationFrame()")}} ens ajuda a controlar l'animació. La bola es mou en afegir un vector de velocitat a la posició. Per a cada fotograma, també {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} el llenç per eliminar cercles antics de fotogrames anteriors.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+
+ +

Límits

+ +

Sense cap prova de col·lisió de límits, la nostra bola surt ràpidament del llenç. Hem de comprovar si la posició x i y de la bola està fora de les dimensions del llenç i invertir la direcció dels vectors de velocitat. Per fer-ho, afegim les següents comprovacions al mètode draw:

+ +
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  ball.vx = -ball.vx;
+}
+ +

Primera demostració

+ +

Vegem com es veu en acció fins ara. Movem el ratolí en el llenç per iniciar l'animació.

+ + + +

{{EmbedLiveSample("First_demo", "610", "310")}}

+ +

Acceleració

+ +

Per fer el moviment més real, es pots jugar amb la velocitat d'aquesta manera, per exemple:

+ +
ball.vy *= .99;
+ball.vy += .25;
+ +

Això retarda la velocitat vertical de cada fotograma, de manera que la bola només rebotarà en el sòl al final.

+ + + +

{{EmbedLiveSample("Second_demo", "610", "310")}}

+ +

Efecte cua

+ +

Fins ara, hem utilitzat el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} per esborrar fotogrames anteriors. Si reemplacem aquest mètode per un semi-transparent {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, es pot crear fàcilment un efecte cua.

+ +
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ + + +

{{EmbedLiveSample("Third_demo", "610", "310")}}

+ +

Afegir control al ratolí

+ +

Per tenir una mica de control sobre la bola, podem fer que segueixi al ratolí usant l'esdeveniment mousemove, per exemple. L'esdeveniment click allibera la bola i la deixa rebotar de nou.

+ + + +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+
+ +

Moure la bola amb el ratolí i allibera-la amb un clic.

+ +

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

+ +

Escapada

+ +

Aquest breu capítol només explica algunes tècniques per crear animacions més avançades. Hi ha molts més! Què tal afegir una paleta, alguns maons, i convertir aquesta demostració en un joc Escapada? Consulta la nostra àrea de desenvolupament de jocs per veure més articles relacionats amb els jocs.

+ +

Vegeu també

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git "a/files/ca/web/api/canvas_api/tutorial/animacions_b\303\240siques/index.html" "b/files/ca/web/api/canvas_api/tutorial/animacions_b\303\240siques/index.html" new file mode 100644 index 0000000000..e4a3751d1e --- /dev/null +++ "b/files/ca/web/api/canvas_api/tutorial/animacions_b\303\240siques/index.html" @@ -0,0 +1,335 @@ +--- +title: Animacions bàsiques +slug: Web/API/Canvas_API/Tutorial/Animacions_bàsiques +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
+ +
+

Atès que estem usant Javascript per controlar els elements {{HTMLElement("canvas")}}, també és molt fàcil fer animacions (interactives). En aquest capítol veurem com fer algunes animacions bàsiques.

+
+ +

Probablement, la major limitació és que, una vegada que es dibuixa una forma, aquesta es manté així. Si necessitem moure-la, hem de tornar a dibuixar-la i tot el que s'ha dibuixat abans. Es necessita molt temps per tornar a dibuixar quadres complexos i el rendiment depèn en gran manera de la velocitat de l'equip en el qual s'està executant.

+ +

Passos bàsics d'animació

+ +

Aquests són els passos que s'han de seguir per dibuixar un marc:

+ +
    +
  1. Esborrar el llenç
    + A menys que les formes que es dibuixin omplin el llenç complet (per exemple, una imatge de fons), és necessari esborrar qualsevol forma que s'hi hagi dibuixat prèviament. La manera més fàcil de fer-ho, és usant el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
    2. +
  2. Guardar l'estat del llenç
    + Si es canvia qualsevol configuració (com ara estils, transformacions, etc.) que afectin a l'estat del llenç i ens volem assegurar que l'estat original s'utilitza cada vegada que es dibuixa un marc, hem de guardar aquest estat original.
    3. +
  3. Dibuixar formes animades
    + El pas on es fa la representació del marc real.
    4. +
  4. Restaurar l'estat del llenç
    + Si s'ha guardat l'estat, ho hem de restaurar abans de dibuixar un nou marc.
    5. +
+ +

Controlar una animació

+ +

Les formes es dibuixen al llenç usant els mètodes de canvas directament o cridant a les funcions personalitzades. En circumstàncies normals, només veiem que aquests resultats apareixen en el llenç quan el script acaba d'executar-se. Per exemple, no és possible fer una animació des d'un bucle for.

+ +

Això significa que necessitem una forma d'executar les nostres funcions de dibuix durant un període de temps. Hi ha dues maneres de controlar una animació com aquesta.

+ +

Actualitzacions programades

+ +

Primer estan les funcions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}} i {{domxref("window.requestAnimationFrame()")}}, que es poden utilitzar per cridar a una funció específica durant un període de temps determinat.

+ +
+
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
+
Inicia repetidament l'execució de la funció especificada per la funció, cada mil·lisegons de retard.
+
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
+
Executa la funció especificada per la function en mil·lisegons de delay.
+
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
+
Li diu al navegador que desitja realitzar una animació i sol·licita al navegador que cridi a una funció especifica per actualitzar una animació abans del proper repintat.
+
+ +

Si no es vol cap interacció amb l'usuari, es pot utilitzar la funció setInterval() que executa repetidament el codi proporcionat. Si volguéssim fer un joc, podríem usar esdeveniments de teclat o ratolí per controlar l'animació i usar setTimeout(). En establir {{domxref("EventListener")}}s, capturem qualsevol interacció de l'usuari i s'executan les nostres funcions d'animació

+ +
+

En els exemples següents, utilitzarem el mètode {{domxref("window.requestAnimationFrame()")}} per controlar l'animació. El mètode requestAnimationFrame proporciona una manera fluïda i eficient per a l'animació, cridant al marc d'animació quan el sistema estigui preparat per pintar el marc. El nombre de crides retornades és generalment 60 vegades per segon i pot reduir-se a una taxa més baixa quan s'executa en les pestanyes de fons. Per a més informació sobre el bucle d'animació, especialment per a jocs, veure l'article Anatomia d'un videojoc en la nostra Zona de desenvolupament de jocs.

+
+ +

Un sistema solar animat

+ +

Aquest exemple anima un petit model del nostre sistema solar.

+ +
var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init() {
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0, 0, 300, 300); // clear canvas
+
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
+  ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
+  ctx.save();
+  ctx.translate(150, 150);
+
+  // Earth
+  var time = new Date();
+  ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
+  ctx.translate(105, 0);
+  ctx.fillRect(0, -12, 50, 24); // Shadow
+  ctx.drawImage(earth, -12, -12);
+
+  // Moon
+  ctx.save();
+  ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
+  ctx.translate(0, 28.5);
+  ctx.drawImage(moon, -3.5, -3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
+  ctx.stroke();
+
+  ctx.drawImage(sun, 0, 0, 300, 300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+
+ + + +

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

+ +

Un rellotge animat

+ +

Aquest exemple dibuixa un rellotge animat que mostra l'hora actual.

+ +
function clock() {
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+  ctx.scale(0.4, 0.4);
+  ctx.rotate(-Math.PI / 2);
+  ctx.strokeStyle = 'black';
+  ctx.fillStyle = 'white';
+  ctx.lineWidth = 8;
+  ctx.lineCap = 'round';
+
+  // Hour marks
+  ctx.save();
+  for (var i = 0; i < 12; i++) {
+    ctx.beginPath();
+    ctx.rotate(Math.PI / 6);
+    ctx.moveTo(100, 0);
+    ctx.lineTo(120, 0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i = 0; i < 60; i++) {
+    if (i % 5!= 0) {
+      ctx.beginPath();
+      ctx.moveTo(117, 0);
+      ctx.lineTo(120, 0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI / 30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr >= 12 ? hr - 12 : hr;
+
+  ctx.fillStyle = 'black';
+
+  // write Hours
+  ctx.save();
+  ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec);
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20, 0);
+  ctx.lineTo(80, 0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28, 0);
+  ctx.lineTo(112, 0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI / 30);
+  ctx.strokeStyle = '#D40000';
+  ctx.fillStyle = '#D40000';
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30, 0);
+  ctx.lineTo(83, 0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
+  ctx.stroke();
+  ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+  ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
+  ctx.stroke();
+
+  ctx.restore();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);
+ + + +

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

+ +

Un panorama en bucle

+ +

En aquest exemple, es desplaça una imatge panoràmica d'esquerra a dreta. Estem usant una imatge del Parc Nacional Yosemite, que hem pres de Wikipedia, però es pot usar qualsevol imatge que sigui més gran que el llenç.

+ +
var img = new Image();
+
+// User Variables - customize these to change the image being scrolled, its
+// direction, and the speed.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; // lower is faster
+var scale = 1.05;
+var y = -4.5; // vertical offset
+
+// Main program
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width * scale;
+    imgH = img.height * scale;
+
+    if (imgW > CanvasXSize) {
+        // image larger than canvas
+        x = CanvasXSize - imgW;
+    }
+    if (imgW > CanvasXSize) {
+        // image width larger than canvas
+        clearX = imgW;
+    } else {
+        clearX = CanvasXSize;
+    }
+    if (imgH > CanvasYSize) {
+        // image height larger than canvas
+        clearY = imgH;
+    } else {
+        clearY = CanvasYSize;
+    }
+
+    // get canvas context
+    ctx = document.getElementById('canvas').getContext('2d');
+
+    // set refresh rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+
+    // if image is <= Canvas Size
+    if (imgW <= CanvasXSize) {
+        // reset, start from beginning
+        if (x > CanvasXSize) {
+            x = -imgW + x;
+        }
+        // draw additional image1
+        if (x > 0) {
+            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
+        }
+        // draw additional image2
+        if (x - imgW > 0) {
+            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
+        }
+    }
+
+    // image is > Canvas Size
+    else {
+        // reset, start from beginning
+        if (x > (CanvasXSize)) {
+            x = CanvasXSize - imgW;
+        }
+        // draw aditional image
+        if (x > (CanvasXSize-imgW)) {
+            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
+        }
+    }
+    // draw image
+    ctx.drawImage(img, x, y,imgW, imgH);
+    // amount to move
+    x += dx;
+}
+
+ +

A continuació un {{HTMLElement("canvas")}} en què es desplaça la imatge. Hem de tenir en compte que l'amplada i l'alçada especificades aquí, han de coincidir amb els valors de les variables CanvasXZSize i CanvasYSize en el codi JavaScript.

+ +
<canvas id="canvas" width="800" height="200"></canvas>
+ +

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

+ +

Altres exemples

+ +
+
Una roda de raigs bàsica
+
Un bon exemple de com fer animacions usant els controls del teclat.
+
Animacions avançades
+
En el proper capítol veurem algunes tècniques avançades d'animació i física.
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/ca/web/api/canvas_api/tutorial/aplicar_estils_i_colors/index.html b/files/ca/web/api/canvas_api/tutorial/aplicar_estils_i_colors/index.html new file mode 100644 index 0000000000..9adcc2d5f4 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/aplicar_estils_i_colors/index.html @@ -0,0 +1,733 @@ +--- +title: Aplicar estils i colors +slug: Web/API/Canvas_API/Tutorial/Aplicar_estils_i_colors +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
+ +
+

En el capítol sobre dibuixar formes, hem utilitzat només els estils de línia i de farciment predeterminats. Aquí explorarem les opcions de canvas que tenim a la nostra disposició per fer els nostres dibuixos una mica més atractius. Aprendreu com afegir diferents colors, estils de línies, gradients, patrons i ombres als vostres dibuixos.

+
+ +

Colors

+ +

Fins ara només hem vist mètodes del context de dibuix. Si volem aplicar colors a una forma, hi ha dues propietats importants que podem utilitzar: fillStyle i strokeStyle.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
+
Estableix l'estil utilitzat per emplenar formes.
+
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
+
Estableix l'estil per als contorns de les formes.
+
+ +

color és una cadena que representa un {{cssxref("<color>")}} CSS, un objecte degradat o un objecte patró. Veurem els objectes de degradat i patró més endavant. Per defecte, el traç i el color del farciment estan establerts en negre (valor de color CSS #000000).

+ +
+

Nota: Quan es defineix la propietat strokeStyle i/o fillStyle, el nou valor es converteix en el valor predeterminat per a totes les formes que s'estan dibuixant a partir d'aquest moment. Per a cada forma que desitgeu en un color diferent, haureu de tornar a assignar la propietat fillStyle o strokeStyle.

+
+ +

Les cadenes vàlides que podeu introduir han de ser, segons l'especificació, valors de {{cssxref("<color>")}} CSS. Cadascun dels següents exemples descriu el mateix color.

+ +
// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = 'orange';
+ctx.fillStyle = '#FFA500';
+ctx.fillStyle = 'rgb(255, 165, 0)';
+ctx.fillStyle = 'rgba(255, 165, 0, 1)';
+
+ +

Un exemple de fillStyle

+ +

En aquest exemple, una vegada més, usem dos bucles for per dibuixar una graella de rectangles, cadascun en un color diferent. La imatge resultant hauria de ser similar a la captura de pantalla. Aquí no succeeix res espectacular. Utilitzem les dues variables i i j per generar un color RGB únic per a cada quadrat, i només modifiquen els valors vermell i verd. El canal blau té un valor fix. Modificant els canals, es poden generar tot tipus de paletes. En augmentar els passos, es pot aconseguir alguna cosa que se sembli a les paletes de color que utilitza Photoshop.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 6; i++) {
+    for (var j = 0; j < 6; j++) {
+      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
+                       Math.floor(255 - 42.5 * j) + ', 0)';
+      ctx.fillRect(j * 25, i * 25, 25, 25);
+    }
+  }
+}
+ + + +

The result looks like this:

+ +

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

Un exemple de strokeStyle

+ +

Aquest exemple és similar a l'anterior, però usa la propietat strokeStyle per canviar els colors dels contorns de les formes. Usem el mètode arc() per dibuixar cercles en lloc de quadrats.

+ +
  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i = 0; i < 6; i++) {
+      for (var j = 0; j < 6; j++) {
+        ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
+                         Math.floor(255 - 42.5 * j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+        ctx.stroke();
+      }
+    }
+  }
+
+ + + +

El resultat és així:

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +

Transparència

+ +

A més de dibuixar formes opaques al llenç, també podem dibuixar formes semitransparents (o translúcides). Això es fa, ja sigui configurant la propietat globalAlpha o assignant un color semitransparent a l'estil de traç i/o d'ompliment.

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
+
Aplica el valor de transparència especificat a totes les formes futures dibuixades en el llenç. El valor ha d'estar entre 0,0 (totalment transparent) a 1.0 (totalment opac). Aquest valor és 1.0 (totalment opac) per defecte.
+
+ +

La propietat globalAlpha pot ser útil si voleu dibuixar moltes formes al llenç amb una transparència similar, però en general, és més útil establir la transparència en formes individuals quan establiu els seus colors.

+ +

Atès que les propietats strokeStyle and fillStyle accepten valors de color CSS rgba, podem utilitzar la notació següent per assignar un color transparent a ells.

+ +
// Assignar colors transparents a l'estil de traç i ompliment
+
+ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+
+ +

La funció rgba() és similar a la funció rgb() però té un paràmetre addicional. L'últim paràmetre estableix el valor de transparència d'aquest color en particular. El rang vàlid se situa de nou entre 0.0 (totalment transparent) i 1.0 (completament opac).

+ +

Un exemple de globalAlpha

+ +

En aquest exemple, dibuixarem un fons de quatre quadrats de colors diferents. A més d'això, dibuixarem un conjunt de cercles semitransparents. La propietat globalAlpha s'estableix en 0.2 que s'utilitzarà per a totes les formes des d'aquest punt. Cada pas en el bucle for dibuixa un conjunt de cercles amb un radi creixent. El resultat final és un gradient radial. En superposar cada vegada més cercles un damunt de l'altre, reduïm efectivament la transparència dels cercles que ja s'han dibuixat. En augmentar el recompte de passos i, en efecte, dibuixar més cercles, el fons desapareixeria completament del centre de la imatge.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0, 0, 75, 75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75, 0, 75, 75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0, 75, 75, 75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75, 75, 75, 75);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (i = 0; i < 7; i++) {
+    ctx.beginPath();
+    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+ + + +

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

Un exemple usant rgba()

+ +

En aquest segon exemple, fem alguna cosa semblant a l'anterior, però en comptes de dibuixar cercles un damunt de l'altre, dibuixem petits rectangles amb opacitat creixent. L'ús de rgba() dóna una mica més de control i flexibilitat, perquè podem definir l'estil d'emplenament i traç individualment.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255, 221, 0)';
+  ctx.fillRect(0, 0, 150, 37.5);
+  ctx.fillStyle = 'rgb(102, 204, 0)';
+  ctx.fillRect(0, 37.5, 150, 37.5);
+  ctx.fillStyle = 'rgb(0, 153, 255)';
+  ctx.fillRect(0, 75, 150, 37.5);
+  ctx.fillStyle = 'rgb(255, 51, 0)';
+  ctx.fillRect(0, 112.5, 150, 37.5);
+
+  // Draw semi transparent rectangles
+  for (var i = 0; i < 10; i++) {
+    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
+    for (var j = 0; j < 4; j++) {
+      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
+    }
+  }
+}
+ + + +

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

+ +

Estils de línia

+ +

Hi ha diverses propietats que ens permeten donar estil a les línies.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
+
Estableix l'amplària de les línies dibuixades en el futur.
+
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
+
Estableix l'aparença dels extrems de les línies.
+
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
+
Estableix l'aparença de les "cantonades" on s'uneixen les línies.
+
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
+
Estableix un límit en la mitra, quan dues línies s'uneixen en un angle agut, per permetre-li controlar el grossor de la unió.
+
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
+
Retorna la matriu de patró de guió de la línia actual que conté un nombre parell de nombres no negatius.
+
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
+
Estableix el patró de guió de línia actual.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
+
Especifica on iniciar una matriu de guions en una línia.
+
+ +

Obtindreu una millor comprensió del que fan, en mirar els exemples a continuació.

+ +

Un exemple de lineWidth

+ +

Aquesta propietat estableix el gruix de la línia actual. Els valors han de ser nombres positius. Per defecte, aquest valor es fixa en 1.0 unitats.

+ +

L'amplada de la línia és el gruix del traç centrat en la trajectòria indicada. En altres paraules, l'àrea que es dibuixa s'estén a la meitat de l'amplària de línia a cada costat de la trajectòria. Com que les coordenades del llenç no fan referència directa als píxels, s'ha de tenir especial cura per obtenir línies horitzontals i verticals nítides.

+ +

En el següent exemple, es dibuixen 10 línies rectes amb amplades de línia creixents. La línia en l'extrem esquerre té 1.0 unitats d'ample. No obstant això, les línies de grossor més a l'esquerra i totes les altres d'ample imparell no apareixen nítides a causa del posicionament de la trajectòria.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 10; i++) {
+    ctx.lineWidth = 1 + i;
+    ctx.beginPath();
+    ctx.moveTo(5 + i * 14, 5);
+    ctx.lineTo(5 + i * 14, 140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

+ +

L'obtenció de línies nítides requereix entendre com es tracen les trajectòries. En les imatges següents, la graella representa la graella de coordenades del llenç. Els quadrats entre les línies de la graella són píxels reals en pantalla. En la primera imatge de graella que apareix a continuació, s'emplena un rectangle de (2,1) a (5,5). Tota l'àrea entre ells (vermell clar) cau en els límits de píxels, per la qual cosa el rectangle emplenat resultant tindrà vores nítides.

+ +

+ +

Si es considera una trajectòria de (3,1) a (3,5) amb un gruix de línia  1.0, s'acaba amb la situació en la segona imatge. L'àrea real a emplenar (blau fosc) només s'estén fins a la meitat dels píxels a cada costat de la trajectòria. S'ha de representar una aproximació d'això, la qual cosa significa que aquests píxels estan ombrejats parcialment, i dóna com a resultat que tota l'àrea (blau clar i blau fosc) s'ompli amb un color la meitat de fosc que el color de traç real. Això és el que succeeix amb la línia d'ample 1.0 en el codi d'exemple anterior .

+ +

Per arreglar això, s'ha de ser molt precís en la creació de la trajectòria. Sabent que una línia a 1.0 d'ample s'estendrà mitja unitat a cada costat de la trajectòria, creant la trajectòria de (3.5,1) a (3.5,5) resulta que la situació, en la tercera imatge, la línia d'ample 1.0 acaba completa i omplint, precisament, una sola línia vertical de píxels.

+ +
+

Nota: Hem de tenir en compte que en el nostre exemple de línia vertical, la posició Y encara fa referència a una posició sencera de la graella; si no fos així, veuríem píxels amb una cobertura parcial en els punts finals (però també, hem de tenir en compte que aquest comportament depèn de l'estil actual de lineCap, el valor predeterminat del qual és butt; és possible que desitgem calcular traços uniformes amb coordenades de mig píxel per a línies d'ample imparell, establint l'estil lineCap a estil square, de manera que el límit exterior del traç al voltant del punt final s'ampliï automàticament per cobrir tot el píxel exactament).

+ +

Tinguem en compte, també, que només es veuran afectats els extrems d'inici i fi d'una trajectòria: si es tanca una trajectòria amb closePath(), no hi ha un punt d'inici i final; en el seu lloc, tots els extrems de la trajectòria es connecten al segment anterior i següent utilitzant, la configuració actual de l'estil lineJoin, el valor predeterminat del qual és miter, amb l'efecte d'estendre automàticament els límits exteriors dels segments connectats al seu punt d'intersecció, de manera que el traç representat cobreixi exactament els píxels complets centrats en cada punt final, si aquests segments connectats són horitzontals i/o verticals). Vegeu les dues seccions següents per a les demostracions d'aquests estils de línia addicionals..

+
+ +

Per a les línies d'ample parell, cada meitat acaba sent una quantitat sencera de píxels, per la qual cosa es desitjable una trajectòria que estigui entre els píxels (és a dir, (3,1) a (3,5)), en lloc de baixar per la mitad dels píxels

+ +

Tot i que és lleugerament dolorós quan inicialment es treballa amb gràfics 2D escalables, si ens fixem en la graella de píxels i la posició de les trajectòries, ens hem d'assegurar que els dibuixos es vegin correctes, independentment de l'escalat o qualsevol altra transformació. Una línia vertical de 1.0 d'ample dibuixada en la posició correcta, es convertirà en una línia nítida de 2 píxels quan s'ampliï per 2, i apareixerà en la posició correcta.

+ +

Un exemple de lineCap

+ +

La propietat lineCap determina com es dibuixen els punts finals de cada línia. Hi ha tres valors possibles per a aquesta propietat i aquests són: butt, round i square. Per defecte, aquesta propietat està configurada com a butt.

+ +

+ +
+
butt
+
Els extrems de les línies es quadren en els punts finals.
+
round
+
Els extrems de les línies són arrodonits.
+
square
+
Els extrems de les línies es quadren en afegir una caixa amb un ample igual i la meitat de l'alçada del gruix de la línia.
+
+ +

En aquest exemple, dibuixarem tres línies, cadascuna amb un valor diferent per a la propietat lineCap. També afegim dues guies per veure les diferències exactes entre les tres. Cadascuna d'aquestes línies comença i acaba exactament en aquestes guies.

+ +

La línia de l'esquerra utilitza l'opció predeterminada butt. Notarem que està dibuixada completament al ras amb les guies. La segona s'estableix, utilitzant l'opció round. Això afegeix un semicercle al extrem que té un radi de la meitat de l'ample de la línia. La línia de la dreta utilitza l'opció square. Això afegeix una caixa amb un ample igual i la meitat de l'alçada del gruix de la línia.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt', 'round', 'square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(140, 10);
+  ctx.moveTo(10, 140);
+  ctx.lineTo(140, 140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i = 0; i < lineCap.length; i++) {
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25 + i * 50, 10);
+    ctx.lineTo(25 + i * 50, 140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

Un exemple de lineJoin

+ +

La propietat lineJoin determina com s'uneixen dos segments de connexió (de línies, arcs o corbes) amb longituds diferents de zero en una forma (els segments degenerats amb longituds zero, que els punts finals i punts de control especificats estan exactament en la mateixa posició, s'ometen).

+ +

Hi ha tres possibles valors per a aquesta propietat: round, bevel i miter. Per defecte aquesta propietat s'estableix a miter. Hem de tenir en compte que la configuració lineJoin no té cap efecte si els dos segments connectats tenen la mateixa direcció, ja que en aquest cas no s'afegirà cap àrea d'unió.

+ +

+ +
+
round
+
Arrodoneix les cantonades d'una forma emplenant un sector addicional del disc centrat en el punt final comú dels segments connectats. El radi per a aquestes cantonades arrodonides és igual a la meitat de l'amplada de la línia.
+
bevel
+
Emplena un àrea triangular addicional entre el punt final comú dels segments connectats i les cantonades rectangulars exteriors separades de cada segment..
+
miter
+
Els segments connectats s'uneixen estenent les seves vores exteriors per connectar-se en un sol punt, amb l'efecte d'emplenar un àrea addicional en forma de rombe. Aquest ajust s'efectua mitjançant la propietat miterLimit, que s'explica a continuació.
+
+ +

L'exemple següent dibuixa tres trajectòries diferents, demostrant cadascuna d'aquestes tres configuracions de la propietat lineJoin; la sortida es mostra a dalt..

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round', 'bevel', 'miter'];
+  ctx.lineWidth = 10;
+  for (var i = 0; i < lineJoin.length; i++) {
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5, 5 + i * 40);
+    ctx.lineTo(35, 45 + i * 40);
+    ctx.lineTo(75, 5 + i * 40);
+    ctx.lineTo(115, 45 + i * 40);
+    ctx.lineTo(155, 5 + i * 40);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

Una demostració de la propietat miterLimit

+ +

Com s'ha vist en l'exemple anterior, en unir dues línies amb l'opció miter, les vores exteriors de les dues línies d'unió s'estenen fins al punt on es troben. En el cas de línies que tenen angles grans entre si, aquest punt no està lluny del punt de connexió interior. No obstant això, a mesura que els angles entre cada línia disminueixen, la distància (longitud de miter) entre aquests punts augmenta exponencialment.

+ +

La propietat miterLimit determina quant lluny es pot col·locar el punt de connexió exterior des del punt de connexió interior. Si dues línies excedeixen aquest valor, es dibuixa una unió bisellada. S'ha de tenir en compte que la longitud màxima de miter és el producte de l'amplada de línia mesurat en el sistema de coordenades actual, pel valor d'aquesta propietat miterLimit  (el valor per defecte és 10.0 en HTML {{HTMLElement("canvas")}}), per la qual cosa miterLimit pot ajustar-se independentment de l'escala de visualització actual o de qualsevol transformació afí de les trajectòries: només influeix en la forma efectiva de les vores de la línia representada.

+ +

Més exactament, el límit de miter és la proporció màxima permesa de la longitud de l'extensió (en el llenç HTML, es mesura entre la cantonada exterior de les vores unides de la línia i el punt final comú dels segments de connexió especificats en la trajectòria) a la meitat de l'ample de la línia. La seva definició equival a la relació màxima permesa entre la distància dels punts interiors i exteriors de la unió de les vores i l'amplada total de la línia. Llavors, aixó és igual a la cosecant de la meitat de l'angle intern mínim dels segments de connexió per sota dels quals no es representarà cap unió miter, sinó només una unió bisellada:

+ + + +

Aquí tenim una petita demostració en la qual es pot configura miterLimit dinàmicament i veure com aquest afecta a les formes en el llenç. Les línies blaves mostren on es troben els punts d'inici i fi per a cadascuna de les línies en el patró de zig-zag.

+ +

Si s'especifica un valor de miterLimit inferior a 4.2, en aquesta demostració, cap de les cantonades visibles s'unirà amb una extensió de miter, només hi haurà un petit bisell prop de les línies blaves; amb un miterLimit superior a 10, la majoria de les cantonades d'aquesta demostració haurien d'unir-se amb un miter allunyat de les línies blaves, i l'alçada del qual disminuiria entre les cantonades, d'esquerra a dreta perquè es connectarien amb angles creixents ; amb valors intermedis, les cantonades del costat esquerre només s'uneixen amb un bisell prop de les línies blaves, i les cantonades del costat dret amb una extensió de miter (també amb una altçada decreixent).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0, 0, 150, 150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5, 50, 160, 50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0, 100);
+  for (i = 0; i < 24 ; i++) {
+    var dy = i % 2 == 0 ? 25 : -25;
+    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
+  }
+  ctx.stroke();
+  return false;
+}
+
+ + + +

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

+ +

Ús de guions de línia

+ +

El mètode setLineDash i la propietat lineDashOffset especifiquen el patró de guió per a les línies. El mètode setLineDash accepta una llista de nombres que especifica distàncies per dibuixar alternativament una línia i un buit i la propietat lineDashOffset estableix un desplaçament on començar el patró

+ +

En aquest exemple estem creant un efecte de formigues marxant. És una tècnica d'animació que es troba sovint en les eines de selecció de programes gràfics d'ordinador. Ajuda a l'usuari a distingir la vora de selecció del fons de la imatge, animant la vora. Més endavant, en aquest tutorial, podeu aprendre com fer-ho i altres animacions bàsiques.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+ +

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

+ +

Gradients

+ +

Igual que qualsevol altre programa normal de dibuix , podem emplenar i traçar formes usant, gradients lineals i radials. Es crea un objecte {{domxref("CanvasGradient")}} utilitzant un dels mètodes següents. A continuació, podem assignar aquest objecte a les propietats fillStyle o strokeStyle.

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
+
Crea un objecte de degradat lineal amb un punt inicial de (x1, y1) i un punt final de (x2, y2).
+
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
+
Crea un degradat radial. Els paràmetres representen dos cercles, un amb el seu centre en (x1, y1) i un radi de r1, i l'altre amb el seu centre en (x2, y2) amb un radi de r2.
+
+ +

Per exemple:

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+
+ +

Una vegada s'ha creat un objecte CanvasGradient se li pot assignar colors usant el mètode addColorStop().

+ +
+
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
+
Crea una nova parada de color en l'objecte gradient. position és un nombre entre 0.0 i 1.0 i defineix la posició relativa del color en el degradat,  i l'argument color, ha de ser una cadena que representi un {{cssxref("<color>")}} CSS, indicant el color que el gradient ha d'aconseguir en aquest desplaçament en la transició.
+
+ +

Es pot afegir tantes parades de color, a un gardient, com es necessiti. A continuació, es mostra un gradient lineal molt simple de blanc a negre.

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+
+ +

Un exemple de createLinearGradient

+ +

En aquest exemple, es crearà dos gradientss diferents. Com es podrà veure aquí, tant les propietats strokeStyle com fillStyle poden acceptar un objecte canvasGradient com a entrada vàlida.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10, 10, 130, 130);
+  ctx.strokeRect(50, 50, 50, 50);
+
+}
+
+ + + +

El primer és un gradient de fons. Com es veu, s'assignen dos colors a la mateixa posició. Això es fa per fer transicions de color molt nítides, en aquest cas del blanc al verd. No importa en quina ordre es defineixin les parades de color, però en aquest cas especial, ho fa de forma significativa. Si es mantenen les tasques en l'ordre en què es desitja que apareguin, això no serà un problema.

+ +

En el segon gradient, no s'assigna el color inicial (a la posició 0.0), ja que no és estrictament necessari, perquè automàticament assumirà el color de la següent parada de color. Per tant, l'assignació del color negre en la posició 0.5, automàticament fa que el gradient, des de l'inici fins a aquest punt, sigui negre.

+ +

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

+ +

Un exemple de createRadialGradient

+ +

En aquest exemple, definim quatre gradients radials diferents. Com que tenim el control sobre els punts d'inici i de tancament del gradient, podem aconseguir efectes més complexos del que normalment tindríem en els gradients radials "clàssics" que veiem, per exemple, en Photoshop (és a dir, un gradient amb un únic punt central, on el gradient s'expandeix cap a l'exterior en forma circular).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
+
+  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
+
+  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
+
+  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0, 0, 150, 150);
+}
+
+ + + +

En aquest cas, hem desplaçat lleugerament el punt d'inici des del punt final per aconseguir un efecte 3D esfèric. Lo millor es tractar d'evitar que els cercles interns i externs se superposin, ja que això genera efectes estranys que són difícils de predir.

+ +

L'última parada de color en cadascun dels quatre gradients, utilitza un color completament transparent. Si es desitja tenir una bona transició, d'aquesta a la parada de color anterior, tots dos colors han de ser iguals. Això no és molt obvi del codi, perquè utilitza dos mètodes de color CSS diferents com a demostració, però en el primer gradient #019F62 = rgba(1,159,98,1).

+ +

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

+ +

Patrons

+ +

En un dels exemples de la pàgina anterior, hem utilitzat una sèrie de bucles per crear un patró d'imatges. Hi ha, però, un mètode molt més senzill: el mètode createPattern().

+ +
+
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
+
Crea i retorna un nou objecte de patró canvas. image es un {{domxref("CanvasImageSource")}} (és a dir, un {{domxref("HTMLImageElement")}}, altre llenç, un element {{HTMLElement("video")}} o similar. type és una cadena que indica com utilitzar la imatge.
+
+ +

Type, especifica com utilitzar la imatge per crear el patró, i ha de ser un dels següents valors de cadena:

+ +
+
repeat
+
Teixeix la imatge en ambdues direccions vertical i horitzontal.
+
repeat-x
+
Teixeix la imatge horitzontalment però no verticalment.
+
repeat-y
+
Teixeix la imatge verticalment però no horitzontalment.
+
no-repeat
+
No teixeix la imatge. S'utilitza només una vegada.
+
+ +

S'utilitzar aquest mètode per crear un objecte {{domxref("CanvasPattern")}} que és molt similar als mètodes de gradient que hem vist anteriorment. Una vegada que s'ha creat un patró, se li pot assignar les propietats fillStyle o strokeStyle. Per exemple:

+ +
var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img, 'repeat');
+
+ +
+

Nota: Igual que amb el mètode drawImage(), ens hem d'assegurar que la imatge que utilitzem s'hagi carregat abans de cridar a aquest mètode o que el patró es dibuixi incorrectament.

+
+ +

Un exemple de createPattern

+ +

En aquest últim exemple, crearem un patró per assignar a la propietat fillStyle. L'únic que cal esmentar, és l'ús del controlador onload de la imatge. Això és per assegurar-se de que la imatge es carregui abans que s'assigni el patró.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function() {
+
+    // create pattern
+    var ptrn = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0, 0, 150, 150);
+
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

+ +

Ombres (Shadows)

+ +

L'ús d'ombres implica només quatre propietats:

+ +
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
+
Indica la distància horitzontal que l'ombra ha d'estendre's des de l'objecte. Aquest valor no es veu afectat per la matriu de transformació. El valor predeterminat és 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
+
Indica la distància vertical que l'ombra ha d'estendre's des de l'objecte. Aquest valor no es veu afectat per la matriu de transformació. El valor predeterminat és 0.
+
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
+
Indica la grandària de l'efecte de desenfocament; aquest valor no es correspon a un nombre de píxels i no es veu afectat per la matriu de transformació actual. El valor per defecte és 0.
+
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
+
Un valor de color CSS estàndard, que indica el color de l'efecte d'ombra; per defecte, és negre completament transparent.
+
+ +

Les propietats shadowOffsetX i shadowOffsetY indiquen fins a on ha d'estendre's l'ombra des de l'objecte en les direccions X i Y; aquests valors no es veuen afectats per la matriu de transformació actual. Utilitzar valors negatius per fer que l'ombra s'estengui cap amunt o cap a l'esquerra, i valors positius perquè l'ombra s'estengui cap avall o cap a la dreta. Tots dos són 0 per defecte.

+ +

La propietat shadowBlur indica la grandària de l'efecte de desenfocament; aquest valor no es correspon a un nombre de píxels i no es veu afectat per la matriu de transformació actual. El valor per defecte és 0.

+ +

La propietat shadowColor és un valor de color CSS estàndard, que indica el color de l'efecte d'ombra; per defecte, és negre completament transparent.

+ +
+

Nota: Les ombres només es dibuixen per a operacions de composició de fonts.

+
+ +

Un exemple de text ombrejat

+ +

Aquest exemple dibuixa una cadena de text amb un efecte d'ombra.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+
+  ctx.font = '20px Times New Roman';
+  ctx.fillStyle = 'Black';
+  ctx.fillText('Sample String', 5, 30);
+}
+
+ + + +

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

+ +

Veurem la propietat font i el mètode fillText en el següent capítol sobre com dibuixar text.

+ +

Regles de farciment del llenç

+ +

Quan s'utilitza fill (o {{domxref("CanvasRenderingContext2D.clip", "clip")}} i {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) es pot proporcionar opcionalment un algorisme de regles de farciment per determinar si un punt està dins o fora d'una trajectòria i, per tant, si s'emplena o no. Això és útil quan una trajectòria es creua o es nia.
+
+ Dos valors són possibles:

+ + + +

En aquest exemple estem usant la regla evenodd.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
+  ctx.fill('evenodd');
+}
+ + + +

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git "a/files/ca/web/api/canvas_api/tutorial/composici\303\263/index.html" "b/files/ca/web/api/canvas_api/tutorial/composici\303\263/index.html" new file mode 100644 index 0000000000..e556e911d4 --- /dev/null +++ "b/files/ca/web/api/canvas_api/tutorial/composici\303\263/index.html" @@ -0,0 +1,113 @@ +--- +title: Composició i retall +slug: Web/API/Canvas_API/Tutorial/Composició +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Compositing +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
+ +
+

En tots els nostres exemples anteriors, les formes sempre s'han dibuixat una damunt de l'altra. Això és més que adequat per a la majoria de les situacions, però limita l'ordre en què es construeixen formes compostes. No obstant això, podem canviar aquest comportament establint la propietat globalCompositeOperation. A més, la propietat clip permet ocultar parts de formes no desitjades.

+
+ +

globalCompositeOperation

+ +

No només podem dibuixar noves formes darrere de les formes existents, sinó que també, podem utilitzar-ho per emmascarar certes àrees, esborrar seccions del llenç (no limitades a rectangles, com ho fa el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) i molt més.

+ +
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
+
Estableix el tipus d'operació de composició que s'aplicarà en dibuixar noves formes, on el tipus és una cadena que identifica quina de les dotze operacions de composició ha d'utilitzar-se.
+
+ +

Veure exemples de composició per al codi dels següents exemples.

+ +

{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

+ +

Trajectòries de retall

+ +

Una trajectòria de retall és com una forma de llenç normal, però actua com una màscara per ocultar parts no desitjades de formes. Això es visualitza en la imatge de la dreta. La forma d'estel vermell és la nostre trajectòria de retall. Tot el que queda fora d'aquesta trajectòria no es dibuixarà en el llenç.

+ +

Si comparem les trajectòries de retall  amb la propietat globalCompositeOperation, que hem vist anteriorment, veiem dos modes de composició que aconsegueixen més o menys el mateix efecte en source-in i source-atop. Les diferències més importants entre les dues, són que les trajectòries de retall mai es dibuixen realment al llenç i la trajectòria de retall mai es veu afectada per l'addició de noves formes. Això fa que les trajectòries de retall siguin ideals per dibuixar múltiples formes en un àrea restringida

+ +

En el capítol sobre dibuixar formes, només s'ha esmentat els mètodes stroke() i fill(), però hi ha un tercer mètode que es pot utilitzar amb les trajectòries, anomenat clip().

+ +
+
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}
+
Converteix la trajectòria que s'està construint, en la trajectòria de retall actual.
+
+ +

Utilitzar clip() en lloc de closePath() per tancar una trajectòria i convertir-la en una trajectòria de retall en lloc de traçar o emplenar la trajectòria.

+ +

Per defecte, l'element {{HTMLElement("canvas")}}, té una trajectòria de retall de la mateixa grandària que el propi llenç. En altres paraules, no es produeix cap retall.

+ +

Un exemple de clip

+ +

En aquest exemple, utilitzarem un trajectòria de retall circular per restringir el dibuix d'un conjunt d'estels aleatòries a una regió en particular.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // Crea una trajectòria de retall circular
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // dibuixa el fons
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75, -75, 150, 150);
+
+  // dibuixa els estels
+  for (var j = 1; j < 50; j++) {
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75 - Math.floor(Math.random() * 150),
+                  75 - Math.floor(Math.random() * 150));
+    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i < 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+
+ + + +

En les primeres línies de codi, dibuixem un rectangle negre de la grandària del llenç com a fons, després traslladem l'origen al centre. A continuació, creem la trajectòria de retall circular, dibuixant un arc i cridem clip(). Les trajectòries de retall també formen part de l'estat de guardat del llenç. Si haguéssim volgut mantenir la trajectòria de retall original, podríem haver guardat l'estat del llenç abans de crear el nou.

+ +

Tot el que es dibuixa després de crear la trajectòria de retall, només apareixerà dins d'aquesta trajectòria. Es pot veure això clarament, en el gradient lineal que es dibuixa a continuació. Després d'això, es dibuixa un conjunt de 50 estels posicionats aleatòriament i escalats, usant la funció personalitzada drawStar(). De nou, els estels, només apareixen dins de la trajectòria de retall definida.

+ +

{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}

diff --git a/files/ca/web/api/canvas_api/tutorial/dibuixar_text/index.html b/files/ca/web/api/canvas_api/tutorial/dibuixar_text/index.html new file mode 100644 index 0000000000..37b730176a --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/dibuixar_text/index.html @@ -0,0 +1,165 @@ +--- +title: Dibuixar text +slug: Web/API/Canvas_API/Tutorial/Dibuixar_text +tags: + - Canvas + - Graphics + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
+ +
+

Després d'haver vist com aplicar estils i colors en el capítol anterior, ara veurem com dibuixar text sobre canvas.

+
+ +

Dibuixar text

+ +

El context de representació de canvas proporciona dos mètodes per representar el text:

+ +
+
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
+
Omple un text donat en la posició donada (x, y). Opcionalment amb ample màxim per dibuixar.
+
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
+
Traça un text donat en la posició donada (x, y). Opcionalment amb ample màxim per dibuixar.
+
+ +

Un exemple de fillText

+ +

El text s'omple usant l'actual fillStyle.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.fillText('Hello world', 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

+ +

Un exemple de strokeText

+ +

El text s'omple usant l'actual strokeStyle.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.strokeText('Hello world', 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

+ +

Estil de text

+ +

En els exemples anteriors ja hem fet ús de la propietat font per fer el text una mica més gran que la grandària predeterminada. Hi ha algunes propietats més que permeten ajustar la forma en què el text es mostra en el llenç:

+ +
+
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
+
L'estil de text actual que s'utilitza en dibuixar text. Aquesta cadena utilitza la mateixa sintaxi que la propietat CSS {{cssxref("font")}}. La font predeterminada és 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
+
Configuració de l'alineació del text. Valors possibles: start, end, left, right o center. El valor predeterminat és start.
+
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
+
Configuració d'alineació de la línia de base. Valors possibles: top, hanging, middle, alphabetic, ideographic, bottom. El valor predeterminat és alphabetic.
+
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
+
Direccionalitat. Valors possibles: ltr, rtl, inherit. El valor predeterminat és inherit.
+
+ +

Aquestes propietats poden ser familiars, si heu treballat abans amb CSS.

+ +

El següent diagrama del WHATWG mostra les diverses línies de base compatibles amb la propietat textBaseline.La part superior del quadrat em està aproximadament en la part superior dels glifos en una font, la línia de base penjant és on alguns glifos com आ estan ancorats, el mitjà està a mig camí entre la part superior del quadrat em i la part inferior del quadrat em,la línia de base alfabètica és on ancoren caràcters com Á, ÿ, +f i Ω, la línia de base ideográfica és on glifos com 私 i 達 estan ancorats, i la part inferior del quadrat em està aproximadament en la part inferior dels glifos en una font. La part superior i inferior del quadre delimitador pot estar lluny d'aquestes línies de base, a causa que els glifos s'estenen molt més allà del quadrat em.

+ +

Un exemple de textBaseline

+ +

Editeu el codi següent i vegeu els canvis actualitzats en directe en el llenç:

+ +
ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+
+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Mesures avançades de text

+ +

En el cas de necessitar obtenir més detalls sobre el text, el següent mètode permet mesurar-ho.

+ +
+
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
+
Retorna un objecte {{domxref("TextMetrics")}} que conté l'amplada, en píxels, que serà el text especificat quan es dibuixi en l'estil de text actual.
+
+ +

El següent fragment de codi mostra com es pot mesurar un text i obtenir la seva amplada

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // TextMetrics object
+  text.width; // 16;
+}
+
+ +

Notes específiques de Gecko

+ +

En Gecko (el motor de representació de Firefox, Firefox OS i altres aplicacions basades en Mozilla), es van implementar algunes APIs prefixades en versions anteriors per dibuixar text en un llenç. Ara estan desaprovades i eliminades, ja no es garanteix el seu funcionament.

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

+ +
+ + +
 
+ +
 
+
diff --git a/files/ca/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/ca/web/api/canvas_api/tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..6e8162ac44 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -0,0 +1,579 @@ +--- +title: Dibuix de formes amb canvas +slug: Web/API/Canvas_API/Tutorial/Drawing_shapes +tags: + - Canvas + - Graphics + - HTML + - HTML Canvas + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
+ +
+

Ara que hem configurat el nostre entorn canvas, podem entrar en els detalls de com dibuixar sobre el llenç. Al final d'aquest article, haureu après a dibuixar rectangles, triangles, línies, arcs i corbes, proporcionant-vos familiaritat amb algunes de les formes bàsiques. Treballar amb camins és essencial a l'hora de dibuixar objectes sobre el llenç i veurem com fer-ho.

+
+ +

La graella

+ +

Abans de poder començar a dibuixar, hem de parlar sobre la graella canvas o coordinar l'espai. El nostre esquelet HTML de la pàgina anterior tenia un element canvas amb 150 píxels d'amplada i 150 píxels d'alçada. A la dreta, veureu aquest llenç amb la graella predeterminada superposada. Normalment, una unitat de la graella correspon a 1 píxel sobre el llenç. L'origen d'aquesta graella es posiciona a la cantonada superior esquerra a la coordenada (0,0). Tots els elements es col·loquen en relació amb aquest origen. Per tant, la posició de la cantonada superior esquerra del quadrat blau es converteix en x pixels des de l'esquerra i y pixels des de la part superior, en la coordenada (x,y). Més endavant, en aquest tutorial veurem com podem traduir l'origen a una posició diferent, girar la graella i fins i tot escalar-la, però de moment ens quedarem amb el valor predeterminat.

+ +

Dibuixar rectangles

+ +

A diferència de {{Glossary("SVG")}}, {{HTMLElement("canvas")}} només suporta una forma primitiva: rectangles. Totes les altres formes han de crear-se combinant una o més trajectòries, llistes de punts connectats per línies. Afortunadament, tenim una gran varietat de funcions de dibuix de trajectòria que permeten compondre formes molt complexes.

+ +

Primer vegem el rectangle. Hi ha tres funcions que dibuixen rectangles en canvas:

+ +
+
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
+
Dibuixa un rectangle ple.
+
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
+
Dibuixa un contorn rectangular.
+
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
+
Esborra l'àrea rectangular especificada, fent-la completament transparent
+
+ +

Cadascuna d'aquestes tres funcions pren els mateixos paràmetres. x i y indiquen la posició en el llenç (relativa a l'origen) de la cantonada superior esquerra del rectangle. width i height proporcionen la grandària del rectangle

+ +

A sota hi ha la funció draw() de la pàgina anterior, però ara fa ús d'aquestes tres funcions.

+ +

Exemple de forma rectangular

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25, 25, 100, 100);
+    ctx.clearRect(45, 45, 60, 60);
+    ctx.strokeRect(50, 50, 50, 50);
+  }
+}
+ +

La sortida d'aquest exemple es mostra a continuació.

+ +

{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

+ +

La funció fillRect() dibuixa un quadrat negre de 100 píxels a cada costat. La funció clearRect() esborra un quadrat de 60x60 píxels del centre, i a continuació es crida a strokeRect() per crear un contorn rectangular de 50x50 píxels dins del quadrat buidat.

+ +

A les properes pàgines veurem dos mètodes alternatius per clearRect(), i també veurem com canviar l'estil de color i traç de les formes representades.

+ +

A diferència de les funcions de trajectòria, que veurem en la següent secció, les tres funcions rectangulars dibuixen immediatament al llenç.

+ +

Dibuixar trajectories

+ +

Les úniques altres formes primitives són les trajectòries. Una trajectòria és una llista de punts, connectats per segments de línies que poden ser de diferents formes, corbes o no, de diferent amplària i de diferent color. Un trajectòria, o fins i tot una subtrajecte, pot ser tancada. Per fer formes utilitzant trajectòries, es prenen alguns passos addicionals:

+ +
    +
  1. Primer, crea la trajectòria.
    2. +
  2. A continuació, utilitzar ordres de dibuix per dibuixar en la trajectòria.
    3. +
  3. Després, tancar la trajectòria.
    4. +
  4. Una vegada que s'ha creat la trajectòria, podeu traçar o omplir la trajectòria per representar-la
    5. +
+ +

A continuació, es detallen les funcions que s'utilitzen per realitzar aquests passos:

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
+
Crea una trajectòria nova. Una vegada creada, les futures ordres de dibuix s'aplican a la trajectòria i són utilitzades per construir-la.
+
Mètodes de trajectòria
+
Mètodes per establir diferentes trajectòries d'objectes.
+
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
+
Afegeix una línia recta a la trajectòria, anant a l'inici de la subruta actual.
+
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
+
Dibuixa la forma traçant el seu contorn.
+
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
+
Dibuixa una forma sòlida emplenant l'àrea de contingut de la trajectòria.
+
+ +

El primer pas per crear una trajectòria és cridar a beginPath(). Internament, les trajectòries s'emmagatzemen com una llista de subtrayectes (línies, arcs, etc.) que formen una forma. Cada vegada que es crida a aquest mètode, la llista es reinicia i podem començar a dibuixar noves formes.

+ +
Nota: Quan la trajectòria actual està buida, com immediatament després de cridar beginPath(), o en un llenç recentment creat, la primera ordre de construcció de la trajectòria sempre es tractarà com moveTo(), independentment del que realment sigui. Per aquesta raó, gairebé sempre voldreu establir específicament la seva posició inicial després de restablir una trajectòria.
+ +

El segon pas és cridar als mètodes que realment especifiquen les trajectòries que s'han de dibuixar. Ho veurem en breu.

+ +

El tercer, i com a pas opcional, és cridar closePath(). Aquest mètode intenta tancar la forma, dibuixant una recta des del punt actual fins al començament. Si la forma ja s'ha tancat o només hi ha un punt a la llista, aquesta funció no fa res.

+ +
Nota: Quan crideu fill(), totes les formes obertes es tanquen automàticament, de manera que no heu de cridar closePath(). Aquest no és el cas quan es crida stroke().
+ +

Dibuixar un triangle

+ +

Per exemple, el codi per dibuixar un triangle es veuria així:

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75, 50);
+    ctx.lineTo(100, 75);
+    ctx.lineTo(100, 25);
+    ctx.fill();
+  }
+}
+
+ +

El resultat és així:

+ +

{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}

+ +

Moure el llapis

+ +

Una funció molt útil, que en realitat no dibuixa res però es converteix en part de la llista de trajectòries descrita anteriorment, és la funció moveTo(). Probablement el millor sigui pensar en això com aixecar un bolígraf o un llapis d'un lloc en un tros de paper i col·locar-ho en el següent.

+ +
+
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
+
Mou el llapis a les coordenades especificades per x i y.
+
+ +

Quan s'inicialitza el llenç o es crida beginPath() normalment voldreu utilitzar la funció moveTo() per col·locar el punt de partida en un altre lloc. També podrieu utilitzar moveTo() per dibuixar trajectòries no connectades. Feu un cop d'ull a la cara somrient d'a baix

+ +

Proveu-ho vosaltres mateixos, podeu utilitzar el fragment de codi que es mostra a continuació. Simplement enganxeu-lo a la funció draw() que vam veure anteriorment.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+     var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
+    ctx.moveTo(110, 75);
+    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
+    ctx.moveTo(65, 65);
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
+    ctx.moveTo(95, 65);
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
+    ctx.stroke();
+  }
+}
+
+ +

El resultat és així:

+ +

{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

+ +

Si voleu veure les línies de connexió, podeu eliminar les línies que criden moveTo().

+ +
+

Nota: Per obtenir més informació sobre la funció arc(), vegeu {{anch("Arcs")}} a continuació.

+
+ +

Línies

+ +

Per dibuixar línies rectes, utilitzeu el mètode lineTo().

+ +
+
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
+
Dibuixa una línia des de la posició del dibuix actual fins a la posició especificada per x i y.
+
+ +

Aquest mètode pren dos arguments, x i y, que són les coordenades del punt final de la línia. El punt de partida depèn de les trajectòries prèviament traçades, on el punt final de la trajectòria anterior és el punt de partida de la següent, etc. El punt de partida també es pot canviar utilitzant el mètode moveTo().

+ +

L'exemple següent dibuixa dos triangles, un omplert i un altre delineat.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25, 25);
+    ctx.lineTo(105, 25);
+    ctx.lineTo(25, 105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125, 125);
+    ctx.lineTo(125, 45);
+    ctx.lineTo(45, 125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+ +

Això comença cridant beginPath() per iniciar una nova trajectòria de forma. Seguidament, utilitzem el mètode moveTo() per moure el punt de partida a la posició desitjada. A continuació, es dibuixen dues línies que formen dues cares del triangle.

+ +

{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

+ +

Notareu la diferència entre el triangle emplenat i traçat. Això és, com es va esmentar anteriorment, perquè les formes es tanquen automàticament quan s'omple una trajectòria, però no quan es tracen. Si deixem de costat closePath() per al triangle traçat, només s'haurien dibuixat dues línies, no un triangle complet.

+ +

Arcs

+ +

Per dibuixar arcs o cercles, utilitzem els mètodes arc() o arcTo().

+ +
+
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
+
Dibuixa un arc que està centrat en la posició (x, y) amb un radi r que comença en startAngle i acaba en endAngle que va en la direcció donada, indicada per el sentit antihorari (predeterminat en sentit horari)
+
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
+
Dibuixa un arc amb els punts de control i radi donats, connectats al punt anterior per una línia recta.
+
+ +

Vegem amb més detall el mètode arc, que pren sis paràmetres: x i y són les coordenades del centre del cercle en el qual s'ha de dibuixar l'arc. radius és autoexplicatiu. Els paràmetres startAngle i endAngle defineixen els punts inicial i final de l'arc en radiants, al llarg de la corba del cercle. Aquests es mesuren des de l'eix x. El paràmetre anticlockwise és un valor booleà, que quan és true, dibuixa l'arc en sentit contrari a les agulles del rellotge; en cas contrari, l'arc es dibuixa en sentit horari.

+ +
+

Nota: Els angles en la funció arc es mesuren en radiants, no en graus. Per convertir graus a radiants es pot utilitzar la següent expressió Javascript: radians = (Math.PI/180)*graus.

+
+ +

El següent exemple és una mica més complex que el que hem vist anteriorment. Dibuixa 12 arcs diferents, tots amb diferents angles i omplerts.

+ +

Els dos bucles (loops) for són per recórrer les files i columnes dels arcs. Per a cada arc, iniciem una nova trajectòria cridant beginPath(). En el codi, cadascun dels paràmetres de l'arc es troba en una variable per a major claredat, però no necessàriament ho fareu en la vida real.

+ +

Les coordenades x i y han de ser suficientment clares. radius i startAngle són fixes. endAngle comença a 180 graus (mig cercle) en la primera columna i s'incrementa per passos de 90 graus, culminant en un cercle complet en l'última columna

+ +

La instrucció per al paràmetre clockwise (sentit horari), resulti en la primera i la tercera fila que es dibuixin com a arcs en sentit horari i la segona i quarta fila com a arcs en sentit antihorari. Finalment, la sentència if fa que la meitat superior traci els arcs i la meitat inferior ompli els arcs.

+ +
+

Nota: Aquest exemple requereix un llenç una mica més gran que els altres, en aquesta pàgina: 150 x 200 píxels.

+
+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    for (var i = 0; i < 4; i++) {
+      for (var j = 0; j < 3; j++) {
+        ctx.beginPath();
+        var x = 25 + j * 50; // x coordinate
+        var y = 25 + i * 50; // y coordinate
+        var radius = 20; // Arc radius
+        var startAngle = 0; // Starting point on circle
+        var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
+        var anticlockwise = i % 2 !== 0; // clockwise or anticlockwise
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i > 1) {
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+
+ +

{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

+ +

Corbes bézier i quadràtiques

+ +

El següent tipus de trajectòries disponibles són les corbes de Bézier, disponibles en varietats cúbiques i quadràtiques. Aquests s'utilitzen generalment per dibuixar formes orgàniques complexes.

+ +
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
+
Dibuixa una corba Bézier quadràtica des de la posició actual del llapis fins al punt final especificat per x i y, utilitzant els punts de control especificats per cp1x i cp1y.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
+
Dibuixa una corba Bézier cúbica des de la posició actual del llapis fins al punt final especificat per x i y, utilitzant els punts de control especificats per (cp1x, cp1y) i (cp2x, cp2y).
+
+ +

La millor manera de descriure la diferència entre aquestes dues opcions és usant la imatge de la dreta. Una corba Bézier quadràtica té un punt inicial i un punt final (punts blaus) i només un punt de control (indicat pel punt vermell), mentre que una corba Bézier cúbica utilitza dos punts de control.

+ +

Els paràmetres x i y de tots dos mètodes són les coordenades del punt final. cp1x i cp1y són les coordenades del primer punt de control, i cp2x i cp2y són les coordenades del segon punt de control.

+ +

L'ús de corbes de Bézier cúbiques i quadràtiques pot ser tot un repte, perquè a diferència del programari de dibuix vectorial com Adobe Illustrator, no tenim respostes visuals directes sobre el que estem fent. Això fa que sigui bastant difícil dibuixar formes complexes. En el següent exemple, dibuixarem algunes formes orgàniques senzilles, però si teniu el temps i, sobretot paciència, es poden crear formes molt més complexes.

+ +

No hi ha res molt difícil en aquests exemples. En tots dos casos veiem una successió de corbes dibuixades que finalment donen com a resultat una forma completa.

+ +

Corbes de Bezier quadràtiques

+ +

Aquest exemple usa múltiples corbes de Bézier quadràtiques per representar un globus de diàleg .

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75, 25);
+    ctx.quadraticCurveTo(25, 25, 25, 62.5);
+    ctx.quadraticCurveTo(25, 100, 50, 100);
+    ctx.quadraticCurveTo(50, 120, 30, 125);
+    ctx.quadraticCurveTo(60, 120, 65, 100);
+    ctx.quadraticCurveTo(125, 100, 125, 62.5);
+    ctx.quadraticCurveTo(125, 25, 75, 25);
+    ctx.stroke();
+  }
+}
+
+ +

{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

+ +

Corbes de Bezier cúbiques

+ +

Aquest exemple dibuixa un cor utilitzant corbes Bézier cúbiques.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Cubic curves example
+    ctx.beginPath();
+    ctx.moveTo(75, 40);
+    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
+    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
+    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
+    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
+    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
+    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
+    ctx.fill();
+  }
+}
+
+ +

{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

+ +

Rectangles

+ +

A més dels tres mètodes que vam veure en {{anch("Drawing rectangles")}}, que dibuixen formes rectangulars directament al llenç, també està el mètode rect(), que afegeix una trajectòria rectangular a una trajectòria actualment oberta.

+ +
+
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}
+
Dibuixa un rectangle a la cantonada superior esquerra especificada per (x, y) amb width i height especificats.
+
+ +

Quan s'executa aquest mètode, el mètode moveTo() es crida automàticament amb els paràmetres (0,0). En altres paraules, la posició actual del llapis es restableix automàticament a les coordenades predeterminades.

+ +

Fer combinacions

+ +

Fins ara, cada exemple d'aquesta pàgina només ha utilitzat un tipus de funció de trajectòria per forma. No obstant això, no hi ha limitació en el nombre o tipus de trajectòries que podeu utilitzar per crear una forma. Així, en aquest últim exemple, combinem totes les funcions de trajectòria per crear un conjunt de personatges de joc molt famosos.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx, 12, 12, 150, 150, 15);
+    roundedRect(ctx, 19, 19, 150, 150, 9);
+    roundedRect(ctx, 53, 53, 49, 33, 10);
+    roundedRect(ctx, 53, 119, 49, 16, 6);
+    roundedRect(ctx, 135, 53, 49, 33, 10);
+    roundedRect(ctx, 135, 119, 25, 49, 10);
+
+    ctx.beginPath();
+    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
+    ctx.lineTo(31, 37);
+    ctx.fill();
+
+    for (var i = 0; i < 8; i++) {
+      ctx.fillRect(51 + i * 16, 35, 4, 4);
+    }
+
+    for (i = 0; i < 6; i++) {
+      ctx.fillRect(115, 51 + i * 16, 4, 4);
+    }
+
+    for (i = 0; i < 8; i++) {
+      ctx.fillRect(51 + i * 16, 99, 4, 4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83, 116);
+    ctx.lineTo(83, 102);
+    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
+    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
+    ctx.lineTo(111, 116);
+    ctx.lineTo(106.333, 111.333);
+    ctx.lineTo(101.666, 116);
+    ctx.lineTo(97, 111.333);
+    ctx.lineTo(92.333, 116);
+    ctx.lineTo(87.666, 111.333);
+    ctx.lineTo(83, 116);
+    ctx.fill();
+
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.moveTo(91, 96);
+    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
+    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
+    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
+    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
+    ctx.moveTo(103, 96);
+    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
+    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
+    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
+    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
+    ctx.fill();
+
+    ctx.fillStyle = 'black';
+    ctx.beginPath();
+    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx, x, y, width, height, radius) {
+  ctx.beginPath();
+  ctx.moveTo(x, y + radius);
+  ctx.lineTo(x, y + height - radius);
+  ctx.arcTo(x, y + height, x + radius, y + height, radius);
+  ctx.lineTo(x + width - radius, y + height);
+  ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
+  ctx.lineTo(x + width, y + radius);
+  ctx.arcTo(x + width, y, x + width - radius, y, radius);
+  ctx.lineTo(x + radius, y);
+  ctx.arcTo(x, y, x, y + radius, radius);
+  ctx.stroke();
+}
+
+ +

La imatge resultant és així:

+ +

{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}

+ +

No anem a repassar això detalladament, ja que en realitat és sorprenentment senzill. La cosa més important a destacar és l'ús de la propietat fillStyle en el context del dibuix, i l'ús d'una funció d'utilitat (en aquest cas roundedRect()). L'ús de funcions d'utilitat per als bits del dibuix sovint pot ser molt útil i reduir la quantitat de codi que necessiteu, així com la seva complexitat.

+ +

Tornarem a fer un cop d'ull a fillStyle, en més detall, més endavant en aquest tutorial. Aquí, tot el que fem és usar-ho per canviar el color d'emplenament de les trajectòries del color predeterminat de negre a blanc, i viceversa .

+ +

Objectes Path2D

+ +

Com hem vist en l'últim exemple, pot haver-hi una sèrie de trajectories i ordres de dibuix per dibuixar objectes sobre el llenç. Per simplificar el codi i millorar el rendiment, l'objecte {{domxref("Path2D")}} disponible en versions recents dels navegadors, permet emmagatzemar en la memòria cau o gravar aquestes ordres de dibuix. Podeu reproduir les vostres trajectòries ràpidament.
+ Vegem com podem construir un objecte Path2D:

+ +
+
{{domxref("Path2D.Path2D", "Path2D()")}}
+
El constructor Path2D() retorna un objecte Path2D recentment instanciat, opcionalment amb una altra trajectòria com a argument (crea una còpia), o opcionalment amb una cadena consistent en dades de trajectòria SVG.
+
+ +
new Path2D();     // empty path object
+new Path2D(path); // copy from another Path2D object
+new Path2D(d);    // path from SVG path data
+ +

Tots els mètodes de trajectòria com moveTo, rect, arc o quadraticCurveTo, etc., que hem conegut anteriorment, estan disponibles en els objectes Path2D.

+ +

L'API de Path2D també afegeix una forma de combinar trajectòries utilitzant el mètode addPath. Això pot ser útil quan es desitja construir objectes a partir de diversos components, per exemple.

+ +
+
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
+
Afegeix una trajectòria a la trajectòria actual amb una matriu de transformació opcional.
+
+ +

Exemple de Path2D

+ +

En aquest exemple, estem creant un rectangle i un cercle. Tots dos s'emmagatzemen com un objecte Path2D, de manera que estan disponibles per al seu ús posterior. Amb la nova API Path2D, es van actualitzar diversos mètodes per acceptar opcionalment un objecte Path2D que s'utilitzarà en comptes de la trajectòria actual. Aquí, stroke i fill s'utilitzen amb un argument de trajectòria per dibuixar tots dos objectes sobre el llenç, per exemple.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+
+ +

{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

+ +

Ús de trajectòries SVG

+ +

Una altra característica poderosa de la nova API Path2D de canvas és l'ús de dades de trajectòria SVG per inicialitzar trajectòries en el seu llenç. Això podria permetre-li passar les dades de trajectòria i reutilitzar-les tant en SVG com en canvas.

+ +

La trajectòria es mourà al punt (M10 10) i després es mourà horitzontalment 80 punts a la dreta (h 80), després 80 punts cap avall (v 80), després 80 punts a l'esquerra (h -80), i després de tornada al principi (z). Podeu veure aquest exemple a la pàgina constructor Path2D.

+ +
var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/ca/web/api/canvas_api/tutorial/index.html b/files/ca/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..92ed58549b --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,63 @@ +--- +title: Canvas tutorial +slug: Web/API/Canvas_API/Tutorial +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/API/Canvas_API/Tutorial +--- +
{{CanvasSidebar}}
+ +
+ +
+

<canvas> is an HTML element which can be used to draw graphics using scripting (usually JavaScript). This can, for instance, be used to draw graphs, make photo composition or simple (and not so simple) animations. The images on this page show examples of <canvas> implementations which will be created in this tutorial.

+
+ +

This tutorial describes how to use the <canvas> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content.

+ +

First introduced in WebKit by Apple for the OS X Dashboard, <canvas> has since been implemented in browsers. Today, all major browsers support it.

+ +

Before you start

+ +

Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The <canvas> element is not supported in some older browsers, but is supported in recent versions of all major browsers. The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML height and width property. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.

+ +

In this tutorial

+ + + +

See also

+ + + +

A note to contributors

+ +

Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.

+ +
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
diff --git "a/files/ca/web/api/canvas_api/tutorial/manipular_p\303\255xels_amb_canvas/index.html" "b/files/ca/web/api/canvas_api/tutorial/manipular_p\303\255xels_amb_canvas/index.html" new file mode 100644 index 0000000000..d792e62ef0 --- /dev/null +++ "b/files/ca/web/api/canvas_api/tutorial/manipular_p\303\255xels_amb_canvas/index.html" @@ -0,0 +1,307 @@ +--- +title: Manipular píxels amb canvas +slug: Web/API/Canvas_API/Tutorial/Manipular_píxels_amb_canvas +tags: + - Canvas + - Graphics + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
+ +
+

Fins ara no hem mirat els píxels reals del nostre llenç. Amb l'objecte ImageData podem llegir i escriure directament una matriu de dades per manipular dades de píxels. També veurem com es pot controlar el suavitzat de la imatge (anti-aliasing) i com guardar imatges del vostre llenç.

+
+ +

L'objecte ImageData

+ +

L'objecte {{domxref("ImageData")}} representa les dades de píxels subjacents d'un àrea d'un objecte canvas. Conté els següents atributs de només lectura:

+ +
+
width
+
L'amplada de la imatge en píxels.
+
height
+
L'alçada de la imatge en píxels.
+
data
+
Un {{jsxref("Uint8ClampedArray")}} representa una matriu unidimensional que conté les dades en l'ordre RGBA, amb valors enters entre 0 i 255 (inclosos).
+
+ +

La propietat data retorna un {{jsxref("Uint8ClampedArray")}} al que es pot accedir per veure les dades de píxel en brut; cada píxel està representat per quatre valors d'un byte (vermell, verd, blau i alfa, en aquest ordre; és a dir, format "RGBA"). Cada component de color està representat per un nombre enter entre 0 i 255. A cada component se li assigna un índex consecutiu dins de la matriu, el component vermell del píxel esquerre superior és l'índex 0 dins de la matriu. Els píxels es segueixen d'esquerra a dreta, a després cap avall, a través de la matriu.

+ +

El {{jsxref("Uint8ClampedArray")}} conté height × width × 4 bytes de dades, amb valors d'índex que van des de 0 fins a (height×width×4)-1.

+ +

Per exemple, per llegir el valor del component blau del píxel a la columna 200, fila 50 de la imatge, fariem el següent:

+ +
blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];
+ +

Si se li dóna un conjunt de coordenades (X i Y), es pot acabar fent alguna cosa com això:

+ +
var xCoord = 50;
+var yCoord = 100;
+var canvasWidth = 1024;
+
+function getColorIndicesForCoord(x, y, width) {
+  var red = y * (width * 4) + x * 4;
+  return [red, red + 1, red + 2, red + 3];
+}
+
+var colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
+
+var redIndex = colorIndices[0];
+var greenIndex = colorIndices[1];
+var blueIndex = colorIndices[2];
+var alphaIndex = colorIndices[3];
+
+var redForCoord = imageData.data[redIndex];
+var greenForCoord = imageData.data[greenIndex];
+var blueForCoord = imageData.data[blueIndex];
+var alphaForCoord = imageData.data[alphaIndex];
+
+ +

O, si ES6 is apropiat:

+ +
const xCoord = 50;
+const yCoord = 100;
+const canvasWidth = 1024;
+
+const getColorIndicesForCoord = (x, y, width) => {
+  const red = y * (width * 4) + x * 4;
+  return [red, red + 1, red + 2, red + 3];
+};
+
+const colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
+
+const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices;
+
+ +

També es pot accedir a la mida de la matriu de píxels en bytes llegint l'atribut Uint8ClampedArray.length:

+ +
var numBytes = imageData.data.length;
+
+ +

Crear un objecte ImageData

+ +

Per crear un nou objecte ImageData en blanc, hem d'utilitzar el mètode {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Hi ha dues versions del mètode createImageData():

+ +
var myImageData = ctx.createImageData(width, height);
+ +

Crea un nou objecte ImageData amb les dimensions especificades. Tots els píxels estan predefinits en negre transparent.

+ +

També podem crear un nou objecte ImageData amb les mateixes dimensions que l'objecte especificat amb anotherImageData. Els píxels del nou objecte, estan tots predefinits en negre transparent. Això no copia les dades de la imatge!

+ +
var myImageData = ctx.createImageData(anotherImageData);
+ +

Obtenir les dades de píxels per a un context

+ +

Per obtenir un objecte ImageData que contingui una còpia de les dades de píxel per a un context de llenç, podem utilitzar el mètodegetImageData():

+ +
var myImageData = ctx.getImageData(left, top, width, height);
+ +

Aquest mètode retorna un objecte ImageData que representa les dades de píxel per a l'àrea del llenç, les cantonades del qual estan representades pels punts (left,top), (left+width, top), (left, top+height) i (left+width, top+height). Les coordenades s'especifiquen en unitats d'espai en coordenades canvas.

+ +
+

Nota: Qualsevol píxel fora del llenç es retorna com a negre transparent en l'objecte ImageData resultant.

+
+ +

Aquest mètode també es demostra a l'article Manipulant vídeo usant canvas.

+ +

Un selector de colors

+ +

En aquest exemple estem usant el mètode getImageData() per mostrar el color sota el cursor del ratolí. Per a això, necessitem la posició actual del ratolí amb layerX i layerY, llavors busquem les dades de píxels en aquesta posició en la matriu de píxels que getImageData() ens proporciona. Finalment, utilitzem les dades de la matriu per establir un color de fons i un text en el <div> per mostrar el color.

+ + + +
var img = new Image();
+img.crossOrigin = 'anonymous';
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+img.onload = function() {
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+};
+var color = document.getElementById('color');
+function pick(event) {
+  var x = event.layerX;
+  var y = event.layerY;
+  var pixel = ctx.getImageData(x, y, 1, 1);
+  var data = pixel.data;
+  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
+             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
+  color.style.background =  rgba;
+  color.textContent = rgba;
+}
+canvas.addEventListener('mousemove', pick);
+
+ +

{{ EmbedLiveSample('A_color_picker', 610, 240) }}

+ +

Pintar dades de píxels en un context

+ +

Utilitzem el mètode putImageData() per pintar dades de píxels en un context:

+ +
ctx.putImageData(myImageData, dx, dy);
+
+ +

Els paràmetres dx i dy indiquen les coordenades del dispositiu, dins del context en el que es pinta la cantonada superior esquerra de les dades de píxels que es vol dibuixar.

+ +

Per exemple, per pintar tota la imatge representada per myImageData en la cantonada superior esquerra del context, simplement fem el següent:

+ +
ctx.putImageData(myImageData, 0, 0);
+
+ +

Escalat de grisos i inversió de colors

+ +

En aquest exemple, iterem sobre tots els píxels per canviar els seus valors, després posem la matriu de píxels modificada, de nou, al llenç, utilitzant putImageData(). La funció invert, simplement, resta cada color del valor màxim 255. La funció grayscale, simplement, utilitza la mitjana de vermell, verd i blau. També es pot utilitzar una mitjana ponderada, donada per la fórmula x = 0.299r + 0.587g + 0.114b, per exemple. Vegeu Escala de grisos (Grayscale) a Wikipedia per obtenir més informació.

+ + + +
var img = new Image();
+img.crossOrigin = 'anonymous';
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  var data = imageData.data;
+
+  var invert = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      data[i]     = 255 - data[i];     // red
+      data[i + 1] = 255 - data[i + 1]; // green
+      data[i + 2] = 255 - data[i + 2]; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var grayscale = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      data[i]     = avg; // red
+      data[i + 1] = avg; // green
+      data[i + 2] = avg; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var invertbtn = document.getElementById('invertbtn');
+  invertbtn.addEventListener('click', invert);
+  var grayscalebtn = document.getElementById('grayscalebtn');
+  grayscalebtn.addEventListener('click', grayscale);
+}
+
+ +

{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}

+ +

Ampliació i suavitzat

+ +

Amb l'ajuda del mètode {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} un segon llenç i la propietat {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}, podem ampliar la nostra imatge i veure els detalls.

+ +

Obtenim la posició del ratolí, retallem una imatge de 5 píxels a l'esquerra i a dalt a 5 píxels a la dreta i a baix. A continuació, la copiem a un altre llenç i canviem la grandària de la imatge a la grandària que volguem. En el llenç de zoom, canviem la grandària de un retall de 10×10 píxels del llenç original a 200×200.

+ +
zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);
+ +

Atès que el suavitzat (anti-aliasing) està habilitat per defecte, és possible que vulguem deshabilitar el suavitzat per veure els píxels clars. Alternant la casella de verificació es pot veure l'efecte de la propietat imageSmoothingEnabled (necessita prefixos per a diferents navegadors).

+ + + + + +
var img = new Image();
+img.crossOrigin = 'anonymous';
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var zoomctx = document.getElementById('zoom').getContext('2d');
+
+  var smoothbtn = document.getElementById('smoothbtn');
+  var toggleSmoothing = function(event) {
+    zoomctx.imageSmoothingEnabled = this.checked;
+    zoomctx.mozImageSmoothingEnabled = this.checked;
+    zoomctx.webkitImageSmoothingEnabled = this.checked;
+    zoomctx.msImageSmoothingEnabled = this.checked;
+  };
+  smoothbtn.addEventListener('change', toggleSmoothing);
+
+  var zoom = function(event) {
+    var x = event.layerX;
+    var y = event.layerY;
+    zoomctx.drawImage(canvas,
+                      Math.abs(x - 5),
+                      Math.abs(y - 5),
+                      10, 10,
+                      0, 0,
+                      200, 200);
+  };
+
+  canvas.addEventListener('mousemove', zoom);
+}
+ +

{{ EmbedLiveSample('Zoom_example', 620, 490) }}

+ +

Guardar imatges

+ +

El {{domxref("HTMLCanvasElement")}} proporciona un mètode toDataURL(), que és útil quan es guarden imatges. Retorna un URI de dades que conté una representació de la imatge en el format especificat pel paràmetre type (per defecte en PNG). La imatge retornada té una resolució de 96 dpi.

+ +
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
+
Configuració per defecte. Crea una imatge PNG.
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
+
Crea una imatge JPG. Opcionalment, pot proporcionar una qualitat en el rang de 0 a 1, sent una d'elles la millor qualitat i amb 0 gairebé no recognoscible, però, petita en grandària d'arxiu.
+
+ +

Una vegada que s'hagi generat un URI de dades des del llenç, es podrà utilitzar com a font de qualsevol {{HTMLElement("image")}} o posar-ho en un hipervíncle amb un atribut de descàrrega per guardar-ho en el disc, per exemple.

+ +

També es pot crear un {{domxref("Blob")}} des del llenç.

+ +
+
{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
+
Crea un objecte Blob, representant la imatge continguda en el llenç.
+
+ +

Vegeu també

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}

diff --git a/files/ca/web/api/canvas_api/tutorial/transformacions/index.html b/files/ca/web/api/canvas_api/tutorial/transformacions/index.html new file mode 100644 index 0000000000..2958d40498 --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/transformacions/index.html @@ -0,0 +1,290 @@ +--- +title: Transformacions +slug: Web/API/Canvas_API/Tutorial/Transformacions +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial/Transformations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
+ +
Anteriorment en aquest tutorial hem après sobre la graella de canvas i l'espai de coordenades. Fins ara, només usàvem la graella per defecte i canviàvem la grandària del llenç per a les nostres necessitats. Amb les transformacions, hi ha formes més poderoses de traslladar l'origen a una posició diferent, girar la graella i fins i tot escalar-la.
+ +

Guardar i restaurar l'estat

+ +

Abans de veure els mètodes de transformació, vegem altres dos mètodes que són indispensables una vegada que comencem a generar dibuixos cada vegada més complexos.

+ +
+
{{domxref("CanvasRenderingContext2D.save", "save()")}}
+
Guarda tot l'estat del llenç.
+
{{domxref("CanvasRenderingContext2D.restore", "restore()")}}
+
Restaura l'estat del llenç guardat més recent.
+
+ +

Els estats del llenç s'emmagatzemen en una pila. Cada vegada que es crida al mètode save() l'estat del dibuix actual es mou a la pila. L'estat d'un dibuix consisteix de

+ + + +

Es pot cridar al mètode save() tantes vegades com es vulgui. Cada vegada que es crida al mètode restore() l'últim estat desat s'elimina de la pila i es restauren tots les configuracions guardades.

+ +

Un exemple de save i restore de l'estat del llenç

+ +

Aquest exemple intenta il·lustrar com funciona la pila d'estats del dibuix en dibuixar un conjunt de rectangles consecutius.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0, 0, 150, 150);   // Dibuixa un rectangle amb la configuració per defecte
+  ctx.save();                  // Guarda el estat predeterminat
+
+  ctx.fillStyle = '#09F';      // Es fan canvis a la configuració
+  ctx.fillRect(15, 15, 120, 120); // Es dibuixa un rectangle amb la nova configuració
+
+  ctx.save();                  // Es guarda el estat actual
+  ctx.fillStyle = '#FFF';      // Es fan canvis a la configuració
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30, 30, 90, 90);   // Es dibuixa un rectangle amb la nova configuració
+
+  ctx.restore();               // Es restaura el estat anterior
+  ctx.fillRect(45, 45, 60, 60);   // Es dibuixa un rectangle amb la configuració restaurada
+
+  ctx.restore();               // Es restaura el estat original
+  ctx.fillRect(60, 60, 30, 30);   // Es dibuixa un rectangle amb la configuració restaurada
+ + + +

El primer pas és dibuixar un gran rectangle amb la configuració predeterminada.  A continuació guardem aquest estat i fem canvis en el color de farcit. Després dibuixem el segon rectangle blau i més petit i guardem l'estat. De nou canviem algunes configuracions de dibuix i dibuixem el tercer rectangle blanc semitransparent.

+ +

Fins ara, això és bastant similar al que hem fet en les seccions anteriors. No obstant això, una vegada que cridem a la primera instrucció restore() l'estat del dibuix superior s'elimina de la pila i es restaura la configuració. Si no haguéssim guardat l'estat usant save(), hauríem de canviar el color de farcit i la transparència manualment, per tornar a l'estat anterior. Això seria fàcil per a dues propietats, però si tenim més que això, el nostre codi es faria molt llarg, molt ràpid.

+ +

Quan es crida a la segona instrucció restore(), es restaura l'estat original (el que hem configurat abans de la primera crida save) i l'últim rectangle es dibuixa de nou en negre.

+ +

{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

+ +

Traslladar

+ +

El primer dels mètodes de transformació que veurem és translate(). Aquest mètode s'utilitza per moure el llenç i el seu origen a un punt diferent de la graella.

+ +
+
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
+
Mou el llenç i el seu origen en la graella. x indica la distància horitzontal a moure, i y indica quanta distància s'ha de moure la graella verticalment.
+
+ +

És una bona idea guardar l'estat del llenç abans de fer qualsevol transformació. En la majoria dels casos, és més fàcil cridar al mètode restore, que haver de fer una traslació inversa per tornar a l'estat original. També, si estem trasladant dins d'un bucle i no guardem i restaurem l'estat del llenç, pot ser que acabem perdent part del dibuix, ja que es va dibuixar fora de la vora del llenç.

+ +

Un exemple de translate

+ +

Aquest exemple demostra alguns dels beneficis de traslladar l'origen del llenç. Sense el mètode translate(), tots els rectangles es dibuixarien en la mateixa posició (0,0). El mètode translate(), també ens dóna la llibertat de col·locar el rectangle en qualsevol lloc del llenç, sense haver d'ajustar manualment les coordenades en la funció fillRect(). Això fa que sigui una mica més fàcil d'entendre i usar.

+ +

En la funció draw(), cridem a la funció fillRect() nou vegades, usant dos  bucles for. En cada bucle, el llenç es trasllada, es dibuixa el rectangle i el llenç torna al seu estat original. Observem com la crida a fillRect() usa les mateixes coordenades cada vegada, confiant en translate() per ajustar la posició del dibuix.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 3; i++) {
+    for (var j = 0; j < 3; j++) {
+      ctx.save();
+      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
+      ctx.translate(10 + j * 50, 10 + i * 50);
+      ctx.fillRect(0, 0, 25, 25);
+      ctx.restore();
+    }
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

+ +

Girar

+ +

El segon mètode de transformació és rotate(). Se usa per girar el llenç al voltant de l'origen actual.

+ +
+
{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
+
Gira el llenç en sentit horari, al voltant de l'origen actual pel nombre d'angle de radiants.
+
+ +

El punt central de gir és sempre l'origen del llenç. Per canviar el punt central, necessitarem moure el llenç usant el mètode translate().

+ +

Un exemple de rotate

+ +

En aquest exemple, usarem el mètode rotate() para girar primer un rectangle des de l'origen del llenç, i després des del centre del rectangle mateix amb l'ajuda de translate().

+ +
+

Recordatori: Els angles estan en radiants, no en graus. Per fer la conversació, estem usant: radians = (Math.PI/180)*degrees.

+
+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // rectangles esquerra, giren a partir d'origen del llenç
+  ctx.save();
+  // rect blau
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.rotate((Math.PI / 180) * 25);
+  // grey rect
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.restore();
+
+  // rectangles drets, giren des del centre del rectangle
+  // dibuixa rect blau
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(150, 30, 100, 100);
+
+  ctx.translate(200, 80); // trasllada al rectangle central
+                          // x = x + 0.5 * width
+                          // y = y + 0.5 * height
+  ctx.rotate((Math.PI / 180) * 25); // gira
+  ctx.translate(-200, -80); // traslladar de nou
+
+  // dibuixa rect gris
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(150, 30, 100, 100);
+}
+
+ +

Per girar el rectangle al voltant del seu propi centre, traslladem el llenç al centre del rectangle, després girem el llenç i tornem a traslladar el llenç a 0,0, i a continuació dibuixem el rectangle.

+ + + +

{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

+ +

Escalar

+ +

El següent mètode de transformació és l'escalat. Ho usem per augmentar o disminuir les unitats en la graella del llenç. Això es pot utilitzar per dibuixar formes i mapes de bits reduïts o ampliats.

+ +
+
{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
+
Escala les unitats del llenç, per x horitzontalment i per y verticalment. Tots dos paràmetres són nombres reals. Els valors inferiors a 1.0 redueixen la grandària de la unitat i els valors superiors a 1.0 augmenten la grandària de la unitat. Els valors a 1.0 deixen les unitats de la mateixa grandària.
+
+ +

Usant nombres negatius es pot fer la replica d'eixos (per exemple, usant translate(0,canvas.height); scale(1,-1); tindrem el conegut sistema de coordenades cartesianes, amb l'origen en la cantonada inferior esquerra).

+ +

Per defecte, una unitat en el llenç és exactament un píxel. Si apliquem, per exemple, un factor d'escala de 0.5, la unitat resultant es convertirà en 0.5 píxels i per tant les formes es dibuixaran a meitat de la seva grandària. De manera similar, si s'ajusta el factor d'escala a 2.0, la grandària de la unitat augmentarà i una unitat ara es converteix en dos píxels. Això dona com a resultat que les formes es dibuixin dues vegades més grans.

+ +

Un exemple de scale

+ +

En aquest últim exemple, dibuixarem formes amb diferents factors d'escala.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // dibuixar un rectangle senzill, però escalar-lo.
+  ctx.save();
+  ctx.scale(10, 3);
+  ctx.fillRect(1, 10, 10, 10);
+  ctx.restore();
+
+  // mirror horizontally
+  ctx.scale(-1, 1);
+  ctx.font = '48px serif';
+  ctx.fillText('MDN', -135, 120);
+}
+
+
+ + + +

{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

+ +

Transformar

+ +

Finalment, els següents mètodes de transformació permeten modificar directament la matriu de transformació.

+ +
+
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
+
Multiplica la matriu de transformació actual amb la matriu descrita pels seus arguments. La matriu de transformació és descrita per: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
+
+ +
+
Si qualsevol dels arguments és Infinity, la matriu de transformació ha de ser marcada com a infinita en lloc que el mètode llanci una excepció.
+
+ +

Els paràmetres d'aquesta funció són:

+ +
+
a (m11)
+
Escalat horitzontal.
+
b (m12)
+
Desviació Horizontal.
+
c (m21)
+
Desviació Vertical.
+
d (m22)
+
Escalat Vertical.
+
e (dx)
+
Moviment Horizontal.
+
f (dy)
+
Moviment Vertical.
+
{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
+
Reinicia la transformació actual a la matriu d'identitat i, a continuació, invoca el mètode transform() amb els mateixos arguments. Això, bàsicament, desfà la transformació actual, i després estableix la transformació especificada, tot en un sol pas.
+
{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
+
Reinicia la transformació actual a la matriu d'identitat. Això és el mateix que cridar: ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Exemple de transform i setTransform

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var sin = Math.sin(Math.PI / 6);
+  var cos = Math.cos(Math.PI / 6);
+  ctx.translate(100, 100);
+  var c = 0;
+  for (var i = 0; i <= 12; i++) {
+    c = Math.floor(255 / 12 * i);
+    ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
+    ctx.fillRect(0, 0, 100, 10);
+    ctx.transform(cos, sin, -sin, cos, 0, 0);
+  }
+
+  ctx.setTransform(-1, 0, 0, 1, 100, 100);
+  ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
+  ctx.fillRect(0, 50, 100, 100);
+}
+
+ + + +

{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}

+ +
+ + +
 
+ +
 
+
diff --git a/files/ca/web/api/canvas_api/tutorial/using_images/index.html b/files/ca/web/api/canvas_api/tutorial/using_images/index.html new file mode 100644 index 0000000000..6d568024ee --- /dev/null +++ b/files/ca/web/api/canvas_api/tutorial/using_images/index.html @@ -0,0 +1,339 @@ +--- +title: Usar imatges +slug: Web/API/Canvas_API/Tutorial/Using_images +tags: + - Advanced + - Canvas + - Graphics + - HTML + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}
+ +
+

Fins ara hem creat les nostres pròpies formes i aplicat estils a elles. Una de les característiques més interessants de {{HTMLElement("canvas")}} és la capacitat d'usar imatges.  Aquestes poden ser usades per fer composicions fotogràfiques dinàmiques o com a telons de fons de gràfics, per sprites en jocs, etcètera. Les imatges externes es poden utilitzar en qualsevol format compatible amb el navegador, com PNG, GIF o JPEG. Fins i tot es pot utilitzar la imatge produïda per altres elements de canvas a la mateixa pàgina que la font!

+
+ +

 Importar imatges en un llenç és bàsicament un procés de dos passos:

+ +
    +
  1. Obtenir una referència a un objecte {{domxref("HTMLImageElement")}} o a un altre element de canvas com a font. També és possible utilitzar imatges proporcionant una URL.
    2. +
  2. Dibuixi la imatge en el llenç usant la funció drawImage().
    3. +
+ +

Feu un cop d'ull a com fer això.

+ +

Obtenir imatges per dibuixar

+ +

L'API de canvas pot utilitzar qualsevol dels següents tipus de dades com a font d'imatge:

+ +
+
{{domxref("HTMLImageElement")}}
+
Aquestes són imatges creades usant el constructor Image(), així com qualsevol element {{HTMLElement("img")}}.
+
{{domxref("SVGImageElement")}}
+
Aquestes són imatges incrustades usant l'element {{SVGElement("image")}}.
+
{{domxref("HTMLVideoElement")}}
+
L'ús d'un element HTML {{HTMLElement("video")}} com a font d'imatge, pren el marc actual del vídeo i ho utilitza com a imatge.
+
{{domxref("HTMLCanvasElement")}}
+
Es pot utilitzar un altre element {{HTMLElement("canvas")}} com la seva font d'imatge
+
+ +

Aquestes fonts es refereixen col·lectivament pel tipus {{domxref("CanvasImageSource")}}.

+ +

Hi ha diverses maneres d'obtenir imatges per usar-les en un llenç.

+ +

Usar imatges de la mateixa pàgina

+ +

Es pot obtenir una referència a les imatges en la mateixa pàgina que el llenç utilitzant una de les següents opcions:

+ + + +

Usar imatges d'altres dominis

+ +

Usant l'atribut {{htmlattrxref("crossorigin", "img")}} d'un element {{HTMLElement("img")}} (reflectit per la propietat {{domxref("HTMLImageElement.crossOrigin")}} property), es pot sol·licitar permís per carregar una imatge d'un altre domini per usar-la cridant a drawImage(). Si el domini d'allotjament permet l'accés de domini creuat a la imatge, la imatge es pot utilitzar en el  llenç sense corrompre's; en cas contrari, usar la imatge corromprà el llenç.

+ +

Usar altres elements de canvas

+ +

Igual que amb les imatges normals, accedim a altres elements de canvas usant el mètode {{domxref("document.getElementsByTagName()")}} o {{domxref("document.getElementById()")}}. Hem d'estar segurs d'haver dibuixat alguna cosa en el llenç font abans d'usar-ho en el llenç de destinació.

+ +

Un dels usos més pràctics d'això seria usar un segon element de canvas com a vista en miniatura de l'altre canvas més gran.

+ +

Crear una imatge des de zero

+ +

Una altra opció és crear nous {{domxref("HTMLImageElement")}} en un script. Per fer-ho, hem d'utilitzar el constructor adequat Image():

+ +
var img = new Image();   // Create new img element
+img.src = 'myImage.png'; // Set source path
+
+ +

Quan s'executa aquest script, la imatge comença a carregar-se.

+ +

Si intentem cridar drawImage() abans que la imatge s'hagi acabat de carregar, no farà res (o, en navegadors antics, fins i tot pot arribar a produir una excepció). Per tant, ens hem d'assegurar d'utilitzar l'esdeveniment load per no intentar-ho abans de que la imatge es carregui:

+ +
var img = new Image();   // Create new img element
+img.addEventListener('load', function() {
+  // execute drawImage statements here
+}, false);
+img.src = 'myImage.png'; // Set source path
+
+ +

Si només s'utilitza una imatge externa, això pot ser un bon enfocament, però una vegada que es necessiti rastrejar més d'una, es necessitarà recórrer a una mica més intel·ligent. Està fora de l'abast d'aquest tutorial examinar tàctiques de precàrrega d'imatges, però cal tenir-ho en ment.

+ +

Incrustar una imatge mitjançant dades: URL

+ +

Una altra forma possible d'incloure imatges és a través de les dades: url. Les URLs de dades permeten definir completament una imatge com una cadena de caràcters codificats en Base64, directament en el codi.

+ +
var img = new Image();   // Create new img element
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+
+ +

Un avantatge de les URL de dades és que la imatge resultant està disponible immediatament sense un altre viatge d'anada i tornada al servidor. Un altre avantatge potencial és que també és possible encapsular en un sol arxiu tots els nostres arxius CSS, JavaScript, HTML i imatges, fent-los més portàtils a altres ubicacions.

+ +

Alguns desavantatges d'aquest mètode són que la imatge no està emmagatzemada a la memòria cau, i per a imatges més grans la url codificada pot arribar a ser bastant llarga.

+ +

Usar marcs d'un vídeo

+ +

També es pot utilitzar marcs d'un vídeo, presentat per un element {{HTMLElement("video")}} (fins i tot si el vídeo no és visible). Per exemple, si tenim un element {{HTMLElement("video")}} amb l'ID "myvideo", es pot fer:

+ +
function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+
+ +

Això retorna l'objecte {{domxref("HTMLVideoElement")}} per al vídeo, que, com s'ha explicat anteriorment, és un dels objectes que es pot utilitzar com CanvasImageSource.

+ +

Dibuixar imatges

+ +

Una vegada que tenim una referència al nostre objecte d'imatge font podem usar el mètode drawImage() para representar-la en el llenç. Com veurem més endavant el mètode drawImage() està sobrecarregat i té diverses variants. En la seva forma més bàsica, es veu així:

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
+
Dibuixa el CanvasImageSource especificat pel paràmetre image en les coordenades (x, y).
+
+ +
+

Les imatges SVG han d'especificar un amplada i una alçada en l'element arrel <svg>.

+
+ +

Exemple: Un gràfic de línia senzilla

+ +

En el següent exemple, utilitzarem una imatge externa com a fons per un petit gràfic de línia. L'ús de fons pot fer que el script sigui considerablement més petit perquè evitem la necessitat de codi per generar el fons. En aquest exemple, només estem utilitzant una imatge, per la qual cosa s'utilitza el controlador d'esdeveniments load de l'objecte image per executar les sentències de dibuix. El mètode drawImage() col·loca el fons en la coordenada (0,0), que és la cantonada superior esquerra del llenç.

+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    ctx.drawImage(img, 0, 0);
+    ctx.beginPath();
+    ctx.moveTo(30, 96);
+    ctx.lineTo(70, 66);
+    ctx.lineTo(103, 76);
+    ctx.lineTo(170, 15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}
+ +

El gràfic resultant és el següent:

+ +

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

+ +

Escalar

+ +

La segona variant del mètode drawImage() afegeix dos nous paràmetres i ens permet col·locar imatges a escala en el llenç.

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
+
Això afegeix els paràmetres width i height, que indiquen la grandària al que s'ha d'escalar la imatge en dibuixar-la sobre el llenç.
+
+ +

Exemple: Mosaic d'una imatge

+ +

En aquest exemple, usarem una imatge com a fons de pantalla i la repetirem diverses vegades sobre el llenç. Això es fa, simplement, fent un bucle i col·locant les imatges escalades en diferents posicions. En el codi següent, el primer cicle de bucle itera sobre les files. El segon cicle for itera sobre les columnes. La imatge s'escala a un terç de la seva grandària original, que és de 50x38 píxels.

+ +
+

Nota: Les imatges poden tornar-se borroses en augmentar l'escala o granuloses si es redueixen massa. Escalar és millor no fer-ho, si tenim una mica de text que ha de seguir sent llegible.

+
+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    for (var i = 0; i < 4; i++) {
+      for (var j = 0; j < 3; j++) {
+        ctx.drawImage(img, j * 50, i * 38, 50, 38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}
+ +

El llenç resultant es veu així:

+ +

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

+ +

Retallar

+ +

La tercera i última variant del mètode drawImage() té vuit paràmetres a més de la font d'imatge. Ens permet retallar una secció de la imatge font, després escalar-la i dibuixar-la en el llenç.

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
+
Donada una image, aquesta funció pren l'àrea de la imatge font especificada pel rectangle, la cantonada superior esquerra de la qual és (sx, sy) i l'amplada de la qual i l'alçada són sWidth i sHeight i la dibuixa en el llenç, col·locant-la sobre el llenç a (dx, dy) i escalant-la a la grandària especificada per dWidth i dHeight.
+
+ +

Per entendre realment què fa això, pot ajudar, mirar la imatge a la dreta. Els primers quatre paràmetres defineixen la ubicació i la grandària del retall en la imatge font. Els últims quatre paràmetres defineixen el rectangle en el qual dibuixar la imatge sobre el llenç de destinació.

+ +

El retallar pot ser una eina útil quan es desitja fer composicions. Es pot tenir tots els elements en un sol arxiu d'imatge i usar aquest mètode per compondre un dibuix complet. Per exemple, si es vol fer una gràfic, tenint una imatge PNG que contingui tot el text necessari en un sol arxiu i depenent de les dades, es podria canviar l'escala del gràfic amb bastant facilitat. Un altre avantatge és que no es necessita carregar cada imatge individualment, la qual cosa millora el rendiment de la càrrega.

+ +

Exemple: Enquadrar una imatge

+ +

En aquest exemple, usarem el mateix rinoceront que en l'exemple anterior, però li retallarem el cap i el compondrem en un marc d'imatge. La imatge del marc és una imatge PNG de 24 bits que inclou una ombra. A causa que les imatges PNG de 24 bits inclouen un canal alfa complet de 8 bits, a diferència de les imatges GIF i PNG de 8 bits, es poden col·locar en qualsevol fons sense que preocupi el color mat.

+ +
<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+   <div style="display:none;">
+     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+   </div>
+ </body>
+</html>
+
+ +
function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Draw slice
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Draw frame
+  ctx.drawImage(document.getElementById('frame'), 0, 0);
+}
+ +

Aquesta vegada hem pres un enfocament diferent per carregar les imatges. En lloc de carregar-les creant nous objectes {{domxref("HTMLImageElement")}}, les incloem com a etiquetes {{HTMLElement("img")}} directament en el nostre codi font HTML i recuperem les imatges d'aquestes . Les imatges s'oculten de la sortida, establint la propietat CSS {{cssxref("display")}} a none per a aquestes imatges.

+ +

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

+ +

El propi script és molt senzill. Cada {{HTMLElement("img")}} se li assigna un atribut ID, la qual cosa facilita la selecció dels mateixos mitjançant {{domxref("document.getElementById()")}}. A continuació, simplement usem drawImage() per retallar el rinoceront de la primera imatge i escalar-lo en el llenç, després dibuixem el marc en la part superior usant una segona crida a drawImage().

+ +

Exemple de galeria d'art

+ +

En l'últim exemple d'aquest capítol, construirem una petita galeria d'art. La galeria consisteix en una taula que conté diverses imatges. Quan es carrega la pàgina, s'insereix un element {{HTMLElement("canvas")}} per a cada imatge i es dibuixa un marc al seu voltant.

+ +

En aquest cas, cada imatge té una amplada i alçada fixa, igual que el marc que es dibuixa al seu al voltant. Es pot millorar el script (seqüència de comandaments) perquè usi l'amplada i l'alçada de la imatge, perquè el marc s'adapti perfectament al seu voltant.

+ +

El següent codi ha de ser autoexplicatiu. Recorrem el contenidor {{domxref("document.images")}} i afegim nous elements canvas. Probablement l'única cosa que cal tenir en compte, per a aquells que no estan tan familiaritzats amb el DOM, és l'ús del mètode {{domxref("Node.insertBefore")}}. insertBefore() és un mètode del node pare (una cel·la de taula) de l'element (image) en que previament inserirem un nou node (l'element canvas).

+ +
<html>
+ <body onload="draw();">
+     <table>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
+      </tr>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
+      </tr>
+     </table>
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+ </body>
+</html>
+
+ +

I aquí hi ha una mica de CSS per fer que les coses es vegin bé:

+ +
body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+
+ +

Javascript ho lliga tot junt, per dibuixar les imatges emmarcades:

+ +
function draw() {
+
+  // Loop through all images
+  for (var i = 0; i < document.images.length; i++) {
+
+    // Don't add a canvas for the frame image
+    if (document.images[i].getAttribute('id') != 'frame') {
+
+      // Create canvas element
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width', 132);
+      canvas.setAttribute('height', 150);
+
+      // Insert before the image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Draw image to canvas
+      ctx.drawImage(document.images[i], 15, 20);
+
+      // Add frame
+      ctx.drawImage(document.getElementById('frame'), 0, 0);
+    }
+  }
+}
+ +

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

+ +

Controlar el comportament d'escalat de la imatge

+ +

Com es va esmentar anteriorment, l'escalat d'imatges pot donar com a resultat objectes borrosos o bloquejats a causa del procés d'escalat. Es pot utilitzar la propietat {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} del context de dibuix, per controlar l'ús d'algoritmes de suavitzat d'imatge en escalar imatges dins del seu context. Per defecte, això és true, la qual cosa significa que les imatges se suavitzaran en escalar-les. Aquesta característica es pot deshabilitar d'aquesta manera:

+ +
ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}

diff --git "a/files/ca/web/api/canvas_api/tutorial/\303\272s_b\303\240sic/index.html" "b/files/ca/web/api/canvas_api/tutorial/\303\272s_b\303\240sic/index.html" new file mode 100644 index 0000000000..fb15a62d81 --- /dev/null +++ "b/files/ca/web/api/canvas_api/tutorial/\303\272s_b\303\240sic/index.html" @@ -0,0 +1,158 @@ +--- +title: Ús bàsic de canvas +slug: Web/API/Canvas_API/Tutorial/Ús_bàsic +tags: + - Canvas + - Graphics + - HTML + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
+ +
+

Comencem aquest tutorial consultant l'element {{HTMLElement("canvas")}} {{Glossary("HTML")}}. Al final d'aquesta pàgina, sabreu com configurar un context 2D de canvas i haureu dibuixat un primer exemple en el vostre navegador.

+
+ +

L'element <canvas>

+ +
<canvas id="tutorial" width="150" height="150"></canvas>
+
+ +

A primera vista, {{HTMLElement("canvas")}} s'assembla l'element {{HTMLElement("img")}} amb l'única diferència clara, que no té els atributs src i alt. De fet, l'element <canvas> només té dos atributs, {{htmlattrxref("width", "canvas")}} i {{htmlattrxref("height", "canvas")}}. Aquests són opcionals i també es poden establir utilitzant les properties {{Glossary("DOM")}} . Quan no s'especifiquen els atributs width i height, inicialment canvas tindrà 300 píxels d'amplada i 150 píxels d'alçada. L'element es pot dimensionar arbitràriament per {{Glossary("CSS")}}, però durant la representació, la imatge s'escala per adaptar-se a la seva grandària de disseny: si el dimensionament CSS no respecta la relació inicial de canvas, apareixerà distorsionada

+ +
+

Nota: Si les vostres representacions semblen distorsionades, intenteu especificar els atributs width i height, explícitament, en els atributs <canvas> i no utilitzeu CSS.

+
+ +

L'atribut id no és específic de l'element <canvas>, però és un dels atributs HTML global que es pot aplicar a qualsevol element HTML (com class, per exemple). Sempre és una bona idea proporcionar un id, perquè això fa que sigui molt més fàcil identificar-lo en un script.

+ +

L'element <canvas> se li pot donar estil com qualsevol imatge normal ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Aquestes regles, no obstant això, no afecten al dibuix real sobre el llenç. Veurem com això es fa en un capítol dedicat d'aquest tutorial. Quan no s'apliquen regles d'estil al llenç, inicialment, serà totalment transparent.

+ +
+

Contingut alternatiu

+ +

L'element <canvas> difereix d'una etiqueta {{HTMLElement("img")}} com per els elements {{HTMLElement("video")}}, {{HTMLElement("audio")}} o {{HTMLElement("picture")}}, és fàcil definir algun contingut alternatiu, que es mostri en navegadors antics que no ho suportin, com ara en versions d'Internet Explorer anteriors a la versió 9 o navegadors textuals. Sempre haureu de proporcionar contingut alternatiu perquè els navegadors ho mostrin.

+ +

Proporcionar contingut alternatiu és molt senzill: simplement inseriu el contingut alternatiu dins de l'element <canvas>. Els navegadors que no suporten <canvas> ignoraran el contenidor i mostraran el contingut alternatiu dins del mateix. Els navegadors que suporten <canvas> ignoraran el contingut dins del contenidor, i simplement mostraran el llenç, normalment.

+ +

Per exemple, podríem proporcionar una descripció de text del contingut del llenç o proporcionar una imatge estàtica del contingut presentat dinàmicament. Això pot semblar-se a això:

+ +
<canvas id="stockGraph" width="150" height="150">
+  current stock price: $3.15 + 0.15
+</canvas>
+
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+
+ +

Dir-li a l'usuari que utilitzi un navegador diferent que suporti canvas no ajuda als usuaris que no poden llegir canvas en absolut, per exemple. Proporcionar un text alternatiu útil o un DOM secundari, ajuda a fer canvas més accessible.

+ +

Etiqueta </canvas> obligatoria

+ +

Com a conseqüència de la manera en què es proporciona una solució alternativa, a diferència de l'element {{HTMLElement("img")}}, l'element {{HTMLElement("canvas")}} requereix l'etiqueta de tancament (</canvas>). Si aquesta etiqueta no està present, la resta del document es consideraria contingut alternatiu i no es mostraria.

+ +

Si no es necessita un contingut alternatiu, un simple <canvas id="foo" ...></canvas> és totalment compatible amb tots els navegadors que suporten canvas.

+ +

El context de representació

+ +

L'element {{HTMLElement("canvas")}} crea una superfície de dibuix de grandària fixa que exposa un o més contextos de representació, que s'utilitzen per crear i manipular el contingut mostrat. En aquest tutorial, ens centrem en el context de representació 2D. Altres contextos poden proporcionar diferents tipus de representació; per exemple, WebGL utilitza un context 3D basat en OpenGL ÉS.Other contexts may provide different types of rendering; for example, WebGL uses a 3D context based on OpenGL ES.

+ +

El llenç està inicialment en blanc. Per mostrar alguna cosa, un script, primer necessita accedir al context de representació i dibuixar en ell. L'element {{HTMLElement("canvas")}} té un mètode anomenat {{domxref("HTMLCanvasElement.getContext", "getContext()")}}, utilitzat per obtenir el context de representació i les seves funcions de dibuix. getContext() pren un paràmetre, el tipus de context. Per als gràfics 2D, com els que es detallen en aquest tutorial, heu d'especificar "2d" per obtenir un {{domxref("CanvasRenderingContext2D")}}.

+ +
var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+
+ +

La primera línia del script recupera el node en el DOM, que representa l'element {{HTMLElement("canvas")}} cridant el mètode {{domxref("document.getElementById()")}}. Un cop tingueu el node d'element, podeu accedir al context del dibuix mitjançant el mètode getContext().

+ +
+

Comprovació del suport

+ +

El contingut alternatiu es mostra en navegadors que no admeten {{HTMLElement("canvas")}}. Les seqüències d'ordres, també poden comprovar la compatibilitat mitjançant programació, simplement provant la presència del mètode getContext(). El nostre fragment de codi de dalt es converteix en una cosa així:

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext) {
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+
+
+
+ +

Una plantilla esquelet

+ +

Aquí teniu una plantilla minimalista, que usarem com a punt de partida per a exemples posteriors.

+ +
+

Nota: no és una bona pràctica incrustar un script dins d'HTML. Ho fem aquí per mantenir l'exemple concís.

+
+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Canvas tutorial</title>
+    <script type="text/javascript">
+      function draw() {
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext) {
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    </script>
+    <style type="text/css">
+      canvas { border: 1px solid black; }
+    </style>
+  </head>
+  <body onload="draw();">
+    <canvas id="tutorial" width="150" height="150"></canvas>
+  </body>
+</html>
+
+ +

El script inclou una funció anomenada draw(), que s'executa una vegada que la pàgina acaba de carregar-se; això es fa escoltant  l'esdeveniment {{event("load")}} en el document. Aquesta funció, o una similar, també pot ser cridada usant {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}}, o qualsevol altre controlador d'esdeveniments, sempre que la pàgina s'hagi carregat primer.

+ +

Així és com es veuria una plantilla en acció. Com es mostra aquí, inicialment està en blanc.

+ +

{{EmbedLiveSample("A_skeleton_template", 160, 160)}}

+ +

Un exemple senzill

+ +

Per començar, feu un cop d'ull a un exemple senzill que dibuixa dos rectangles que es creuen, un dels quals té una transparència alfa. Explorarem com funciona això amb més detall en exemples posteriors.

+ +
<!DOCTYPE html>
+<html>
+ <head>
+  <meta charset="utf-8"/>
+  <script type="application/javascript">
+    function draw() {
+      var canvas = document.getElementById('canvas');
+      if (canvas.getContext) {
+        var ctx = canvas.getContext('2d');
+
+        ctx.fillStyle = 'rgb(200, 0, 0)';
+        ctx.fillRect(10, 10, 50, 50);
+
+        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
+        ctx.fillRect(30, 30, 50, 50);
+      }
+    }
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+
+ +

Aquest exemple es veu així:

+ +

{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}

diff --git a/files/ca/web/api/index.html b/files/ca/web/api/index.html new file mode 100644 index 0000000000..d90573a587 --- /dev/null +++ b/files/ca/web/api/index.html @@ -0,0 +1,8 @@ +--- +title: Web API Interfaces +slug: Web/API +translation_of: Web/API +--- +

En escriure codi per a la web utilitzant JavaScript, hi ha una gran quantitat d'APIs disponibles. A continuació es mostra una llista de totes les interfícies (és a dir, tipus d'objectes) que vostè pot utilitzar quan desenvolupi la seva aplicació o lloc web.

+ +
{{APIListAlpha}}
diff --git a/files/ca/web/api/webgl_api/index.html b/files/ca/web/api/webgl_api/index.html new file mode 100644 index 0000000000..d2d59703ec --- /dev/null +++ b/files/ca/web/api/webgl_api/index.html @@ -0,0 +1,276 @@ +--- +title: 'L''API WebGL: Gràfics 2D i 3D al web' +slug: Web/API/WebGL_API +tags: + - Avançat + - Gràfics + - Media + - WebGL +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +
+

WebGL (Web Graphics Library) és una API Javascript per renderitzar gràfics interactius 3D i 2D en qualsevol navegador web compatible sense la utilització d'extensions. WebGL ho porta a terme introduint una API que s'adapta molt a OpenGL ES 2.0 i que pot utilitzar-se en elements {{HTMLElement("canvas")}} d'HTML5.

+
+ +

Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ i Internet Explorer 11+, suporten WebGL; malgrat això, el dispositiu de l'usuari ha de disposar de maquinari que suporti aquestes característiques.

+ +

L'element {{HTMLElement("canvas")}} s'utilitza també en Canvas 2D per realitzar gràfics 2D en pàgines web.

+ +

Referència

+ +

Interfícies estàndard

+ +
+ +
+ +

Extensions

+ +
+ +
+ +

Events

+ + + +

Constants i tipus

+ + + +

WebGL 2

+ +

WebGL 2 és una actualització important de WebGL a la que s'accedeix mitjançant la interfície {{domxref("WebGL2RenderingContext")}}. Està basat en OpenGL ES 3.0 i algunes de les seves millores són:

+ + + +

Vegeu també l'entrada al blog "WebGL 2 aterra en el Firefox" i webglsamples.org/WebGL2Samples per unes quantes demostracions.

+ +

Guies i tutorials

+ + + +

Tutorials avançats

+ + + +

Recursos

+ + + +

Llibraries

+ + + +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionsEstatComentari
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Definició inicial. Basat en OpenGL ES 2.0
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Ampliació de WebGL 1. Basat en OpenGL ES 3.0.
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}} 
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}} 
+ +

Compatibilitat de navegadors

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic9{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}11125.1
WebGL 256{{CompatNo}}{{CompatGeckoDesktop("51")}}{{CompatNo}}43{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChrome per AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic25{{CompatVersionUnknown}}4{{CompatNo}}128.1
WebGL 2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Notes de compatibilitat

+ +

A més del navegador, la pròpia GPU ha de suportar la característica. Per exemple, la compressió de textures S3 (S3TC) només està disponible en tauletes basades en el chipset Tegra. La majoria de navegadors fan disponible el context WebGL a través del nom de context webgl, però els navegadors antics el fan disponible a través del nom experimental-webgl també. La versió WebGL 2 és totalment retro compatible i utilitza el nom webgl2.

+ +

Notes sobre Gecko

+ +

Debugant i testant WebGL

+ +

Començant amb Gecko 10.0 {{geckoRelease("10.0")}}, hi ha dues preferències disponibles que et permeten controlar les capacitats WebGL per testar:

+ +
+
webgl.min_capability_mode
+
Una propietat booleana que, quan és certa, habilita un mode de capacitats mínimes. Quan aquest mode està actiu, WebGL està configurat per suportar només el conjunt mínim de funcionalitats que marca l'especificació de WebGL. Això permet comprovar que el codi WebGL funcionarà en qualsevol dispositiu o navegador, independentment de les capacitats d'aquest. És false per defecte.
+
webgl.disable_extensions
+
Una propietat booleana que, quan és certa, desactiva totes les extensions WebGL. És false per defecte.
+
+ +

See also

+ + diff --git a/files/ca/web/api/window/index.html b/files/ca/web/api/window/index.html new file mode 100644 index 0000000000..5731c6fb02 --- /dev/null +++ b/files/ca/web/api/window/index.html @@ -0,0 +1,477 @@ +--- +title: Window +slug: Web/API/Window +tags: + - API + - DOM + - Interface + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - Window +translation_of: Web/API/Window +--- +

{{APIRef}}

+ +

The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.

+ +

This section provides a brief reference for all of the methods, properties, and events available through the DOM window object. The window object implements the Window interface, which in turn inherits from the AbstractView interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the JavaScript Reference and DOM Reference.

+ +

In a tabbed browser, such as Firefox, each tab contains its own window object (and if you're writing an extension, the browser window itself is a separate window too - see Working with windows in chrome code for more information). That is, the window object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the window object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.

+ +

Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.

+ +
+
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
+
This property indicates whether the current window is closed or not.
+
{{domxref("Window.console")}} {{ReadOnlyInline}}
+
Returns a reference to the console object which provides access to the browser's debugging console.
+
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
+
Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.
+
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the XUL controller objects for the current chrome window.
+
{{domxref("Window.crypto")}} {{readOnlyInline}}
+
Returns the browser crypto object.
+
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
+
Gets/sets the status bar text for the given window.
+
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the ratio between physical pixels and device independent pixels in the current display.
+
{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}
+
Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.
+
{{domxref("Window.directories")}} {{obsolete_inline}}
+
Synonym of {{domxref("window.personalbar")}}
+
{{domxref("Window.document")}} {{ReadOnlyInline}}
+
Returns a reference to the document that the window contains.
+
{{domxref("Window.frameElement")}} {{readOnlyInline}}
+
Returns the element in which the window is embedded, or null if the window is not embedded.
+
{{domxref("Window.frames")}} {{readOnlyInline}}
+
Returns an array of the subframes in the current window.
+
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
+
This property indicates whether the window is displayed in full screen or not.
+
{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
+
Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.
+ Was: Multiple storage objects that are used for storing data across multiple pages.
+
{{domxref("Window.history")}} {{ReadOnlyInline}}
+
Returns a reference to the history object.
+
{{domxref("Window.innerHeight")}} {{readOnlyInline}}
+
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
+
{{domxref("Window.innerWidth")}} {{readOnlyInline}}
+
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
+
{{domxref("Window.isSecureContext")}} {{readOnlyInline}}
+
Indicates whether a context is capable of using features that require secure contexts.
+
{{domxref("Window.length")}} {{readOnlyInline}}
+
Returns the number of frames in the window. See also {{domxref("window.frames")}}.
+
{{domxref("Window.location")}}
+
Gets/sets the location, or current URL, of the window object.
+
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
+
Returns the locationbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
+
Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
+
Returns the menubar object, whose visibility can be toggled in the window.
+
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
+
Returns the message manager object for this window.
+
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}
+
The time in milliseconds since epoch at which the current animation cycle began.
+
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
+
Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.
+
{{domxref("Window.name")}}
+
Gets/sets the name of the window.
+
{{domxref("Window.navigator")}} {{readOnlyInline}}
+
Returns a reference to the navigator object.
+
{{domxref("Window.opener")}}
+
Returns a reference to the window that opened this current window.
+
{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}
+
Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.
+
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
+
Gets the height of the outside of the browser window.
+
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
+
Gets the width of the outside of the browser window.
+
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+
An alias for {{domxref("window.scrollX")}}.
+
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
+
An alias for {{domxref("window.scrollY")}}
+
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
+
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.parent")}} {{readOnlyInline}}
+
Returns a reference to the parent of the current window or subframe.
+
{{domxref("Window.performance")}} {{readOnlyInline}}
+
Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing performance-related data. See also Using Navigation Timing for additional information and examples.
+
{{domxref("Window.personalbar")}} {{readOnlyInline}}
+
Returns the personalbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
+
Formerly provided access to install and remove PKCS11 modules.
+
{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}
+
The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.
+
{{domxref("Window.screen")}} {{readOnlyInline}}
+
Returns a reference to the screen object associated with the window.
+ +
{{domxref("Window.screenX")}} {{readOnlyInline}}
+
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
+
{{domxref("Window.screenY")}} {{readOnlyInline}}
+
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
+
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
+
Returns the scrollbars object, whose visibility can be toggled in the window.
+
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
+
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
+
{{domxref("Window.scrollX")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled horizontally.
+
{{domxref("Window.scrollY")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled vertically.
+
{{domxref("Window.self")}} {{ReadOnlyInline}}
+
Returns an object reference to the window object itself.
+
{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}
+
Returns a storage object for storing data within a single page session.
+
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns a reference to the window object of the sidebar.
+
{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
+
Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using Web Speech API speech synthesis functionality.
+
{{domxref("Window.status")}}
+
Gets/sets the text in the statusbar at the bottom of the browser.
+
{{domxref("Window.statusbar")}} {{readOnlyInline}}
+
Returns the statusbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.toolbar")}} {{readOnlyInline}}
+
Returns the toolbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.top")}} {{readOnlyInline}}
+
Returns a reference to the topmost window in the window hierarchy. This property is read only.
+
{{domxref("Window.visualViewport")}} {{readOnlyInline}}
+
Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.
+
{{domxref("Window.window")}} {{ReadOnlyInline}}
+
Returns a reference to the current window.
+
window[0], window[1], etc.
+
Returns a reference to the window object in the frames. See {{domxref("Window.frames")}} for more details.
+
+ +

Properties implemented from elsewhere

+ +
+
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
+
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.
+
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
Returns a boolean indicating whether the current context is secure (true) or not (false).
+
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)
+
+ +

Methods

+ +

This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.

+ +
+
{{domxref("Window.alert()")}}
+
Displays an alert dialog.
+ +
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves back one in the window history.
+
{{domxref("Window.blur()")}}
+
Sets focus away from the window.
+
{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}
+
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.
+
{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
+
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.
+
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
+
Registers the window to capture all events of the specified type.
+
{{domxref("Window.clearImmediate()")}}
+
Cancels the repeated execution set using setImmediate.
+
{{domxref("Window.close()")}}
+
Closes the current window.
+
{{domxref("Window.confirm()")}}
+
Displays a dialog with a message that the user needs to respond to.
+
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.dispatchEvent()")}}
+
Used to trigger an event.
+
{{domxref("Window.dump()")}} {{Non-standard_inline}}
+
Writes a message to the console.
+
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.find()")}}
+
Searches for a given string in a window.
+
{{domxref("Window.focus()")}}
+
Sets focus on the current window.
+
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves the window one document forward in the history.
+
{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Flashes the application icon.
+
{{domxref("Window.getAttentionWithCycleCount()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.getComputedStyle()")}}
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
+
Gets default computed style for the specified element, ignoring author stylesheets.
+
{{domxref("Window.getSelection()")}}
+
Returns the selection object representing the selected item(s).
+
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Returns the browser to the home page.
+
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
+
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
+
{{domxref("Window.maximize()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.minimize()")}} (top-level XUL windows only)
+
Minimizes the window.
+
{{domxref("Window.moveBy()")}}
+
Moves the current window by a specified amount.
+
{{domxref("Window.moveTo()")}}
+
Moves the window to the specified coordinates.
+
{{domxref("Window.open()")}}
+
Opens a new window.
+
{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Opens a new dialog window.
+
{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}
+
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
+
{{domxref("Window.print()")}}
+
Opens the Print Dialog to print the current document.
+
{{domxref("Window.prompt()")}}
+
Returns the text entered by the user in a prompt dialog.
+
{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}
+
Releases the window from trapping events of a specific type.
+
{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
+
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.
+
{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}
+
Enables the scheduling of tasks during a browser's idle periods.
+
{{domxref("Window.resizeBy()")}}
+
Resizes the current window by a certain amount.
+
{{domxref("Window.resizeTo()")}}
+
Dynamically resizes window.
+
{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.scroll()")}}
+
Scrolls the window to a particular place in the document.
+
{{domxref("Window.scrollBy()")}}
+
Scrolls the document in the window by the given amount.
+
{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}
+
Scrolls the document by the given number of lines.
+
{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}
+
Scrolls the current document by the specified number of pages.
+
{{domxref("Window.scrollTo()")}}
+
Scrolls to a particular set of coordinates in the document.
+
{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)
+
Changes the cursor for the current window
+
{{domxref("Window.setImmediate()")}}
+
Executes a function after the browser has finished other heavy tasks
+
{{domxref("Window.setResizable()")}} {{Non-standard_inline}}
+
Toggles a user's ability to resize a window.
+
{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}
+
Sizes the window according to its content.
+
{{domxref("Window.stop()")}}
+
This method stops window loading.
+
{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}
+
Updates the state of commands of the current chrome window (UI).
+
+ +

Methods implemented from elsewhere

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Register an event handler to a specific event type on the window.
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Starts the process of fetching a resource from the network.
+
{{domxref("EventTarget.removeEventListener")}}
+
Removes an event listener from the window.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Schedules a function to execute every time a given number of milliseconds elapses.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Schedules a function to execute in a given amount of time.
+
+ +

Obsolete methods

+ +
+
{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}
+
Displays a modal dialog. This method was removed completely in Chrome 43, and Firefox 55.
+
+ +

Event handlers

+ +

These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.

+ +

This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.

+ +
+

Note: Starting in {{Gecko("9.0")}}, you can now use the syntax if ("onabort" in window) to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See DOM event handlers for details.

+
+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Called when the print dialog box is closed. See {{event("afterprint")}} event.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Called when the print dialog box is opened. See {{event("beforeprint")}} event.
+
{{domxref("Window.onbeforeinstallprompt")}}
+
An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
An event handler property for before-unload events on the window.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Called after the window loses focus, such as due to a popup.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
An event handler property for change events on the window.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Called after the ANY mouse button is pressed & released
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Called when a double click is made with ANY mouse button.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Called after the window is closed
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Called when the RIGHT mouse button is pressed
+
{{domxref("Window.ondevicelight")}}
+
An event handler property for any ambient light levels changes
+
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
+
Called if accelerometer detects a change (For mobile devices)
+
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
+
Called when the orientation is changed (For mobile devices)
+
{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only
+
An event handler property for any device orientation changes.
+
{{domxref("Window.ondeviceproximity")}}
+
An event handler property for device proximity event
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Called after the window receives or regains focus. See {{event("focus")}} events.
+
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
+
An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.
+
{{domxref("Window.onappinstalled")}}
+
Called when the page is installed as a webapp. See {{event('appinstalled')}} event.
+
{{domxref("Window.ongamepadconnected")}}
+
Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).
+
{{domxref("Window.ongamepaddisconnected")}}
+
Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).
+
{{domxref("Window.oninput")}}
+
Called when the value of an <input> element changes
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Called when you begin pressing ANY key. See {{event("keydown")}} event.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Called when you finish releasing ANY key. See {{event("keyup")}} event.
+
{{domxref("WindowEventHandlers.onlanguagechange")}}
+
An event handler property for {{event("languagechange")}} events on the window.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Called when ANY mouse button is pressed.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Called continously when the mouse is moved inside the window.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Called when the pointer leaves the window.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Called when the pointer enters the window
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Called when ANY mouse button is released
+
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
+
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Called when network connection is lost. See {{event("offline")}} event.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Called when network connection is established. See {{event("online")}} event.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.
+
{{domxref("Window.onpaint")}}
+
An event handler property for paint events on the window.
+
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
+
Called when a back putton is pressed.
+
{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}
+
An event handler for handled {{jsxref("Promise")}} rejection events.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Called when a form is reset
+
{{domxref("GlobalEventHandlers.onresize")}}
+
Called continuously as you are resizing the window.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked
+
{{domxref("GlobalEventHandlers.onwheel")}}
+
Called when the mouse wheel is rotated around any axis
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Called after text in an input field is selected
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Called when there is a change in session storage or local storage. See {{event("storage")}} event
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Called when a form is submitted
+
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
+
An event handler for unhandled {{jsxref("Promise")}} rejection events.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Called when the user navigates away from the page.
+
{{domxref("Window.onuserproximity")}}
+
An event handler property for user proximity events.
+
{{domxref("Window.onvrdisplayconnect")}}
+
Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).
+
{{domxref("Window.onvrdisplaydisconnect")}}
+
Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).
+
{{domxref("Window.onvrdisplayactivate")}}
+
Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
+
{{domxref("Window.onvrdisplaydeactivate")}}
+
Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
+
{{domxref("Window.onvrdisplayblur")}}
+
Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.
+
{{domxref("Window.onvrdisplayfocus")}}
+
Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).
+
{{domxref("Window.onvrdisplaypresentchange")}}
+
represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).
+
+ +

Constructors

+ +

See also the DOM Interfaces.

+ +
+
{{domxref("DOMParser")}}
+
DOMParser can parse XML or HTML source stored in a string into a DOM Document. DOMParser is specified in DOM Parsing and Serialization.
+
{{domxref("Window.GeckoActiveXObject")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Image")}}
+
Used for creating an {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Used for creating an {{domxref("HTMLOptionElement")}}
+
{{domxref("Window.QueryInterface")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XMLSerializer")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Worker")}}
+
Used for creating a Web worker
+
{{domxref("Window.XPCNativeWrapper")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XPCSafeJSObjectWrapper")}}
+
{{todo("NeedsContents")}}
+
+ +

Interfaces

+ +

See DOM Reference

+ +

See also

+ + diff --git a/files/ca/web/api/window/sidebar/index.html b/files/ca/web/api/window/sidebar/index.html new file mode 100644 index 0000000000..280b5dcce3 --- /dev/null +++ b/files/ca/web/api/window/sidebar/index.html @@ -0,0 +1,56 @@ +--- +title: Window.sidebar +slug: Web/API/Window/sidebar +tags: + - DOM + - NeedsTranslation + - Non-standard + - Property + - Reference + - TopicStub + - Window +translation_of: Web/API/Window/sidebar +--- +
{{APIRef}} {{Non-standard_header}}
+ +

Returns a sidebar object, which contains several methods for registering add-ons with the browser.

+ +

Notes

+ +

The sidebar object returned has the following methods:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription (SeaMonkey)Description (Firefox)
addPanel(title, contentURL, "")Adds a sidebar panel.Obsolete since Firefox 23 (only present in SeaMonkey).
+ End users can use the "load this bookmark in the sidebar" option instead. Also see Creating a Firefox sidebar.
addPersistentPanel(title, contentURL, "")Adds a sidebar panel, which is able to work in the background.
AddSearchProvider(descriptionURL)Installs a search provider (OpenSearch). Adding OpenSearch search engines contains more details. Added in Firefox 2.
addSearchEngine(engineURL, iconURL, suggestedTitle, suggestedCategory) {{Obsolete_inline(44)}}Installs a search engine (Sherlock). Adding Sherlock search engines contains more details.
IsSearchProviderInstalled(descriptionURL)Indicates if a specific search provider (OpenSearch) is installed.
+ +

Specification

+ +

Mozilla-specific. Not part of any standard.

diff --git a/files/ca/web/css/_colon_active/index.html b/files/ca/web/css/_colon_active/index.html new file mode 100644 index 0000000000..ee066e1a03 --- /dev/null +++ b/files/ca/web/css/_colon_active/index.html @@ -0,0 +1,166 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - CSS Pseudo-class + - Layout + - Reference + - Web +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :active representa un element (com un botó) que està sent activat per l'usuari. Quan s'usa un ratolí, l'"activació" normalment comença quan l'usuari pressiona el botó primari del ratolí i acaba quan es deixa anar. La pseudo-classe :active s'usa comunament en elements {{HTMLElement("a")}} i {{HTMLElement("button")}}, però també pot usar-se en altres elements.

+ +
/* Selects any <a> that is being activated */
+a:active {
+  color: red;
+}
+ +

Els estils definits per la pseudo-class :active seran anul·lats per qualsevol pseudo-class subsegüent relacionada amb l'enllaç ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":visited")}}) que tingui almenys la mateixa especificitat. Per donar un estil apropiat als enllaços, poseu la regla :active després de totes les altres regles relacionades amb els enllaços, tal com ho defineix l'ordre LVHA-order: :link — :visited — :hover — :active.

+ +
Nota: En sistemes amb ratolins de múltiples botons, CSS 3 especifica que la pseudo-class :active només s'ha d'aplicar al botó primari; en ratolins destres, normalment és el botó més a l'esquerra.
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +
+

HTML

+ +
<a href="#">This link will turn lime while you click on it.</a>
+
+ +

CSS

+ +
a:link { color: blue; }          /* Unvisited links */
+a:visited { color: purple; }     /* Visited links */
+a:hover { background: yellow; }  /* User hovers */
+a:active { color: lime; }        /* Active links */
+
+ +

Resultat

+ +
{{EmbedLiveSample('Example')}}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Sense canvis.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Sense canvis.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Sense canvis.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Definició inicial.
+ + + +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}4.05.01.0
Suport en elements no <a>1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}8.07.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}6.06.01.0
Suport en elements no <a>1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} [1]
+
+ +

[1] Per defecte, Safari Mobile no utilitza l'estat {{cssxref(":active")}} a menys que hi hagi un controlador d'esdeveniments touchstart en l'element rellevant o en el {{HTMLElement("body")}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_any-link/index.html b/files/ca/web/css/_colon_any-link/index.html new file mode 100644 index 0000000000..30d729e862 --- /dev/null +++ b/files/ca/web/css/_colon_any-link/index.html @@ -0,0 +1,78 @@ +--- +title: ':any-link' +slug: 'Web/CSS/:any-link' +tags: + - CSS + - Experimental + - Layout + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:any-link' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-classe CSS :any-link representa un element que actua com a àncora font d'un hiperenllaç, independentment de si s'ha visitat. En altres paraules, coincideix amb cada element {{HTMLElement("a")}}, {{HTMLElement("area")}} o {{HTMLElement("link")}} que té un atribut href. D'aquesta manera, es correspont amb tots els elements que coincideixen amb {{cssxref(":link")}} o {{cssxref(":visited")}}.

+ +
/*  Selecciona qualsevol element que coincideixi amb :link o :visited */
+:-any-link {
+  color: green;
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemple

+ +

HTML

+ +
<a href="https://example.com">External link</a><br>
+<a href="#">Internal target link</a><br>
+<a>Placeholder link (won't get styled)</a>
+ +

CSS

+ +
a:any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+/* WebKit browsers */
+a:-webkit-any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}{{Spec2('CSS4 Selectors')}}Definició inicial
+ + + + + +

{{Compat("css.selectors.any-link")}}

diff --git a/files/ca/web/css/_colon_any/index.html b/files/ca/web/css/_colon_any/index.html new file mode 100644 index 0000000000..fa4bcea79c --- /dev/null +++ b/files/ca/web/css/_colon_any/index.html @@ -0,0 +1,197 @@ +--- +title: ':any' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-class + - Reference +translation_of: 'Web/CSS/:is' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-classe :any() permet crear un selector que contingui múltiples opcions, algun dels quals seran aparellats. Aquesta és una alternativa més senzilla que repetir un selector sencer diverses vegades perquè un element dins d'ell varia.

+ +
/* Select any h2 inside a section, article, aside, or nav */
+/* Currently supported with -moz- and -webkit- prefixes */
+:-moz-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+
+:-webkit-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+
+ +
Nota : Aquesta pseudo-classe està en curs de ser estandarditzada en CSS Selectors Level 4 sota el nom :matches(). És probable que la sintaxi i el nom de :-vendor-any() seran canviats perquè es reflecteixi en un futur proper.
+ +

Sintaxi

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Valors

+ +
+
selector
+
Un selector. Això pot ser un selector simple o un selector múltiple compost de selectors simples CSS 3 i pot incloure el combinador descendent.
+
+ +
Nota: Els selectors no poden contenir pseudo-elements i l'únic combinador permès és el combinador descendent.
+ +

Exemples

+ +

Per exemple, el següent CSS:

+ +
/* 3 deep (or more) unordered lists use a square */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

Pot substituir-se per:

+ +
/* 3 deep (or more) unordered lists use a square */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

No obstant això, no utilitzeu el següent: (Veure la secció sobre el rendiment més endavant.)

+ +
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

Notes

+ +

Aquesta propietat és particularment útil quan es tracta de seccions i encapçalaments en HTML5. Des {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} es poden niar, sense :any() , l'estil d'aquests perquè coincideixin entre si pot ser difícil.

+ +

Per exemple, sense :any(), donar estil a tot els elements {{HTMLElement("h1")}} a diferents profunditats podria ser molt complicat:

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Level 3 */
+/* ... don't even think about it*/
+
+ +

Usant :-any(), és molt més fàcil:

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Level 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

Problemes amb el rendiment i l'especificitat

+ +

Bug 561154 registra un problema amb Gecko en el qual l'especificitat de: :-moz-any() és incorrecta. La implementació actual (com Firefox 12) posa: :-moz-any() en la categoria de regles universals, la qual cosa significa que usar-ho com el selector dret serà més lent que usar un ID, una classe o una etiqueta com el selector dret.

+ +

Per exemple:

+ +
.a > :-moz-any(.b, .c)
+
+ +

és més lent que:

+ +
.a > .b, .a > .c
+
+ +

i el següent és més ràpid:

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
diff --git a/files/ca/web/css/_colon_checked/index.html b/files/ca/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..1f0915eefc --- /dev/null +++ b/files/ca/web/css/_colon_checked/index.html @@ -0,0 +1,252 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:checked' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :checked representa qualsevol radio (<input type="radio">), checkbox (<input type="checkbox">) o option ({{HTMLElement("option")}} en un element {{HTMLElement("select")}})   que està marcat o commutat a un estat on (activat).

+ +
/* Matches any checked/selected radio, checkbox, or option */
+:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+
+ +

L'usuari pot activar aquest estat marcant/seleccionant un element o desactivar-ho desmarcant/deseleccionant l'element.

+ +
+

Nota: Com que els navegadors sovint tracten <option>s com a elements reemplaçats, el grau en què poden ser dissenyats amb la pseudo-class :checked varia d'un navegador a un altre.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Basic example

+ +

HTML

+ +
<div>
+  <input type="radio" name="my-input" id="yes">
+  <label for="yes">Yes</label>
+
+  <input type="radio" name="my-input" id="no">
+  <label for="yes">No</label>
+</div>
+
+<div>
+  <input type="checkbox" name="my-checkbox" id="opt-in">
+  <label for="opt-in">Check me!</label>
+</div>
+
+<select name="my-select" id="fruit">
+  <option value="opt1">Apples</option>
+  <option value="opt2">Grapes</option>
+  <option value="opt3">Pears</option>
+</select>
+
+ +

CSS

+ +
div,
+select {
+  margin: 8px;
+}
+
+/* Labels for checked inputs */
+input:checked + label {
+  color: red;
+}
+
+/* Radio element, when checked */
+input[type="radio"]:checked {
+  box-shadow: 0 0 0 3px orange;
+}
+
+/* Checkbox element, when checked */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
+}
+
+/* Option elements, when selected */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Basic_example")}}

+ +

Alternar elements amb una casella de selecció oculta

+ +

En aquest exemple s'utilitza la pseudo-class :checked per permetre a l'usuari que alterni el contingut en funció de l'estat d'una casella de selecció (checkbox), tot sense utilitzar JavaScript.

+ +

HTML

+ +
<input type="checkbox" id="expand-toggle" />
+
+<table>
+  <thead>
+    <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
+  </thead>
+  <tbody>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+  </tbody>
+</table>
+
+<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
+
+ +

CSS

+ +
/* Oculta la casella de selecció (checkbox) */
+#expand-toggle {
+  display: none;
+}
+
+/* Oculta el contingut expandible per defecte */
+.expandable {
+  visibility: collapse;
+  background: #ddd;
+}
+
+/* Estil del botó */
+#expand-btn {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 5px 11px;
+  background-color: #ff7;
+  border: 1px solid;
+  border-radius: 3px;
+}
+
+/* Mostra el contingut ocult quan es marca la casella de selecció */
+#expand-toggle:checked ~ * .expandable {
+  visibility: visible;
+}
+
+/* Estil del botó quan està marcada la casella de selecció */
+#expand-toggle:checked ~ #expand-btn {
+  background-color: #ccc;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}

+ +

Galeria d'imatges

+ +

Podeu utilitzar la pseudo-class :checked per construir una galeria d'imatges amb imatges de grandària completa que només es mostrin quan l'usuari faci clic a una miniatura. Vegeu aquesta demostració com un possible exemple.

+ +
Nota: Per a un efecte anàleg, però basat en la pseudo-classe :hover i sense caixes de ràdio (radioboxes) ocultes, vegeu aquesta demostració, presa de la pàgina de referència :hover.
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}{{ Spec2('HTML WHATWG') }}Sense canvis.
{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}{{ Spec2('HTML5 W3C') }}Defineix la semàntica respecte HTML.
{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}{{ Spec2('CSS4 Selectors') }}Sense canvis.
{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}{{ Spec2('CSS3 Basic UI') }}Enllaç a Selectors Level 3.
{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}{{ Spec2('CSS3 Selectors') }}Defineix la pseudo-classe, però no la semàntica associada
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop(1.0) }}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{ CompatGeckoMobile(1.0) }}9.09.53.1
+
+ +

 

diff --git a/files/ca/web/css/_colon_default/index.html b/files/ca/web/css/_colon_default/index.html new file mode 100644 index 0000000000..1cec2992e7 --- /dev/null +++ b/files/ca/web/css/_colon_default/index.html @@ -0,0 +1,145 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:default' +--- +
{{CSSRef}}
+ +

La pseudo-classe CSS :default representa qualsevol element de formulari que sigui el predeterminat entre un grup d'elements relacionats.

+ +

Aquest selector es pot utilitzar en els elements {{htmlelement("button")}}, <input type="checkbox">, <input type="radio"> i {{htmlelement("option")}}.

+ +
/* Selects any default <input> */
+input:default {
+  background-color: lime;
+}
+ +

Els elements agrupats que permeten seleccions múltiples també poden tenir múltiples valors predeterminats, és a dir, poden tenir diversos elements seleccionats inicialment. En aquest cas, tots els valors predeterminats es representen utilitzant la pseudo-classe :default. Per exemple, podeu aplicar un estil a les caselles de selecció predeterminades d'un grup de caselles de selecció.

+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemple

+ +

HTML

+ +
<input type="radio" name="season" id="spring">
+<label for="spring">Spring</label>
+
+<input type="radio" name="season" id="summer" checked>
+<label for="spring">Summer</label>
+
+<input type="radio" name="season" id="fall">
+<label for="spring">Fall</label>
+
+<input type="radio" name="season" id="winter">
+<label for="spring">Winter</label>
+
+ +

CSS

+ +
input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}Sense canvis.
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}Defineix la semàntica HTML associada i la validació de restriccions.
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}Sense canvis.
{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}{{Spec2('CSS3 Basic UI')}}Definició inicial, però sense la semàntica associada
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic10.0{{CompatGeckoDesktop("2.0")}}{{CompatNo}}10.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatNo}}10.05.0
+
diff --git a/files/ca/web/css/_colon_dir/index.html b/files/ca/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..75ce09caef --- /dev/null +++ b/files/ca/web/css/_colon_dir/index.html @@ -0,0 +1,105 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +tags: + - CSS + - CSS Pseudo-class + - Experimental + - Reference +translation_of: 'Web/CSS/:dir' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-class CSS  :dir() coincideix amb elements basats en la direccionalidad del text contingut en ells

+ +
/* Selecciona qualsevol element amb text de dreta a esquerra */
+:dir(rtl) {
+  background-color: red;
+}
+ +

La pseudo-class :dir() utilitza només el valor semàntic de la direccionalitat, és a dir, el definit en el mateix document. No té en compte la direccionalitat de l'estil, és a dir, la direccionalitat establerta per les propietats CSS com {{cssxref("direction")}}.

+ +
+

Nota: Tingueu en compte que el comportament de la pseudo-class :dir() no és equivalent als selectors d'atribut [dir=…]. Aquest últim coincideix amb l'atribut HTML {{htmlattrxref("dir")}}, i ignora els elements que no ho tenen, fins i tot si hereten una direcció del seu pare. (De la mateixa manera, [dir=rtl] i [dir=ltr] no coincideixen amb el valor auto.) En canvi, :dir() coincideix amb el valor calculat pel {{glossary("user agent")}}, fins i tot si s'hereta.

+
+ +
+

Nota: En HTML, la direcció està determinada per l'atribut {{htmlattrxref("dir")}}. Altres tipus de document poden tenir mètodes diferents.

+
+ +

Sintaxi

+ +

La pseudo-class :dir() requereix un paràmetre, que representa la direccionalitat de text que voleu orientar.

+ +

Parametres

+ +
+
ltr
+
Direcciona els elements d'esquerra a dreta.
+
rtl
+
Direcciona els elements de dreta a esquerra.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<div dir="rtl">
+  <span>test1</span>
+  <div dir="ltr">test2
+    <div dir="auto">עִבְרִית</div>
+  </div>
+</div>
+
+ +

CSS

+ +
:dir(ltr) {
+  background-color: yellow;
+}
+
+:dir(rtl) {
+  background-color: powderblue;
+}
+ +

Resultat

+ +

{{ EmbedLiveSample('Example') }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}{{Spec2('HTML WHATWG')}}Sense camvis.
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}Definició inicial
+ + + +

{{Compat("css.selectors.dir")}}

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_disabled/index.html b/files/ca/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..ded833befe --- /dev/null +++ b/files/ca/web/css/_colon_disabled/index.html @@ -0,0 +1,182 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:disabled' +--- +
{{CSSRef}}
+ +

La pseudo-class  CSS :disabled representa qualsevol element deshabilitat. Un element queda deshabilitat si no es pot activar (seleccionar, fer clic, teclejar, etc.) o acceptar l'enfocament. L'element també té un estat habilitat, en el qual es pot activar o acceptar l'enfocament.

+ +
/* Selecciona qualsevol <input> deshabilitat */
+input:disabled {
+  background: #ccc;
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

Aquest exemple mostra un formulari d'enviament bàsic. Utilitza l'esdeveniment JavaScript {{event("change")}} per permetre que l'usuari habiliti/deshabiliti els camps de facturació.

+ +

HTML

+ +
<form action="#">
+  <fieldset id="shipping">
+    <legend>Shipping address</legend>
+    <input type="text" placeholder="Name">
+    <input type="text" placeholder="Address">
+    <input type="text" placeholder="Zip Code">
+  </fieldset>
+  <br>
+  <fieldset id="billing">
+    <legend>Billing address</legend>
+    <label for="billing_is_shipping">Same as shipping address:</label>
+    <input type="checkbox" id="billing-checkbox" checked>
+    <br>
+    <input type="text" placeholder="Name" disabled>
+    <input type="text" placeholder="Address" disabled>
+    <input type="text" placeholder="Zip Code" disabled>
+  </fieldset>
+</form>
+
+ +

CSS

+ +
input[type="text"]:disabled {
+  background: #ccc;
+}
+
+ +

JavaScript

+ +
// Wait for the page to finish loading
+document.addEventListener('DOMContentLoaded', function () {
+  // Attach `change` event listener to checkbox
+  document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+  // Select the billing text fields
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+  // Toggle the billing text fields
+  for (var i = 0; i < billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 300, 250)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}Sense canvis
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}Defineix la semàntica d'HTML i els formularis.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}{{Spec2('CSS3 Basic UI')}}Enllaços a Selectors Nivell 3
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}Defineix la pseudo-class, però no la semàntica associada.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.09.53.1
+
+ +

[1] Internet Explorer no reconeix :disabled en l'element {{HTMLElement("fieldset")}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_empty/index.html b/files/ca/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..0c9743ad81 --- /dev/null +++ b/files/ca/web/css/_colon_empty/index.html @@ -0,0 +1,135 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:empty' +--- +
{{ CSSRef() }}
+ +

La pseudo-class CSS :empty representa qualsevol element que no tingui fills. Els fills poden ser nodes d'elements o text (inclosos els espais en blanc). Els comentaris o les instruccions de processament no afecten si un element es considera buit o no.

+ +
/* Selecciona qualsevol <div> que no contingui cap contingut */
+div:empty {
+  background: lime;
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

HTML

+ +
<div class="box"><!-- I will be lime. --></div>
+<div class="box">I will be pink.</div>
+<div class="box">
+    <!-- I will be pink because of the whitespace around this comment. -->
+</div>
+ +

CSS

+ + + +
.box {
+  background: pink;
+  height: 80px;
+  width: 80px;
+}
+
+.box:empty {
+  background: lime;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Examples', 300, 80)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS4 Selectors') }}Sense canvis
{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS3 Selectors') }}Definició inicial
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}9.09.53.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}9.510.03.1
+
diff --git a/files/ca/web/css/_colon_enabled/index.html b/files/ca/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..0b6d579968 --- /dev/null +++ b/files/ca/web/css/_colon_enabled/index.html @@ -0,0 +1,155 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :enabled representa qualsevol element habilitat. Un element està habilitat si es pot activar (seleccionar, fer clic en, teclejar, etc.) o acceptar l'enfocament. L'element també té un estat de deshabilitat, en el qual no es pot activar o acceptar l'enfocament.

+ +
/*  Selecciona qualsevol <input> habilitat */
+input:enabled {
+  color: blue;
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

El següent exemple fa que el color del text i botó {{htmlElement("input")}} sigui verd quan està habilitat, i gris quan està deshabilitat. Això ajuda a l'usuari a comprendre amb quins elements pot interactuar.

+ +
+

HTML

+ +
<form action="url_of_form">
+  <label for="FirstField">First field (enabled):</label>
+  <input type="text" id="FirstField" value="Lorem"><br>
+
+  <label for="SecondField">Second field (disabled):</label>
+  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
+
+  <input type="button" value="Submit">
+</form>
+ +

CSS

+ +
input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 550, 95)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}Cap canvi.
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Defineix la semàntica per a HTML i formularis.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}Cap canvi .
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}{{Spec2('CSS3 Basic UI')}}Enllaços a selectors Nivell 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Defineix la pseudo-class, però no la semàntica associada.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.09.53.1
+
+ +

Vegeu també

+ + +
diff --git a/files/ca/web/css/_colon_first-child/index.html b/files/ca/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..7a226ce95e --- /dev/null +++ b/files/ca/web/css/_colon_first-child/index.html @@ -0,0 +1,203 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :first-child representa el primer element entre un grup d'elements germans.

+ +
/* Selecciona qualsevol <p> que sigui el primer element entre els seus germans */
+p:first-child {
+  color: lime;
+}
+ +
+

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

+ +
<div>
+  <p>This text is selected!</p>
+  <p>This text isn't selected.</p>
+</div>
+
+<div>
+  <h2>This text isn't selected: it's not a `p`.</h2>
+  <p>This text isn't selected.</p>
+</div>
+
+ +

CSS

+ +
p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Basic_example', 500, 200)}}

+ +

Disseny d'una llista

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3
+    <ul>
+      <li>Item 3.1</li>
+      <li>Item 3.2</li>
+      <li>Item 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Styling_a_list')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}Cap canvi.
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic4.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}7[1]{{CompatOpera(9.5)}}4
No es requereix cap pare{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoDesktop("51")}}[2]{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}7[1]{{CompatOperaMobile(10)}}3.1
No es requereix cap pare{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatGeckoMobile("51")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer 7 no actualitza els estils quan s'afegeixen elements dinàmicament. A Internet Explorer 8, si un element s'insereix de forma dinàmica fent clic en un enllaç, l'estil del primer fill no s'aplica fins que l'enllaç no ha perdut el focus.

+ +

[2] Veure {{bug(1300374)}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_first-of-type/index.html b/files/ca/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..8b2551b725 --- /dev/null +++ b/files/ca/web/css/_colon_first-of-type/index.html @@ -0,0 +1,159 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :first-of-type representa el primer element d'aquest tipus entre un grup d'elements germans.

+ +
/* Selecciona qualsevol <p> que sigui el primer element d'aquest tipus entre els seus germans */
+p:first-of-type {
+  color: red;
+}
+ +
+

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Disseny del primer paràgraf

+ +

HTML

+ +
<h2>Heading</h2>
+<p>Paragraph 1</p>
+<p>Paragraph 2</p>
+ +

CSS

+ +
p:first-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Styling_the_first_paragraph')}}

+ +

Elements niats

+ +

Aquest exemple mostra com es poden orientar els elements niats. Tingueu en compte que el selector universal (*) està implicat quan no s'escriu cap selector senzill.

+ +

HTML

+ +
<article>
+  <div>This `div` is first!</div>
+  <div>This <span>nested `span` is first</span>!</div>
+  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
+  <div>This <span>nested `span` gets styled</span>!</div>
+  <b>This `b` qualifies!</b>
+  <div>This is the final `div`.</div>
+</article>
+
+ +

CSS

+ +
article :first-of-type {
+  background-color: pink;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Nested_elements', 500)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.010.03.2
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_first/index.html b/files/ca/web/css/_colon_first/index.html new file mode 100644 index 0000000000..f71aa1953b --- /dev/null +++ b/files/ca/web/css/_colon_first/index.html @@ -0,0 +1,147 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - '@page' + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :first , utilitzada amb la regla at (at-rule) {{cssxref("@page")}}, representa la primera pàgina d'un document imprès.

+ +
/* Selecciona la primera pàgina en imprimir. */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+ +
+

Nota: No poden canviar totes les propietats CSS amb aquesta pseudo-class. Només es poden canviar els marges, {{cssxref("orphans")}}, {{cssxref("widows")}}, i els salts de pàgina del document. A més, només es poden utilitzar unitats de longitud absoluta en definir els marges. Totes les altres propietats seran ignorades.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<p>First Page.</p>
+<p>Second Page.</p>
+<button>Print!</button>
+
+ +

CSS

+ +
@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+
+ +

JavaScript

+ +
document.querySelector("button").onclick = function(){ window.print() }
+
+ +

Resultat

+ +

Premeu el botó "Print!" per imprimir l'exemple. Les paraules en la primera pàgina han d'estar en algun lloc al voltant del centre, mentre que altres pàgines tindran els seus continguts en la posició per defecte.

+ +

{{ EmbedLiveSample('Example', '80%', '150px') }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}Cap canvi
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}8.09.2{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_focus-within/index.html b/files/ca/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..ae6393853d --- /dev/null +++ b/files/ca/web/css/_colon_focus-within/index.html @@ -0,0 +1,146 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:focus-within' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :focus-within representa un element que ha rebut focus o conté un element que ha rebut focus. En altres paraules, representa un element que està aparellat amb la pseudo-class {{cssxref(":focus")}} o té un descendent que està aparellat amb :focus. (Això inclou descendents en arbres d'ombres.)

+ +
/* Selecciona un <div> quan un dels seus descendents està enfocat */
+div:focus-within {
+  background: cyan;
+}
+ +

Aquest selector és útil, per fer un exemple comú, per a ressaltar un contenidor complet {{htmlElement("form")}} quan l'usuari se centra en un dels seus camps {{htmlElement("input")}}.

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

En aquest exemple, el formulari rebrà estils de color especials quan l'entrada de text rep el focus.

+ +

HTML

+ +
<p>Try typing into this form.</p>
+
+<form>
+  <label for="given_name">Given Name:</label>
+  <input id="given_name" type="text">
+  <br>
+  <label for="family_name">Family Name:</label>
+  <input id="family_name" type="text">
+</form>
+ +

CSS

+ +
form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 500, 150)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("60")}}{{CompatNo}}[1]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}{{CompatOpera("47")}}10.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatChrome("60")}}{{CompatChrome("60")}}{{CompatGeckoMobile("52.0")}}[2]{{CompatNo}}{{CompatOpera("47")}}10.3
+
+ +

[1] Aquesta característica encara no està implementada. Consulteu la sol·licitud de millora relacionada.

+ +

[2] Aquesta característica es va implementar al {{bug("1176997")}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_focus/index.html b/files/ca/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..eb3b9ec2b9 --- /dev/null +++ b/files/ca/web/css/_colon_focus/index.html @@ -0,0 +1,144 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :focus representa un element (com ara una entrada de formulari) que ha rebut el focus. Generalment, s'activa quan l'usuari fa clic o toca un element o el selecciona amb la tecla "tab" del teclat.

+ +
/* Selecciona qualsevol <input> quan s'enfoca */
+input:focus {
+  color: red;
+}
+ +
+

Nota: Aquesta pseudo-class s'aplica només a l'element enfocat. Utilitzeu {{cssxref(":focus-within")}} si voleu seleccionar un element que contingui un element enfocat.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<input class="red-input" value="I'll be red when focused."><br>
+<input class="blue-input" value="I'll be blue when focused.">
+ +

CSS

+ +
.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}{{Spec2('HTML WHATWG')}}Defineix la semàntica específica d'HTML.
{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}8.07.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}8.06.01.0
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_fullscreen/index.html b/files/ca/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..f1a7bad43f --- /dev/null +++ b/files/ca/web/css/_colon_fullscreen/index.html @@ -0,0 +1,241 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - Experimental + - Full-screen + - Pseudo-class + - Reference +translation_of: 'Web/CSS/:fullscreen' +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

La pseudo-class CSS :fullscreen representa un element que es mostra quan el navegador està en mode de pantalla completa (fullscreen mode).

+ +
/* Selecciona qualsevol <div> que es mostri en mode de pantalla completa */
+/* S'ha implementat a Firefox, WebKit / Chrome i Edge / IE amb prefixos; Edge també és compatible amb la versió no prefixada */
+div:-moz-full-screen {
+  background-color: pink;
+}
+
+div:-webkit-full-screen {
+  background-color: pink;
+}
+
+div:fullscreen {
+  background-color: pink;
+}
+ +
+

Note: L'especificació del W3C utilitza la paraula única :fullscreen,  - sense guió -, però ambdues implementacions experimentals de WebKit i Gecko utilitzen una variant prefixada amb dues paraules separades per un guió: :-webkit-full-screen i :-moz-full-screen, respectivament. Microsoft Edge i Internet Explorer utilitzen la convenció estàndard: :fullscreen i :-ms-fullscreen, respectivament.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<div id="fullscreen">
+  <h1>:fullscreen Demo</h1>
+  <p>This text will become big and red when the browser is in fullscreen mode.</p>
+  <button id="fullscreen-button">Enter Fullscreen</button>
+</div>
+
+ + + +

CSS

+ +
#fullscreen:fullscreen {
+  padding: 42px;
+  background-color: pink;
+  border:2px solid #f00;
+  font-size: 200%;
+}
+
+#fullscreen:fullscreen > h1 {
+  color: red;
+}
+
+#fullscreen:fullscreen > p {
+  color: darkred;
+}
+
+#fullscreen:fullscreen > button {
+  display: none;
+}
+
+ +

Resultats

+ +

{{ LiveSampleLink('Example', "Feu clic aquí per provar aquest exemple.") }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic15.0 {{property_prefix("-webkit")}}[1]12{{CompatGeckoDesktop("9.0")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("47.0")}}[2]		11 {{property_prefix("-ms")}}[3]{{CompatUnknown}}6.0 {{property_prefix("-webkit")}}[1]
Seleccionar tots els elements en la pila de la pantalla completa{{CompatUnknown}}12{{CompatGeckoDesktop(43)}}11{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}
+ {{CompatGeckoDesktop("47.0")}}[2]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
Seleccionar tots els elements en la pila de la pantalla completa{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Tant les versions prefixades de WebKit com Gecko tenen un guió entre full i screen, però la proposta de W3C utilitza una sola paraula: :fullscreen, :-webkit-full-screen, :-moz-full-screen.

+ +

[2] Gecko 47.0 {{geckoRelease("47.0")}} implementa la pseudo-classe sense prefix darrere de la preferència full-screen-api.unprefix.enabled, per defecte a false.

+ +

[3] Internet Explorer utilitza el prefix -ms però no té un guió entre full i screen: :-ms-fullscreen.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_hover/index.html b/files/ca/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..7d6cf260d5 --- /dev/null +++ b/files/ca/web/css/_colon_hover/index.html @@ -0,0 +1,178 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:hover' +--- +
{{ CSSRef }}
+ +

La pseudo-class CSS :hover coincideix quan l'usuari interactua amb un element amb un dispositiu apuntador, però no necessàriament ho activa. Generalment s'activa quan l'usuari es desplaça sobre un element amb el cursor (punter de ratolí).

+ +
/* Selecciona qualsevol element <a> quan "es deplaça" */
+a:hover {
+  color: orange;
+}
+ +

Els estils definits per la pseudo-class :active seran anul·lats per qualsevol pseudo-class subsegüent relacionada amb l'enllaç ({{ cssxref(":link") }}, {{ cssxref(":visited") }} o {{ cssxref(":active") }}) que tinguin almenys la mateixa especificitat. Per donar estil els enllaços adequadament, poseu la regla :hover després de les regles :link i :visited però abans d'una regla :active segons el definit per l'ordre LVHA: :link — :visited — :hover — :active.

+ +
Nota: La pseudo-class :hover és problemàtica en les pantalles tàctils. Depenent del navegador, la pseudo-class :hover pot ser que mai coincideixi, només coincidir per un moment després de tocar un element o bé continuarà coincidint fins i tot després que l'usuari hagi deixat de tocar i fins que l'usuari toqui un altre element. Els desenvolupadors web han d'assegurar-se que el contingut sigui accessible en dispositius amb capacitats de desplaçaments limitats o inexistents.
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

+ +
<a href="#">Try hovering over this link.</a>
+ +

CSS

+ +
a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Basic_example")}}

+ +

Galeria d'imatges

+ +

Podeu utilitzar la pseudo-class :hover per construir una galeria d'imatges amb imatges en grandària real que es mostrin només quan el ratolí es mogui sobre una miniatura. Vegeu aquesta demostració per a un possible exemple.

+ +
Nota: Per a un efecte anàleg, però basat en la pseudo-class :checked (aplicada a les caixes de ràdio (radioboxes) ocultes), vegeu aquesta demostració , presa de la pàgina de referència :checked.
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}{{ Spec2('CSS4 Selectors') }}Es permet a :hover ser aplicat a qualsevol pseudo-element.
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}{{ Spec2('CSS3 Selectors') }}Cap canvi significatiu .
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
per elements <a>0.2{{CompatVersionUnknown}}{{ CompatGeckoDesktop(1.0) }}4.04.02.0.4 (419)
+ various bugs before
per a tots els elements0.2{{CompatVersionUnknown}}{{ CompatGeckoDesktop(1.0) }}7.0[1][2]7.02.0.4 (419)
+ various bugs before
per pseudo-element{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(28) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}[3]
+
+ +

[1] En IE8-11, en passar per sobre d'un element i després desplaçar-se cap amunt/cap baix sense moure el punter, deixarà l'element en estat :hover fins que es mogui el punter. Veure IE bug 926665.

+ +

[2] En IE9 (i possiblement abans), si un {{HTMLElement("table")}} té un pare amb un no-auto {{cssxref("width")}} i {{cssxref("overflow-x")}}: auto;, i {{HTMLElement("table")}} té prou contingut per desbordar horitzontalment el seu pare i si hi ha estils {{cssxref(":hover")}} establerts en elements de la taula i, a continuació, passen per sobre d'aquests elements faran que augmenti l'alçada de {{HTMLElement("table")}}. Aquí hi ha una demostració en viu que activa l'error. Una solució provisional per a l'errada és establir min-height: 0%; en l'element pare de la taula (i la unitat % ha de ser especificada; 0 i 0px no funcionen). Hi va haver un error creat com jQuery ticket #10854, però s'ha tancat perquè no es considera un error de jQuery.

+ +

[3] A partir de Safari Mobile per a iOS 7.1.2, en tocar un element que es pot fer clic  fa que l'element entri en l'estat :hover. L'element romandrà a l'estat :hover fins que un element diferent hagi entrat en l'estat :hover.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_in-range/index.html b/files/ca/web/css/_colon_in-range/index.html new file mode 100644 index 0000000000..a8fd5171be --- /dev/null +++ b/files/ca/web/css/_colon_in-range/index.html @@ -0,0 +1,110 @@ +--- +title: ':in-range' +slug: 'Web/CSS/:in-range' +tags: + - CSS + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:in-range' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :in-range representa un element {{htmlelement("input")}} en què el seu valor actual està dins dels límits de rang especificats pels atributs {{htmlattrxref("min", "input")}} i {{htmlattrxref("max","input")}}.

+ +
/* Selecciona qualsevol <input>, però només quan té un rang especificat, i el seu valor està dins d'aquest rang */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+ +

Aquesta pseudo-class és útil per donar a l'usuari una indicació visual que el valor actual, d'un camp, està dins dels límits permesos.

+ +
Nota Aquesta pseudo-class només s'aplica als elements que tenen (i poden tenir) una limitació de rang. Mancant tal limitació, l'element no pot estar "en rang" ni "fora de rang".
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +
+

HTML

+ +
<form action="" id="form1">
+  <ul>Values between 1 and 10 are valid.
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+      <label for="value1">Your value is </label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'okay.';
+}
+
+input:out-of-range + label::after {
+  content: 'out of range!';
+}
+ +

Resultat

+
+ +
{{EmbedLiveSample('Example', 600, 140)}}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}Defineix quan :in-range coincideix en elements HTML.
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}Definició inicial.
+ + + +
{{Compat("css.selectors.in-range")}}
+ +

 

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_indeterminate/index.html b/files/ca/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..c9fb4578e5 --- /dev/null +++ b/files/ca/web/css/_colon_indeterminate/index.html @@ -0,0 +1,132 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:indeterminate' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :indeterminate representa qualsevol element de formulari, l'estat del qual, sigui indeterminat.

+ +
/* Selecciona qualsevol <input> l'estat del qual sigui indeterminat */
+input:indeterminate {
+  background: lime;
+}
+ +

Els elements als quals apunta aquest selector són:

+ + + +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Checkbox & radio button

+ +

Aquest exemple aplica estils especials a les etiquetes associades a camps de formulari indeterminats.

+ +

HTML

+ +
<div>
+  <input type="checkbox" id="checkbox">
+  <label for="checkbox">This label starts out lime.</label>
+</div>
+<div>
+  <input type="radio" id="radio">
+  <label for="radio">This label starts out lime.</label>
+</div>
+ +

CSS

+ +
input:indeterminate + label {
+  background: lime;
+}
+
+ +

JavaScript

+ +
var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i < inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+
+ +

{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}

+ +

Progress bar

+ +

HTML

+ +
<progress>
+
+ +

CSS

+ +
progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Progress_bar', 'auto', 30)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}Sense canvis
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}Defineix la semàntica d'HTML i la validició de restriccions
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}{{Spec2('CSS3 Basic UI')}}Defineix la pseudo-class, però no la semàntica associada.
+ + + +
+ + +

{{Compat("css.selectors.indeterminate")}}

+
diff --git a/files/ca/web/css/_colon_invalid/index.html b/files/ca/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..8e8b1ee626 --- /dev/null +++ b/files/ca/web/css/_colon_invalid/index.html @@ -0,0 +1,141 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:invalid' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :invalid representa qualsevol element {{HTMLElement("input")}} o un altre {{HTMLElement("form")}} en que el seu contingut no es valida.

+ +
/*  Selecciona qualsevol <input> invàlit */
+input:invalid {
+  background-color: pink;
+}
+ +

Aquesta pseudo-class és útil per ressaltar errors de camp per a l'usuari.

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

Aquest exemple presenta una forma senzilla que acoloreix elements en verd quan es validen i vermells quan no ho fan.

+ +

HTML

+ +
<form>
+  <label for="url_input">Enter a URL:</label>
+  <input type="url" id="url_input" />
+  <br />
+  <br />
+  <label for="email_input">Enter an email address:</label>
+  <input type="email" id="email_input" required/>
+</form>
+ +

CSS

+ +
input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #C00000;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 600, 120)}}

+ +

Notes

+ +

Botons de ràdio

+ +

Si un botó de ràdio qualsevol en un grup és required, la pseudo-class :invalid s'aplica a tots ells si no se selecciona cap dels botons del grup. (Els botons de ràdio agrupats comparteixen el mateix valor per al seu atribut name).

+ +

Gecko per defecte

+ +

Per defecte, Gecko no aplica un estil a la pseudo-class :invalid. Tanmateix, aplica un estil (un "resplendor" vermell usant la propietat {{Cssxref("box-shadow")}}) a la pseudo-class {{cssxref(":-moz-ui-invalid")}} que s'aplica en un subconjunt de casos per :invalid.

+ +

Podeu desactivar la brillantor usant el següent CSS, o anul·lar-ho completament per alterar l'aparença dels camps no vàlids:

+ +
:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}{{Spec2('HTML WHATWG')}}Cap canvi.
{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}{{Spec2('HTML5 W3C')}}Defineix la semàntica d'HTML i la validació de restriccions.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}{{Spec2('CSS4 Selectors')}}Definició inicial.
+ + + +
+ + +

{{Compat("css.selectors.invalid")}}

+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_lang/index.html b/files/ca/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..b30ec5855f --- /dev/null +++ b/files/ca/web/css/_colon_lang/index.html @@ -0,0 +1,149 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :lang() coincideix amb elements basats en l'idioma en què estan definits.

+ +
/* Selecciona qualsevol <p> en Anglès (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

Nota: En HTML, el llenguatge està determinat per una combinació de l'atribut {{htmlattrxref ("lang")}}, l'element {{HTMLElement ("meta")}}, i possiblement per informació del protocol (com ara encapçalaments HTTP. Per a altres tipus de documents, hi pot haver altres mètodes de document per determinar el llenguatge

+
+ +

Sintaxi

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Paràmetre

+ +
+
<language-code>
+
Un {{cssxref("<string>")}} representant l'idioma en el qual us voleu dirigir. Els valors acceptables s'especifiquen en l'especificació HTML.
+
+ +

Exemple

+ +

En aquest exemple, la pseudo-classe :lang() s'utilitza per a que coincideixi amb els pares dels elements de la cita ({{htmlElement("q")}}) usant combinadors fills. Tingueu en compte que això no il·lustra l'única manera de fer-ho, i que el millor mètode a utilitzar depèn del tipus de document. També tingueu en compte que els valors {{glossary("Unicode")}} s'utilitzen per especificar alguns dels caràcters especials de la cita.

+ +

HTML

+ +
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+
+ +

CSS

+ +
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
+<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
+<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 350)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Cap canvi.
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}Cap canvi significatiu.
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}8.08.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}8.08.03.1
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_last-child/index.html b/files/ca/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..9d449b660b --- /dev/null +++ b/files/ca/web/css/_colon_last-child/index.html @@ -0,0 +1,197 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:last-child' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :last-child representa l'últim element entre un grup d'elements germans.

+ +
/* Selecciona qualsevol <p> que sigui l'últim element entre els seus germans */
+p:last-child {
+  color: lime;
+}
+ +
+

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels selectors de nivell 4, això ja no és necessari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

Exemple bàsic

+ +

HTML

+ +
<div>
+  <p>This text isn't selected.</p>
+  <p>This text is selected!</p>
+</div>
+
+<div>
+  <p>This text isn't selected.</p>
+  <h2>This text isn't selected: it's not a `p`.</h2>
+</div>
+
+ +

CSS

+ +
p:last-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Basic_example', 500, 200)}}

+ +

Disseny d'una llista

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3
+    <ul>
+      <li>Item 3.1</li>
+      <li>Item 3.2</li>
+      <li>Item 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:last-child {
+  border: 1px solid red;
+  color: red;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Styling_a_list')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.0{{CompatOpera(9.5)}}3.2
No es requereix pare{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoDesktop("51")}}[1]{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.0{{CompatOperaMobile(10)}}3.2
No es requereix pare{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoMobile("51")}}[1]{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

 

+ +

[1] Veure {{bug(1300374)}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_last-of-type/index.html b/files/ca/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..b5f1844d2e --- /dev/null +++ b/files/ca/web/css/_colon_last-of-type/index.html @@ -0,0 +1,158 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:last-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :last-of-type representa l'últim element del seu tipus entre un grup d'elements germa.

+ +
/* Selecciona qualsevol <p> que sigui l'últim element del seu tipus entre els seus germans */
+p:last-of-type {
+  color: lime;
+}
+ +
+

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels selectors de nivell 4, això ja no és necessari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemple

+ +

Disseny de l'últim paràgraf

+ +

HTML

+ +
<h2>Heading</h2>
+<p>Paragraph 1</p>
+<p>Paragraph 2</p>
+ +

CSS

+ +
p:last-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Styling_the_last_paragraph')}}

+ +

Elements niats

+ +

Aquest exemple mostra com es poden dirigir els elements niats. Tingueu en compte que el selector universal selector universal (*) està implícit quan no s'escriu un selector simple .

+ +

HTML

+ +
<article>
+  <div>This `div` is first.</div>
+  <div>This <span>nested `span` is last</span>!</div>
+  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
+  <b>This `b` qualifies!</b>
+  <div>This is the final `div`!</div>
+</article>
+
+ +

CSS

+ +
article :last-of-type {
+  background-color: pink;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Nested_elements', 500)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS3 Selectors')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.010.03.2
+
+ +

Veure també

+ + diff --git a/files/ca/web/css/_colon_left/index.html b/files/ca/web/css/_colon_left/index.html new file mode 100644 index 0000000000..73fb3d65c5 --- /dev/null +++ b/files/ca/web/css/_colon_left/index.html @@ -0,0 +1,122 @@ +--- +title: ':left' +slug: 'Web/CSS/:left' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:left' +--- +
{{ CSSRef() }}
+ +

La pseudo-class CSS :left, usada amb la regla at {{cssxref("@page")}} , representa totes les pàgines de l'esquerra d'un document imprès.

+ +
/* Selects any left-hand pages when printing */
+@page :left {
+  margin: 2in 3in;
+}
+ +

Si una pàgina donada és "esquerra" o "dreta" ve determinada per la direcció principal d'escriptura del document. Per exemple, si la primera pàgina té una direcció d'escriptura principal d'esquerra a dreta llavors serà una pàgina {{Cssxref(":right")}}; si té una direcció d'escriptura principal de dreta a esquerra llavors serà una pàgina :left.

+ +
+

Nota: No podeu canviar totes les propietats CSS amb aquesta pseudo-class. Només podeu canviar les propietats {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }} i {{ Cssxref("background") }} del quadre de pàgina. S'ignoraran totes les altres propietats i només es veurà afectat el quadre de pàgina, no el contingut del document de la pàgina.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +
@page :left {
+  margin: 2in 3in;
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }}{{ Spec2('CSS3 Paged Media') }}Sense canvis.
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}8.09.2{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_link/index.html b/files/ca/web/css/_colon_link/index.html new file mode 100644 index 0000000000..af971fb36b --- /dev/null +++ b/files/ca/web/css/_colon_link/index.html @@ -0,0 +1,150 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:link' +--- +
{{ CSSRef }}
+ +

La pseudo-class CSS :link representa un element que encara no ha estat visitat. S'adapta a tots els no visitats {{HTMLElement("a")}}, {{HTMLElement("area")}} o {{HTMLElement("link")}} element que té un atribut href.

+ +
/* Selecciona qualsevol <a> que encara no s'hagi visitat */
+a:link {
+  color: red;
+}
+ +

Els estils definits per la pseudo-class :link seran anul·lats per qualsevol pseudo-class relacionada amb un enllaç posterior ({{cssxref(":active")}}, {{cssxref(":hover")}} o {{cssxref(":visited")}}) que tingui almenys la mateixa especificitat. Per donar un estil apropiat als enllaços, poseu la regla :link davant de totes les altres regles relacionades amb els enllaços, segons el definit per l'ordre LVHA: :link — :visited — :hover — :active.

+ +
+

Nota: Utilitzeu {{cssxref (":any-link")}} per seleccionar un element independentment de si s'ha visitat o no.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Per defecte, la majoria dels navegadors apliquen un valor {{cssxref("color")}} especial als enllaços visitats. Per tant, els enllaços que vnguin a continuació probablement tinguin colors de fonts especials només abans de visitar-los. (Després d'això, haureu d'esborrar l'historial del navegador per tornar-los a veure). Tanmateix, és probable que els valors de {{cssxref("background-color")}} quedin, ja que la majoria dels navegadors no estableixen aquesta propietat als enllaços visitats de forma predeterminada.

+ +

HTML

+ +
<a href="#ordinary-target">This is an ordinary link.</a><br>
+<a href="">You've already visited this link.</a><br>
+<a>Placeholder link (won't get styled)</a>
+
+ +

CSS

+ +
a:link {
+  background-color: gold;
+  color: green;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Examples")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}Sense canvis.
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}Sense canvis.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}Aixecar la restricció només per aplicar-lo a l'element {{HTMLElement ("a")}}.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.5{{CompatVersionUnknown}}{{ CompatGeckoMobile("1.9.2") }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_not/index.html b/files/ca/web/css/_colon_not/index.html new file mode 100644 index 0000000000..2c0171e00b --- /dev/null +++ b/files/ca/web/css/_colon_not/index.html @@ -0,0 +1,176 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:not' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :not() representa elements que no coincideixen amb una llista de selectors. Atès que impedeix que es seleccionin elements específics, es coneix com a pseudo-class de negació.

+ +
/* Selecciona qualsevol element que NO sigui un paràgraf */
+:not(p) {
+  color: blue;
+}
+ +
+

Notes:

+ + +
+ +

Sintaxi

+ +

La pseudo-class :not() requereix una llista separada per comes d'un o més selectors com a argument. La llista no ha de contenir un altre selector de negació o un pseudo-element.

+ +
+

La capacitat d'enumerar més d'un selector és experimental i encara no està àmpliament suportada.

+
+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<p>I am a paragraph.</p>
+<p class="fancy">I am so very fancy!</p>
+<div>I am NOT a paragraph.</div>
+
+ +

CSS

+ +
.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* <p> elements that are not in the class `.fancy` */
+p:not(.fancy) {
+  color: green;
+}
+
+/* Elements that are not <p> elements */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* Elements that are not <div> or <span> elements */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* Elements that are not `.crazy` or `.fancy` */
+/* Note that this syntax is not well supported yet. */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Selectors', '#negation', ':not()') }}{{ Spec2('CSS4 Selectors') }}Estén el seu argument per permetre a alguns selectors no simples.
{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}{{ Spec2('CSS3 Selectors') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.09.53.2
Arguments estesos{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}9.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.010.03.2
Arguments estesos{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}9.0
+
diff --git a/files/ca/web/css/_colon_nth-child/index.html b/files/ca/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..fee9b30c51 --- /dev/null +++ b/files/ca/web/css/_colon_nth-child/index.html @@ -0,0 +1,276 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :nth-child() CSS coincideix amb un o més elements basats en la seva posició entre un grup de germans.

+ +
/* Selecciona cada quart element entre qualsevol grup de germans */
+:nth-child(4n) {
+  color: lime;
+}
+
+ +

Sintaxi

+ +

La pseudo-class nth-child s'especifica amb un únic argument, que representa el patró per als elements coincidents.

+ +

Valors de paraules clau

+ +
+
odd
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans és imparell: 1, 3, 5, etc.
+
even
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans és parell: 2, 4, 6, etc.
+
+ +

Notació funcional

+ +
+
<An+B>
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans coincideix amb el patró An+B, per a cada enter positiu o valor zero de n. L'índex del primer element és 1. Els valors A i B han de ser {{cssxref("<integer>")}}s.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Exemple de selectors

+ +
+
tr:nth-child(odd) or tr:nth-child(2n+1)
+
Representa les files imparells d'una taula HTML: 1, 3, 5, etc.
+
tr:nth-child(even) or tr:nth-child(2n)
+
Representa les files parells d'una taula HTML: 2, 4, 6, etc.
+
:nth-child(5n)
+
Representa elements 5, 10, 15, etc.
+
:nth-child(3n+4)
+
Representa elements 4, 7, 10, 13, etc.
+
:nth-child(-n+3)
+
Representa els tres primers elements entre un grup de germans.
+
p:nth-child(n)
+
Representa cada element <p> entre un grup de germans. Això és el mateix que un simple selector p .
+
p:nth-child(1) or p:nth-child(0n+1)
+
Representa cada <p> aquest és el primer element entre un grup de germans. Això és el mateix que el selector {{cssxref(":first-child")}}.
+
+ +

Exemple detallat

+ +

HTML

+ +
<h3><code>span:nth-child(2n+1)</code>, WITHOUT an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 3, 5, and 7 are selected.</p>
+<div class="first">
+  <span>Span 1!</span>
+  <span>Span 2</span>
+  <span>Span 3!</span>
+  <span>Span 4</span>
+  <span>Span 5!</span>
+  <span>Span 6</span>
+  <span>Span 7!</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-child(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 5, and 7 are selected.<br>
+   3 is used in the counting because it is a child, but it isn't
+   selected because it isn't a <code>&lt;span&gt;</code>.</p>
+<div class="second">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-of-type(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 4, 6, and 8 are selected.<br>
+   3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,
+   not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
+   children of that type. The <code>&lt;em&gt;</code> is completely skipped
+   over and ignored.</p>
+<div class="third">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+</div>
+
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Detailed_example', 550, 550)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}Afegeix la sintaxi del <selector> i especifica que els elements coincidents no són necessaris per tenir un pare.
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.0{{CompatOpera(9.5)}}[1]3.1
sintaxi del <selector>{{CompatNo}}{{CompatUnknown}}{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
No es requereix cap pare{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoDesktop("51")}}[3]{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}[2]9.0{{CompatOperaMobile(9.5)}}[1]3.1
sintaxi del <selector>{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
No es requereix cap pare{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoMobile("51")}}[3]{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

[1] Opera no pot gestionar la inserció dinàmica dels elements

+ +

[2] Gecko encara no implementa aquesta funció. Vegeu {{bug(854148)}}.

+ +

[3] Vegeu {{bug(1300374)}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_nth-last-child/index.html b/files/ca/web/css/_colon_nth-last-child/index.html new file mode 100644 index 0000000000..44fed32a4d --- /dev/null +++ b/files/ca/web/css/_colon_nth-last-child/index.html @@ -0,0 +1,217 @@ +--- +title: ':nth-last-child' +slug: 'Web/CSS/:nth-last-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-last-child' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :nth-last-child() coincideix amb un o més elements en funció de la seva posició entre un grup de germans, comptant des del final.

+ +
/* Selecciona cada quart element entre qualsevol grup de germans, comptant enrere des de l'últim */
+:nth-last-child(4n) {
+  color: lime;
+}
+ +
+

Nota: Aquesta pseudo-class és bàsicament la mateixa que {{Cssxref(":nth-child")}}, excepte que compta els elements a l'inrevés des del final i no des del començament.

+
+ +

Sintaxi

+ +

The nth-last-child pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.

+ +

Valors de paraules clau

+ +
+
odd
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans és imparell: 1, 3, 5, etc., comptant des del final.
+
even
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans és parell: 2, 4, 6, etc., comptant des del final.
+
+ +

Notació funcional

+ +
+
<An+B>
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans coincideix amb el patró An+B, per a cada enter positiu o valor zero de n. L'índex del primer element, comptant des del final, és 1. Els valors A i B han de ser dos {{cssxref("<integer>")}}s.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Exemple de selectors

+ +
+
tr:nth-last-child(odd) or tr:nth-last-child(2n+1)
+
Representa les files imparells d'una taula HTML: 1, 3, 5, etc., comptant des del final.
+
tr:nth-last-child(even) or tr:nth-last-child(2n)
+
Representa les files parells d'una taula HTML: 2, 4, 6, etc., comptant des del final.
+
:nth-last-child(5n)
+
Representa els elements 5, 10, 15, etc., comptant des del final.
+
:nth-last-child(3n+4)
+
Representa els elements 4, 7, 10, 13, etc., comptant des del final.
+
:nth-last-child(-n+3)
+
Representa els tres últims elements entre un grup de germans.
+
p:nth-last-child(n)
+
Representa cada element <p> entre un grup de germans. Això és el mateix que un simple selector p.
+
p:nth-last-child(1) or p:nth-last-child(0n+1)
+
Representa cada <p> que és el primer element d'un grup de germans comptant des del final. Això és el mateix que el selector {{cssxref(":last-child")}}.
+
+ +

Exemple de taula

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <td>First line</td>
+    </tr>
+    <tr>
+      <td>Second line</td>
+    </tr>
+    <tr>
+      <td>Third line</td>
+    </tr>
+    <tr>
+      <td>Fourth line</td>
+    </tr>
+    <tr>
+      <td>Fifth line</td>
+    </tr>
+  </tbody>
+</table>
+
+ +

CSS

+ +
table {
+  border: 1px solid blue;
+}
+
+/* Selects the last three elements */
+tr:nth-last-child(-n+3) {
+  background-color: pink;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Table_example', 300, 150)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.0{{CompatOpera(9.5)}}3.2
No es requereix cap pare{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoDesktop("51")}}[1]{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.0{{CompatOperaMobile(10)}}3.2
No es requereix cap pare{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoMobile("51")}}[1]{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

[1] Veure {{bug(1300374)}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_nth-last-of-type/index.html b/files/ca/web/css/_colon_nth-last-of-type/index.html new file mode 100644 index 0000000000..64fbeee193 --- /dev/null +++ b/files/ca/web/css/_colon_nth-last-of-type/index.html @@ -0,0 +1,141 @@ +--- +title: ':nth-last-of-type' +slug: 'Web/CSS/:nth-last-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-last-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :nth-last-of-type() coincideix amb un o més elements d'un tipus determinat, en funció de la seva posició entre un grup de germans, comptant des del final.

+ +
/* Selecciona cada quart element <p> entre qualsevol grup de germans, comptant enrere des de l'últim */
+p:nth-last-of-type(4n) {
+  color: lime;
+}
+ +
+

Nota: Aquesta pseudo-class és bàsicament la mateixa que {{Cssxref(":nth-of-type")}}, excepte que compta els elements a l'inrevés des del final i no cap a endavant des del principi.

+
+ +

Sintaxi

+ +

La pseudo-class nth-last-of-type s'especifica amb un sol argument, representa el patró per als elements coincidents, comptant des del final.

+ +

Vegeu {{Cssxref(":nth-last-child")}} per obtenir una explicació més detallada de la seva sintaxi.

+ +

Sintaxi formal

+ +
{{csssyntax}}
+
+ +

Exemple

+ +

HTML

+ +
<div>
+  <span>This is a span.</span>
+  <span>This is another span.</span>
+  <em>This is emphasized.</em>
+  <span>Wow, this span gets limed!!!</span>
+  <strike>This is struck through.</strike>
+  <span>Here is one last span.</span>
+</div>
+ +

CSS

+ +
span:nth-last-of-type(2) {
+  background-color: lime;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic4.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.010.03.2
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_nth-of-type/index.html b/files/ca/web/css/_colon_nth-of-type/index.html new file mode 100644 index 0000000000..c309e14b41 --- /dev/null +++ b/files/ca/web/css/_colon_nth-of-type/index.html @@ -0,0 +1,150 @@ +--- +title: ':nth-of-type' +slug: 'Web/CSS/:nth-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :nth-of-type() coincideix amb un o més elements d'un tipus determinat, en funció de la seva posició entre un grup de germans.

+ +
+

There is no `:nth-of-type(0)`!

+ +

+
+ +
/* Selecciona cada quart element <p> entre qualsevol grup de germans */
+p:nth-of-type(4n) {
+  color: lime;
+}
+ +

Sintaxi

+ +

La pseudo-class nth-of-type s'especifica amb un sol argument, que representa el patró per als elements coincidents.

+ +

Veure {{Cssxref(":nth-child")}} per obtenir una explicació més detallada de la seva sintaxi.

+ +

Sintaxi formal

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

+ +
<div>
+  <div>This element isn't counted.</div>
+  <p>First paragraph. (left aligned)</p>
+  <p>Second paragraph. (right aligned)</p>
+  <div>This element isn't counted.</div>
+  <p>Third paragraph. (left aligned)</p>
+</div>
+ +

CSS

+ +
/* Align odd paragraphs to the left */
+p:nth-of-type(2n+1) {
+  text-align: left;
+}
+
+/* Align even paragraphs to the right */
+p:nth-of-type(2n) {
+  text-align: right;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Basic_example', 250, 200)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.09.53.1
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_only-child/index.html b/files/ca/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..ed94d4791a --- /dev/null +++ b/files/ca/web/css/_colon_only-child/index.html @@ -0,0 +1,199 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :only-child representa un element sense germans. És el mateix que :first-child:last-child o :nth-child(1):nth-last-child(1), però amb una menor especificitat.

+ +
/* Selecciona cada <p>, però només si és l'únic fill del seu pare */
+p:only-child {
+  background-color: lime;
+}
+ +
+

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

+ +
<main>
+  <div>
+    <i>I am a lonely only child.</i>
+  </div>
+
+  <div>
+    <i>I have siblings.</i><br>
+    <b>So do I!</b><br>
+    <span>I also have siblings, <span>but this is an only child.</span></span>
+  </div>
+</main>
+ +

CSS

+ +
main :only-child {
+  color: red;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Basic_example','100%',180)}}

+ +

Un exemple de llista

+ +

HTML

+ +
<ol>
+  <li>First
+    <ul>
+      <li>This list has just one element.
+    </ul>
+  </li>
+  <li>Second
+    <ul>
+      <li>This list has three elements.
+      <li>This list has three elements.
+      <li>This list has three elements.
+    </ul>
+  </li>
+<ol>
+
+ +

CSS

+ +
li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: red;
+  list-style-type: square;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('A_list_example', '100%', 210)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic2{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.8)}}9{{CompatOpera(9.5)}}3.1
No es requereix cap pare{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.8)}}9{{CompatOperaMobile(10)}}3.1
No es requereix cap pare{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_only-of-type/index.html b/files/ca/web/css/_colon_only-of-type/index.html new file mode 100644 index 0000000000..55dab9d76a --- /dev/null +++ b/files/ca/web/css/_colon_only-of-type/index.html @@ -0,0 +1,142 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:only-of-type' +--- +
{{CSSRef}}
+ +

The pseudo-class CSS :only-of-type representa un element que no té germans del mateix tipus.

+ +
/* Selecciona cada <p>, però només si és l'únic element <p> dins del seu pare */
+p:only-of-type {
+  background-color: lime;
+}
+ +
+

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemple

+ +

HTML

+ +
<main>
+  <div>I am `div` #1.</div>
+  <p>I am the only `p` among my siblings.</p>
+  <div>I am `div` #2.</div>
+  <div>I am `div` #3.
+    <i>I am the only `i` child.</i>
+    <em>I am `em` #1.</em>
+    <em>I am `em` #2.</em>
+  </div>
+</main>
+
+ +

CSS

+ +
main :only-of-type {
+  color: red;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example','100%',180)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.010.03.2
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_optional/index.html b/files/ca/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..0437cca6c0 --- /dev/null +++ b/files/ca/web/css/_colon_optional/index.html @@ -0,0 +1,128 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:optional' +--- +
{{ CSSRef }}
+ +

La pseudo-class CSS :optional representa qualsevol element {{HTMLElement("input")}}, {{HTMLElement("select")}} o {{HTMLElement("textarea")}} que no té l'atribut {{ htmlattrxref("required", "input") }} establert en ell.

+ +
/*  Selecciona qualsevol <input> opcional */
+input:optional {
+  border: 1px dashed black;
+}
+ +

Aquesta pseudo-class és útil per als camps d'estil que no són obligatoris per enviar en un formulari.

+ +
+

Nota: La pseudo-class {{cssxref(":required")}} selecciona els camps de formulari obligatoris.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Veure {{ cssxref(":invalid") }} com exemple.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}{{ Spec2('HTML WHATWG') }}Sense canvis.
{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}{{ Spec2('HTML5 W3C') }}Defineix la semàntica d'HTML i la validació de restriccions.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}{{ Spec2('CSS4 Selectors') }}Sense canvis.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }}{{ Spec2('CSS3 Basic UI') }}Defineix la pseudo-classe, però no la semàntica associada.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic10.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("2") }}1010.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic4.4{{CompatVersionUnknown}}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}10.05.0
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_out-of-range/index.html b/files/ca/web/css/_colon_out-of-range/index.html new file mode 100644 index 0000000000..797063240d --- /dev/null +++ b/files/ca/web/css/_colon_out-of-range/index.html @@ -0,0 +1,158 @@ +--- +title: ':out-of-range' +slug: 'Web/CSS/:out-of-range' +tags: + - CSS + - Layout + - Pseudo-class + - Web +translation_of: 'Web/CSS/:out-of-range' +--- +
{{CSSRef}}
+ +

The pseudo-class CSS :out-of-range representa un element {{htmlelement("input")}} el valor actual del qual està fora dels límits de rang especificats pels atributs {{htmlattrxref("min", "input")}} i {{htmlattrxref("max","input")}}.

+ +
/* Selecciona qualsevol <input>,  però només quan té un rang especificat, i el seu valor està fora d'aquest rang */
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+}
+ +

Aquesta pseudo-class és útil per proporcionar a l'usuari una indicació visual de que el valor actual d'un camp està fora dels límits permesos.

+ +
Nota: Aquesta pseudo-class només s'aplica als elements que tenen (i poden prendre) una limitació de rang. A falta d'aquesta limitació, l'element no pot ser "dins del rang" ni "fora de rang".
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +
+

HTML

+ +
<form action="" id="form1">
+  <ul>Values between 1 and 10 are valid.
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+      <label for="value1">Your value is </label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'okay.';
+}
+
+input:out-of-range + label::after {
+  content: 'out of range!';
+}
+ +

Resultat

+
+ +
{{EmbedLiveSample('Example', 600, 140)}}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}{{Spec2('HTML WHATWG')}}Defineix quan :out-of-range coincideix en elements HTML.
{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}{{Spec2('CSS4 Selectors')}}Definició inicial.
+ + + +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport en <input>10.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("29.0")}}{{CompatNo()}}11.05.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport en <input>2.3{{CompatVersionUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_placeholder-shown/index.html b/files/ca/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..3c0eeb091b --- /dev/null +++ b/files/ca/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,166 @@ +--- +title: ':placeholder-shown' +slug: 'Web/CSS/:placeholder-shown' +tags: + - CSS + - Experimental + - Pseudo-class + - Reference +translation_of: 'Web/CSS/:placeholder-shown' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-class CSS :placeholder-shown representa qualsevol element {{htmlElement("input")}} o {{htmlElement("textarea")}} que actualment mostra text de marcador de posició.

+ +
/* Selecciona qualsevol element amb un marcador de posició actiu */
+:placeholder-shown {
+  border: 2px solid silver;
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

+ +
<input placeholder="Type something here!">
+ +

CSS

+ +
input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: silver;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Basic_example", 200, 60)}}

+ +

Text desbordat

+ +

En pantalles estretes, com ara telèfons intel·ligents, l'amplada de les caixes de cerca i altres camps de formulari es poden reduir dràsticament. Això pot provocar que el text del marcador de posició sigui retallat d'una manera indesitjable. Sovint és útil modificar aquest comportament amb la propietat {{cssxref("text-overflow")}}.

+ +

HTML

+ +
<input placeholder="Enter something into this field, if you please!">
+ +

CSS

+ +
input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Overflowing_text", 200, 60)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder")}}{{Spec2("CSS4 Selectors")}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Suport bàsic
+ (en <input type="text">)		{{CompatChrome("47.0")}}{{CompatGeckoDesktop("51.0")}}[1]{{CompatNo}}{{CompatNo}}[2]{{CompatOpera("34.0")}}{{CompatSafari("9.0")}}
en type="number", type="time", i similars{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic
+ (en <input type="text">)		{{CompatAndroid("51.0")}}{{CompatGeckoMobile("51.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatSafari("9.2")}}
en type="number", type="time", i similars{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Abans de Gecko 51.0 {{geckoRelease("51.0")}}, Gecko va implementar una pseudo-class prefixada -moz anomenada {{cssxref(":-moz-placeholder")}}, que va ser reemplaçada més tard per un pseudo-element {{cssxref("::-moz-placeholder")}}. La pseudo-class estàndard es va implementar en {{bug("1069012")}}.

+ +

[2] S'ha sol·licitat suport per a aquesta pseudo-class a la pàgina de comentaris del desenvolupador de Microsoft Edge.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_read-only/index.html b/files/ca/web/css/_colon_read-only/index.html new file mode 100644 index 0000000000..5db61a8b07 --- /dev/null +++ b/files/ca/web/css/_colon_read-only/index.html @@ -0,0 +1,98 @@ +--- +title: ':read-only' +slug: 'Web/CSS/:read-only' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:read-only' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :read-only representa un element (com ara una entrada de text bloquejat) que no és editable per l'usuari.

+ +
/* Selecciona qualsevol element <input> que sigui de només lectura Compatible amb Firefox amb un prefix */
+input:-moz-read-only {
+  background-color: #ccc;
+}
+
+/* Compatible amb Blink/WebKit/Edge sense un prefix */
+input:read-only {
+  background-color: #ccc;
+}
+ +
+

Nota: Aquest selector no només selecciona {{htmlElement("input")}}s amb {{htmlattrxref("readonly", "input")}} establerts en ells; seleccionarà qualsevol element que no pugui ser editat per l'usuari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<input type="text" value="Type whatever you want here.">
+<input type="text" value="This is a read-only field." readonly>
+<p>This is a normal paragraph.</p>
+<p contenteditable="true">You can edit this paragraph!</p>
+ +

CSS

+ +
input { min-width: 25em; }
+input:-moz-read-only { background: cyan; }
+input:read-only { background: cyan; }
+
+p:-moz-read-only { background: lightgray; }
+p:read-only { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}{{ Spec2('HTML WHATWG') }}Sense canvis.
{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}{{ Spec2('HTML5 W3C') }}Defineix la semàntica respecte a l'HTML i la validació de restriccions.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}{{ Spec2('CSS4 Selectors') }}Defineix la pseudo-classe, però no la semàntica associada.
+ +

Navegadors compatibles

+ + + +

{{Compat("css.selectors.read-only")}}

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_read-write/index.html b/files/ca/web/css/_colon_read-write/index.html new file mode 100644 index 0000000000..434094c2ef --- /dev/null +++ b/files/ca/web/css/_colon_read-write/index.html @@ -0,0 +1,98 @@ +--- +title: ':read-write' +slug: 'Web/CSS/:read-write' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:read-write' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :read-write representa un element (com ara una entrada de text) que l'usuari pot editar.

+ +
/* Selecciona qualsevol element <input> que sigui editable Compatible amb Firefox amb un prefix */
+input:-moz-read-write {
+  background-color: #bbf;
+}
+
+/* Compatible amb Blink / WebKit / Edge sense un prefix */
+input:read-write {
+  background-color: #bbf;
+}
+ +
+

Nota: Aquest selector no només selecciona el text {{htmlElement("input")}} s; seleccionarà qualsevol element que l'usuari pugui editar, com ara un element {{htmlelement("p")}} amb {{htmlattrxref("contenteditable")}} establert en ell.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<input type="text" value="Type whatever you want here.">
+<input type="text" value="This is a read-only field." readonly>
+<p>This is a normal paragraph.</p>
+<p contenteditable="true">You can edit this paragraph!</p>
+ +

CSS

+ +
input { min-width: 25em; }
+input:-moz-read-write { background: cyan; }
+input:read-write { background: cyan; }
+
+p:-moz-read-write { background: lightgray; }
+p:read-write { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}{{ Spec2('HTML WHATWG') }}Sense canvis.
{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}{{ Spec2('HTML5 W3C') }}Defineix la semàntica respecte a HTML i la validació de restriccions.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}{{ Spec2('CSS4 Selectors') }}Defineix la pseudo-classe, però no la semàntica associada.
+ +

Navegadors compatibles

+ + + +

{{Compat("css.selectors.read-write")}}

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_required/index.html b/files/ca/web/css/_colon_required/index.html new file mode 100644 index 0000000000..ee1d7cffc5 --- /dev/null +++ b/files/ca/web/css/_colon_required/index.html @@ -0,0 +1,128 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:required' +--- +
{{ CSSRef }}
+ +

La pseudo-class CSS :required representa qulasevol element {{HTMLElement("input")}}, {{HTMLElement("select")}} o {{HTMLElement("textarea")}} que té l'atribut {{ htmlattrxref("required", "input") }} establert en ell.

+ +
/* Selecciona qualsevol <input> requerit */
+input:required {
+  border: 1px dashed red;
+}
+ +

Aquesta pseudo-class és útil per ressaltar els camps que han de tenir dades vàlides abans de poder enviar un formulari.

+ +
+

Nota: La classe pseudo-class {{cssxref(":optional")}} selecciona camps de formulari opcionals.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Veure {{ cssxref(":invalid") }} com exemple.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}{{ Spec2('HTML WHATWG') }}Sense canvis.
{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}{{ Spec2('HTML5 W3C') }}Defineix la semàntica respecte a HTML i la validació de restriccions.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}{{ Spec2('CSS4 Selectors') }}Sense canvis.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}{{ Spec2('CSS3 Basic UI') }}Defineix la pseudo-classe, però no la semàntica associada.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic10.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("2") }}1010.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic4.4.4{{CompatVersionUnknown}}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}10.05.0
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_right/index.html b/files/ca/web/css/_colon_right/index.html new file mode 100644 index 0000000000..c0cfce6475 --- /dev/null +++ b/files/ca/web/css/_colon_right/index.html @@ -0,0 +1,124 @@ +--- +title: ':right' +slug: 'Web/CSS/:right' +tags: + - '@page' + - CSS + - Layout + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:right' +--- +
{{ CSSRef() }}
+ +

La pseudo-class CSS :right, usada amb la regla at {{cssxref("@page")}}, representa totes les pàgines de la dreta d'un document imprès.

+ +
/* Selecciona les pàgines de la dreta quan imprimiu */
+@page :right {
+  margin: 2in 3in;
+}
+ +

Si una pàgina donada és "esquerra" o "dreta" ve determinada per la direcció principal d'escriptura del document. Per exemple, si la primera pàgina té una direcció d'escriptura principal d'esquerra a dreta llavors serà una pàgina :right si té una direcció d'escriptura principal de dreta a esquerra llavors serà una pàgina {{Cssxref(":left")}}.

+ +
+

Note: No podeu canviar totes les propietats CSS amb aquesta pseudo-class. Només podeu canviar les propietats {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }} i {{ Cssxref("background") }} del quadre de pàgina. S'ignoraran totes les altres propietats i només es veurà afectat el quadre de pàgina, no el contingut del document de la pàgina.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +
@page :right {
+  margin: 2in 3in;
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}{{ Spec2('CSS3 Paged Media') }}Sense canvis.
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}8.09.2{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_root/index.html b/files/ca/web/css/_colon_root/index.html new file mode 100644 index 0000000000..072802e541 --- /dev/null +++ b/files/ca/web/css/_colon_root/index.html @@ -0,0 +1,112 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:root' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :root coincideix amb l'element arrel de l'arbre que representa el document. En HTML, :root representa l'element {{HTMLElement("html")}} i és idèntic al selector html, excepte que la seva Especificitat és més alta.

+ +
/*  Selecciona l'element arrel del document: <html> en el cas de l'HTML */
+:root {
+  background: yellow;
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

El ùs de :root pot ser útil per declarar Variables CSS globals:

+ +
:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}Sense canvis.
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7")}}99.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/_colon_scope/index.html b/files/ca/web/css/_colon_scope/index.html new file mode 100644 index 0000000000..3985aa7d08 --- /dev/null +++ b/files/ca/web/css/_colon_scope/index.html @@ -0,0 +1,146 @@ +--- +title: ':scope' +slug: 'Web/CSS/:scope' +tags: + - CSS + - Experimental + - Layout + - Pseudo-class + - Reference + - Scoped Elements + - Web +translation_of: 'Web/CSS/:scope' +--- +
{{CSSRef}}
+ +

La pseudo-class de CSS :scope representa aquells elements que són un punt de referència per tal que els selectors coincideixin.

+ +
/* Selecciona un element d'àmbit */
+:scope {
+  background-color: lime;
+}
+ +

Actualment, quan s'utilitza en un full d'estils, :scope és el mateix que {{cssxref(":root")}}, ja que, en aquest moment, no hi ha una manera d'establir explícitament un element amb àmbit. Quan s'utilitza des d'una API DOM com {{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}} o {{domxref("Element.closest()")}}, :scope coincideix amb l'element que es va cridar el mètode.

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

En aquest exemple senzill, demostrem que l'ús de la pseudo-class :scope del mètode {{domxref("Element.matches()")}} coincideix amb l'element del qual és cridat.

+ +

JavaScript

+ +
let paragraph = document.getElementById("para");
+let output = document.getElementById("output");
+
+if (paragraph.matches(":scope")) {
+  output.innerText = "Yep, the element is its own scope as expected!";
+}
+ +

HTML

+ +
<p id="para">
+  This is a paragraph. It is not an interesting paragraph. Sorry about that.
+</p>
+<p id="output"></p>
+ +

Resultat

+ +
{{ EmbedLiveSample('Example') }}
+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope') }}{{ Spec2('CSS4 Selectors') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatNo }}{{ CompatGeckoDesktop(20) }}[1]{{CompatNo}}157.0
En querySelector() i querySelectorAll(){{ CompatChrome(27) }}{{CompatGeckoDesktop(32)}}[1][2]{{CompatNo}}157.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatNo }}{{ CompatGeckoMobile(20) }}[1]{{CompatNo}}{{CompatNo}}7.0
En querySelector() i querySelectorAll(){{ CompatChrome(27) }}{{CompatGeckoMobile(32)}}[1][2]{{CompatNo}}{{CompatNo}}7.0
+
+ +

[2] Firefox 20 implementa la pseudo-class :scope, la funció està desactivada per defecte. Per habilitar la funció, estableix la preferència layout.css.scope-pseudo.enabled a true. A partir de Firefox 32, aquest indicador està per defecte a true en les versions de llançament de Firefox ({{bug(528456)}}).

+ +

[3] Gecko 55 (Firefox 55) elimina el suport per a <style scoped> però no per a la pseudo-class :scope, que encara és compatible. <style scoped> va fer possible configurar explícitament els àmbits de l'element, però les discussions en curs sobre el disseny d'aquesta característica, així com la manca d'altres implementacions, van donar com a resultat la decisió d'eliminar-lo.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_target/index.html b/files/ca/web/css/_colon_target/index.html new file mode 100644 index 0000000000..07c4b7c27e --- /dev/null +++ b/files/ca/web/css/_colon_target/index.html @@ -0,0 +1,260 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:target' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :target representa un element únic (l'element destinació) amb un {{htmlattrxref("id")}} que coincideix amb el fragment de l'URL.

+ +
/* Selecciona un element amb una ID que coincideixi amb el fragment de l'URL actual */
+:target {
+  border: 2px solid black;
+}
+ +

Per exemple, la següent URL té un fragment (indicat pel signe #) que apunta a un element anomenat section2:

+ +
http://www.example.com/index.html#section2
+ +

El següent element es seleccionaria amb un selector :target quan l'URL actual fora igual a l'anterior:

+ +
<section id="section2">Example</section>
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Una taula de continguts

+ +

La pseudo-class :target es pot utilitzar per ressaltar la part d'una pàgina a la qual s'ha enllaçat des d'una taula de continguts.

+ +

HTML

+ +
<h3>Table of Contents</h3>
+<ol>
+ <li><a href="#p1">Jump to the first paragraph!</a></li>
+ <li><a href="#p2">Jump to the second paragraph!</a></li>
+ <li><a href="#nowhere">This link goes nowhere,
+   because the target doesn't exist.</a></li>
+</ol>
+
+<h3>My Fun Article</h3>
+<p id="p1">You can target <i>this paragraph</i> using a
+  URL fragment. Click on the link above to try out!</p>
+<p id="p2">This is <i>another paragraph</i>, also accessible
+  from the links above. Isn't that delightful?</p>
+
+ +

CSS

+ +
p:target {
+  background-color: gold;
+}
+
+/* Add a pseudo-element inside the target element */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/* Style italic elements within the target element */
+p:target i {
+  color: red;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('A_table_of_contents', 500, 300)}}

+ +

Pur-CSS lightbox

+ +

Podeu utilitzar la pseudo-class :target per crear una caixa de llum ( lightbox) sense utilitzar JavaScript. Aquesta tècnica es basa en la capacitat dels enllaços d'ancoratge per apuntar a elements que estan inicialment ocults a la pàgina. Una vegada seleccionats, el CSS canvia el display perquè es mostrin.

+ +
Nota: Podeu obtenir una caixa de llum (lightbox) més completa en pur CSS, basat en la pseudo-class :target, disponible en GitHub (demo).
+ +

HTML

+ +
<ul>
+  <li><a href="#example1">Open example #1</a></li>
+  <li><a href="#example2">Open example #2</a></li>
+</ul>
+
+<div class="lightbox" id="example1">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
+  </figure>
+</div>
+
+<div class="lightbox" id="example2">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Cras risus odio, pharetra nec ultricies et,
+      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+      Quisque quis neque arcu, nec gravida magna.</figcaption>
+  </figure>
+</div>
+ +

CSS

+ +
/* Unopened lightbox */
+.lightbox {
+  display: none;
+}
+
+/* Opened lightbox */
+.lightbox:target {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Lightbox content */
+.lightbox figcaption {
+  width: 25rem;
+  position: relative;
+  padding: 1.5em;
+  background-color: lightpink;
+}
+
+/* Close button */
+.lightbox .close {
+  position: relative;
+  display: block;
+}
+
+.lightbox .close::after {
+  right: -1rem;
+  top: -1rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  display: flex;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  border-radius: 50%;
+  color: white;
+  content: "×";
+  cursor: pointer;
+}
+
+/* Lightbox overlay */
+.lightbox .close::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(0,0,0,.7);
+  content: "";
+  cursor: default;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}{{Spec2("HTML WHATWG")}}Defineix la semàntica específica d'HTML.
{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}{{Spec2("CSS4 Selectors")}}Sense canvis.
{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}{{Spec2("CSS3 Selectors")}}Definició inicial.
+ + + +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7 or earlier")}}99.51.3
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.7 or earlier")}}9.09.52.0
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_valid/index.html b/files/ca/web/css/_colon_valid/index.html new file mode 100644 index 0000000000..4bea8abf18 --- /dev/null +++ b/files/ca/web/css/_colon_valid/index.html @@ -0,0 +1,74 @@ +--- +title: ':valid' +slug: 'Web/CSS/:valid' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:valid' +--- +
{{CSSRef}}
+ +

The pseudo-class CSS :valid representa qualsevol element {{HTMLElement("input")}} o altre {{HTMLElement("form")}} el contingut del qual es valida correctament. Això permet fer, fàcilment, que els camps vàlids adoptin una aparença que ajudi a l'usuari a confirmar que les seves dades estan formatades correctament.

+ +
/* Selecciona qualsevol <input> vàlid */
+input:valid {
+  background-color: powderblue;
+}
+ +

Aquesta pseudo-class és útil per ressaltar els camps correctes per a l'usuari.

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Vegeu {{cssxref(":invalid")}} com exemple.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}{{Spec2('HTML WHATWG')}}Cap canvi.
{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}{{Spec2('HTML5 W3C')}}Defineix la semàntica respecte a l'HTML i la validació de restriccions.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}{{Spec2('CSS4 Selectors')}}Definició inicial.
+ + + +
+ + +

{{Compat("css.selectors.valid")}}

+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_visited/index.html b/files/ca/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..00b61c6301 --- /dev/null +++ b/files/ca/web/css/_colon_visited/index.html @@ -0,0 +1,178 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:visited' +--- +
{{ CSSRef }}
+ +

La  pseudo-class CSS :visited representa enllaços que l'usuari ja ha visitat. Per motius de privadesa, els estils que es poden modificar utilitzant aquest selector són molt limitats

+ +
/*  Selecciona qualsevol <a> que s'hagi visitat */
+a:visited {
+  color: green;
+}
+ +

Els estils definits per la pseudo-class :visited seran anul·lats per qualsevol pseudo-class posterior relacionada amb l'enllaç ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":active")}}) que té com a mínim la mateixa especificitat. Per donar-li un estil apropiat als enllaços, col·loqueu la regla :visited després de la regla :link però abans de :hover i :active, tal com ho defineix l'ordre LVHA: :link — :visited — :hover — :active.

+ +

Restriccions d'estil

+ +

Per motius de privadesa, els navegadors limiten estrictament quins són els estils que es podem aplicar mitjançant aquesta pseudo-class, i com es poden utilitzar:

+ + + +
+

Nota: Per obtenir més informació sobre aquestes limitacions i els motius que hi ha darrere, consulteu Privadesa i el selector :visited.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

Les propietats que d'altra manera no tindrien color o serien transparents no es poden modificar amb :visited. De les propietats que es poden establir amb aquesta pseudo-class, probablement el vostre navegador tingui un valor predeterminat només per color i column-rule-color. Per tant, si voleu modificar les altres propietats, haureu de donar-los un valor base fora del selector :visited.

+ +

HTML

+ +
<a href="#test-visited-link">Have you visited this link yet?</a><br>
+<a href="">You've already visited this link.</a>
+ +

CSS

+ +
a {
+  /* Specify non-transparent defaults to certain properties,
+     allowing them to be styled with the :visited state */
+  background-color: white;
+  border: 1px solid white;
+}
+
+a:visited {
+  background-color: yellow;
+  border-color: hotpink;
+  color: hotpink;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}Cap canvi.
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}Cap canvi.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}Aixeca la restricció per aplicar solament :visited a l'element {{HTMLElement ("a")}}. Permet als navegadors restringir el seu comportament per raons de privadesa.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1.0") }}3.53.51.0
Restriccions en les propietats CSS permeses en una declaració usant :visited6{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0") }}8 (or earlier){{ CompatUnknown() }}5.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic4.4{{CompatVersionUnknown}}{{ CompatGeckoMobile("1.0") }}11379.3
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ca/web/css/_doublecolon_-moz-progress-bar/index.html new file mode 100644 index 0000000000..579c5d5934 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,55 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - NeedsCompatTable + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-moz-progress-bar és una estensió de Mozilla que representa la barra de progrés dins d'un element {{HTMLElement("progress")}}. (La barra representa la quantitat de progrés que s'ha realitzat).

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<progress value="30" max="100">30%</progress>
+<progress max="100">Indeterminate</progress>
+ +

CSS

+ +
::-moz-progress-bar {
+  background-color: red;
+}
+
+/* Force indeterminate bars to have zero width */
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Examples')}}

+ +

La primera barra des de dalt hauria de ser així:

+ +

Custom styled progress bar

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-moz-range-progress/index.html b/files/ca/web/css/_doublecolon_-moz-range-progress/index.html new file mode 100644 index 0000000000..517f19e1fd --- /dev/null +++ b/files/ca/web/css/_doublecolon_-moz-range-progress/index.html @@ -0,0 +1,117 @@ +--- +title: '::-moz-range-progress' +slug: 'Web/CSS/::-moz-range-progress' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-range-progress' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-moz-range-progress és una extensió de Mozilla, que representa la part inferior de la pista (és a dir, la ranura) en la qual l'indicador es llisca en un {{HTMLElement("input")}} de type="range". Aquesta part correspon a valors inferiors al valor actualment seleccionat pel polze (és a dir, botó virtual).

+ +
+

Nota: L'ùs de ::-moz-range-progress amb qualsevol cosa que no sigui <input type="range"> no coincideix amb res i no té cap efecte.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

CSS

+ +
input[type=range]::-moz-range-progress {
+  background-color: green;
+  height: 1em;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progrés que utilitzi aquest estil pot semblar una cosa així:

+ +

+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en Gecko.

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-moz-range-thumb/index.html b/files/ca/web/css/_doublecolon_-moz-range-thumb/index.html new file mode 100644 index 0000000000..dfbfb9f162 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-moz-range-thumb/index.html @@ -0,0 +1,117 @@ +--- +title: '::-moz-range-thumb' +slug: 'Web/CSS/::-moz-range-thumb' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-range-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-moz-range-thumb es una extensió de Mozilla que representa el polze (és a dir, botó virtual) d'un {{HTMLElement("input")}} de type="range". L'usuari pot moure el polze al llarg de la pista d'entrada per canviar el seu valor numèric.

+ +
+

Nota: L'ùs ::-moz-range-thumb amb qualsevol cosa que no sigui <input type="range"> no coincideix amb res i no té cap efecte.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

CSS

+ +
input[type=range]::-moz-range-thumb {
+  background-color: green;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progrés que utilitzi aquest estil pot semblar una cosa així

+ +

The thumb of the <input type=right> styled in green

+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en Gecko.

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-moz-range-track/index.html b/files/ca/web/css/_doublecolon_-moz-range-track/index.html new file mode 100644 index 0000000000..41ad08a697 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-moz-range-track/index.html @@ -0,0 +1,117 @@ +--- +title: '::-moz-range-track' +slug: 'Web/CSS/::-moz-range-track' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-range-track' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

The pseudo-element CSS ::-moz-range-track és una extensió de Mozilla que representa la pista (és a dir, la ranura) en què l'indicador es llisca en un {{HTMLElement("input")}} de type="range".

+ +
+

Nota: L'ùs de ::-moz-range-track amb qualsevol cosa que no sigui <input type="range"> no coincideix amb res i no té cap efecte.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

CSS

+ +
input[type=range]::-moz-range-track {
+  background-color: green;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progrés que utilitzi aquest estil pot semblar una cosa així:

+ +

A range with the track green.

+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en Gecko.

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-ms-fill-lower/index.html b/files/ca/web/css/_doublecolon_-ms-fill-lower/index.html new file mode 100644 index 0000000000..f7f8896483 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-fill-lower/index.html @@ -0,0 +1,91 @@ +--- +title: '::-ms-fill-lower' +slug: 'Web/CSS/::-ms-fill-lower' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-fill-lower' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-ms-fill-lower representa la part de la "pista" (la ranura en la qual llisca l'indicador denominat polze) d'un {{HTMLElement("input")}} de type="range", que correspon a valors inferiors al valor actualment seleccionat per el polze.

+ +

Especificacions

+ +

No forma part de cap especificació.

+ +

Microsoft té una descripció en MSDN.

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-ms-fill-upper/index.html b/files/ca/web/css/_doublecolon_-ms-fill-upper/index.html new file mode 100644 index 0000000000..eb28ffc2db --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-fill-upper/index.html @@ -0,0 +1,91 @@ +--- +title: '::-ms-fill-upper' +slug: 'Web/CSS/::-ms-fill-upper' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-fill-upper' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-ms-fill-upper representa la part de la "pista" (la ranura en la qual llisca l'indicador denominat polze) d'un {{HTMLElement("input")}} de type="range" , que correspon a valors superiors al valor actualment seleccionat per el polze.

+ +

Especificacions

+ +

No forma part de cap especificació.

+ +

Microsoft té una descripció en MSDN.

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-ms-fill/index.html b/files/ca/web/css/_doublecolon_-ms-fill/index.html new file mode 100644 index 0000000000..1377611a03 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-fill/index.html @@ -0,0 +1,108 @@ +--- +title: '::-ms-fill' +slug: 'Web/CSS/::-ms-fill' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-fill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-ms-fill representa la porció emplenada d'un element {{HTMLElement("progress")}}. Aquest pseudo-element no és estàndard i específic de Internet Explorer 10+, d'aquí el prefix del proveidor.

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Especificacions

+ +

No forma part de cap especificació. Microsoft té una descripció en MSDN.

+ +

Exemple

+ +

HTML

+ +
<progress value="10" max="50">
+
+ +

CSS

+ +
progress::-ms-fill {
+  background-color: orange;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progrés que utilitzi aquest estil pot semblar una cosa així:

+ +

Progress Bar with Orange Fill

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}10.0{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-ms-thumb/index.html b/files/ca/web/css/_doublecolon_-ms-thumb/index.html new file mode 100644 index 0000000000..fb3bd8e4e5 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-thumb/index.html @@ -0,0 +1,41 @@ +--- +title: '::-ms-thumb' +slug: 'Web/CSS/::-ms-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-ms-thumb representa el "polze" que l'usuari pot moure dins de la "ranura" d'un {{HTMLElement("input")}} de type="range" per modificar el seu valor numèric.

+ +

Especificacions

+ +

No forma part de cap especificació, encara que Microsoft té una descripció en MSDN.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-ms-track/index.html b/files/ca/web/css/_doublecolon_-ms-track/index.html new file mode 100644 index 0000000000..799efce737 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-track/index.html @@ -0,0 +1,45 @@ +--- +title: '::-ms-track' +slug: 'Web/CSS/::-ms-track' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-track' +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

El pseudo-element CSS ::-ms-track representa la "pista" (la ranura en la qual llisca l'indicador) d'un {{HTMLElement("input")}} de type="range".

+ +

Especificacions

+ +

No forma part de cap especificació.

+ +

Microsoft té una descripció en MSDN .

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/ca/web/css/_doublecolon_-webkit-progress-bar/index.html new file mode 100644 index 0000000000..fc18f805e2 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-webkit-progress-bar/index.html @@ -0,0 +1,110 @@ +--- +title: '::-webkit-progress-bar' +slug: 'Web/CSS/::-webkit-progress-bar' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-progress-bar' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-webkit-progress-bar representa la barra sencere d'un element {{HTMLElement("progress")}}. Normalment només és visible la part no emplenada de la barra, ja que de forma predeterminada es processa a continuació el  pseudo-element {{ cssxref("::-webkit-progress-value") }}. És un fill del pseudo-element {{cssxref("::-webkit-progress-inner-element")}} i el pare del pseudo-element {{cssxref("::-webkit-progress-value")}}.

+ +
+

Nota: Perquè ::-webkit-progress-value tingui efecte, {{cssxref("-webkit-appearance")}} s'ha d'establir a none en l'element <progress>.

+
+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en WebKit/Blink.

+ +

Exemple

+ +

Contingut CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-bar {
+   background-color: orange;
+}
+
+ +

Contingut HTML

+ +
<progress value="10" max="50">
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 200, 50)}}

+ +

Una barra de progrés que utilitzi aquest estil pot semblar una cosa així :

+ +

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-webkit-progress-value/index.html b/files/ca/web/css/_doublecolon_-webkit-progress-value/index.html new file mode 100644 index 0000000000..95235bb4cc --- /dev/null +++ b/files/ca/web/css/_doublecolon_-webkit-progress-value/index.html @@ -0,0 +1,109 @@ +--- +title: '::-webkit-progress-value' +slug: 'Web/CSS/::-webkit-progress-value' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-progress-value' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-webkit-progress-value  representa la part emplenada de la barra d'un element {{HTMLElement("progress")}}. És un fill del pseudo-element {{cssxref("::-webkit-progress-bar")}}.

+ +
+

Nota: Per tal de permetre que ::-webkit-progress-value tingui efecte, {{cssxref("-webkit-appearance")}} necessita ser ajustat a none en l'element <progress>.

+
+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en WebKit/Blink.

+ +

Exemple

+ +

HTML

+ +
<progress value="10" max="50">
+
+ +

CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 200, 50)}}

+ +

Una barra de progrés que utilitzi aquest estil pot semblar una cosa així :

+ +

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/ca/web/css/_doublecolon_-webkit-slider-runnable-track/index.html new file mode 100644 index 0000000000..e6797248cf --- /dev/null +++ b/files/ca/web/css/_doublecolon_-webkit-slider-runnable-track/index.html @@ -0,0 +1,35 @@ +--- +title: '::-webkit-slider-runnable-track' +slug: 'Web/CSS/::-webkit-slider-runnable-track' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-slider-runnable-track' +--- +
{{ CSSRef() }} {{ Non-standard_header() }}
+ +

El pseudo-element CSS ::-webkit-slider-runnable-track representa la "pista" (la ranura en la qual llisca l'indicador) d'un {{HTMLElement("input")}} de type="range".

+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en WebKit/Blink.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/ca/web/css/_doublecolon_-webkit-slider-thumb/index.html new file mode 100644 index 0000000000..0efff168d2 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-webkit-slider-thumb/index.html @@ -0,0 +1,34 @@ +--- +title: '::-webkit-slider-thumb' +slug: 'Web/CSS/::-webkit-slider-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Reference +translation_of: 'Web/CSS/::-webkit-slider-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-webkit-slider-thumb representa el "polze" que l'usuari pot moure dins de la "ranura" d'un {{HTMLElement("input")}} de type="range" per modificar el seu valor numèric.

+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en WebKit/Blink.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_after/index.html b/files/ca/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..95161d7f25 --- /dev/null +++ b/files/ca/web/css/_doublecolon_after/index.html @@ -0,0 +1,260 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - Layout + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::after' +--- +
{{CSSRef}}
+ +

En CSS, ::after crea un pseudo-element que és l'últim fill de l'element seleccionat. Sovint s'utilitza per afegir contingut cosmètic a un element amb la propietat{{cssxref("content")}}. Està integrat per defecte.

+ +
/* Afegeix una fletxa després d'enllaços */
+a::after {
+  content: "→";
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+ +
+

CSS3 va introduir la notació de ::after ( amb dos caràcters de dos punts ) per distingir les pseudo-classes dels pseudo-elements. Els navegadors també accepten :after, introduït en CSS2.

+
+ +

Consideracions

+ +

Els pseudo-elements generats per ::before i ::after estan continguts per la caixa de formatació de l'element i, per tant  ::before i ::after no s'apliquen als elements reemplaçats com img, or a elements br.

+ +

Exemples

+ +

Ùs senzill

+ +

Crearem dues classes: una per als paràgrafs boring i un per als exciting. Marcarem cada paràgraf afegint un pseudo-element al final del mateix.

+ +
<p class="boring-text">Here is some plain old boring text.</p>
+<p>Here is some normal text that is neither boring nor exciting.</p>
+<p class="exciting-text">Contributing to MDN is easy and fun.
+Just hit the edit button to add new live samples, or improve existing samples.</p>
+ +
.exciting-text::after {
+  content: "<- now this *is* exciting!";
+  color: green;
+}
+
+.boring-text::after {
+   content: "<- BORING!";
+   color: red;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Simple_usage', 500, 150)}}

+ +

Exemple decoratiu

+ +

Podem donar estil de text o imatges en la propietat {{cssxref("content")}} gairebé de qualsevol manera que vulguem.

+ +
<span class="ribbon">Notice where the orange box is.</span>
+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "Look at this orange box.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Decorative_example', 450, 20)}}

+ +

Tooltips

+ +

El següent exemple mostra l'ús del pseudo-element ::after en conjunció amb l'expressió CSS attr() i un atribut de dades personalitzades data-descr per crear un tooltip en pur CSS, similar al glossari. Feu clic en la vista prèvia en viu o vegeu aquest exemple en una pàgina apart.

+ +
<p>Here is the live example of the above code.<br />
+  We have some <span data-descr="collection of words and punctuation">text</span> here with a few
+  <span data-descr="small popups which also hide again">tooltips</span>.<br />
+  Don't be shy, hover over to take a <span data-descr="not to be taken literally">look</span>.
+</p>
+
+ +
span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Tooltips', 450, 120)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}No hi ha canvis significatius en l'especificació anterior.
{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}{{Spec2("CSS3 Transitions")}}Permet transicions en les propietats definides en els pseudo-elements.
{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}{{Spec2("CSS3 Animations")}}Permet animacions en les propietats definides en els pseudo-elements.
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}Introdueix la sintaxi de dos caràcters de dos punts .
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}Definició inicial, utilitzant la sintaxi d'un  caràcter de dos punts.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
suport :after{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}[1]8.0{{CompatOpera("4")}}4.0
suport ::after{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}[1]9.0{{CompatOpera("7")}}4.0
Suport d'animacions i transicions26{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
suport :after{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
suport ::after{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Suport d'animacions i transicions{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Firefox anterior a la versió 3.5 només implementa la versió CSS 2.0 de :after. No es permet {{cssxref("position")}}, {{cssxref("float")}}, list-style-* i algunes propietats de pantalla. Firefox 3.5 elimina aquestes restriccions.

+ +

Notes de Quantum CSS

+ + + +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_backdrop/index.html b/files/ca/web/css/_doublecolon_backdrop/index.html new file mode 100644 index 0000000000..dccf033dee --- /dev/null +++ b/files/ca/web/css/_doublecolon_backdrop/index.html @@ -0,0 +1,143 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - CSS + - Full-screen + - Layout + - NeedsContent + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::backdrop' +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

El {{Cssxref("pseudo-elements", "pseudo-element")}} CSS  ::backdrop és una caixa situada immediatament per sota d'un element visualitzat en mode de pantalla completa  (i per sobre de qualsevol element inferior de la pila). Els elements de pantalla completa formen part de la pila de la capa superior, és a dir, es representen davant de qualsevol altre contingut.

+ +
dialog::backdrop {
+  background: rgba(255,0,0,.25);
+}
+ +

El pseudo-element ::backdrop es pot utilitzar per donar estil o ocultar el document subjacent d'un element que es mostra a pantalla completa.

+ +

::backdrop no hereta de cap element i no és hereditari. No es fa cap restricció sobre quines propietats s'apliquen a aquest pseudo-element.

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic32.0 {{property_prefix("webkit")}}
+ 37.0		{{CompatVersionUnknown}}{{property_prefix("ms")}}{{CompatGeckoDesktop("47")}} [1]11 {{property_prefix("ms")}}{{CompatNo}}{{CompatNo}}
en <dialog>32.0 {{property_prefix("webkit")}}
+ 37.0		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
en fullscreen{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("ms")}}{{CompatGeckoDesktop("47")}} [1]11 {{property_prefix("ms")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("ms")}}{{CompatGeckoMobile("47")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
en <dialog>{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
en fullscreen{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("ms")}}{{CompatGeckoMobile("47")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] See {{bug(1064843)}}

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_before/index.html b/files/ca/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..ad7738d6f5 --- /dev/null +++ b/files/ca/web/css/_doublecolon_before/index.html @@ -0,0 +1,329 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::before' +--- +
{{CSSRef}}
+ +

En CSS, ::before crea un pseudo-element que és el primer fill de l'element seleccionat. Sovint s'utilitza per afegir contingut cosmètic a un element amb la propietat {{cssxref("content")}}. Està integrat per defecte.

+ +
/* Add a heart before links */
+a::before {
+  content: "♥";
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+ +
+

CSS3 va introduir la notació de ::before ( de dos caràcters de dos punts ) per distingir les pseudo-classes dels pseudo-elements. Els navegadors també accepten :before, introduït en CSS2.

+
+ +

Consideracions

+ +

Els pseudo-elements generats per ::before i ::after estan continguts per la caixa de formatació de l'element i, per tant  ::before i ::after no s'apliquen als elements reemplaçats com img, or a elements br.

+ +

Exemples

+ +

Afegint cometes

+ +

Un exemple senzill de l'ús del pseudo-element ::before és proporcionar cometes. Aquí s'utilitza tant ::before com {{Cssxref("::after")}} per a inserir caràcters cometes.

+ +

Contingut HTML

+ +
<q>Some quotes</q>, he said, <q>are better than none</q>.
+ +

Contingut CSS

+ +
q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: "»";
+  color: red;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}

+ +

Exemple Decorativu

+ +

Podem donar estil de text o imatges en la propietat {{cssxref("content")}} gairebé de qualsevol manera que vulguem.

+ +

Contingut HTML

+ +
<span class="ribbon">Notice where the orange box is.</span>
+ +

Contingut CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Look at this orange box.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Decorative_example', 450, 60)}}

+ +

Llista de tasques

+ +

En aquest exemple crearem una senzilla llista de tasques utilitzant pseudo-elements. Aquest mètode sovint es pot utilitzar per afegir petits tocs a la interfície d'usuari i millorar l'experiència de l'usuari.

+ +

Contingut HTML

+ +
<ul>
+  <li>Buy milk</li>
+  <li>Take the dog for a walk</li>
+  <li>Exercise</li>
+  <li>Write code</li>
+  <li>Play music</li>
+  <li>Relax</li>
+</ul>
+
+ +

Contingut CSS

+ +
li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}
+ +

Contingut  JavaScript

+ +
var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+
+ +

Aquí està l'exemple del codi anterior executat en directe. Recordeu que no s'han utilitzat icones , i la marca de verificació és en realitat el ::before que s'ha donat estil amb CSS. Seguiu endavant i aconseguiu algunes coses per fer.

+ +

Resultat

+ +

{{EmbedLiveSample('To-do_list', 400, 300)}}

+ +

Notes

+ +

Encara que el posicionament fix en Firefox 3.5 no permet contingut generat per separat com un germà anterior (segons l'especificació CSS afirma que "Els pseudo-elements :before i :after, son elements que interactuen amb altres caixes ... com si fossin veritables elements inserits dins del seu element associat."), poden ser usats per a proporcionar una lleugera millora en els dissenys sense taules (per exemple, per aconseguir el centrat), sempre que el contingut que es centri estigui embolicat en un fill, una columna abans i després que el contingut pugui ser introduït sense afegir un germà anterior o següent (és a dir, és potser més semànticament correcta afegir un span addicional com s'indica a continuació, del que seria afegir un element <div /> abans i després). (I recordeu sempre afegir un width a un float, ja que, altrament, no surarà!).

+ +

Contingut  HTML

+ +
<div class="example">
+<span id="floatme">"Floated Before" should be generated on the left of the
+viewport and not allow overflow in this line to flow under it. Likewise
+should "Floated After" appear on the right of the viewport and not allow this
+line to flow under it.</span>
+</div>
+ +

Contingut  CSS

+ +
#floatme { float: left; width: 50%; }
+
+/* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */
+.example::before {
+  content: "Floated Before";
+  float: left;
+  width: 25%
+}
+.example::after {
+  content: "Floated After";
+  float: right;
+  width:25%
+}
+
+/* For styling */
+.example::before, .example::after, .first {
+  background: yellow;
+  color: red;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Notes")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}No hi ha canvis significatius en l'especificació anterior.
{{Specname("CSS3 Transitions", "#animatable-properties", "")}}{{Spec2("CSS3 Transitions")}}Permet transicions en les propietats definides en els pseudo-elements.
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}Permet animacions en les propietats definides en els pseudo-elements.
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}Introdueix la sintaxi de dos caràcters de dos punts .
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}Definició inicial, utilitzant la sintaxi d'un caràcter de dos punts .
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport :before{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}[1]8.0{{CompatOpera("4")}}4.0
Suport ::before{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}[1]9.0{{CompatOpera("7")}}4.0
Suport d'animacions i transicions26{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChromeEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport :before{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Suport ::before{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.1{{CompatUnknown}}5.1
Suport d'animacions i transicions26{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Firefox anterior a la versió 3.5 només implementa la versió CSS 2.0 de :before. No es permet {{cssxref("position")}}, {{cssxref("float")}}, list-style-* i algunes propietats de pantalla. Firefox 3.5 elimina aquestes restriccions.

+ +

Quantum CSS notes

+ + + +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_cue/index.html b/files/ca/web/css/_doublecolon_cue/index.html new file mode 100644 index 0000000000..3c1265334b --- /dev/null +++ b/files/ca/web/css/_doublecolon_cue/index.html @@ -0,0 +1,78 @@ +--- +title: '::cue (:cue)' +slug: 'Web/CSS/::cue' +tags: + - '::cue' + - CSS + - Media + - Pseudo-element + - Reference + - Web Video Text Tracks + - WebVTT + - cue +translation_of: 'Web/CSS/::cue' +--- +
{{CSSRef}}
+ +

El pseudo-element CSS ::cue coincideix amb senyals de WebVTT dins d'un element seleccionat. Això es pot usar per donar estil als títols i altres senyals en els medis amb pistes VTT.

+ +

Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element ::cue:

+ + + +

Les propietats s'apliquen a tot el conjunt de senyals com si fossin una sola unitat. L'única excepció és que el background i les propietats abreujades s'apliquen a cada senyal individualment, per evitar la creació de caixes i que ocultin inesperadament grans àrees dels medis

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

El següent CSS estableix l'estil de cue perquè el text sigui blanc i el fons sigui una caixa negra translúcida.

+ +
::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("WebVTT")}}{{Spec2("WebVTT")}}Definició  incial.
+ + + + + +

{{Compat("css.selectors.cue")}}

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_first-letter/index.html b/files/ca/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..40e4c9c293 --- /dev/null +++ b/files/ca/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,219 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::first-letter' +--- +
{{CSSRef}}
+ +

El pseudo-element CSS code>::first-letter aplica estils a la primera lletra de la primera línia d'un element de nivell de bloc, però només quan no està precedit d'un altre contingut (com ara imatges o taules en línia).

+ +
/* Selecciona la primera lletra d'un <p> */
+p::first-letter {
+  font-size: 130%;
+}
+ +

La primera lletra d'un element no sempre és trivial per identificar:

+ + + +
+

CSS3 va introduir la notació de ::first-letter ( amb dos caràcters de dos punts) per distingir les pseudo-classes dels pseudo-elements. Els navegadors també accepten :first-letter, introduït en CSS2.

+
+ +

Propietats permeses

+ +

Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element ::first-letter:

+ + + +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

Fa que la primera lletra de cada paràgraf sigui en vermell i gran.

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
+<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
+<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat.</p>
+<p>-The beginning of a special punctuation mark.</p>
+<p>_The beginning of a special punctuation mark.</p>
+<p>"The beginning of a special punctuation mark.</p>
+<p>'The beginning of a special punctuation mark.</p>
+<p>*The beginning of a special punctuation mark.</p>
+<p>#The beginning of a special punctuation mark.</p>
+<p>「特殊的汉字标点符号开头。</p>
+<p>《特殊的汉字标点符号开头。</p>
+<p>“特殊的汉字标点符号开头。</p>
+ +

CSS

+ +
p::first-letter {
+  color: red;
+  font-size: 130%;
+}
+ +

Resultat

+ +

{{ EmbedLiveSample('Example', '80%', 420) }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}Genera propietats permeses per a la composició de textos, decoració de text, propietats de disseny en línia, {{ cssxref("opacity") }} i {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}Permet l'ús de {{cssxref("text-shadow")}} amb ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}Introducció de la sintaxi de dos caràcters de dos punts. Definició del comportament de casos limits, com ara en elements de llista o amb idiomes específics (p. ex., el dígraf holandès IJ).
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}Cap canvi.
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}Definició inicial, utilitzant la sintaxi d'un caràcter de dos punts.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}9.07.01.0 (85)
Antiga sintaxis d'un caràcter de dos punts (:first-letter)1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}5.53.51.0 (85)
Suport per al dígraf holandès IJ{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }} {{ bug("92176") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Antiga sintaxis d'un caràcter de dos punts (:first-letter){{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Suport per al dígraf holandès IJ{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_first-line/index.html b/files/ca/web/css/_doublecolon_first-line/index.html new file mode 100644 index 0000000000..065c7dc0f3 --- /dev/null +++ b/files/ca/web/css/_doublecolon_first-line/index.html @@ -0,0 +1,117 @@ +--- +title: '::first-line (:first-line)' +slug: 'Web/CSS/::first-line' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::first-line' +--- +
{{CSSRef}}
+ +

El pseudo-element CSS ::first-line aplica estils a la primera línia d'un element de nivell de bloc. Tingueu en compte que la longitud de la primera línia depèn de molts factors, incloent l'amplada de l'element, l'amplada del document i la mida de la font del text

+ +
/* Selecciona la primera línia d'un <p> */
+p::first-line {
+  color: red;
+}
+ +
+

CSS3 va introduir la notació de ::first-line (de dos caràcters, de dos punts) per distingir les pseudo-classes dels pseudo-elements. Els navegadors també accepten :first-line, introduït en CSS2.

+
+ +

Propietats permeses

+ +

Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element ::first-line:

+ + + +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<p>Styles will only be applied to the first line of this paragraph.
+After that, all text will be styled like normal. See what I mean?</p>
+
+<span>The first line of this text will not receive special styling
+because it is not a block-level element.</span>
+ +

CSS

+ +
::first-line {
+  color: blue;
+  text-transform: uppercase;
+
+
+  /* WARNING: DO NOT USE THESE */
+  /* Many properties are invalid in ::first-line pseudo-classes */
+  margin-left: 20px;
+  text-indent: 20px;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 350, 160)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{ Spec2('CSS4 Pseudo-Elements')}}Defineix de manera més estricta on pot apareixer una ::first-letter.
+ Generalitza propietats permeses per a composició tipogràfica, decoració de text i propietats de disseny en línia i {{cssxref("opacity")}}.
+ Defineix l'herència de ::first-letter.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}{{ Spec2('CSS3 Text Decoration')}}Permès lùs de {{cssxref("text-shadow")}} amb ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-line', '::first-line') }}{{ Spec2('CSS3 Selectors') }}Introdueix la sintaxi de dos caràcter de dos punts.
{{ SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line') }}{{ Spec2('CSS2.1') }}Cap canvi
{{ SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line') }}{{ Spec2('CSS1') }}La definició inicial fa servir la sintaxi d'un sol caràcter de dos punts.
+ + + +

{{Compat("css.selectors.first-line")}}

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_placeholder/index.html b/files/ca/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..3c985e7912 --- /dev/null +++ b/files/ca/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,150 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +tags: + - CSS + - Experimental + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::placeholder' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

El pseudo-element CSS ::placeholder representa el text de marcador de posició d'un element de formulari.

+ +
::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}
+ +

Només un subconjunt de propietats CSS que s'aplica al pseudo-element {{cssxref("::first-line")}} es pot utilitzar en una regla, utilitzant ::placeholder en el seu selector.

+ +
+

Nota: A Firefox, l'aparença del text del marcador de posició és de color gris translúcid per defecte.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<input placeholder="Type something here!">
+ +

CSS

+ +
input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
Suport bàsic{{CompatChrome(57)}}{{CompatGeckoDesktop("51.0")}}[1]{{CompatNo}}{{CompatNo}}4410.1
Suport parcial amb prefixSupportedSupportedSupported10 -ms-Supported5 -webkit-
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatGeckoMobile("52.0")}}{{CompatNo}} 10.3
Suport parcial amb prefix2.1 -webkit-SupportedSupported10 -ms-37 -webkit-4.3 -webkit-
+
+ +

[1] Abans de Gecko 51.0 {{geckoRelease("51.0")}} Gecko va implementar aquest com a pseudo-element prefixat {{cssxref("::-moz-placeholder")}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_selection/index.html b/files/ca/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..62b5e25619 --- /dev/null +++ b/files/ca/web/css/_doublecolon_selection/index.html @@ -0,0 +1,160 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +tags: + - CSS + - Layout + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::selection' +--- +
{{CSSRef}}
+ +

El pseudo-element CSS ::selection aplica estils a la part d'un document que l'usuari ha ressaltat (com ara amb el ratolí).

+ +
::selection {
+  color: gold;
+  background: red;
+}
+ +

Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element ::selection:

+ + + +

Tingueu en compte que, en particular, s'ignora {{cssxref("background-image")}}.

+ +

Sintaxi

+ +
/* Firefox syntax */
+::-moz-selection
+
+{{csssyntax}}
+
+ +

Exemple

+ +

HTML

+ +
<div>This text has special styles when you highlight it.</div>
+<p>Also try selecting text in this paragraph.</p>
+ +

CSS

+ +
/* Make selected text gold on a red background */
+::-moz-selection {
+  color: gold;
+  background: red;
+}
+
+::selection {
+  color: gold;
+  background: red;
+}
+
+/* Make selected text in a paragraph white on a blue background */
+p::-moz-selection {
+  color: white;
+  background: blue;
+}
+
+p::selection {
+  color: white;
+  background: blue;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}Definició inicial.
+ +
+

Nota: Tot i que ::selection estava present en els esborranys de CSS Selectors Nivell 3, es va eliminar durant la fase de Recomanació de Candidats perquè el seu comportament no era suficientment especificat (especialment amb elements niats) i no es va aconseguir la interoperabilitat (basada en una discussió en la llista de correu d'Estil W3C). El pseudo-element ::selection ha estat retornat a Pseudo-Elements Nivell 4.

+
+ + + +
+

Nota: text-shadow en ::selection és compatible amb Chrome, Safari i Firefox 17+.

+
+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1{{CompatVersionUnknown}}1.0 {{property_prefix("-moz")}}[1]99.51.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko actualment només és compatible amb la versió prefixada ::-moz-selection. Serà sense prefix en {{bug(509958)}}.

diff --git a/files/ca/web/css/at-rule/index.html b/files/ca/web/css/at-rule/index.html new file mode 100644 index 0000000000..17bb9c3288 --- /dev/null +++ b/files/ca/web/css/at-rule/index.html @@ -0,0 +1,77 @@ +--- +title: At-rule +slug: Web/CSS/At-rule +tags: + - At-rule + - CSS + - Reference +translation_of: Web/CSS/At-rule +--- +
{{cssref}}
+ +

Una regla at (at-rule) es una declaració CSS que comença amb un signe, '@' (U+0040 COMMERCIAL AT), seguit d'un identificador i inclou tot fins al següent punt i coma, ';' (U+003B SEMICOLON), o el següent bloc bloc CSS , el que succeeixi primer.

+ +

Hi ha diverses regles at (at-rules), designades pels seus identificadors, cadascuna amb una sintaxi diferent:

+ + + +

Regles del grup condicional

+ +

Igual que els valors de les propietats, cada regla té una sintaxi diferent. No obstant això, alguns d'ells poden agrupar-se en una categoria especial anomenada regles de grup condicional. Aquests declaracions comparteixen una sintaxi comuna i cadascun d'ells pot incloure declaracions niades, ja siguin conjunts de regles o regles at niades. A més, tots transmeten un significat semàntic comú: tots vinculen algun tipus de condició que, en qualsevol moment, s'avalua com a veritable o fals. Si la condició s'avalua com a veritable, s'aplicaran totes les instruccions del grup

+ +

Les regles de grup condicional es defineixen Condicionals CSS Nivell 3 i son:

+ + + +

Atès que cada grup condicional també pot contenir declaracions niades, pot haver-hi una quantitat no especificada de niaments.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Definició inicial
{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}{{Spec2('Compat')}}Estandaritza @-webkit-keyframes.
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/box-sizing/index.html b/files/ca/web/css/box-sizing/index.html new file mode 100644 index 0000000000..33d55a232a --- /dev/null +++ b/files/ca/web/css/box-sizing/index.html @@ -0,0 +1,287 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/box-sizing +--- +
{{CSSRef}}
+ +

La propietat CSS box-sizing s'utilitza per modificar el model de caixa CSS predeterminat usat per calcular l'amplada i l'alçada dels elements.

+ +
/* Keyword values */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Global values */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+
+ +

En CSS, de manera predeterminada, l'amplada i l'alçada que s'assigna a un element només s'aplica a la caixa de contingut de l'element. Si l'element té qualsevol vora o farcit, aquest s'afegeix a l'amplada i alçada per arribar a la grandària de la caixa que es representa en la pantalla. Això significa que quan fixeu l'amplada i l'alçada, heu d'ajustar el valor que dóna per permetre qualsevol vora o farcit que pugui ser afegit. Això és especialment difícil quan s'implementa un disseny sensible.

+ +

La propietat box-sizing es pot utilitzar per ajustar aquest comportament:

+ + + +

Alguns experts recomanen que els desenvolupadors web considerin aplicar rutinariament box-sizing: border-box a tots els elements.

+ +
+ + + + +

{{EmbedLiveSample("box-sizing", 1200, 340, "", "", "example-outcome-frame")}}

+
+ +

L'exemple anterior mostra tres escenaris. En cada escenari hi ha un DIV pare (amb una vora taronja) que conté un DIV fill. El fill té fixat un width: 100%  i un fons blau pàl·lid.

+ + + +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat box-sizing s'especifica com una paraula clau única seleccionada de la llista de valors a continuació.

+ +

Valors

+ +
+
content-box
+
Aquest és el valor inicial i predeterminat especificat per l'estàndard CSS. Les propietats {{Cssxref("width")}} i {{Cssxref("height")}} es mesuren incloent només el contingut, però no el farciment, la vora o el marge. Per exemple, si establiu .box {width: 350px;}, apliqueu {border: 10px solid black;} , llavors el resultat representat és una caixa de width: 370px.
+
Aquí les dimensions de l'element es calculen com: amplària = amplària del contingut, i alçada = alçada del contingut (excloent els valors de vora i farciment).
+
border-box
+
Les propietats {{Cssxref("width")}} i {{Cssxref("height")}} inclouen el contingut, el farciment i la vora, però no el marge. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
+
Aquí les dimensions de l'element es calculen com: amplària = vora + farciment + amplària del contingut, i alçada = vora + farciment + alçada del contingut.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<div class="content-box">Content box</div>
+<br>
+<div class="border-box">Border box</div>
+ +

CSS

+ +
div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+}
+
+.border-box {
+  box-sizing: border-box;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Exemple','auto','300')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Definició inicial.
+ + + +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0 {{property_prefix("-webkit")}}[1]
+ 10.0		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		 +

{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("29.0")}}[2]

+ 		+

8.0[1]

+ 		7.03.0 (522){{property_prefix("-webkit")}}
+ 5.1[3]
padding-box{{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("29.0")}}
+ Eliminat a {{CompatGeckoDesktop("50.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic2.1{{property_prefix("-webkit")}}[1]
+ 4.0		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("29.0")}}[2]		9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
padding-box{{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("29.0")}}
+ Eliminat a {{CompatGeckoMobile("50.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] box-sizing no es respectat quan l'alçada es calcula a partir de {{domxref("window.getComputedStyle()")}}, en Internet Explorer (totes les versions), en Firefox anterior a la 23, i en Chrome. Edge no presenta el problema. Tingueu en compte que la propietat currentStyle retorna el valor correcte de height.

+ +

[2] A més del suport no prefixat, Gecko 44.0 {{geckoRelease("44.0")}} va afegir suport per a una versió prefixada -webkit de la propietat per raons de compatibilitat web darrere de la preferència layout.css.prefixes.webkit, per defecte a false. Des de Gecko 49.0 {{geckoRelease("49.0")}} la preferència per defecte és true.

+ +

[3] El prefix de proveïdor -webkit s'ha eliminat a 534.12.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html b/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html new file mode 100644 index 0000000000..9b312fc789 --- /dev/null +++ b/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html @@ -0,0 +1,89 @@ +--- +title: Dominar el col.lapse del marge +slug: Web/CSS/CSS_Box_Model/Dominar_el_col.lapse_del_marge +tags: + - CSS + - CSS Box Model + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

Els marges superior (top) i inferior (bottom) dels blocs, a vegades, es combinen (col·lapsats) en un únic marge, la grandària del qual és el més gran dels marges individuals (o només un d'ells, si són iguals), un comportament conegut com col·lapse del marge. Tingueu en compte que els marges dels elements flotants i absolutament posicionats mai es col·lapsen.

+ +

El col·lapse de marges es produeix en tres casos bàsics:

+ +
+
Germans adjacents
+
Els marges dels germans adjacents estan col·lapsats (excepte quan el darrer germà ha de ser eliminat dels flotadors anteriors).
+
Pare i primer/últim fill
+
Si no hi ha una vora, farcit, part en línia, context de format de blocs creat, o un espaia lliure per separar el {{cssxref("margin-top")}} d'un bloc del {{cssxref("margin-top")}} del seu primer bloc fill; o sense vora, farcit, contingut en línia, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} per separar el {{cssxref("margin-bottom")}} d'un bloc del {{cssxref("margin-bottom")}} del seu últim fill, llavors aquests marges es col·lapsen. El marge col·lapsat acaba fora del pare
+
Blocs buits
+
Si no hi ha vora, farcit, contingut en línia, {{cssxref("height")}} o {{cssxref("min-height")}} per separar un bloc {{cssxref("margin-top")}} del seu {{cssxref("margin-bottom")}}, llavors els marges superior i inferior es col·lapsen.
+
+ +

Algunes coses a destacar:

+ + + +

Exemples

+ +

HTML

+ +
<p>The bottom margin of this paragraph is collapsed …</p>
+<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
+
+<div>This parent element contains two paragraphs!
+  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
+  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
+</div>
+
+<p>I am <code>2rem</code> below the element above.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Examples', 'auto', 350)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Definició inicial.
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/css_box_model/index.html b/files/ca/web/css/css_box_model/index.html new file mode 100644 index 0000000000..dc3adb0cd0 --- /dev/null +++ b/files/ca/web/css/css_box_model/index.html @@ -0,0 +1,163 @@ +--- +title: Model de Caixa CSS +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - Overview + - Reference +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

Model de Caixa CSS és un mòdul de CSS que defineix les caixes rectangulars — incloent el seu farciment i marge —que es generen per als elements i que es defineixen segons el model de format visual.

+ +

Referència

+ +

Propietats

+ +

Propietats que controlen el flux de contingut en una caixa

+ +
+ +
+ +

Propietats que controlen la mida en una caixa

+ +
+ +
+ +

Propietats que controlen els marges en una caixa

+ +
+ +
+ +

Propietats que controlen els farciments en una caixa

+ +
+ +
+ +

Altres propietats

+ +
+ +
+ +

Guies

+ +
+
Introducció al model de caixa CSS
+
Explica un dels conceptes fonamentals de CSS: el model de caixa. Aquest model defineix com CSS estableix elements, incloent-hi les àrees de contingut, farcit, vora i marge.
+
Dominar el col.lapse del marge
+
De vegades, dos marges adjacents es col·loquen en un. En aquest article es descriuen les regles que regeixen quan i per què passa això i com controlar-lo.
+
Model de format visual
+
Explica el model de format visual.
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Definició inicial
+ +

Compatibilitat dels navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git "a/files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" "b/files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" new file mode 100644 index 0000000000..bfb613ed6c --- /dev/null +++ "b/files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" @@ -0,0 +1,67 @@ +--- +title: Introducció al model de caixa CSS +slug: Web/CSS/CSS_Box_Model/Introducció_al_model_de_caixa_CSS +tags: + - CSS + - CSS Box Model + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +

Quan es dissenya un document, el motor d'interpretació del navegador representa cada element com una caixa rectangular d'acord amb el model de caixa CSS estàndard. CSS determina la grandària, la posició i les propietats (color, fons, grandària de la vora, etc.) d'aquests caixes.

+ +

Cada caixa es compon de quatre parts (o àrees), definides per les seves respectives vores: la vora del contingut, la vora del farciment, la vora de la vora i la vora del marge.

+ +

CSS Box model

+ +

L'àrea de contingut, limitada per la vora del contingut, conté el contingut "real" de l'element, com ara text, una imatge o un reproductor de vídeo. Les seves dimensions són l'amplada del contingut (o l'amplada de la caixa de contingut) i l'alçada del contingut (o l'alçada de la caixa de contingut). Sovint té un color de fons o una imatge de fons.

+ +

Si la propietat {{cssxref("box-sizing")}} s'estableix a content-box (predeterminat), la grandària de l'àrea de contingut es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.

+ +

L'àrea de farcit, delimitada per la vora de farcit, estén l'àrea de contingut per incloure el farciment de l'element. Les seves dimensions són l'amplada de la caixa de farcit i l'alçada de la caixa de farcit. Quan l'àrea de contingut té un fons, s'estén en el farcit.

+ +

El gruix del farciment està determinat pel {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} i les propietats abreujades de {{cssxref("padding")}}.

+ +

L'àrea de vora, delimitada per la vora de la vora, estén l'àrea de farciment per incloure les vores de l'element. Les seves dimensions són l'amplada de la caixa de vora i l'alçada de la caixa de vora.

+ +

El gruix de les vores està determinat per les propietats {{cssxref("border-width")}} i les propietats abreujades {{cssxref("border")}}. Si la propietat {{cssxref("box-sizing")}} s'estableix a border-box, la grandària de l'àrea de la vora es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.

+ +

L'àrea de marge, delimitada per la vora del marge, estén l'àrea de la vora per incloure una àrea buida utilitzada per separar l'element dels seus veïns. Les seves dimensions són l'amplada de la caixa de marge i l'alçada de la caixa de marge.

+ +

La grandària de l'àrea de marge està determinada pel {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} i les propietats abreujades {{cssxref("margin")}}. Quan es produeix el col.lapse del marge, l'àrea de marge no està clarament definida, ja que els marges es comparteixen entre les caixes.

+ +

Finalment, tingueu en compte que, per als elements en línia no reemplaçats, la quantitat d'espai ocupat (la contribució a l'alçada de la línia) està determinat per la propietat {{cssxref('line-height')}} encara que les vores i el farciment encara es mostran al voltant del contingut.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Encara que formulat amb més precisió, no hi ha canvi pràctic.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definició inicial.
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/css_flexible_box_layout/index.html b/files/ca/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..50a0d76329 --- /dev/null +++ b/files/ca/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,111 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +

{{CSSRef}}

+ +

CSS Flexible is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

Guides

+ +
+
Using CSS flexible boxes
+
Step-by-step tutorial about how to build layouts using this feature.
+
Using flexbox to lay out Web applications
+
Tutorial explaining how to use flexbox in the specific context of Web applications.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("20.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}}
+ 11.0		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

 

diff --git a/files/ca/web/css/height/index.html b/files/ca/web/css/height/index.html new file mode 100644 index 0000000000..062d09c1fb --- /dev/null +++ b/files/ca/web/css/height/index.html @@ -0,0 +1,236 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/height +--- +
{{CSSRef}}
+ +

La propietat CSS height especifica l'alçada d'un element. Per defecte, la propietat defineix l'alçada de l'àrea de contingut. Si {{cssxref("box-sizing")}} s'estableix a border-box, aquest determina l'alçada de l'àrea de vora.

+ +
/* Keyword value */
+height: auto;
+
+/* <length> values */
+height: 120px;
+height: 10em;
+
+/* <percentage> value */
+height: 75%;
+
+/* Global values */
+height: inherit;
+height: initial;
+height: unset;
+
+ +

Les propietats {{cssxref("min-height")}} i {{cssxref("max-height")}} anul·la {{Cssxref("height")}}.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
Defineix l'alçada com un valor absolut.
+
{{cssxref("<percentage>")}}
+
Defineix l'alçada com un percentatge de l'alçada del bloc contenidor.
+
border-box {{experimental_inline}}
+
Si està present, s'aplica abans {{cssxref("<length>")}} o {{cssxref("<percentage>")}} a la caixa de vora de l'element.
+
content-box {{experimental_inline}}
+
Si està present, s'aplica abans {{cssxref("<length>")}} o {{cssxref("<percentage>")}} a la caixa de contingut de l'element.
+
auto
+
El navegador calcularà i seleccionarà una alçada per a l'element especificat .
+
fill {{experimental_inline}}
+
Utilitzeu la grandària fill-available en línia o la grandària fill-available del bloc, segons correspongui a la modalitat d'escriptura.
+
max-content {{experimental_inline}}
+
L'alçada preferida intrínseca.
+
min-content {{experimental_inline}}
+
L'alçada mínima intrínseca.
+
available {{experimental_inline}}
+
L'alçada del bloc contenidor menys el marge vertical, la vora i el farciment.
+
fit-content {{experimental_inline}}
+
El més gran de: +
    +
  • l'alçada mínima intrínseca.
    • +
  • la menor de l'alçada intrínseca preferida i l'alçada disponible.
    • +
+
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<div id="red">
+  <span>I'm 50 pixels tall.</span>
+</div>
+<div id="green">
+  <span>I'm 25 pixels tall.</span>
+</div>
+<div id="parent">
+  <div id="child">
+    <span>I'm half the height of my parent.</span>
+  </div>
+</div>
+
+ +

CSS

+ +
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+
+ +

{{EmbedLiveSample('Example')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}{{Spec2('CSS3 Box')}}S'han afegit les paraules clau max-content, min-content, available, fit-content, border-box, content-box
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}Mostra height com a animable.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Afegeix suport per als valors {{cssxref("<length>")}} i especifica en quin element s'aplica.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Definició inicial
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Afegeix noves paraules clau de grandària per width i height.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}4.07.01.0
fill, fit-content, min-content, max-content{{CompatChrome(46.0)}}{{CompatUnknown}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}6.06.01.0{{CompatVersionUnknown}}
fill, fit-content, min-content, max-content{{CompatUnknown}}{{CompatChrome(46.0)}}{{CompatUnknown}}    {{CompatChrome(46.0)}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/index.html b/files/ca/web/css/index.html new file mode 100644 index 0000000000..89ff6655ca --- /dev/null +++ b/files/ca/web/css/index.html @@ -0,0 +1,65 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Landing + - Layout + - Reference + - 'l10n:priority' +translation_of: Web/CSS +--- +

Fulles d'estil en cascada (CSS) són un llenguatge de full d'estil (stylsheet) utilitzat per descriure la presentació d'un document escrit en HTML o XML (incloent dialectes de XML com SVG o XHTML). CSS descriu com els elements han de ser presentats a la pantalla, en paper, en la parla, o en altres mitjans de comunicació.

+ +

CSS és un dels idiomes principals de la web oberta i té una especificació en W3C estandarditzada. Desenvolupat en nivells, CSS1 ja està obsoleta, CSS2.1 és una recomanació i CSS3, ara dividit en mòduls més petits, està progressant en el camí de la normalització.

+ +
+ + +
+
+

Documentació i tutorials

+ +
+
CSS conceptes calu
+
Descriu la sintaxi i les formes del llenguatge i introdueix els fonaments com specificity i inheritance, la box model i margin collapsing, stacking i contextos de block-formatting , o la initial, computed, used i els valors reals. Les entitats com CSS shorthand properties també es defineixen.
+
CSS guia per a desenvolupadors
+
Articles per ajudar a aprendre de tot, des dels conceptes bàsics per donar estil a HTML a diverses tècniques CSS per fer brillar el seu contingut.
+
CSS preguntes comuns
+
Les respostes a preguntes comuns sobre CSS.
+
+
+ +
+

Eines per al desenvolupament de CSS

+ + +
+
+
+ +

Veure

+ + diff --git a/files/ca/web/css/margin-bottom/index.html b/files/ca/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..7704f229b4 --- /dev/null +++ b/files/ca/web/css/margin-bottom/index.html @@ -0,0 +1,192 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-bottom +--- +
{{CSSRef}}
+ +

La propietat CSS margin-bottom estableix l'àrea de marge a la part inferior d'un element. Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.

+ +
/* <length> values */
+margin-bottom: 10px;  /* An absolute length */
+margin-bottom: 1em;   /* relative to the text size */
+margin-bottom: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-bottom: auto;
+
+/* Global values */
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+
+ +

The effect of the CSS margin-bottom property on the element box

+ +

Aquesta propietat no té cap efecte sobre els elements en línia no reemplaçats, com ara {{HTMLElement("tt")}} o {{HTMLElement("span")}}.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat margin-bottom és especificada amb la paraula clau auto, o un <length>, o un <percentage>. El seu valor pot ser positiu, zero o negatiu.

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
La grandària del marge com a valor fix.
+
{{cssxref("<percentage>")}}
+
La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.
+
auto
+
El navegador selecciona un valor adequat per utilitzar. Veure {{cssxref("margin")}}.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<div class="container">
+<div class="box0">Box 0</div>
+<div class="box1">Box 1</div>
+<div class="box2">Box one's negative margin pulls me up</div>
+</div>
+ +

CSS

+ +

CSS per divs per establir margin-bottom i height

+ +
.box0 {
+    margin-bottom:1em;
+    height:3em;
+}
+.box1 {
+    margin-bottom:-1.5em;
+    height:4em;
+}
+.box2 {
+    border:1px dashed black;
+    border-width:1px 0;
+    margin-bottom:2em;
+}
+
+
+ +

Algunes definicions per a contenidors i divs permeten veure de manera més clara els efectes dels marges.

+ +
.container {
+    background-color:orange;
+    width:320px;
+    border:1px solid black;
+}
+div {
+    width:320px;
+    background-color:gold;
+}
+ +

{{ EmbedLiveSample('Example',350,200) }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComenteri
{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS3 Box')}}No hi ha canvis significatius
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}{{Spec2('CSS3 Transitions')}}Defineix margin-bottom com animable.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}{{Spec2('CSS2.1')}}Elimina el seu efecte en elements en línia.
{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS1')}}Definició inicial
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
auto value1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/ca/web/css/margin-left/index.html b/files/ca/web/css/margin-left/index.html new file mode 100644 index 0000000000..388c6f9a4c --- /dev/null +++ b/files/ca/web/css/margin-left/index.html @@ -0,0 +1,219 @@ +--- +title: margin-left +slug: Web/CSS/margin-left +tags: + - CSS + - CSS Property + - Layout + - Reference +translation_of: Web/CSS/margin-left +--- +
{{CSSRef()}}
+ +

La propietat CSS margin-left estableix l'àrea de marge en el costat esquerre d'un element. Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.

+ +
/* <length> values */
+margin-left: 10px;  /* An absolute length */
+margin-left: 1em;   /* relative to the text size */
+margin-left: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-left: auto;
+
+/* Global values */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+
+ +

Area on which CSS margin-left apply

+ +

Els marges verticals de dues caixes adjacents es poden fusionar. Això es diu col.lapse de marge.

+ +

En els casos excepcionals en què l'amplada està massa restringida (és a dir, quan es defineixen tots els width, margin-left, border, padding, l'àrea de contingut i margin-right), s'ignora el margin-left i tindrà el mateix valor calculat que si s'especifica el valor auto.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat margin-left és especificada amb la paraula clau auto, o un <length>, o un <percentage>. El seu valor pot ser positiu, zero o negatiu.

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
La grandària del marge com a valor fix.
+
{{cssxref("<percentage>")}}
+
La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.
+
auto
+
El marge esquerre rep una part de l'espai horitzontal no utilitzat, tal com es determina principalment pel mode de disseny que s'utilitza. Si els valors de margin-left i margin-right són auto, l'espai calculat es distribueix de manera uniforme. Aquesta taula resumeix els diferents casos: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valor de {{cssxref("display")}}Valor de {{cssxref("float")}}Valor de {{cssxref("position")}}Valor calculat d'autoComment
inline, inline-block, inline-tablequalsevolstatic o relative0Mode de disseny en línia
block, inline, inline-block, block, table, inline-table, list-item, table-captionqualsevolstatic o relative0, excepte si tant margin-left i margin-right s'estableixen en auto. En aquest cas, s'estableix el valor que centra l'element dins del seu pare.Mode de disseny de block
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft o rightstatic o relative0Mode de disseny de block (element flotant)
qualsevol table-*, excepte table-captionqualsevolqualsevol0Els elements interns de table-* no tenen marges, utilitzeu {{ cssxref("border-spacing") }} en el seu lloc
qualsevol, excepte flex, inline-flex, o table-*qualsevolfixed o absolute0, excepte si tant margin-left i margin-right s'estableixen en auto. En aquest cas, s'estableix el valor que centra l'àrea de vora dins de width disponible, si es fixa.Mode de disseny absolutament posicionat
flex, inline-flexqualsevolqualsevol0, excepte si hi ha algun espai lliure horitzontal positiu. En aquest cas, es distribueix uniformement a tots els marges auto horitzontals.Mode de disseny Flexbox
+
+
+ +

Sintaxi formal

+ +
{{csssyntax()}}
+ +

Exemples

+ +
.content { margin-left: 5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}}{{Spec2('CSS3 Box')}}No hi ha cap canvi significatiu des de CSS 2.1.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}{{Spec2('CSS3 Transitions')}}Defineix margin-left com animable.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}{{Spec2('CSS3 Flexbox')}}Defineix el comportament de margin-left en elements flex.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}{{Spec2('CSS2.1')}}Igual que a CSS1, però elimina el seu efecte en els elements en línia
{{SpecName('CSS1', '#margin-left', 'margin-left')}}{{Spec2('CSS1')}}Definició inicial.
+ +

Navegadors compatibles

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
auto value1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/ca/web/css/margin-right/index.html b/files/ca/web/css/margin-right/index.html new file mode 100644 index 0000000000..eada94a607 --- /dev/null +++ b/files/ca/web/css/margin-right/index.html @@ -0,0 +1,218 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-right +--- +
{{CSSRef}}
+ +

La propietat CSS margin-right estableix l'àrea de marge en el costat dret d'un element . Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.

+ +
/* <length> values */
+margin-right: 20px;  /* An absolute length */
+margin-right: 1em;   /* relative to the text size */
+margin-right: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-right: auto;
+
+/* Global values */
+margin-right: inherit;
+margin-right: initial;
+margin-right: unset;
+
+ +

The effect of the CSS margin-right property on the element box

+ +

Els marges verticals de dues caixes adjacents es poden fusionar. Això es diu col.lapse de marge.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat margin-right és especificada amb la paraula clau auto, o un <length>, o un <percentage>. El seu valor pot ser positiu, zero o negatiu.

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
La grandària del marge com a valor fix.
+
{{cssxref("<percentage>")}}
+
La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.
+
auto
+
El marge esquerre rep una part de l'espai horitzontal no utilitzat, tal com es determina principalment pel mode de disseny que s'utilitza. Si els valors de margin-left i margin-right sòn auto, l'espai calculat es distribueix de manera uniforme. Aquesta taula resumeix els diferents casos: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valor de {{cssxref("display")}}Valor de {{cssxref("float")}}Valor de {{cssxref("position")}}Valor calculat d'autoComment
inline, inline-block, inline-tablequalsevolstatic o relative0Mode de disseny en línia
block, inline, inline-block, block, table, inline-table, list-item, table-captionqualsevolstatic o relative0, excepte si tant margin-left i margin-right s'estableixen en auto. En aquest cas, s'estableix el valor que centra l'element dins del seu pare.Mode de disseny de block
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft o rightstatic o relative0Mode de disseny de block (element flotant)
qualsevol table-*, excepte table-captionqualsevolqualsevol0Els elements interns de table-* no tenen marges, utilitzeu {{ cssxref("border-spacing") }} en el seu lloc
qualsevol , excepte flex, inline-flex, or table-*qualsevolfixed o absolute0, excepte si tant margin-left i margin-right s'estableixen en auto. En aquest cas, s'estableix el valor que centra l'àrea de vora dins de width disponible, si es fixa.Mode de disseny absolutament posicionat
flex, inline-flexqualsevolqualsevol0, excepte si hi ha algun espai lliure horitzontal positiu. En aquest cas, es distribueix uniformement a tots els marges auto horitzontals.Mode de disseny Flexbox
+
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
.content { margin-right: 5%; }
+.sidebox { margin-right: 10px; }
+.logo    { margin-right: -5px; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#the-margin', 'margin-right') }}{{ Spec2('CSS3 Box') }}No hi ha cap canvi significatiu
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}{{ Spec2('CSS3 Transitions') }}Defineix margin-right com animable.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}{{ Spec2('CSS3 Flexbox') }}Defineix el comportament de margin-right en elements flex.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}{{ Spec2('CSS2.1') }}Elimina el seu efecte en els elements en línia
{{ SpecName('CSS1', '#margin-right', 'margin-right') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
+

valor auto

+ 		1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}6.06.01.0
+
diff --git a/files/ca/web/css/margin-top/index.html b/files/ca/web/css/margin-top/index.html new file mode 100644 index 0000000000..9642251af6 --- /dev/null +++ b/files/ca/web/css/margin-top/index.html @@ -0,0 +1,156 @@ +--- +title: margin-top +slug: Web/CSS/margin-top +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-top +--- +
{{CSSRef}}
+ +

La propietat CSS margin-top estableix l'àrea de marge en la part superior d'un element . Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.

+ +
/* <length> values */
+margin-top: 10px;  /* An absolute length */
+margin-top: 1em;   /* relative to the text size */
+margin-top: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-top: auto;
+
+/* Global values */
+margin-top: inherit;
+margin-top: initial;
+margin-top: unset;
+
+ +

The effect of the CSS margin-top property on the element box

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat margin-top és especificada amb la paraula clau auto, o un <length>, o un <percentage>. El seu valor pot ser positiu, zero o negatiu.

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
La grandària del marge com a valor fix.
+
{{cssxref("<percentage>")}}
+
La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.
+
auto
+
El navegador selecciona un valor adequat per utilitzar. Veure {{cssxref("margin")}}.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
.content { margin-top:   5%; }
+.sidebox { margin-top: 10px; }
+.logo    { margin-top: -5px; }
+#footer  { margin-top:  1em; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentsri
{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}{{Spec2('CSS3 Box')}}No hi ha cap canvi significatiu
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}{{Spec2('CSS3 Transitions')}}Defineix margin-top com animable.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}{{Spec2('CSS2.1')}}Elimina el seu efecte en els elements en línia
{{SpecName('CSS1', '#margin-top', 'margin-top')}}{{Spec2('CSS1')}}Definició inicial.
+ +

Navegadors compatibles

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+

valor auto

+ 		1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/ca/web/css/margin-trim/index.html b/files/ca/web/css/margin-trim/index.html new file mode 100644 index 0000000000..fca1c48772 --- /dev/null +++ b/files/ca/web/css/margin-trim/index.html @@ -0,0 +1,96 @@ +--- +title: margin-trim +slug: Web/CSS/margin-trim +translation_of: Web/CSS/margin-trim +--- +

{{CSSRef}}

+ +

La propietat margin-trim permet al contenidor retallar els marges dels seus fills on s'adhereixen a les vores del contenidor.

+ +

Sintaxi

+ +
+
none
+
Els marges no són retallats pel contenidor.
+
in-flow
+
+

Per a les caixes in-flow contingudes per aquesta caixa, els marges block-axis adjacents a les vores de la caixa estan truncats a zero.

+ +

També trunca qualsevol marge col·lapsat amb aquest marge.

+
+
all
+
Retalla els marges de les caixes in-flow i floats, els marges dels quals coincideixen amb la vora del contingut del contenidor.
+
+ +

Definició formal

+ +

{{cssinfo}}

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Ús bàsic

+ +

Una vegada que es doni suport a aquesta propietat, probablement funcionarà així::

+ +

Quan tinguem un contenidor amb alguns fills en línia i vulguem posar un marge entre cada fill, però no interferir amb l'espaiat al final de la fila, podem fer una cosa així:

+ +
article {
+  background-color: red;
+  margin: 20px;
+  padding: 20px;
+  display: inline-block;
+}
+
+article > span {
+  background-color: black;
+  color: white;
+  text-align: center;
+  padding: 10px;
+  margin-right: 20px;
+}
+ +

El problema aquí és que acabaríem amb 20px massa espaiat a la dreta de la fila, així que tal vegada fariem això per a arreglar-ho:

+ +
span:last-child {
+  margin-right: 0;
+}
+ +

És un dolor haver d'escriure una altra norma per a aconseguir-lo, i tampoc és molt flexible. En lloc d'això, margin-trim podria arreglar-ho:

+ +
 article {
+  margin-trim: in-flow;
+  ...
+}
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacionsEstat
{{SpecName('CSS4 Box', '#margin-trim', 'margin-trim')}}{{Spec2('CSS4 Box')}}
+ +

Compatibilitat amb el navegador

+ + + +

{{Compat("css.properties.margin-trim")}}

+ +

Veure també

+ + diff --git a/files/ca/web/css/margin/index.html b/files/ca/web/css/margin/index.html new file mode 100644 index 0000000000..514a06cd6a --- /dev/null +++ b/files/ca/web/css/margin/index.html @@ -0,0 +1,302 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

La propietat CSS margin estableix l'àrea del marge en els quatre costats d'un element. És una abreviatura que estableix tots els marges individuals alhora: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} i {{cssxref("margin-left")}}.

+ +
/* Apply to all four sides */
+margin: 1em;
+
+/* vertical | horizontal */
+margin: 5% auto;
+
+/* top | horizontal | bottom */
+margin: 1em auto 2em;
+
+/* top | right | bottom | left */
+margin: 2px 1em 0 auto;
+
+/* Global values */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ + + +

{{EmbedLiveSample("margin", "100%", 400, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat margin es pot especificar usant un, dos, tres o quatre valors. Cada valor és un <length>, un <percentage>, o la paraula clau auto. Cada valor pot ser positiu, zero o negatiu.

+ + + +

Valors

+ +
+
{{cssxref("length")}}
+
La grandària del marge com a valor fix.
+
{{cssxref("percentage")}}
+
La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.
+
auto
+
El navegador selecciona un marge adequat per utilitzar-lo. Per exemple, en alguns casos aquest valor es pot utilitzar per centrar un element.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple senzill

+ +

HTML

+ +
<div class="center">This element is centered.</div>
+
+<div class="outside">This element is positioned outside of its container.</div>
+ +

CSS

+ +
.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
+}
+
+.outside {
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Simple_example','100%',120) }}

+ +

Més exemples

+ +
margin: 5%;                 /* all sides: 5% margin */
+
+margin: 10px;               /* all sides: 10px margin */
+
+margin: 1.6em 20px;         /* top and bottom: 1.6em margin */
+                            /* left and right: 20px margin  */
+
+margin: 10px 3% 1em;        /* top:            10px margin */
+                            /* left and right: 3% margin   */
+                            /* bottom:         1em margin  */
+
+margin: 10px 3px 30px 5px;  /* top:    10px margin */
+                            /* right:  3px margin  */
+                            /* bottom: 30px margin */
+                            /* left:   5px margin  */
+
+margin: 2em auto;           /* top and bottom: 2em margin   */
+                            /* box is horizontally centered */
+
+margin: auto;               /* top and bottom: 0 margin     */
+                            /* box is horizontally centered */
+
+ +

Notes

+ +

Centrat horitzontal

+ +

Per centrar alguna cosa horitzontalment en els navegadors moderns, podeu utilitzar display: flex; justify-content: center; .

+ +

Tanmateix, en navegadors antics com IE8-9 que no admeten el disseny de flexbox, aquests no estan disponibles. Per centrar un element dins del seu pare, utilitzeu margin: 0 auto; .

+ +

Col.lapse del marge

+ +

Els marges superior i inferior d'elements solen col·lapsar-se en un únic marge igual al major dels dos marges. Consulteu Dominar el col.lapse del marge per obtenir més informació.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}No hi ha canvis significatius .
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}Defineix margin com animable.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Elimina el seu efecte en elements en línia .
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}Definició iniciaI.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{CompatUnknown}}{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/max-height/index.html b/files/ca/web/css/max-height/index.html new file mode 100644 index 0000000000..9ae113b699 --- /dev/null +++ b/files/ca/web/css/max-height/index.html @@ -0,0 +1,223 @@ +--- +title: max-height +slug: Web/CSS/max-height +tags: + - CSS + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/max-height +--- +
{{CSSRef}}
+ +

La propietat CSS max-height estableix l'alçada màxima d'un element. Impedeix que el valor utilitzat per la propietat {{ Cssxref("height") }} sigui més gran que el valor especificat per max-height.

+ +
/* <length> value */
+max-height: 3.5em;
+
+/* <percentage> value */
+max-height: 75%;
+
+/* Keyword values */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content;
+max-height: fill-available;
+
+/* Global values */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+
+ +

{{ Cssxref("max-height") }} anul·la {{cssxref("height")}}, però {{ Cssxref("min-height") }} anul·la {{ Cssxref("max-height") }}.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
L'alçada màxima, expressada com {{cssxref("<length>")}}.
+
{{cssxref("<percentage>")}}
+
L'alçada màxima, expressada com {{cssxref("<percentage>")}} de l'alçada del bloc contenidor. Si l'alçada del bloc contenidor no s'especifica explícitament, el valor del percentatge es tractarà com a zero.
+
+ +

Valors de paraules clau

+ +
+
none
+
L'alçada no té un valor màxim.
+
max-content{{experimental_inline()}}
+
L'alçada preferida intrínseca.
+
min-content{{experimental_inline()}}
+
L'alçada mínima intrínseca.
+
fill-available{{experimental_inline()}}
+
L'alçada del bloc contenidor menys el marge vertical, la vora i el farcit. (Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau, available.)
+
fit-content{{experimental_inline()}}
+
El mateix que max-content.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
table { max-height: 75%; }
+
+form { max-height: none; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height') }}{{ Spec2('CSS3 Sizing') }}Afegeix les paraules clau max-content, min-content, fit-content i fill-available. (Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació).
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-height') }}{{ Spec2('CSS3 Transitions') }}Defineix max-height com animable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ +

Navegador compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}7.07.01.0
s'aplica a <table>[1]{{ CompatNo() }}{{CompatNo}}{{CompatVersionUnknown()}}{{ CompatNo() }}{{CompatVersionUnknown()}}{{ CompatNo() }}
max-content, min-content i fit-content {{ experimental_inline() }}{{ CompatNo() }} [3]{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}} [2]{{ CompatNo() }}{{ CompatNo() }}9[3](bug)
fill-available {{ experimental_inline() }}{{ CompatNo() }}{{CompatNo}}{{ CompatNo() }} {{ bug(527285) }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
s'aplica a <table>[1]{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
max-content, min-content i fit-content {{ experimental_inline() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}9[3](bug)
fill-available {{ experimental_inline() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] CSS 2.1 deixa explícitament indefinit el comportament de max-height amb {{ HTMLElement("table") }}. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.

+ +

[2] Gecko implementa experimentalment les definicions donades en CSS3 Basic Box. Aquesta defineix available i no fill-available. També la definició de fit-content és més simple que en CSS3 Sizing.

+ +

[3] WebKit implementa una proposta anterior per establir l'alçada a una alçada intrínseca: les paraules clau són intrinsic, en comptes de max-content i min-intrinsic, en comptes de min-content. No hi ha equivalent per fill-available o fit-content.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/max-width/index.html b/files/ca/web/css/max-width/index.html new file mode 100644 index 0000000000..445a4e76ff --- /dev/null +++ b/files/ca/web/css/max-width/index.html @@ -0,0 +1,234 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - CSS + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/max-width +--- +
{{CSSRef}}
+ +

La propietat CSS max-width estableix l'amplada màxima d'un element . Impedeix que el valor utilitzat per la propietat {{ Cssxref("width") }} sigui més gran que el valor especificat per max-width.

+ +
/* <length> value */
+max-width: 3.5em;
+
+/* <percentage> value */
+max-width: 75%;
+
+/* Keyword values */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* Global values */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+
+ +

{{ Cssxref("max-width") }} anul·la {{cssxref("width")}}, però {{ Cssxref("min-width") }} anul·la {{ Cssxref("max-width") }}.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
L'amplada màxima, expressada com {{cssxref("<length>")}}.
+
{{cssxref("<percentage>")}}
+
L'amplada màxima, expressada com {{cssxref("<percentage>")}} de l'amplada del bloc contenidor.
+
+ +

Valors de paraules clau

+ +
+
none
+
L'amplada no té un valor màxim.
+
max-content{{experimental_inline()}}
+
L'amplada preferida intrínseca.
+
min-content{{experimental_inline()}}
+
L'amplada mínima intrínseca.
+
fill-available{{experimental_inline()}}
+
L'amplada del bloc contenidor menys el marge horitzontal, la vora i el farcit . ( Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau , available.)
+
fit-content{{experimental_inline()}}
+
El mateix que max-content.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

En aquest exemple, el "fill" tindrà 150 píxels d'amplada o l'amplada del "pare", el que sigui més petit:

+ +
+
<div id="parent">
+  <div id="child">
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  </div>
+</div>
+
+ +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+
+
+ +

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

+ +

El valor fit-content es pot utilitzar per establir l'amplada d'un element en funció de la grandària intrínseca que requereix el seu contingut:

+ +
+ + +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child  {
+  background: gold;
+  width: 100%;
+  max-width: -moz-fit-content;
+  max-width: -webkit-fit-content;
+}
+
+
+ +

{{EmbedLiveSample("fit-content-demo", 400, 100)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}{{ Spec2('CSS3 Sizing') }}Afegeix les paraules clau max-content, min-content, fit-content i fill-available. (Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació).
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}{{ Spec2('CSS3 Transitions') }}Defineix max-width com animable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}7.04.02.0.2 (416),
+ buggy before
s'aplica a <table>[1]{{ CompatNo() }}{{CompatNo}}{{CompatVersionUnknown()}}{{ CompatNo() }}{{CompatVersionUnknown()}}{{ CompatNo() }}
max-content, min-content, fit-content i fill-available {{ experimental_inline() }}{{ CompatNo() }} [3]{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}} [2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }} [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] CSS 2.1 deixa explícitament indefinit el comportament de max-width amb {{ HTMLElement("table") }}. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.

+ +

[2] Gecko implementa experimentalment les definicions donades en CSS3 Basic Box. Aquesta defineix available i no fill-available. També la definició de fit-content és més simple que en CSS3 Sizing .

+ +

[3] WebKit implementa una proposta anterior per establir l'alçada a una alçada intrínseca: les paraules clau són intrinsic, en comptes de max-content i min-intrinsic, en comptes de min-content No hi ha equivalent per fill-available o fit-content.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/min-height/index.html b/files/ca/web/css/min-height/index.html new file mode 100644 index 0000000000..10f4f67152 --- /dev/null +++ b/files/ca/web/css/min-height/index.html @@ -0,0 +1,211 @@ +--- +title: min-height +slug: Web/CSS/min-height +tags: + - CSS + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/min-height +--- +
{{CSSRef}}
+ +

La propietat CSS min-height estableix l'alçada mínima d'un element . Impedeix que el valor utilitzat per la propietat {{ Cssxref("height") }} sigui més petit que el valor especificat per min-height.

+ +
/* <length> value */
+min-height: 3.5em;
+
+/* <percentage> value */
+min-height: 10%;
+
+/* Keyword values */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content;
+min-height: fill-available;
+
+/* Global values */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+
+ +

L'alçada de l'element s'ajusta al valor de min-height cada vegada que min-height és més gran que {{ Cssxref("max-height") }} o {{Cssxref("height")}}.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
L'alçada mínima, expressada com {{cssxref("<length>")}}. Els valors negatius fan que la declaració no sigui vàlida.
+
{{cssxref("<percentage>")}}
+
L'alçada mínima, expressada com {{cssxref("<percentage>")}} de l'alçada del bloc contenidor. Els valors negatius fan que la declaració no sigui vàlida.
+
+ +

Valors de paraules clau

+ +
+
auto
+
L'alçada mínima predeterminada per a elements flexibles, proporcionant un valor predeterminat més raonable que 0 per a altres dissenys.
+
+ +
+
max-content {{ experimental_inline() }}
+
L'alçada preferida intrínseca.
+
min-content {{ experimental_inline() }}
+
L'alçada mínima intrínseca.
+
fill-available{{ experimental_inline() }}
+
L'alçada del bloc contenidor menys el marge vertical, la vora i el farcit . ( Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau, available.)
+
fit-content {{ experimental_inline() }}
+
Segons CSS3 Box, aquest és un sinònim de min-content. CSS3 Sizing defineix un algoritme més complex, però cap navegador l'implementa, fins i tot de forma experimental.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
table { min-height: 75%; }
+
+form { min-height: 0; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height') }}{{ Spec2('CSS3 Sizing') }}Afegeix les paraules clau max-content, min-content, fit-content i fill-available. ( Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació )
{{ SpecName('CSS3 Flexbox', '#min-auto', 'min-height') }}{{ Spec2('CSS3 Flexbox') }}Afegeix la paraula clau auto i l'utilitza com a valor inicial.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-height') }}{{ Spec2('CSS3 Transitions') }}Defineix min-height com animable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1.9") }}7.0 [3]4.01.0
+ 2.0.2 (416) for positioned elements
s'aplica a <table>[1]{{ CompatNo() }}{{CompatNo}}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
max-content, min-content, fit-content i fill-available {{ experimental_inline() }}{{ CompatNo() }}{{CompatNo}}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}9
auto{{obsolete_inline(22)}}21.0{{CompatUnknown}}{{ CompatGeckoDesktop("16.0") }}{{ CompatNo() }}12.10{{ CompatNo() }}
auto com a valor incial{{obsolete_inline(22)}}21.0{{CompatUnknown}}{{ CompatGeckoDesktop("18.0") }}{{ CompatNo() }}12.10{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}9
+
+ +

[1] CSS 2.1 deixa explícitament indefinit el comportament de min-height amb {{ HTMLElement("table") }}. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.

+ +

[2] A causa de l'error ({{bug("307866")}}) Firefox no maneja min-height en elements amb display: table-*.

+ +

[3] A Internet Explorer 10-11 (però no 12+), una declaració min-height en un contenidor flex de direcció-columna no s'aplica als elements flex del contenidor. Consulteu Flexbug #3 per més informació.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/min-width/index.html b/files/ca/web/css/min-width/index.html new file mode 100644 index 0000000000..f0c3067728 --- /dev/null +++ b/files/ca/web/css/min-width/index.html @@ -0,0 +1,257 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/min-width +--- +
{{CSSRef}}
+ +

La propietat CSS min-width estableix l'amplada mínima d'un element. Impedeix que el valor utilitzat per la propietat {{ Cssxref("width") }} sigui més ampla que el valor especificat per min-width.

+ +
/* <length> value */
+min-width: 3.5em;
+
+/* <percentage> value */
+min-width: 10%;
+
+/* Keyword values */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content;
+min-width: fill-available;
+
+/* Global values */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+
+ +

L'amplada de l'element s'ajusta al valor de min-width  cada vegada que min-width és més gran que  {{ Cssxref("max-width") }} o {{Cssxref("width")}}.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
L'amplada mínima, expressada com {{cssxref("<length>")}}. Els valors negatius fan que la declaració no sigui vàlida .
+
{{cssxref("<percentage>")}}
+
L'amplada mínima, expressada com {{cssxref("<percentage>")}} de l'amplada del bloc contenidor. Els valors negatius fan que la declaració no sigui vàlida .
+
+ +

Valors de paraules clau

+ +
+
auto
+
L'amplada mínima predeterminada per a elements flexibles, proporcionant un valor predeterminat més raonable que 0 per a altres dissenys .
+
max-content {{ experimental_inline() }}
+
L'amplada preferida intrínseca.
+
min-content {{ experimental_inline() }}
+
L'amplada mínima intrínseca.
+
fill-available{{ experimental_inline() }}
+
L'amplada del bloc contenidor menys el marge horitzontal, la vora i el farcit. ( Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau, available).
+
fit-content {{ experimental_inline() }}
+
Definit com min(max-content, max(min-content, fill-available)).
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
table { min-width: 75%; }
+
+form { min-width: 0; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}{{ Spec2('CSS3 Sizing') }}Afegeix les paraules clau max-content, min-content, fit-content, and fill-available keywords. (Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació)
{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}{{ Spec2('CSS3 Flexbox') }}Afegeix la paraula clau auto keyword i l'utilitza com a valor inicial.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}{{ Spec2('CSS3 Transitions') }}Defineix min-width com animable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}1.0 (1.0)7.04.02.0.2 (416), buggy before
s'aplica a <table> [1]{{ CompatNo() }}{{CompatNo}}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
max-content, min-content, fit-content i fill-available {{ experimental_inline() }}24.0 {{property_prefix("-webkit")}} [3]{{CompatNo}}{{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }} [2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }} [3]
auto21.0 [4]{{CompatUnknown}}{{ CompatGeckoDesktop("16.0") }} [4]
+ Removed in {{ CompatGeckoDesktop("22.0") }}
+ Reintroduced in {{CompatGeckoDesktop("34.0")}} with the new behavior defined by the spec.		{{ CompatNo() }}12.10 [6]{{ CompatNo() }}
auto com a valor inicial{{obsolete_inline()}}21.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("18.0") }}
+ Removed in {{ CompatGeckoDesktop("22.0") }}		{{ CompatNo() }}12.10{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}[5]
s'aplica a <table>[1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
max-content, min-content, fit-content i fill-available {{ experimental_inline() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
auto{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
auto com a valor inicial{{obsolete_inline()}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] CSS 2.1 deixa explícitament indefinit el comportament de min-width amb {{ HTMLElement("table") }}. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.

+ +

[2] Gecko implementa experimentalment les definicions donades en CSS3 Basic Box. Aquesta defineix available i no fill-available. També la definició de fit-content és més simple que en CSS3 Sizing.

+ +

[3] WebKit també implementa una proposta anterior, la paraula clau intrinsic.

+ +

[4] Aquestes implementacions on s'implementa un comportament lleugerament més simple per a aquesta paraula clau: calcula min-content en elements flexibles, i computa a 0 en tota la resta.

+ +

[5] En alguns navegadors, a iOS, un element <button> en la seva configuració nativa (predeterminada) no respondrà a min-width. Aquest problema es deu als botons natius. Un <span> dins d'un botó natiu mostrarà el mateix problema, malgrat tenir definit "display:inline-block". Quan es fan canvis en altres paràmetres d'estil i el navegador es veu obligat a abandonar el botó natiu, la configuració min-width es veu afectada.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/overflow-x/index.html b/files/ca/web/css/overflow-x/index.html new file mode 100644 index 0000000000..28ed745f75 --- /dev/null +++ b/files/ca/web/css/overflow-x/index.html @@ -0,0 +1,192 @@ +--- +title: overflow-x +slug: Web/CSS/overflow-x +tags: + - CSS + - CSS Box Model + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/overflow-x +--- +
{{CSSRef}}
+ +

La propietat overflow-x especifica si s'ha de retallar el contingut, mostrar una barra de desplaçament o mostrar el contingut de desbordament d'un element de nivell de bloc, quan es desbordan les vores esquerra i dreta.

+ +
/* El contingut no es retallat */
+overflow-x: visible;
+
+/* El contingut es retallat, sense barres desplaçament */
+overflow-x: hidden;
+
+/* El contingut es retallat, amb barres desplaçament */
+overflow-x: scroll;
+
+/* Deixa que el navegador decideixi */
+overflow-x: auto;
+
+/* Valors globals */
+overflow-x: inherit;
+overflow-x: initial;
+overflow-x: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
visible
+
El contingut no es retalla i es pot mostrar fora de la caixa de contingut.
+
hidden
+
El contingut es retalla i no es proporcionen barres de desplaçament.
+
scroll
+
El contingut es retalla i els exploradors d'escriptori utilitzen barres de desplaçament, independentment que s'hagi retallat o no qualsevol contingut. Això evita qualsevol problema amb les barres de desplaçament que apareixen i desapareixen en un entorn dinàmic. Les impressores poden imprimir contingut desbordat.
+
auto
+
Depèn de l'agent d'usuari. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<ul>
+  <li><code>overflow-x:hidden</code> —  amaga el text fora de la caixa
+    <div id="div1">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:scroll</code> — afegeix sempre una barra de desplaçament
+    <div id="div2">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:visible</code> — mostra el text fora de la caixa, si és necessari
+    <div id="div3">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:auto</code> — a la majoria de navegadors, equivalent a <code>scroll</code>
+    <div id="div4">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+</ul>
+
+ +

CSS

+ +
#div1, #div2, #div3, #div4 {
+  border: 1px solid black;
+  width:  250px;
+  margin-bottom: 12px;
+}
+
+#div1 { overflow-x: hidden;}
+#div2 { overflow-x: scroll;}
+#div3 { overflow-x: visible;}
+#div4 { overflow-x: auto;}
+
+ +

Resultat

+ +
+

{{EmbedLiveSample("Examples", "100%", "270")}}

+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}}{{Spec2('CSS3 Overflow')}} 
{{SpecName('CSS3 Box', '#overflow-x', 'overflow-x')}}{{Spec2('CSS3 Box')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}5.0[1]9.53.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 8 va introduir -ms-overflow-x com sinònim de overflow-x. No utilitzeu el prefix -ms-.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/overflow-y/index.html b/files/ca/web/css/overflow-y/index.html new file mode 100644 index 0000000000..4426f507b4 --- /dev/null +++ b/files/ca/web/css/overflow-y/index.html @@ -0,0 +1,196 @@ +--- +title: overflow-y +slug: Web/CSS/overflow-y +tags: + - CSS + - CSS Box Model + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/overflow-y +--- +
{{CSSRef}}
+ +

La propietat overflow-y especifica si s'ha de retallar el contingut, mostrar una barra de desplaçament o mostrar el contingut de desbordament d'un element de nivell de bloc, quan es desbordan les vores superior i inferior.

+ +
/* El contingut no es retallat */
+overflow-y: visible;
+
+/* El contingut es retallat, sense barres desplaçament */
+overflow-y: hidden;
+
+/* El contingut es retallat, amb barres desplaçament */
+overflow-y: scroll;
+
+/* Deixa que el navegador decideixi */
+overflow-y: auto;
+
+/* Valors globals */
+overflow-y: inherit;
+overflow-y: initial;
+overflow-y: unset;
+
+ +
{{cssinfo}}
+ +

Sintaxi

+ +

Valors

+ +
+
visible
+
El contingut no es retalla i es pot mostrar fora de la caixa de contingut.
+
hidden
+
El contingut es retalla i no es proporcionen barres de desplaçament.
+
scroll
+
El contingut es retalla i els exploradors d'escriptori utilitzen barres de desplaçament, independentment que s'hagi retallat o no qualsevol contingut. Això evita qualsevol problema amb les barres de desplaçament que apareixen i desapareixen en un entorn dinàmic. Les impressores poden imprimir contingut desbordat.
+
auto
+
Depèn de l'agent d'usuari. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<ul>
+  <li><code>overflow-y:hidden</code> — amaga el text fora de la caixa
+  <div id="div1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:scroll</code> — afegeix sempre una barra de desplaçament
+  <div id="div2">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:visible</code> — mostra el text fora de la caixa, si és necessari
+  <div id="div3">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:auto</code> — a la majoria de navegadors, equivalent a <code>scroll</code>
+  <div id="div4">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
+
+ +

CSS

+ +
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-y: hidden; margin-bottom: 12px;}
+#div2 { overflow-y: scroll; margin-bottom: 12px;}
+#div3 { overflow-y: visible; margin-bottom: 120px;}
+#div4 { overflow-y: auto; margin-bottom: 120px;}
+
+ +

Resultat

+ +
+

{{EmbedLiveSample("Example", "100%", "780")}}

+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y') }}{{ Spec2('CSS3 Overflow') }} 
{{SpecName('CSS3 Box', '#overflow-y', 'overflow-y')}}{{Spec2('CSS3 Box')}}Definició inicial.
+ + + +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}5.0 [*]9.53.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[*] IE8 va introduir -ms-overflow-y com a sinònim de overflow-y. No utilitzeu el prefix -ms-.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/overflow/index.html b/files/ca/web/css/overflow/index.html new file mode 100644 index 0000000000..fa1264359d --- /dev/null +++ b/files/ca/web/css/overflow/index.html @@ -0,0 +1,273 @@ +--- +title: overflow +slug: Web/CSS/overflow +tags: + - CSS + - CSS Box Model + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/overflow +--- +
{{CSSRef}}
+ +

La propietat CSS overflow especifica si s'ha de retallar el contingut, mostrar barres de desplaçament o mostrar el contingut desbordat quan és massa gran per al seu contenidor a nivell de bloc.

+ +
/* El contingut no es retallat */
+overflow: visible;
+
+/* El contingut es retallat, sense barres de desplaçament */
+overflow: hidden;
+
+/* El contingut es retallat, amb barres de desplaçament */
+overflow: scroll;
+
+/* Deixa que el navegador decideixi */
+overflow: auto;
+
+/* Valors globals */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+
+ + + +

{{EmbedLiveSample("overflow", "100%", 200, "", "", "example-outcome-frame")}}

+ +

L'ús d' overflow amb un valor diferent a visible (per defecte) crea un nou context de format de bloc. Això és necessari per motius tècnics — si un flotador es creua amb l'element de desplaçament, el contingut es torna a embolicar per la força després de cada pas de desplaçament, donant lloc a una experiència de desplaçament lent.

+ +

Per tal que l' overflow tingui un efecte, el contenidor a nivell de bloc ha de tenir una alçada definida (height o max-height) o white-space establert a nowrap.

+ +
+

Nota: La propietat de JavaScript {{domxref("Element.scrollTop")}} es pot utilitzar per desplaçar un element HTML fins i tot quan overflow està configurat com hidden.

+
+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat overflow s'especifica com una sola paraula clau triada de la llista de valors que es mostra a continuació.

+ +

Valors

+ +
+
visible
+
El contingut no es retalla i es pot mostrar fora de la caixa de contingut. Valor per defecte.
+
hidden
+
El contingut es retalla si és necessari per adaptar-lo a la caixa de contingut. No es proporcionen barres de desplaçament.
+
scroll
+
El contingut es retalla si és necessari per adaptar-lo a la caixa de contingut. Els navegadors mostren les barres de desplaçament independentment que el contingut estigui o no retallat. (Això evita que les barres de desplaçament apareguin o desapareguin quan el contingut canvia). Les impressores poden imprimir contingut desbordat.
+
auto
+
Depèn de l'agent d'usuari. Si el contingut s'adapta a l'interior de la caixa de contingut, es veurà igual que visible, però se segueix establint un nou context de format de bloc. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.
+
+ +
+
overlay {{experimental_inline}} {{deprecated_inline}}
+
Es comporta de la mateixa manera que auto, però amb les barres de desplaçament sobre el contingut en lloc d'ocupar espai. Només s'admet en navegadors basats en WebKit (p. ex., Safari) i basats en Blink (p. ex., Chrome o Opera).
+
+ +

Extensions Mozilla

+ +
+
-moz-scrollbars-none {{obsolete_inline}}
+
Utilitzeu overflow: hidden en el seu lloc.
+
-moz-scrollbars-horizontal {{deprecated_inline}}
+
Es preferible l'ús de {{Cssxref("overflow-x")}} i {{Cssxref("overflow-y")}}.
+
-moz-scrollbars-vertical {{deprecated_inline}}
+
Es preferible l'ús de {{Cssxref("overflow-x")}} i {{Cssxref("overflow-y")}}.
+
-moz-hidden-unscrollable {{non-standard_inline}}
+
Destinat principalment per a ús intern i per temes. Desactiva el desplaçament dels elements arrel XML, <html> i <body> amb les tecles de fletxa del teclat i la roda del ratolí.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
p {
+  width: 12em;
+  height: 6em;
+  border: dotted;
+  overflow: visible; /* el contingut no es retalla */
+}
+
+ +

visible (per defecte)
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: hidden; /* no es proporcionen barres de desplaçament */ }
+
+ +

overflow: hidden
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: scroll; /* mostra sempre barres de desplaçament */ }
+
+ +

overflow: scroll
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: auto; /* afegeix barres de desplaçament si és necessari */ }
+
+ +

overflow: auto
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Overflow')}} 
{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Box')}}No canvia.
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}[1]4.0[2]7.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] A través de Firefox 3.6 (Gecko 1.9.2), la propietat overflow s'aplica incorrectament als elements del grup de taula (<thead> , <tbody> , <tfoot>). Aquest comportament es corregeix en versions posteriors.

+ +

[2] Internet Explorer 4 a 6 amplia un element amb overflow: visible (valor predeterminat) per adaptar-se al contingut que hi ha dins. height/width es comportan com min-height/min-width.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/overscroll-behavior-block/index.html b/files/ca/web/css/overscroll-behavior-block/index.html new file mode 100644 index 0000000000..000b4e8c9c --- /dev/null +++ b/files/ca/web/css/overscroll-behavior-block/index.html @@ -0,0 +1,133 @@ +--- +title: overscroll-behavior-block +slug: Web/CSS/overscroll-behavior-block +translation_of: Web/CSS/overscroll-behavior-block +--- +
{{CSSRef}}
+ +

La propietat CSS overscroll-behavior-block estableix el comportament del navegador quan s'arriba al límit de direcció de bloc d'una àrea de desplaçament.

+ +

Veure {{cssxref("overscroll-behavior")}} per a una explicació completa.

+ +
/* Keyword values */
+overscroll-behavior-block: auto; /* default */
+overscroll-behavior-block: contain;
+overscroll-behavior-block: none;
+
+/* Global values */
+overscroll-behavior-block: inherit;
+overscroll-behavior-block: initial;
+overscroll-behavior-block: unset;
+
+ +

Sintaxi

+ +

La propietat overscroll-behavior-block s'especifica com una paraula clau triada de la llista de valors de sota.

+ +

Valors

+ +
+
auto
+
El comportament per defecte de desbordament de desplaçament es produeix com a normal.
+
contain
+
El comportament per defecte del desbordament de desplaçament s'observa dins de l'element on aquest valor està establert (e.ex. Els efectes "rebot" o refrescs), però no es produeix cap encadenament de desplaçament a les zones veïnes, p.ex. els elements subjacents no es desplaçaran.
+
none
+
No es produeix cap encadenament de desplaçament a les zones veïnes, i s'impedeix el comportament per defecte de desbordament de desplaçament.
+
+ +

Definició formal

+ +

{{cssinfo}}

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Prevenint el desplaçament del bloc

+ +

En aquesta demostració tenim dues caixes a nivell de bloc, una dins l'altra. La caixa exterior té una gran {{cssxref("height")}} establert en ella de manera que la pàgina es desplaçarà verticalment. La caixa interior té una petita {{cssxref("width")}} (i height) establerta sobre ella de manera que s'assenta de manera inexcusable dins de l'àrea de visualització, però el seu contingut té una gran height de manera que també es desplaçarà verticalment..

+ +

Per defecte, quan la capsa interior es desplaça i s'arriba a un límit de desplaçament, tota la pàgina començarà a desplaçar-se, que probablement no és el que volem. Per evitar que això passi en la direcció del bloc, hem establert overscroll-behavior-block: contain en la caixa interior.

+ +

HTML

+ +
<main>
+  <div>
+    <div>
+      <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p>
+    </div>
+  </div>
+</main>
+ +

CSS

+ +
main {
+  height: 3000px;
+  width: 500px;
+  background-color: white;
+  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+main > div {
+  height: 300px;
+  width: 400px;
+  overflow: auto;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  overscroll-behavior-block: contain;
+}
+
+div > div {
+  height: 1500px;
+  width: 100%;
+  background-color: yellow;
+  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+p {
+  padding: 10px;
+  background-color: rgba(255,0,0,0.5);
+  margin: 0;
+  width: 340px;
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+ +

Resultat

+ +

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

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-block', 'overscroll-behavior-block')}}{{Spec2('CSS Overscroll Behavior')}}
+ +

Compatibilitat amb el navegador

+ + + +

{{Compat("css.properties.overscroll-behavior-block")}}

+ +

Veure també

+ + diff --git a/files/ca/web/css/overscroll-behavior-inline/index.html b/files/ca/web/css/overscroll-behavior-inline/index.html new file mode 100644 index 0000000000..1cc7a7c605 --- /dev/null +++ b/files/ca/web/css/overscroll-behavior-inline/index.html @@ -0,0 +1,134 @@ +--- +title: overscroll-behavior-inline +slug: Web/CSS/overscroll-behavior-inline +translation_of: Web/CSS/overscroll-behavior-inline +--- +
{{CSSRef}}
+ +

+La propietat CSS overscroll-behavior-inline estableix el comportament del navegador quan s'arriba al límit de direcció en línia d'una àrea de desplaçament.

+ +

Veure {{cssxref("overscroll-behavior")}} per a una explicació completa.

+ +
/* Keyword values */
+overscroll-behavior-inline: auto; /* default */
+overscroll-behavior-inline: contain;
+overscroll-behavior-inline: none;
+
+/* Global values */
+overscroll-behavior-inline: inherit;
+overscroll-behavior-inline: initial;
+overscroll-behavior-inline: unset;
+
+ +

Sintaxi

+ +

La propietat overscroll-behavior-inline s'especifica com una paraula clau triada de la llista de valors de sota.

+ +

Valors

+ +
+
auto
+
El comportament per defecte de desbordament de desplaçament es produeix com a normal.
+
contain
+
El comportament per defecte del desbordament de desplaçament s'observa dins de l'element on aquest valor està establert (p. ex. g. Els efectes "rebot o refrescs), no es produeix cap encadenament de desplaçament a les zones veïnes, p.ex. els elements subjacents no es desplaçaran.
+
none
+
No es produeix cap encadenament de desplaçament a les zones veïnes, i s'impedeix el comportament per defecte de desbordament de desplaçament.
+
+ +

Definició formal

+ +

{{cssinfo}}

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Evitar el desplaçament en línia

+ +

En aquesta demostració tenim dues caixes a nivell de bloc, una dins l'altra. La caixa exterior té una gran {{cssxref("width")}} establert en ella de manera que la pàgina es desplaçarà horitzontalment. La caixa interior té una petita amplada (i {{cssxref("height")}}) establerta sobre ella de manera que es troba de manera inexcusable dins de l'àrea de visualització, però el seu contingut té una amplada gran de manera que també es desplaçarà horitzontalment.

+ +

Per defecte, quan la caixa interior es desplaçi i s'arribi a un límit de desplaçament, tota la pàgina començarà a desplaçar-se, que probablement no és el que volem. Per evitar que això passi en la direcció en línia, hem establert overscroll-behavior-inline: contain en la caixa interior.

+ +

HTML

+ +
<main>
+  <div>
+    <div>
+      <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p>
+    </div>
+  </div>
+</main>
+ +

CSS

+ +
main {
+  height: 400px;
+  width: 3000px;
+  background-color: white;
+  background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+main > div {
+  height: 300px;
+  width: 400px;
+  overflow: auto;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  overscroll-behavior-inline: contain;
+}
+
+div > div {
+  height: 100%;
+  width: 1500px;
+  background-color: yellow;
+  background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+p {
+  padding: 10px;
+  background-color: rgba(255,0,0,0.5);
+  margin: 0;
+  width: 360px;
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+ +

Result

+ +

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

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-inline', 'overscroll-behavior-inline')}}{{Spec2('CSS Overscroll Behavior')}}
+ +

Compatibilitat amb el navegador

+ + + +

{{Compat("css.properties.overscroll-behavior-inline")}}

+ +

Veure també

+ + diff --git a/files/ca/web/css/overscroll-behavior/index.html b/files/ca/web/css/overscroll-behavior/index.html new file mode 100644 index 0000000000..9ed28a5a0b --- /dev/null +++ b/files/ca/web/css/overscroll-behavior/index.html @@ -0,0 +1,106 @@ +--- +title: overscroll-behavior +slug: Web/CSS/overscroll-behavior +translation_of: Web/CSS/overscroll-behavior +--- +
{{CSSRef}}
+ +

la propietat CSS overscroll-behavior estableix el que fa un navegador quan arriba al límit d'una àrea de desplaçament. És una abreujada per {{cssxref("overscroll-behavior-x")}} i {{cssxref("overscroll-behavior-y")}}.

+ +
/* Keyword values */
+overscroll-behavior: auto; /* default */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Two values */
+overscroll-behavior: auto contain;
+
+/* Global values */
+overscroll-behavior: inherit;
+overscroll-behavior: initial;
+overscroll-behavior: unset;
+
+ +

Per defecte, els navegadors mòbils tendeixen a proporcionar un efecte "rebot" o fins i tot una actualització de pàgina quan s'arriba a la part superior o inferior d'una pàgina (o una altra àrea de desplaçament). També us podeu haver adonat que quan tingueu un quadre de diàleg amb contingut de desplaçament a la part superior d'una pàgina de contingut de desplaçament, una vegada s'hagi assolit el límit de desplaçament del quadre de diàleg, la pàgina subjacent començarà a desplaçar-se - això s'anomena scroll chaining (encadenament de desplaçament).

+ +

En alguns casos aquests comportaments no són desitjables. Es pot utilitzar overscroll-behavior per desfer-se de l'encadenament de desplaçament no desitjat i de l'aplicació de Facebook/Twitter inspirada en el comportament de "tirar per a refrescar" del navegador

+ +

Sintaxi

+ +

La propietat overscroll-behavior s'especifica com una o dues paraules clau triades de la llista de valors de sota.

+ +

Dues paraules clau especifican el valor de overscroll-behavior en els eixos x i y respectivament. Si només s'especifica un valor, tant x com y se suposa que tenen el mateix valor.

+ +

Valors

+ +
+
auto
+
El comportament per defecte de desbordament de desplaçament es produeix com a normal.
+
contain
+
El comportament per defecte del desbordament de desplaçament s'observa dins de l'element on aquest valor està establert (p.ex. efectes de "rebot" o refrescos), però no es produeix cap encadenament de desplaçament a les zones veïnes, p.ex. els elements subjacents no es desplaçaran.
+
none
+
No es produeix cap encadenament de desplaçament a les zones veïnes, i s'impedeix el comportament per defecte de desbordament de desplaçament.
+
+ +

Definició formal

+ +

{{cssinfo}}

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Evitar que un element subjacent es desplaci

+ +

En el nostre exemple d'overscroll-behavior example (vegeu també el codi font source code), presentem una llista de pàgines senceres de contactes falsos, i un quadre de diàleg que conté una finestra de xat.

+ +

+ +

Totes dues àrees es desplacen; normalment, si es desplaça la finestra del xat fins a arribar a un límit de desplaçament, la finestra de contactes subjacent començaria a desplaçar-se també, la qual no és desitjable. Això es pot aturar fent servir overscroll-behavior-y (també funciona overscroll-behavior) a la finestra de xat com ara:

+ +
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+}
+ +

També voldríem desfer-nos dels efectes de desplaçament estàndard quan els contactes es desplacen cap amunt o cap avall (p. ex. Chrome on Android refresca la pàgina quan es desplaça més enllà del límit superior). Això pot evitar-se establint overscroll-behavior: none en l'element {{htmlelement("body")}}:

+ +
body {
+  margin: 0;
+  overscroll-behavior: none;
+}
+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}{{Spec2('CSS Overscroll Behavior')}}
+ +

Compatibilitat amb el navegador

+ + + +

{{Compat("css.properties.overscroll-behavior")}}

+ +

Veure també

+ + diff --git a/files/ca/web/css/padding-bottom/index.html b/files/ca/web/css/padding-bottom/index.html new file mode 100644 index 0000000000..5fb786bd98 --- /dev/null +++ b/files/ca/web/css/padding-bottom/index.html @@ -0,0 +1,149 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-bottom +--- +
{{CSSRef}}
+ +

La propietat CSS padding-bottom estableix l'alçada de l'àrea de farcit a la part inferior d'un element. A diferència dels marges, no es permeten valors negatius per al farcit. La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir farcits als quatre costats d'un element amb una sola declaració.

+ +
/* <length> values */
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* <percentage> value */
+padding-bottom: 10%;
+
+/* Global values */
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+
+ +

L'àrea de farcit d'un element és l'espai entre el seu contingut i la seva vora.

+ +

The effect of the CSS padding-bottom property on the element box

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("length")}}
+
La grandària del farcit com a valor fix. Ha de ser no negatiu.
+
{{cssxref("percentage")}}
+
La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}{{ Spec2('CSS3 Box') }}No hi ha cap canvi des de {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}{{ Spec2('CSS3 Transitions') }}Defineix padding-bottom como animable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}{{ Spec2('CSS2.1') }}No hi ha cap canvi des de {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.
{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}{{ Spec2('CSS1') }}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/padding-left/index.html b/files/ca/web/css/padding-left/index.html new file mode 100644 index 0000000000..8d4d4bef27 --- /dev/null +++ b/files/ca/web/css/padding-left/index.html @@ -0,0 +1,147 @@ +--- +title: padding-left +slug: Web/CSS/padding-left +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-left +--- +
{{CSSRef}}
+ +

La propietat CSS padding-left estableix l'amplada de l'àrea de farcit a la part esquerra d'un element. A diferència dels marges, no es permeten valors negatius per al farcit. La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir farcits als quatre costats d'un element amb una sola declaració.

+ +
/* <length> values */
+padding-left: 0.5em;
+padding-left: 0;
+padding-left: 2cm;
+
+/* <percentage> value */
+padding-left: 10%;
+
+/* Global values */
+padding-left: inherit;
+padding-left: initial;
+padding-left: unset;
+
+ +

L'àrea de farcit d'un element és l'espai entre el seu contingut i la seva vora.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("length")}}
+
La grandària del farcit com a valor fix. Ha de ser no negatiu.
+
{{cssxref("percentage")}}
+
La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
.content { padding-left: 5%; }
+.sidebox { padding-left: 10px; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#the-padding', 'padding-left') }}{{ Spec2('CSS3 Box') }}No hi ha cap canvi.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-left') }}{{ Spec2('CSS3 Transitions') }}Defineix padding-left como animable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }}{{ Spec2('CSS2.1') }}No hi ha cap canvi.
{{ Specname('CSS1', '#padding-left', 'padding-left') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/padding-right/index.html b/files/ca/web/css/padding-right/index.html new file mode 100644 index 0000000000..7e5baa72e8 --- /dev/null +++ b/files/ca/web/css/padding-right/index.html @@ -0,0 +1,147 @@ +--- +title: padding-right +slug: Web/CSS/padding-right +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-right +--- +
{{CSSRef}}
+ +

La propietat CSS padding-right estableix l'amplada de l'àrea de farcit a la part dreta d'un element. A diferència dels marges, no es permeten valors negatius per al farcit . La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir farcits als quatre costats d'un element amb una sola declaració.

+ +
/* <length> values */
+padding-right: 0.5em;
+padding-right: 0;
+padding-right: 2cm;
+
+/* <percentage> value */
+padding-right: 10%;
+
+/* Global values */
+padding-right: inherit;
+padding-right: initial;
+padding-right: unset;
+
+ +

L'àrea de farcit d'un element és l'espai entre el seu contingut i la seva vora.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("length")}}
+
La grandària del farcit com a valor fix. Ha de ser no negatiu.
+
{{cssxref("percentage")}}
+
La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
.content { padding-right: 5%; }
+.sidebox { padding-right: 10px; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#the-padding', 'padding-right') }}{{ Spec2('CSS3 Box') }}No hi ha cap canvi.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-right') }}{{ Spec2('CSS3 Transitions') }}Defineix padding-right com animable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right') }}{{ Spec2('CSS2.1') }}No hi ha cap canvi.
{{ Specname('CSS1', '#padding-right', 'padding-right') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/padding-top/index.html b/files/ca/web/css/padding-top/index.html new file mode 100644 index 0000000000..2311e2a624 --- /dev/null +++ b/files/ca/web/css/padding-top/index.html @@ -0,0 +1,149 @@ +--- +title: padding-top +slug: Web/CSS/padding-top +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-top +--- +
{{CSSRef}}
+ +

La propietat CSS padding-top estableix l'alçada de l'àrea de farcit a la part superior d'un element. A diferència dels marges, no es permeten valors negatius per al farcit. La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir farcits als quatre costats d'un element amb una sola declaració.

+ +
/* <length> values */
+padding-top: 0.5em;
+padding-top: 0;
+padding-top: 2cm;
+
+/* <percentage> value */
+padding-top: 10%;
+
+/* Global values */
+padding-top: inherit;
+padding-top: initial;
+padding-top: unset;
+
+ +

L'àrea de farcit d'un element és l'espai entre el seu contingut i la seva vora.

+ +

The effect of the CSS padding-top property on the element box

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("length")}}
+
La grandària del farcit com a valor fix. Ha de ser no negatiu.
+
{{cssxref("percentage")}}
+
La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
.content { padding-top: 5%; }
+.sidebox { padding-top: 10px; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#the-padding', 'padding-top') }}{{ Spec2('CSS3 Box') }}No hi ha cap canvi des de {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}{{ Spec2('CSS3 Transitions') }}Defineix padding-top com animable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}{{ Spec2('CSS2.1') }}No hi ha cap canvi des de {{ Specname('CSS1', '#padding-top', 'padding-top') }}.
{{ Specname('CSS1', '#padding-top', 'padding-top') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 Vegeu també

+ + diff --git a/files/ca/web/css/padding/index.html b/files/ca/web/css/padding/index.html new file mode 100644 index 0000000000..7e93cddcf1 --- /dev/null +++ b/files/ca/web/css/padding/index.html @@ -0,0 +1,255 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - CSS + - CSS Padding + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/padding +--- +
{{CSSRef}}
+ +

La propietat CSS padding estableix l'àrea de farcit als quatre costats d'un element. És una abreviatura que estableix tots els farcits individuals alhora: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} i {{cssxref("padding-left")}}.

+ +
/* Apply to all four sides */
+padding: 1em;
+
+/* vertical | horizontal */
+padding: 5% 10%;
+
+/* top | horizontal | bottom */
+padding: 1em 2em 2em;
+
+/* top | right | bottom | left */
+padding: 5px 1em 0 1em;
+
+/* Global values */
+padding: inherit;
+padding: initial;
+padding: unset;
+
+ + + +

{{EmbedLiveSample("padding", "100%", 280, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat padding es pot especificar utilitzant un, dos, tres o quatre valors. Cada valor és un <length> o un <percentage>.

+ + + +

Valors

+ +
+
{{cssxref("length")}}
+
La grandària del farcit com a valor fix. Ha de ser no negatiu.
+
{{cssxref("percentage")}}
+
La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple senzill

+ +

HTML

+ +
<h4>This element has moderate padding.</h4>
+<h3>The padding is huge in this element!</h3>
+
+ +

CSS

+ +
h4 {
+  background-color: lime;
+  padding: 20px 50px;
+}
+
+h3 {
+  background-color: cyan;
+  padding: 110px 50px 50px 110px;
+}
+
+ +

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

+ +

Més exemples

+ +
padding: 5%;                /* all sides: 5% padding */
+
+padding: 10px;              /* all sides: 10px padding */
+
+padding: 10px 20px;         /* top and bottom: 10px padding */
+                            /* left and right: 20px padding */
+
+padding: 10px 3% 20px;      /* top:            10px padding */
+                            /* left and right: 3% padding   */
+                            /* bottom:         20px padding */
+
+padding: 1em 3px 30px 5px;  /* top:    1em padding  */
+                            /* right:  3px padding  */
+                            /* bottom: 30px padding */
+                            /* left:   5px padding  */
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}{{ Spec2('CSS3 Box') }}No canvia.
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}{{ Spec2('CSS2.1') }}No canvia.
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git "a/files/ca/web/css/refer\303\251ncia_css/index.html" "b/files/ca/web/css/refer\303\251ncia_css/index.html" new file mode 100644 index 0000000000..739dcdc9e3 --- /dev/null +++ "b/files/ca/web/css/refer\303\251ncia_css/index.html" @@ -0,0 +1,206 @@ +--- +title: Referéncia CSS +slug: Web/CSS/Referéncia_CSS +tags: + - CSS + - Reference + - 'l10n:priority' +translation_of: Web/CSS/Reference +--- +

Utilitzeu aquesta referència CSS per explorar un índex alfabètic de totes les propietats CSS estàndard , pseudo-classes, pseudo-elements, tipus de dades, i regles-at. També podeu explorar una llista de tots els  selectors CSS organitzats per tipus i una llista de conceptes clau CSS. També s'inclou una breu referència DOM-CSS / CSSOM.

+ +

Sintaxi de regla bàsica

+ +

Sintaxi de regla d'estil

+ +
selectorlist {
+  property: value;
+  [more property:value; pairs]
+}
+
+... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+See selector, pseudo-class, pseudo-element lists below.
+
+ +

Exemples de regla d'estil

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Per a una introducció a nivell de principiant a la sintaxi de selectors CSS, consulteu aquest tutorial. Tingueu en compte que qualsevol error de sintaxi CSS en una definició de regla invalida tota la regla. Les regles no vàlides són ignorades pel navegador. Tingueu en compte que les definicions de la regla CSS són totalment basades en text (ASCII), mentre que DOM-CSS / CSSOM (el sistema de gestió de regles) està basat en objectes.

+ +

Sintaxi de regla-At (At-rule)

+ +

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

+ +

Índex de paraules clau (Keyword)

+ +
{{CSS_Ref}}
+ +

Selectors

+ +

Selectors Bàsics

+ + + +

Combinadors

+ + + +

Pseudo-classes

+ +
+ +
+ +

Pseudo-elements

+ +
+ +
+ +
+

Vegeu també: Una llista completa de selectors en l'especificació Selectors Level 3.

+
+ +

Conceptes

+ +

Sintaxi i semàntica

+ + + +

Valors

+ + + +

Disseny

+ + + +

DOM-CSS / CSSOM

+ +

Tipus d'objectes principals

+ + + +

Mètodes importants

+ + + +

Vegeu també

+ + diff --git a/files/ca/web/css/selectors_css/index.html b/files/ca/web/css/selectors_css/index.html new file mode 100644 index 0000000000..9eaf8daffc --- /dev/null +++ b/files/ca/web/css/selectors_css/index.html @@ -0,0 +1,156 @@ +--- +title: Selectors CSS +slug: Web/CSS/Selectors_CSS +tags: + - CSS + - CSS Selectors + - Overview + - Reference + - Selectors +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Els Selectors CSS defineixen els elements als quals s'aplica un conjunt de normes CSS.

+ +

Selectors Bàsics

+ +
+
Selector de tipus
+
Selecciona tots els elements que coincideixen amb el nom del node donat.
+ Sintaxi: eltname
+ Exemple: input coincidirà amb qualsevol element {{HTMLElement('input')}}
+
Selector de clase
+
Selecciona tots els elements que tenen l'atribut class donat.
+ Sintaxi: .classname
+ Exemple: .index coincidirà amb qualsevol element que tingui una classe "index"
+
Selector de ID
+
Selecciona un element basat en el valor del seu atribut id. Només hi ha d'haver un element amb una ID determinat en un document.
+ Sintaxi: #idname
+ Exemple: #toc coincidiran amb l'element que té l'ID "toc".
+
Selector universal
+
Selecciona tots els elements. De manera opcional, pot estar restringit a un espai de noms específic o a tots els espais de noms.
+ Sintaxi: * ns|* *|*
+ Exemple: * coincideix amb tots els elements del document.
+
Selector d'atribut
+
Selecciona elements basats en el valor de l'atribut donat.
+ Sintaxi: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ Exemple: [autoplay] coincidiran tots els elements que tenen establert l'atribut autoplay (a qualsevol valor).
+
+ +

Combinadors

+ +
+
Combinador de germans adjacents
+
El combinador + selecciona els germans adjacents. Això significa que el segon element segueix directament el primer, i ambdós comparteixen el mateix pare.
+ Sintaxi: A + B
+ Exemple: h2 + p coincidirà amb tots el elements {{HTMLElement('p')}} que segueixen directament un {{HTMLElement('h2')}}.
+
Combinador general de germans
+
El combinador ~ selecciona els germans. Això significa que el segon element segueix el primer (encara que no necessàriament de forma immediata), i tots dos comparteixen el mateix pare.
+ Sintaxi: A ~ B
+ Exemple: p ~ span coincidirà amb tots els elements {{HTMLElement('span')}} que segueixen un {{HTMLElement('p')}}.
+
Combinador de fills
+
El combinador > selecciona els nodes que són fills directes del primer element.
+ Sintaxi: A > B
+ Exemple: ul > li coincidirà amb tots els elements {{HTMLElement('li')}} que estan niats directament dins d'un element {{HTMLElement('ul')}}.
+
Combinador de descendents
+
El combinador    selecciona els nodes que són descendents del primer element.
+ Sintaxi: A B
+ Exemple: div span coincidirà amb tots els elements {{HTMLElement('span')}} que es troben dins d'un element {{HTMLElement('div')}}.
+
+ +

Pseudo-classes

+ +

Pseudo-classes permeten la selecció d'elements basats en informació d'estat que no es troba a l'arbre del document.

+ +

Exemple: a:visited coincidirà amb tots els elements {{HTMLElement('a')}} que hagi visitat l'usuari.

+ +

Pseudo-elements

+ +

Pseudo-elements representen entitats que no estan incloses en HTML.

+ +

Exemple: p::first-line coincidirà amb la primera línia de tots els elements {{HTMLElement('p')}}.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
diff --git a/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..53339b06e5 --- /dev/null +++ b/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,69 @@ +--- +title: 'Ùs de la pseudo-class :target en selectors' +slug: 'Web/CSS/Selectors_CSS/Using_the_:target_pseudo-class_in_selectors' +tags: + - ':target' + - CSS + - Guide + - Reference + - Selectors +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +
{{CSSRef}}
+ +

Quan una URL apunta a una peça específica d'un document, pot ser difícil per a l'usuari adonar-se. Esbrineu com podeu fer servir algun CSS senzill per cridar l'atenció sobre el destí d'una URL i millorar l'experiència de l'usuari.

+ +

Triar un destí

+ +

La pseudo-class {{ Cssxref(":target") }}s'utilitza per aplicar estil a l'element de destinació d'un URI que conté un identificador de fragment. Per exemple, l'URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#example conté el identificador de fragment #example. En HTML, els identificadors corresponent els valors dels atributs id o name, ja que tots dos comparteixen el mateix espai de noms. Per tant, l'URI d'exemple assenyalaria l'encapçalament "example" en aquest document.

+ +

Suposem que desitjeu donar estil a qualsevol element h2 que és el destí d'un URI, però no voleu que qualsevol altre tipus d'element aconsegueixi un estil de destinació. Això és bastant simple:

+ +
h2:target {font-weight: bold;}
+ +

També és possible crear estils que siguin específics d'un fragment en particular del document. Això es realitza utilitzant el mateix valor de la identificació que es troba en l'URI. Per tant, per afegir una vora al fragment #example, escriuríem:

+ +
#example:target {border: 1px solid black;}
+ +

Dirigit a tots els elements

+ +

Si la intenció és crear un estil "ampli" que s'apliqui a tots els elements seleccionats, llavors el selector universal, ve molt bé:

+ +
:target {color: red;}
+
+ +

Exemple

+ +

En el següent exemple, hi ha cinc enllaços que apunten a elements en el mateix document. En seleccionar l'enllaç "First", per exemple, farà que <h1 id = "one"> es converteixi en l'element de destinació. Recordeu que el document pot saltar a una nova posició de desplaçament, ja que els elements de destinació es col·loquen a la part superior de la finestra del navegador si és possible.

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

Conclusió

+ +

En els casos en què un identificador de fragment apunti a una part del document, els lectors poden arribar a confondre's sobre quina part del document se suposa que han d'estar llegint. El donar estil a la destinació d'un URI, podem reduïr o eliminar la confusió del lector.

+ + + + + +
+

Informació del document original

+ + +
diff --git a/files/ca/web/css/selectors_d'atribut/index.html b/files/ca/web/css/selectors_d'atribut/index.html new file mode 100644 index 0000000000..6778a2b3cb --- /dev/null +++ b/files/ca/web/css/selectors_d'atribut/index.html @@ -0,0 +1,250 @@ +--- +title: Selector Atribut +slug: Web/CSS/Selectors_d'Atribut +tags: + - Beginner + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

El selector attribute CSS coincideix amb elements basats en la presència o el valor d'un atribut donat.

+ +
/* <a> elements amb l'atribut title */
+a[title] {
+  color: purple;
+}
+
+/* elements <a> amb una coincidència href "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* elements <a> amb un href contenint "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* elements <a> amb un href amb una terminació ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+ +
+
[attr]
+
Representa un element amb un nom d'atribut attr.
+
[attr=value]
+
Representa un element amb un nom d'atribut attr el valor del qual és exactament value.
+
[attr~=value]
+
Representa un element amb un nom d'atribut attr el valor del qual és una llista de paraules separades per espais en blanc, una de les quals és exactament value.
+
[attr|=value]
+
Representa un element amb un nom d'atribut attr el valor del qual pot ser exactament value o pot començar amb value immediatament seguit d'un guió, - (U+002D). Sovint s'utilitza per coincidències de subcodis de llenguatge.
+
[attr^=value]
+
Representa un element amb un nom d'atribut attr el valor del qual està prefixat (precedit) per value.
+
[attr$=value]
+
Representa un element amb un nom d'atribut attr el valor del qual és sufix (següit) per value.
+
[attr*=value]
+
Representa un element amb un nom d'atribut attr el valor del qual conté almenys una ocurrència value dins de la cadena.
+
[attr operator value i]
+
En afegir una i (o I) abans del claudàtor de tancament, el valor es compara entre majúscules i minúscules (per a caràcters dins del rang ASCII).
+
+ +

Exemples

+ + + +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Internal links, beginning with "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Links with "example" anywhere in the URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Links with "insensitive" anywhere in the URL,
+   regardless of capitalization */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Links that end in ".org" */
+a[href$=".org"] {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Internal link</a></li>
+  <li><a href="http://example.com">Example link</a></li>
+  <li><a href="#InSensitive">Insensitive internal link</a></li>
+  <li><a href="http://example.org">Example org link</a></li>
+</ul>
+ +

Resultat

+ +

{{EmbedLiveSample('Links')}}

+ +

Llengües

+ +

CSS

+ +
/* Tots els divs amb un atribut `lang` són en negreta. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Tots els divs en US Anglès són blaus. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Tots els divs en Portuguès són verds. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Tots els divs en Xinès són vermells, ja sigui
+   simplificat (zh-CN) o tradicional (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Tots els divs en Xinès Traditional
+   `data-lang` són porpra */
+/* Nota: També podeu utilitzar atributs amb guions sense cometes dobles */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">?世界您好！</div>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Languages')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Afegit modificador per a la selecció del valor d'atribut ASCII sense distinció de majúscules i minúscules.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}793
Modificador sense distinció de majúscules i minúscules{{CompatChrome(49.0)}}{{CompatNo}}{{CompatGeckoDesktop("47.0")}}{{CompatUnknown}}{{CompatOpera(36)}}{{CompatSafari(9)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Modificador sense distinció de majúscules i minúscules{{CompatUnknown}}{{CompatChrome(49.0)}}{{CompatNo}}{{CompatGeckoMobile("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatSafari(9)}}{{CompatChrome(49.0)}}
+
diff --git a/files/ca/web/css/selectors_de_classe/index.html b/files/ca/web/css/selectors_de_classe/index.html new file mode 100644 index 0000000000..1f8cfdbee4 --- /dev/null +++ b/files/ca/web/css/selectors_de_classe/index.html @@ -0,0 +1,139 @@ +--- +title: Selector Class +slug: Web/CSS/Selectors_de_Classe +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef}}
+ +

El selector class CSS coincideix amb elements basats en el contingut de l'atribut {{htmlattrxref("class")}}.

+ +
/* Tots els elements amb class="spacious" */
+.spacious {
+  margin: 2em;
+}
+
+/* Tots els elements <li> amb class="spacious" */
+li.spacious {
+  margin: 2em;
+}
+ +

Sintaxi

+ +
.classname { style properties }
+ +

Recordeu que això és equivalent al següent {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[class~=classname] { style properties }
+ +

Exemple

+ +

CSS

+ +
div.classy {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div class="classy">This div has a special class on it!</div>
+<div>This is just a regular div.</div>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example', '100%', 50)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/selectors_de_descendents/index.html b/files/ca/web/css/selectors_de_descendents/index.html new file mode 100644 index 0000000000..1eb4fd57f8 --- /dev/null +++ b/files/ca/web/css/selectors_de_descendents/index.html @@ -0,0 +1,170 @@ +--- +title: Selectors de descendents +slug: Web/CSS/Selectors_de_descendents +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Descendant_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador descendent - en general representat per un  únic caràcter d'espai ( ) - combina dos selectors de tal manera que els elements que coincideixen amb el segon selector se seleccionen si tenen un element ancestral que coincideixi amb el primer selector. Els selectors que utilitzen un combinador descendent s'anomenen selectors de descendents.

+ +
/* Llista els elemenst que són descendsnts de la llista "my-things" */
+ul.my-things li {
+  margin: 2em;
+}
+ +

El combinador descendent és tècnicament un o més caràcters d'espais en blanc {{Glossary("CSS")}} - el caràcter d'espai en blanc i/o un dels quatre caràcters de control: retorn de carro, avanç de pàgina, nova línia i caràcters de tabulació - entre dos selectors en absència d'un altre combinador. A més, els caràcters d'espai en blanc de les que es compon el combinador poden contenir qualsevol nombre de comentaris CSS.

+ +

La naturalesa abstracta d'aquest combinador el fa diferent dels altres combinadors estandarditzats ja que aquests combinadors estan representats per una seqüència de caràcters finits diferents. Aquesta inconsistència es va tractar afegint un combinador descendent redundant representat per dos caràcters, més gran que  (>>), amb seqüència, donant-li una forma que és particularment similar a la del combinador fill, que comparteix una funció similar.

+ +

Sintaxi

+ +
selector1 selector2 { /* property declarations */ }
+
+ +
selector1 >> selector2 { /* property declarations */ }
+
+ +

Exemple

+ +

CSS

+ +
li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+
+ +

HTML

+ +
<ul>
+  <li>
+    <div>Item 1</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+  <li>
+    <div>Item 2</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+</ul>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 200, 160)}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS4 Selectors')}}>> introduït com combinador descendent a més de l'espai en blanc com combinador.
{{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Tipus >>{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatSafari("10")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Tipus >>{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/selectors_de_fills/index.html b/files/ca/web/css/selectors_de_fills/index.html new file mode 100644 index 0000000000..f5cb8139f9 --- /dev/null +++ b/files/ca/web/css/selectors_de_fills/index.html @@ -0,0 +1,135 @@ +--- +title: Combinador de fills +slug: Web/CSS/Selectors_de_fills +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador de fills (>) es col·loca entre dos selectors CSS. Solament coincideix amb aquells elements que coincideixen amb el segon selector que són fills d'elements que coincideixen amb el primer.

+ +
/* Enumera els elements que són fills de la llista "my-things" */
+ul.my-things > li {
+  margin: 2em;
+}
+ +

Els elements que coincideixin amb el segon selector han de ser els fills immediats dels elements que coincideixin amb el primer selector. Això és més estricte que el selector descendent, que coincideix amb tots els elements que coincideixen amb el segon selector per al qual existeix un element ancestral coincident amb el primer selector, independentment de la quantitat de "salts" en el DOM

+ +

Sintaxi

+ +
selector1 > selector2 { style properties }
+
+ +

Exemple

+ +

CSS

+ +
span {
+  background-color: white;
+}
+
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<div>
+  <span>Span #1, in the div.
+    <span>Span #2, in the span that's in the div.</span>
+  </span>
+</div>
+<span>Span #3, not in the div at all.</span>
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 200, 100)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/selectors_de_germans_adjacents/index.html b/files/ca/web/css/selectors_de_germans_adjacents/index.html new file mode 100644 index 0000000000..911a395693 --- /dev/null +++ b/files/ca/web/css/selectors_de_germans_adjacents/index.html @@ -0,0 +1,135 @@ +--- +title: Combinador de germans adjacents +slug: Web/CSS/Selectors_de_germans_adjacents +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador de germans adjacents (+) separa dos selectors i només coincideix amb el segon element si segueix immediatament el primer element, i tots dos són fills del mateix pare {{domxref("element")}}.

+ +
/* Paràgrafs que vénen immediatament després de qualsevol imatge */
+img + p {
+  font-style: bold;
+}
+ +

Sintaxi

+ +
former_element + target_element { style properties }
+
+ +

Exemple

+ +

CSS

+ +
li:first-of-type + li {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li>One</li>
+  <li>Two!</li>
+  <li>Three</li>
+</ul>
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 200, 100)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Li dóna un nou nom al combinador "next-sibling".
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 7 no actualitza l'estil correctament quan un element es col·loca dinàmicament abans d'un element que coincideixi amb el selector. En Internet Explorer 8, si un element s'insereix dinàmicament fent clic en un enllaç, l'estil del primer fill no s'aplicarà fins que l'enllaç perdi el focus.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/selectors_de_tipus/index.html b/files/ca/web/css/selectors_de_tipus/index.html new file mode 100644 index 0000000000..d87b102ac3 --- /dev/null +++ b/files/ca/web/css/selectors_de_tipus/index.html @@ -0,0 +1,135 @@ +--- +title: Selector Type +slug: Web/CSS/Selectors_de_Tipus +tags: + - CSS + - HTML + - NeedsMobileBrowserCompatibility + - Node + - Reference + - Selectors +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef}}
+ +

El selector type CSS coincideix amb elements per nom del node. En altres paraules, selecciona tots els elements del tipus donat dins d'un document.

+ +
/* Tots els elements <a>. */
+a {
+  color: purple;
+}
+ +

Sintaxi

+ +
element { style properties }
+
+ +

Exemple

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>Here's a span with some text.</span>
+<p>Here's a p with some text.</p>
+<span>Here's a span with more text.</span>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example', '100%', 150)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/selectors_general_de_germans/index.html b/files/ca/web/css/selectors_general_de_germans/index.html new file mode 100644 index 0000000000..64429bbaba --- /dev/null +++ b/files/ca/web/css/selectors_general_de_germans/index.html @@ -0,0 +1,129 @@ +--- +title: Combinador general de germans +slug: Web/CSS/Selectors_general_de_germans +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador general de germans (~) separa dos selectors i només coincideix amb el segon element si segueix el primer element (encara que no necessàriament immediatament), i tots dos són fills del mateix pare {{domxref("element")}}.

+ +
/* Paràgrafs que són germans i posteriors a qualsevol imatge */
+img ~ p {
+  color: red;
+}
+ +

Sintaxi

+ +
element ~ element { style properties }
+
+ +

Exemple

+ +

CSS

+ +
p ~ span {
+  color: red;
+}
+ +

HTML

+ +
<span>This is not red.</span>
+<p>Here is a paragraph.</p>
+<code>Here is some code.</code>
+<span>And here is a red span!</span>
+<code>More code...</code>
+<span>And this is a red span!</span>
+
+ +

Resultat

+ +

{{ EmbedLiveSample('Example', 280, 120) }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}{{Spec2('CSS4 Selectors')}}Li dona un nou nom al combinador "subsequent-sibling"
{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}793
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veure

+ + diff --git a/files/ca/web/css/selectors_id/index.html b/files/ca/web/css/selectors_id/index.html new file mode 100644 index 0000000000..1b6f041eb6 --- /dev/null +++ b/files/ca/web/css/selectors_id/index.html @@ -0,0 +1,134 @@ +--- +title: Selector ID +slug: Web/CSS/Selectors_ID +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef}}
+ +

En un document HTML, el selector ID CSS coincideix amb un element basat en el valor del seu atribut {{htmlattrxref("ID")}}. L'atribut ID de l'element seleccionat ha de coincidir exactament amb el valor indicat en el selector

+ +
/* The element with id="demo" */
+div#demo {
+  border: red 2px solid;
+}
+ +

Sintaxi

+ +
#id_value { style properties }
+ +

Recordeu que això és equivalent al següent {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[id=id_value] { style properties }
+ +

Exemple

+ +

CSS

+ +
div#identified {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div id="identified">This div has a special ID on it!</div>
+<div>This is just a regular div.</div>
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", '100%', 50)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/selectors_universal/index.html b/files/ca/web/css/selectors_universal/index.html new file mode 100644 index 0000000000..6aa7931ef9 --- /dev/null +++ b/files/ca/web/css/selectors_universal/index.html @@ -0,0 +1,176 @@ +--- +title: Selector Universal +slug: Web/CSS/Selectors_Universal +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef}}
+ +

El selector universal CSS (*) coincideix amb elements de qualsevol tipus.

+ +
/* Selecciona tots els elements */
+* {
+  color: green;
+}
+ +

A partir de CSS3, l'asterisc pot ser usat en combinació amb {{cssxref("CSS_Namespaces", "namespaces")}}:

+ + + +

Sintaxi

+ +
* { style properties }
+ +

L'asterisc és opcional amb selectors simples . Per exemple , *.warning i .warning són equivalents.

+ +

Exemples

+ +

CSS

+ +
* [lang^=en] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* automatically clear the next sibling after a floating element */
+.floating + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="warning">
+  <span lang="en-us">A green span</span> in a red paragraph.</span>
+</p>
+<p id="maincontent" lang="en-gb">
+  <span class="warning">A red span</span> in a green paragraph.</span>
+</p>
+ +

Resultat

+ +

{{EmbedLiveSample('Examples')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Defineix el comportament pel que fa als espais de noms i afegeix suggeriments que permeten ometre el selector dins de pseudo-elements
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}7{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Combinació amb suport d'espai de noms{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}981.3
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Combinació amb suport d'espai de noms{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/sintaxi/index.html b/files/ca/web/css/sintaxi/index.html new file mode 100644 index 0000000000..51931c11f0 --- /dev/null +++ b/files/ca/web/css/sintaxi/index.html @@ -0,0 +1,79 @@ +--- +title: Sintaxi +slug: Web/CSS/Sintaxi +tags: + - CSS + - Guide + - Reference + - Web +translation_of: Web/CSS/Syntax +--- +
{{cssref}}
+ +

L'objectiu bàsic del llenguatge de la Fulla d'Estil en Cascada (CSS) és permetre que un motor del navegador pinti elements de la pàgina amb característiques específiques, com ara colors, posicionament o decoracions. La sintaxi CSS reflecteix aquest objectiu i els seus components bàsics són:

+ + + +

Declaracions CSS

+ +

Establir propietats CSS a valors específics és la funció principal del llenguatge CSS. Un parell de propietats i valors s'anomena declaració, i qualsevol motor CSS calcula quines declaracions s'apliquen a cada element d'una pàgina per tal d'establir-la de forma adequada i definir-la.

+ +

Les dues propietats i els valors no són sensibles a majúscules i minúscules de manera predeterminada a CSS. El parell està separat per dos punts, ':' (U + 003A COLON), i els espais en blanc abans, entre i després de les propietats i valors, però no necessàriament a l'interior, s'ignoren.

+ +

css syntax - declaration.png

+ +

Hi ha més de 100 propiertats diferents en CSS i un nombre gairebé infinit de valors diferents. No es permeten tots els parells de propietats i valors i cada propietat defineix quins són els valors vàlids. Quan un valor no és vàlid per a una propietat determinada, la declaració es considera invàlida i és totalment ignorada per el motor CSS .

+ +

Blocs de declaracions CSS

+ +

Les declaracions s'agrupen en blocs, és a dir, en una estructura delimitada per una clau d'obertura, '{' (U+007B LEFT CURLY BRACKET), i una de tancament, '}' (U+007D RIGHT CURLY BRACKET). Els blocs de vegades poden ser niats, de manera que les claus d'oberture i tancament han de coincidir.

+ +

css syntax - block.png

+ +

Aquests blocs són naturalment anomenats blocs de declaració i les declaracions dins d'elles estan separades per un punt i coma, ';' (U + 003B SEMICOLON). Un bloc de declaració pot estar buit, aixó és, que conté una declaració nul·la. Els espais en blanc al voltant de les declaracions s'ignoren. L'última declaració d'un bloc no necessita ser acabada per un punt i coma, tot i que sovint es considera un bon estil per fer-ho ja que evita oblidar-se d'afegir-lo quan s'estén el bloc amb una altra declaració.

+ +

css syntax - declarations block.png

+ +
El contingut d'un bloc de declaració CSS, és una llista de declaracions separades per punt i coma, sense les claus inicials i de tancament, es pot incloure dins d'un atribut d'estil.
+ +

Regles de CSS

+ +

Si les fulles d'estil només poguessin aplicar una declaració a cada element d'una pàgina web, serien bastant inútils. L'objectiu real és aplicar diferents declaracions a diferents parts del document.

+ +

CSS ho permet associant condicions amb blocs de declaracions. Cada bloc de declaració (vàlid) està precedit d'un o més selectors que són condicions que seleccionen alguns elements de la pàgina. El bloc de declaracions d'un grup de parells de selectors s'anomena un conjunt de regles (ruleset), o sovint només una regla (rule).

+ +

css syntax - ruleset.png

+ +

Com que un element de la pàgina pot coincidir amb diversos selectors i, per tant, amb diverses regles que poden incloure una propietat determinada en diverses ocasions, amb valors diferents, l'estàndard CSS defineix quina té prioritat sobre l'altra i s'ha d'aplicar: això s'anomena algorisme en cascade.

+ +
És important notar que fins i tot si un conjunt de regles caracteritzat per un grup de selectors és una espècie d'abreviatura que reemplaça els conjunts de regles amb un sol selector cadascun, això no s'aplica a la validesa del conjunt de regles en si.
+
+Això dóna lloc a una conseqüència important: si un únic selector bàsic no és vàlid, com quan s'utilitza un pseudo-element o pseudo-classe desconegut, el selector sencer és invàlid i per tant s'ignora tota la regla (no és vàlida).
+ +

Sentències CSS

+ +

Els conjunts de regles són els blocs principals de construcció d'una fulla d'estil, que sovint només consisteixen en una gran llista d'elles. Però hi ha una altra informació que un autor web vol transmetre en la fulla d'estil, com el joc de caràcters, altres fulles d'estil externes per importar, descripcions de tipus de fonts o comptadors de llistes i molts més. Utilitzarà altres tipus específics de declaracions per fer-ho.

+ +

Una declaració és un bloc de construcció que comença amb qualsevol caràcter que no sigui l'espai i que finalitza en la primera clau de tancament o punt i coma (fora d'una cadena, no escapada i no s'inclou en un altre parell de {}, () o []).

+ +

css syntax - statements Venn diag.png

+ +

Hi ha dos tipus de declaracions:

+ + + +

Qualsevol declaració que no sigui un conjunt de regles (ruleset) o una at-rule no és vàlida i és ignorada.

+ +

Hi ha un altre grup de declaracions – les declaracions niades. Aquestes són declaracions que es poden utilitzar en un subconjunt específic de regles-at – les regles de grup condicional. Aquestes declaracions només s'apliquen si es compleix una condició específica: el contingut de la regla-at @media només s'aplica si el dispositiu en què el navegador s'executa coincideix amb la condició expressada; el contingut de la regla-at @document només s'aplica si la pàgina actual coincideix amb algunes condicions, i així successivament. En CSS1 i CSS2.1, només es podien utilitzar conjunts de regles dins de les regles de grup condicional. Això va ser molt restrictiu i aquesta restricció es va aixecar en CSS Conditionals Level 3. Ara, tot i que encara és experimental i no és compatible amb tots els navegadors, les regles de grup condicional poden contenir un rang de contingut més ampli: però també alguns conjunts de regles, però no totes les regles-at.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/visibility/index.html b/files/ca/web/css/visibility/index.html new file mode 100644 index 0000000000..ce3e835ec9 --- /dev/null +++ b/files/ca/web/css/visibility/index.html @@ -0,0 +1,242 @@ +--- +title: visibility +slug: Web/CSS/visibility +tags: + - CSS + - CSS Box Model + - CSS Property + - Layout + - Reference + - Web +translation_of: Web/CSS/visibility +--- +
{{CSSRef}}
+ +

La propietat CSS visibility pot mostrar o ocultar un element sense afectar el disseny d'un document (és a dir, es crea espai per a elements, independentment de si són visibles o no). La propietat també pot ocultar files o columnes en un {{HTMLElement("table")}}.

+ +
/* Valors de les paraules claus */
+visibility: visible;
+visibility: hidden;
+visibility: collapse;
+
+/* Valors globals */
+visibility: inherit;
+visibility: initial;
+visibility: unset;
+
+ +
+

Nota: Per ocultar un element i eliminar-lo del disseny del document, establiu la propietat {{cssxref("display")}} a none en comptes d'utilitzar visibility.

+
+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat visibility s'especifica com un dels valors de les paraules clau que es detallen a continuació.

+ +

Valors

+ +
+
visible
+
La caixa de l'element és visible.
+
hidden
+
La caixa de l'element és invisible (no dibuixada), però encara afecta el disseny normal. Els descendents de l'element seran visibles si tenen visibility establert a visible. L'element no pot rebre el focus (com ara quan navegueu pels índexs de pestanyes).
+
collapse
+
Per {{HTMLElement("table")}} files, columnes, grups de columnes i grups de files, les files o columnes estan ocults i l'espai que han ocupat s'elimina (com si {{Cssxref("display")}}: none s'apliqués a la columna/fila de la taula). Tanmateix, la grandària d'altres files i columnes encara es calcula com si les cel·les de les files o columnes col·lapsades estiguessin presents. Aquest valor permet l'eliminació ràpida d'una fila o columna d'una taula sense forçar el recàlcul d'amplades i alçades per a tota la taula. Per als elements XUL, la grandària calculada de l'element sempre és zero, independentment d'altres estils que normalment afectarien la grandària, tot i que els marges encara tenen efecte. Per a altres elements, collapse es tracta igual que hidden.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Interpolació

+ +

Els valors de visibilitat són interpolables entre visible i no visible. Per tant, un dels valors d'inici o de finalització ha de ser visible o no es pot produir interpolació. El valor s'interpola com un pas discret, on els valors de la funció de temporització entre 0 i 1 es corresponen amb visible i altres valors de la funció de temporització (que només es produeixen a l'inici/final de la transició o com a resultat de funcions cubic-bezier() amb valors y fora de [0, 1]) aplicat fins a l'extrem més proper.

+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

+ +
<p class="visible">The first paragraph is visible.</p>
+<p class="not-visible">The second paragraph is NOT visible.</p>
+<p class="visible">The third paragraph is visible. Notice the second paragraph is still occupying space.</p>
+
+ +

CSS

+ +
.visible {
+  visibility: visible;
+}
+
+.not-visible {
+  visibility: hidden;
+}
+
+ +

{{EmbedLiveSample('Basic_example')}}

+ +

Exemple de taula

+ +

HTML

+ +
<table>
+  <tr>
+    <td>1.1</td>
+    <td class="collapse">1.2</td>
+    <td>1.3</td>
+  </tr>
+  <tr class="collapse">
+    <td>2.1</td>
+    <td>2.2</td>
+    <td>2.3</td>
+  </tr>
+  <tr>
+    <td>3.1</td>
+    <td>3.2</td>
+    <td>3.3</td>
+  </tr>
+</table>
+ +

CSS

+ +
.collapse {
+  visibility: collapse;
+}
+
+table {
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid gray;
+}
+
+ +

{{EmbedLiveSample('Table_example')}}

+ +

Notes

+ + + +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}{{Spec2('CSS3 Flexbox')}}Defineix el valor de collapse tal com s'aplica als elements flex.
{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}{{Spec2('CSS3 Box')}}No hi ha cap canvi.
{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}{{Spec2('CSS3 Transitions')}}Defineix visibility com animable.
{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}{{Spec2('CSS2.1')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}[2]4.0[4]4.0[3]1.0[1]
col.lapse62{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.01.0[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}[2]6.06.0[3]1.0[1]
col.lapse{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +

[1] Chrome i Safari tractant visibility: collapse com hidden, deixant un buit blanc; només ho suporten {{HTMLElement("tr")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} i {{HTMLElement("tfoot")}}, però no als elements {{HTMLElement("col")}} i {{HTMLElement("colgroup")}}.

+ +

[2] Firefox no amaga les vores quan s'amaguen els elements {{HTMLElement("col")}} i {{HTMLElement("colgroup")}} si està establert border-collapse: collapse.

+ +

[3] A Opera, visibility: collapse funciona en elements de taula, però no sembla amagar un {{HTMLElement("tfoot")}} si és adjacent a un {{HTMLElement("tbody")}} visible.

+ +

[4] Internet Explorer no admet visibility: initial. Fins a IE7, els descendents d'elements hidden seguiran sent invisibles fins i tot si tenen visibility definida com visible.

diff --git a/files/ca/web/css/width/index.html b/files/ca/web/css/width/index.html new file mode 100644 index 0000000000..ced3086fa8 --- /dev/null +++ b/files/ca/web/css/width/index.html @@ -0,0 +1,204 @@ +--- +title: width +slug: Web/CSS/width +tags: + - CSS + - CSS Property + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/width +--- +

{{CSSRef}}

+ +

La propietat CSS width especifica l'amplada d'un element. Per defecte, estableix l'amplada de l'àrea de contingut. però si {{cssxref("box-sizing")}} està establert a border-box, aquest determina l'amplada de l'àrea de vora.

+ +
{{EmbedInteractiveExample("pages/css/width.html")}}
+ + + +

Les propietats {{cssxref("min-width")}} i {{cssxref("max-width")}} anul·la {{cssxref("width")}}.

+ +

Sintaxi

+ +
/* <length> values */
+width: 300px;
+width: 25em;
+
+/* <percentage> value */
+width: 75%;
+
+/* Keyword values */
+width: max-content;
+width: min-content;
+width: fit-content(20em);
+width: auto;
+
+/* Global values */
+width: inherit;
+width: initial;
+width: unset;
+
+ +

La propietat width s'especifica com a:

+ + + +

Valors

+ +
+
{{cssxref("<length>")}}
+
Defineix l'amplada com un valor absolut.
+
{{cssxref("<percentage>")}}
+
Defineix l'amplada com a percentatge de l'amplada del bloc que conté.
+
auto
+
El navegador calcularà i seleccionarà una amplada per a l'element especificat.
+
max-content
+
L'amplada intrínseca preferida.
+
min-content
+
L'amplada mínima intrínseca.
+
fit-content({{cssxref("<length-percentage>")}})
+
Utilitza la fórmula fit-content amb l'espai disponible substituït per l'argument especificat, i. e. min(max-content, max(min-content, <length-percentage>)).
+
+ +

Qüestions d'accessibilitat

+ +

Ens hem d'assegurar que els elements establerts amb un width no estan truncats i que no enfosqueixin altres continguts quan la pàgina s'ampliï per augmentar la mida del text.

+ + + +

Definició formal

+ +

{{CSSInfo}}

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Amplada per defecte

+ +
p.goldie {
+  background: gold;
+}
+ +
<p class="goldie">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('Default_width', '500px', '64px')}}

+ +

Pixels i ems

+ +
.px_length {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.em_length {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+
+ +
<div class="px_length">Width measured in px</div>
+<div class="em_length">Width measured in em</div>
+ +

{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}

+ +

Percentatge

+ +
.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}
+ +
<div class="percent">Width in percentage</div>
+ +

{{EmbedLiveSample('Percentage', '500px', '64px')}}

+ +

max-content

+ +
p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+  width: max-content;
+}
+ +
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('max-content', '500px', '64px')}}

+ +

min-content

+ +
p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+}
+ +
<p class="minblue">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('min-content', '500px', '155px')}}

+ +

Epecificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Added the max-content, min-content, fit-content keywords.
{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}{{Spec2('CSS2.1')}}Precises on which element it applies to.
{{SpecName('CSS1', '#width', 'width')}}{{Spec2('CSS1')}}Initial definition.
+ + + + + +

{{Compat("css.properties.width")}}

+ +

Veure també

+ + diff --git a/files/ca/web/guide/ajax/index.html b/files/ca/web/guide/ajax/index.html new file mode 100644 index 0000000000..4531a6fd92 --- /dev/null +++ b/files/ca/web/guide/ajax/index.html @@ -0,0 +1,26 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - Totes_les_categories +translation_of: Web/Guide/AJAX +--- +

 

+
Primers passos
+Una introducció a AJAX.
+
+

El JavaScript asincrònic i XML, (Asynchronous JavaScript and XML, AJAX, en anglès), no és una tecnologia per si mateixa, sinó un terme que descriu una «nova aproximació» davant de tecnologies ja existents com ara: HTML o XHTML, fulls d'estil en cascada, JavaScript, el model d'objectes de document, XML, XSLT, i l'l'objecte XMLHttpRequest. En combinar-les totes en el model d'AJAX, les aplicacions web poden fer actualitzacions ràpides i incrementals de la interfície d'usuari sense que calgui tornar a actualitzar la pàgina des del navegador. Això fa que l'aplicació respongui més ràpidament a les accions de l'usuari.

+
+

Documentació d'AJAX

+
AJAX:Primers passos
Aquest article us guiarà a través dels principis bàsics d'AJAX i amb dos pràctics exemples per a anar per feina.
+
+
Notes sobre AJAX
Col·lecció d'apunts sobre AJAX.
+
+

Temes relacionats

+
HTML, XHTML, CSS, DOM, JavaScript, XML, XMLHttpRequest, XSLT, DHTML
+
+

Categories

+

Interwiki Language Links

+

 

+

{{ languages( { "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "ja": "ja/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX" } ) }}

diff --git a/files/ca/web/guide/ajax/primers_passos/index.html b/files/ca/web/guide/ajax/primers_passos/index.html new file mode 100644 index 0000000000..ea59270ae8 --- /dev/null +++ b/files/ca/web/guide/ajax/primers_passos/index.html @@ -0,0 +1,192 @@ +--- +title: Primers passos +slug: Web/Guide/AJAX/Primers_passos +tags: + - AJAX + - Totes_les_categories +translation_of: Web/Guide/AJAX/Getting_Started +--- +

+Aquest article us guiarà a través dels principis bàsics d'AJAX i amb dos pràctics exemples per a anar per feina. +

+

Què és l'AJAX?

+

El JavaScript asincrònic i XML, (Asynchronous JavaScript and XML, AJAX, en anglès) és un neologisme per a dues potents característiques de navegació que fa anys que existeixen, però que han estat ignorades per molts desenvolupadors web fins a la recent arribada d'aplicacions com Gmail, Google suggest o Google Maps. +

Les dues característiques en qüestió són poder: +

+ +

Primer pas – Com fer una sol·licitud HTTP

+

Per a fer una sol·licitud HTTP (HTTP request) al servidor fent servir JavaScript, us cal una instància d'una classe que us en proporcioni la funcionalitat. Aquest tipus de classe va introduir-se originalment a l'Internet Explorer com a objecte ActiveX, anomenant-se XMLHTTP. Més endavant, Mozilla i Safari implementaren una classe, XMLHttpRequest, que funciona amb els mètodes i propietats de l'objecte original ActiveX de Microsoft. +

Com a resultat, per a crear una instància (objecte) de la classe perquè funcioni a tots els navegadors, heu de fer: +

+
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    sol·licitud_HTTP = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    sol·licitud_HTTP = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+

(L'exemple anterior és una versió simplificada il·lustrativa del codi que s'utilitza per a crear una instància XMLHTTP. Per a un exemple del dia a dia, consulteu el tercer pas d'aquest article.) +

Algunes versions dels navegadors Mozilla no funcionaran correctament si la resposta del servidor no té una capçalera MIME XML. Per a satisfer aquesta exigència, podeu utilitzar una crida d'un mètode extra per a ignorar la capçalera que pogués enviar el servidor, si aquesta no fos text/xml. +

+
sol·licitud_HTTP = new XMLHttpRequest();
+sol·licitud_HTTP.overrideMimeType('text/xml');
+
+

Tot seguit, cal decidir què voleu fer després de rebre la resposta del servidor a la vostra sol·licitud. En aquest estadi, només cal que especifiqueu a l'objecte de sol·licitud HTTP quina funció de JavaScript processarà la resposta. +Això es fa definint la propietat onreadystatechange de l'objecte per al nom de la funció de JavaScript que penseu fer sevir, tal com es mostra a continuació: +

sol·licitud_HTTP.onreadystatechange = nom_de_la_funció; +

Tingueu en compte que no hi ha parèntesis després del nom de la funció i no es passa cap paràmetre. A més, en comptes de donar un nom de funció, podeu utilitzar la tècnica de JavaScript de definir funcions al vol i les accions que en processaran la resposta, tal com es mostra a continuació:

+
sol·licitud_HTTP.onreadystatechange = function(){
+    // fes el que calgui
+};
+
+

Després d'haver declarat allò que passarà després de rebre la resposta, cal fer-ne la sol·licitud. Heu de cridar els mètodes open() i send() de la classe de sol·licitud HTTP, tal com es mostra a continuació: +

+
sol·licitud_HTTP.open('GET', 'http://www.exemple.org/algun.fitxer', true);
+sol·licitud_HTTP.send(null);
+
+ +

El paràmetre al mètode send() pot ser qualsevol dada que vulgueu enviar al servidor si s'envia la sol·licitud amb POST. Les dades cal que siguin de la forma d'una cadena de consulta com aquesta: +

nom=valor&un_altre_nom=un_altre_valor&i_així=anar_fent +

Tingueu en compte que si voleu enviar dades amb POST, heu de canviar el tipus MIME de la sol·licitud utilitzant la següent línia: +

+
sol·licitud_HTTP.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+

Si no ho feu així, el servidor rebutjarà les dades que hi hàgiu enviat. +

+

Segon pas – Gestionar la resposta del servidor

+

Recordeu que quan envieu la sol·licitud, també proporcioneu el nom de la funció JavaScript destinada a gestionar-ne la resposta. +

sol·licitud_HTTP.onreadystatechange = nom_de_la_funció; +

Observem què hauria de fer aquesta funció. Primer, cal que comprovi l'estat de la sol·licitud. Si aquesta té el valor 4, vol dir que s'ha rebut una resposta total del servidor i podeu continuar processant-la.

+
if (sol·licitud_HTTP.readyState == 4) {
+    // tot va bé, s'ha rebut la resposta
+} else {
+    // encara no està preparada
+}
+
+

La llista sencera de valors d'estat, readyState, és la següent: +

+ +

(Font) +

A continuació, cal que comproveu el codi d'estat de la resposta de servidor HTTP. Tots els codis possible es llisten al lloc del W3C. Per als nostres objectius, només ens interessa la resposta 200 OK. +

+
if (sol·licitud_HTTP.status == 200) {
+    // perfecte!
+} else {
+    // hi ha hagut algun problema amb la sol·licitud
+    // per exemple, la resposta podria ser uns codis de resposta
+    // 404 (Not Found) o 500 (Internal Server Error)
+}
+
+

Després d'haver comprovat l'estat de la sol·licitud i el codi d'estat HTTP de la resposta, heu de decidir què voleu fer amb les dades que el servidor us ha enviat. Teniu dues opcions per a accedir a les dades: +

+ +

Tercer pas – Un exemple simple

+

Posem-ho tot junt i fem una sol·licitud HTTP simple. El nostre codi JavaScript sol·licitarà un document HTML, prova.html, que conté el text «Açò és un text.» i llavors notificarà, alert(), els continguts del fitxer prova.html. +

+
<script type="text/javascript" language="javascript">
+
+
+
+    function fes_sol·licitud(url) {
+
+        var sol·licitud_HTTP = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            sol·licitud_HTTP = new XMLHttpRequest();
+            if (sol·licitud_HTTP.overrideMimeType) {
+                sol·licitud_HTTP.overrideMimeType('text/xml');
+                // Vegeu la nota a sota
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                sol·licitud_HTTP = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    sol·licitud_HTTP = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!sol·licitud_HTTP) {
+            alert('S\'abandona :( No es pot crear una instància d'XMLHTTP');
+            return false;
+        }
+        sol·licitud_HTTP.onreadystatechange = function() { notifica_continguts(sol·licitud_HTTP); };
+        sol·licitud_HTTP.open('GET', url, true);
+        sol·licitud_HTTP.send(null);
+
+    }
+
+    function notifica_continguts(sol·licitud_HTTP) {
+
+        if (sol·licitud_HTTP.readyState == 4) {
+            if (sol·licitud_HTTP.status == 200) {
+                alert(sol·licitud_HTTP.responseText);
+            } else {
+                alert('Hi ha hagut un problema amb la sol·licitud.');
+            }
+        }
+
+    }
+</script>
+<span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="fes_sol·licitud('prova.html')">
+        Fes una sol·licitud
+</span>
+
+


+En aquest exemple: +

+ +

Podeu provar l'exemple ací i veure el fitxer de prova també ací. +

Nota: La línia sol·licitud_HTTP.overrideMimeType('text/xml'); anterior donarà errors a la consola de Javascript al Firefox 1.5b tal com es documenta a https://bugzilla.mozilla.org/show_bug.cgi?id=311724 si la pàgina que es crida per XMLHttpRequest no és un XML vàlid (p.ex., si és text net). +

Si obteniu un error de sintaxi (Syntax Error) o de mal format (Not Well Formed Error) en el navegador, i no esteu intentant carregar una pàgina XML per XMLHttpRequest, suprimiu aquesta línia del codi. +

Nota 2: si envieu una sol·licitud a un codi que retorni XML, en comptes d'un fitxer XML estàtic, heu d'especificar-ne algunes capçaleres de resposta si la vostra pàgina ha de funcionar amb l'Internet Explorer a més d'amb el Mozilla. Si no hi definiu la capçalera, Content-Type: application/xml, l'IE llançarà un error de Javascript 'Object Expected' després de la línia des d'on intenteu accedir a un element XML. Si no hi definiu una capçalera, Cache-Control: no-cache, el navegador emmagatzemarà a la memòria cau la resposta i no tornarà mai a trametre la sol·licitud, fent llavors que la depuració sigui tot un repte. +

Nota 3: si la variable sol·licitud_HTTP s'utilitza globalment, aquelles funcions «competidores» que cridin a fes_sol·licitud() poden anul·lar-se unes a les altres, provocant doncs una condició de cursa. En declarar sol·licitud_HTTP com una variable local a la funció i passar-la a la funció notifica_continguts() ho evita. +

Note 4: Per a registrar la funció de resposta onreadystatechange, no podeu tenir cap argument: +

+
sol·licitud_HTTP.onreadystatechange = function() { notifica_continguts(sol·licitud_HTTP); };  //1 (sol·licitud simultània)
+sol·licitud_HTTP.onreadystatechange = notifica_continguts(sol·licitud_HTTP); //2 (no funciona)
+sol·licitud_HTTP.onreadystatechange = notifica_continguts;  //3 (variable global)
+
+

El mètode 1 us permet tenir diferent sol·licituds fetes simultàniament, el 2 no funciona, i el 3 s'utilitza si sol·licitud_HTTP és una variable global. +

+

Quart pas – Treballant amb la resposta XML

+

En l'anterior exemple, després que es rebés la resposta a la sol·licitud HTTP, vam fer servir la propietat reponseText de l'objecte de sol·licitud i contenia els continguts del fitxer prova.html. Provem-ho ara amb la propietat responseXML. +

Comencem creant un document XML vàlid, que sol·licitarem més endavant. El document (prova.xml) conté el següent: +

+
<?xml version="1.0" ?>
+<root>
+    Açò és una prova.
+</root>
+
+

A la seqüència, només cal que canviar-hi la línia de sol·licitud per: +

+
...
+onclick="fes_sol·licitud('prova.xml')">
+...
+
+

Llavors a notifica_continguts() cal que reemplacem la línia amb alert() d'alert(sol·licitud_HTTP.responseText); per: +

+
var document_xml = sol·licitud_HTTP.responseXML;
+var node_arrel = document_xml.getElementsByTagName('root').item(0);
+alert(node_arrel.firstChild.data);
+
+

D'aquesta forma prenem l'objecte XMLDocument donat per responseXML i utilitzem els mètodes DOM per a accedir a algunes dades que es troben al document XML. Podeu veure-ho a prova.xml ací i la seqüència de prova actualizada ací. +

Per a més informació dels mètodes DOM, consulteu els documents de la implementació DOM de Mozilla. +

{{ languages( { "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }} diff --git a/files/ca/web/guide/css/inici_en_css/caixes/index.html b/files/ca/web/guide/css/inici_en_css/caixes/index.html new file mode 100644 index 0000000000..536ea9b5e1 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/caixes/index.html @@ -0,0 +1,341 @@ +--- +title: Caixes +slug: Web/Guide/CSS/Inici_en_CSS/Caixes +tags: + - Basic + - Beginner + - CSS + - CSS Borders + - CSS Margin + - CSS Padding + - 'CSS:Getting_Started' + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Llistes") }}Aquesta és la 11th secció del tutorial CSS Getting Started descriu com podeu utilitzar CSS per controlar l'espai que ocupa un element quan es mostra. En el document d'exemple, canviareu l'espaiat i afegireu regles decoratives.

+ +

Informació: Caixes

+ +

Quan el navegador mostra un element, l'element ocupa espai. Hi ha quatre parts en l'espai que ocupa.

+ +

Al mig, és l'espai que l'element necessita per mostrar el seu contingut. Al voltant d'això, hi ha un padding (farciment). Al voltant d'això, hi ha un border (vora). Al voltant d'això, hi ha un margin (marge) que separa l'element d'altres elements.

+ + + + + + + + +
+
+

margin (marge)

+ +

border (vora)

+ +
+

padding (farciment)

+ +
+

element

+
+
+
+ +

El gris pàl·lid mostra parts de la disposició.

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

Això és el que es veu en el vostre navegador.

+
+ +

El farcit, vora i marge poden tenir diferents mides en la part superior, dret, inferior i esquerra de l'element. Qualsevol o totes aquestes mides poden ser zero.

+ +

Acolorir

+ +

El farcit és sempre del mateix color que el fons de l'element. Així que quan s'estableix el color de fons, es veu el color aplicat a l'element en si i el seu farcit. El marge és sempre transparent.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

L'element té un fons verd.

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

Això és el que es veu en el vostre navegador.

+
+ +

Vores

+ +

Podeu utilitzar les vores per decorar elements amb línies o caixes.

+ +

Per especificar la mateixa vora a tot al voltant d'un element, utilitzeu la propietat {{ cssxref("border") }}. Especificar l'ample (en píxels en general per a la seva visualització en una pantalla), l'estil i el color.

+ +

Els estils són:

+ + + + + + + + + + + + + + + + +
+
solid
+ 		+
dotted
+ 		+
dashed
+ 		+
double
+
+
inset
+ 		+
outset
+ 		+
ridge
+ 		+
groove
+
+ +

També podeu establir l'estil a none o hidden per eliminar de forma explícita la vora, o establir el color a transparent per fer la vora invisible sense canviar el disseny.

+ +

Especificar vores a un costat alhora, utilitzeu les propietats: {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}. Podeu utilitzar aquests per especificar una vora en un sol costat, o diferentes vores en diferents costats.

+ +
+
Exemple
+ +

Aquesta regla estableix el color de fons i la vora de la part superior dels elements d'encapçalament:

+ +
h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+
+ +

El resultat és el següent:

+ + + + + + + +
+

Stylish heading

+
+ +

Aquesta regla fa que les imatges siguin més fàcils de veure, donant-los una vora gris mig en tot:

+ +
img {border: 2px solid #ccc;}
+
+ +

El resultat és el següent:

+ + + + + + + + +
Imatge:Image:Blue-rule.png
+
+ +

Marges i farciment

+ +

Utilitzeu marges i farciment per ajustar les posicions dels elements i crear l'espai que els envolta.

+ +

Utilitzeu la propietat {{ cssxref("margin") }} o la propietat {{ cssxref("padding") }} per establir els amples dels marges o de farciment, respectivament.

+ +

Si s'especifica una amplada, s'aplica al voltant de tot l'element (a dalt, dreta, a sota i a l'esquerra).

+ +

Si s'especifica dos amples, la primera s'aplica a la part superior i inferior, la segona a la dreta i l'esquerra.

+ +

Podeu definir els quatre amplades en l'ordre: dalt, dreta, a sota, a l'esquerra.

+ +
+
Exemple
+ +

Aquesta regla distingeix els paràgrafs amb la classe remark, donant-los una vora vermella al seu voltant.

+ +

El farciment al seu voltant separa la vora del text una mica.

+ +

Un marge esquerre sagna el paràgraf en relació amb la resta del text:

+ +
p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+
+ +

El resultat és el següent:

+ + + + + + + +
+

Here is a normal paragraph.

+ +

Here is a remark.

+
+
+ +
+
Més detalls
+ +

Quan s'utilitzan marges i farcit per ajustar la forma en què els elements es disposen, les seves regles d'estil interactuen amb els valors per defecte del navegador en formes que poden ser complexes.

+ +

Els diferents navegadors posen elements de manera diferent. Els resultats podrien ser similar fins que la vostre fulla d'estil canvia les coses. A vegades això pot fer que les vostres fulles d'estil donin resultats sorprenents.

+ +

Per obtenir el resultat desitjat, és possible que hàgiu de canviar el marcat del document. La pàgina següent d'aquest tutorial teniu més informació sobre això.

+ +

Per a més informació sobre el farciment, marges i vores, vegeu la pàgina de referència Model de caixa.

+
+ +

Acció: Afegir vores

+ +

Editeu l'arxiu CSS, style2.css. Afegiu aquesta regla per dibuixar una línia a través de la pàgina sobre cada capçalera:

+ +
h3 {border-top: 1px solid gray;}
+
+ +

Si vau prendre el repte de l'última pàgina, modifiqueu la regla que heu creat, en cas contrari afegiu aquesta nova regla, la d'afegir un espai sota cada element de la llista:

+ +
li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+
+ +

Actualitzeu el navegador per veure el resultat:

+ + + + + + + +
+

(A) The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+ +

(B) Numbered paragraphs

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +
+
Repte
+ +

Afegiu una regla a la fulla d'estils, fent una vora àmpla al voltant dels oceans en un color que recordi al mar, alguna cosa com això:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +

. . .

+
+ +

 

+ +

(No hi ha necessitat perquè coincideixi amb l'amplada i el color que es veu aquí exactament.)

+
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny") }}En definir marges i farcit, heu modificat el disseny del document. A la pàgina següent es canvia el disseny del vostre document d'altres maneres.

diff --git "a/files/ca/web/guide/css/inici_en_css/cascada_i_her\303\250ncia/index.html" "b/files/ca/web/guide/css/inici_en_css/cascada_i_her\303\250ncia/index.html" new file mode 100644 index 0000000000..5fba4aea87 --- /dev/null +++ "b/files/ca/web/guide/css/inici_en_css/cascada_i_her\303\250ncia/index.html" @@ -0,0 +1,150 @@ +--- +title: Cascada i herència +slug: Web/Guide/CSS/Inici_en_CSS/Cascada_i_herència +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Com funciona el CSS")}}Aquesta és la quarta secció del tutorial CSS Getting Started ; descriu com els fulls d'estil interactuenen en cascada, i com els elements hereten l'estil dels seus pares. S'agrega a la vostre fulla d'estils d'exemple, utilitzant l'herència per alterar l'estil de moltes parts del document en un sol pas.

+ +

Informació: Cascada i herència

+ +

L'estil final per a un element es pot especificar en molts llocs diferents, que poden interactuar d'una manera complexa. Aquesta interacció complexa fa que el CSS sigui de gran abast, però també pot fer que sigui confús i difícil de depurar.

+ +

Tres fonts principals d'informació d'estil formen una cascada. Aqueste son:

+ + + +

L'estil de l'usuari modifica l'estil per defecte del navegador. L'estil de l'autor del document modifica l'estil una mica més. En aquest tutorial, vosaltres sou l'autor del document d'exemple, i només es treballa amb fulls d'estil d'autor.

+ +
+
Exemple
+ +

Quan llegiu aquest document en un navegador, part de l'estil que es veu prové dels valors per defecte del navegador per HTML.

+ +

Part de l'estil podria venir de la configuració del navegador a mida o un arxiu de definició d'estil personalitzat. A Firefox, la configuració es pot personalitzar en el quadre de diàleg Preferències, o es pot especificar estils en un arxiu userContent.css arxiu anomenat en el vostre perfil de navegador.

+ +

Part de l'estil prové de les fulles d'estil vinculades al document per part del servidor.

+
+ +

En obrir el document d'exemple en el navegador, els elements {{ HTMLElement("strong") }} destacan més que la resta del text. Això ve de l'estil per defecte del navegador per HTML.

+ +

Els elements {{ HTMLElement("strong") }} són de color vermell. Això ve de la pròpia fulla d'estils d'exemple.

+ +

Els elements {{ HTMLElement("strong") }} també hereten gran part de  l'estil de l'element {{HTMLElement ("p")}}, perquè són els seus fills. De la mateixa manera, l'element {{ HTMLElement("p") }} hereta gran part de l'estil de l'element {{ HTMLElement("body") }}.

+ +

Per estils en cascada, els fulls d'estil d'autor tenen prioritat, a continuació els fulls d'estil del lector i seguidament els valors per defecte del navegador.

+ +

Per estils heretats, l'estil propi d'un node fill té prioritat sobre l'estil heretat del seu pare.

+ +

Aquestes no són les úniques prioritats que s'apliquen. Una pàgina més endavant en aquest tutorial s'explica més.

+ +
+
Més detalls
+ +

CSS proporciona una manera perquè el lector pugui anul·lar l'estil de l'autor del document, mitjançant l'ús de la paraula clau !important.

+ +

Això vol dir que, com a autor del document, no sempre es pot predir amb exactitud el que els vostres lectors veuran.

+ +

Si vols conèixer tots els detalls de cascada i herència, consulteu Assignació de valors de les propietats, Cascada i herència en l'especificació CSS.

+
+ +

Acció: L'ús de l'herència

+ +
    +
  1. Edita l'arxiu CSS d'exemple.
    2. +
  2. Afegir aquesta línia copiant-la i enganxant-la. Realment no importa si l'afegeixes per damunt o per sota de la línia ja existent. No obstant això, afegir-la en la part superior és el mes lògic, ja que en el document  l'element {{ HTMLElement("p") }} és el pare de l'element {{ HTMLElement("strong") }}: + 
    p {color: blue; text-decoration: underline;}
+
    +
    3. +
  3. Actualitzar el navegador per veure l'efecte en el document d'exemple. El subratllat afecta a tot el text en el paràgraf, incloent les lletres inicials. Els elements {{ HTMLElement("strong") }} han hagut d'heretar l'estil subratllat del seu pare, l'element {{ HTMLElement("p") }}.
    + +

    Però els elements {{ HTMLElement("strong") }} estan sent vermells. El color vermell correspont el seu propi estil, pel que té prioritat sobre el color blau del seu pare, l'element {{ HTMLElement("p") }}.

    +
    4. +
+ +

Abans

+ +

Contingut HTML

+ +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

Contingut CSS

+ +
strong {color:red}
+
+ +

{{ EmbedLiveSample('Before') }}

+ +

Després

+ +

Contingut HTML

+ +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+ +

Contingut CSS

+ +
p {color:blue; text-decoration:underline}
+strong {color:red}
+ +

{{ EmbedLiveSample('After') }}

+ +

 

+ +
+
Repte
+Modifiqueu el full d'estils perquè només les lletres vermelles estiguin subratllades: + + + + + + + +
Cascading Style Sheets
+ +
+
Possible solution
+ +

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

+ +
p {color: blue; }
+strong {color: red; text-decoration: underline;}
+
+ +

 

+Hide solution
+Veure la solució per el repte.
+ +

 

+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}El full d'estils d'exemple especifica els estils per a les etiquetes <p> i <strong>, modificant l'estil dels elements corresponents a tot el document. La següent secció descriu com especificar l'estil de manera més selectiva.

diff --git a/files/ca/web/guide/css/inici_en_css/color/index.html b/files/ca/web/guide/css/inici_en_css/color/index.html new file mode 100644 index 0000000000..3dfb2be55c --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/color/index.html @@ -0,0 +1,353 @@ +--- +title: Color +slug: Web/Guide/CSS/Inici_en_CSS/Color +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Estils de text")}}Aquesta és la 8th secció del tutorial CSS Getting Started tutorial;explica com especificar el color en CSS. En la vostre fulla d'estil d'exemple, s'introdueix colors de fons.

+ +

Informació: Color

+ +

En aquest tutorial fins al moment, s'ha utilitzat un nombre limitat de colors amb nom. CSS2 suporta 17 colors amb nom en tots. Alguns dels noms pot ser que no sigui l'esperat:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 negre (black) gris (gray) plata (silver) blanc (white) 
primarisvermell (red) Llima (lime) blau (blue) 
secundarisgroc (yellow) aigua (aqua) fúcsia (fuchsia) 
 marró (maroon) taronge (orange) oliva (olive) porpra (purple) verd (green) blau marí (navy) verd blavós (teal) 
+ +

 

+ +
+
Detalls
+ +

El vostre navegador pot suportar molts més colors amb nom, com:

+ + + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+ +

Per a més detalls d'aquesta llista ampliada, consulteu: SVG color keywords en CSS 3 mòdul de colors. Aneu amb compte d'utilitzar noms de colors que els lectors dels navegadors no siguin compatibles.

+
+ +

Per a una paleta gran, especifiqueu els components vermell, verd i blau del color que desitgeu mitjançant l'ús d'un signe de nombre (hash) i tres dígits hexadecimals en el rang de 0 - 9, a - f. Les lletres a - f representen els valors de 10 - 15:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
negre (black) #000
vermell (pure red) #f00
verd (pure green) #0f0
blau (pure blue) #00f
blanc (white) #fff
+ +


+ Per a la paleta completa, especificar dos dígits hexadecimals per a cada component:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
negre (black) #000000
vermell (pure red) #ff0000
verd (pure green) #00ff00
blau (pure blue) #0000ff
blanc (white) #ffffff
+ +

Normalment, es poden obtenir aquests codis hexadecimals de sis dígits d'un programa de gràfics o alguna altra eina.

+ +
+
Exemple
+ +

Amb una mica de pràctica, podeu ajustar els colors de tres dígits manualment per a la majoria de propòsits:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Comenceu amb el vermell pur : #f00
Perquè sigui més clar, afegir una mica de verd i blau : #f77
Perquè sigui més taronja, afegir una mica de verd addicional: #fa7
Per enfosquir, reduir tots els seus components: #c74
Per reduir la saturació, fer els seus components més iguals: #c98
Si feu tots ells exactament iguals, s'obté gris: #ccc
+ +

Per un to pastís com el blau pàl·lid:

+ + + + + + + + + + + + + + +
Comenceu amb blanc pur: #fff
Reduir els altres components una mica: #eef
+
+ +
+
Més detalls
+ +

També podeu especificar un color utilitzant valors decimals RGB en el rang de 0-255 o percentatges.

+ +

Per exemple, aquest és de color granat (vermell fosc):

+ +
rgb(128, 0, 0)
+
+ +

Per a més detalls sobre com especificar els colors, consulteu: Colors en l'especificació CSS.

+ +

Per obtenir informació sobre l'adequació dels colors del sistema de Menú i ThreeDFace, consulteu: Colors del Sistema en CSS2 en l'especificació CSS.

+
+ +

Propietats de color

+ +

Ja heu utilitzat la propietat {{ cssxref("color") }} en el text.

+ +

També podeu utilitzar la propietat {{ cssxref("background-color") }} per canviar el fons dels elements.

+ +

Els fons els podeu configurar com transparent per eliminar de forma explícita qualsevol color, deixant al descobert el fons de l'element pare.

+ +
+
Exemple
+ +

Les caixes d'exemple en aquest tutorial utilitza aquest fons de color groc pàl·lid:

+ +
background-color: #fffff4;
+
+ +

Les caixes de Més detalls utilitza aquest color gris pàl·lid:

+ +
background-color: #f4f4f4;
+
+
+ +

 

+ +

Acció: L'ús dels codis de color

+ +

Color de la pàgina

+ +
    +
  1. Editeu l'arxiu CSS.
    2. +
  2. Feu el canvi que es mostra aquí sota, per donar a les lletres inicials d'un fons blau pàl·lid. (La disposició i comentaris a l'arxiu probablement difereixen de l'arxiu que es mostra aquí. Mantenir la disposició i els comentaris de la manera que preferiu.)
    3. +
  3. +

    Contingut HTML

    + + 
    <p id = "first"> <strong>C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets</p>
+<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</p>
+
    + +

    Contingut CSS

    + + 
    /*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {
+  font: 16px "Comic Sans MS", cursive;
+}
+
+/* paragraphs */
+p {
+  color: blue;
+}
+#first {
+  font-style: italic;
+}
+
+/* initial letters */
+strong {
+  background-color: #ddf;
+  color: red;
+  font: 200% serif;
+}
+
+.spinach {
+  color: green;
+  background-color: #ddf;
+}
+
+
    +
    4. +
  4. Deseu el fitxer i actualitzeu el navegador per veure el resultat.
    5. +
  5. El resultat ha de ser com aquest:
    6. +
+ +

{{ EmbedLiveSample('Color_page', '', '', '', 'Web/Guide/CSS/Getting_started/Color') }}

+ +
+
Repte
+ +

A l'arxiu CSS, canviar els noms de colors als codis de color de 3 dígits sense afectar el resultat.

+ +

Això no es pot fer exactament, però es pot aconseguir aproximadament. Per fer-ho exactament es necessita codis de 6 dígits, i cal buscar l'especificació CSS o utilitzar una eina gràfica per a que coincideixi amb els colors.

+ +
+
Possible solution
+ +

The following values are reasonable approximations of the named colors:

+ +
strong {
+  color: #f00; /* red */
+  background-color: #ddf; /* pale blue */
+  font: 200% serif;
+}
+
+.carrot {
+  color: #fa0; /* orange */
+}
+
+.spinach {
+  color: #080; /* dark green */
+}
+
+p {
+  color: #00f; /* blue */
+}
+
+ +

 

+Hide solution
+Veure la solució per el repte.
+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Contingut")}}El document d'exemple i la seva fulla d'estil d'exemple separen el contingut de l'estil de forma estricta. La següent secció explica com es pot fer excepcions a aquesta estricta separació.

diff --git a/files/ca/web/guide/css/inici_en_css/com_funciona_el_css/index.html b/files/ca/web/guide/css/inici_en_css/com_funciona_el_css/index.html new file mode 100644 index 0000000000..4a2732c584 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/com_funciona_el_css/index.html @@ -0,0 +1,129 @@ +--- +title: Com funciona el CSS +slug: Web/Guide/CSS/Inici_en_CSS/Com_funciona_el_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Per què utilitzar CSS?") }}Aquesta tercera secció del tutorial CSS Getting Started explica com funciona CSS en el navegador i el propòsit del Document Object Model (DOM). També aprendreu com analitzar el document de mostra.

+ +

Informació: Com funciona el CSS

+ +

Quan un navegador mostra un document, s'ha de combinar el contingut del document amb la seva informació d'estil. El document es processa en dues etapes:

+ +
    +
  1. El navegador converteix el llenguatge de marcat i el CSS en el DOM (Document Object Model). El DOM representa el document a la memòria de l'ordinador. Combina el contingut del document amb el seu estil.
    2. +
  2. El navegador mostra el contingut de la DOM.
    3. +
+ +

Un llenguatge de marcat utilitza elements per definir l'estructura del document. Es marca un element mitjançant etiquetes, que són cadenes que comencen amb '<' i acaban amb '>'. La majoria dels elements tenen un parell d'etiquetes, una etiqueta d'inici i una etiqueta final. Per l'etiqueta d'inici, col·locar el nom de l'element entre '<' i '>'. Per l'etiqueta final, col·locar un '/' després que el '<' i abans que el nom de l'element.

+ +

Depenent del llenguatge de marques, alguns elements només tenen una etiqueta d'inici, o una sola etiqueta on el '/' ve després que el nom de l'element. Un element també pot ser un contenidor i incloure altres elements entre la seva etiqueta inicial i final. Recordeu sempre de tancar les etiquetes dins del contenidor.

+ +

Un DOM té una estructura en forma d'arbre. Cada element, atribut i extensió de text, en el llenguatge de marcat, es converteix en un node en l'estructura de l'arbre. Els nodes es defineixen per la seva relació amb altres nodes DOM. Alguns elements són els pares dels nodes fills, i els nodes fills tenen germans.

+ +

La comprensió del DOM ajuda a dissenyar, depurar i mantenir la CSS, pel fet que el DOM és on el CSS i el contingut del document es reuneixen.

+ +
+
Exemple
+ +
 
+En el vostre document d'exemple, l'etiqueta <p> i la seva etiqueta de tancament </p> creen un contenidor: + +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

Exemple en directe

+ +

{{ EmbedLiveSample('Information.3A_How_CSS_works', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}

+ +

En el DOM, el node corresponent P és un pare. Els seus fills són els nodes STRONG i els nodes de text. Els nodes STRONG són ells mateixos els pares, amb els nodes de text com els seus fills;

+ +
P
+├─STRONG
+│ └─"C"
+├─"ascading"
+├─STRONG
+│ └─"S"
+├─"tyle"
+├─STRONG
+│ └─"S"
+└─"heets"
+
+ +

Acció: Anàlisi d'un DOM

+ +

L'ús de DOM Inspector

+ +

Per analitzar un DOM, es necessita un programari especial. Podeu utilitzar el complement DOM Inspector de Mozilla (DOMi) per analitzar un DOM. Només haureu de instal·lar el complement (veure més detalls a continuació).

+ +
    +
  1. Utilitzeu el navegador Mozilla per obrir el document HTML d'exemple.
    2. +
  2. Des de la barra de menú del navegador, seleccioneu Tools > DOM Inspector, or Tools > Web Development > DOM Inspector. +
    +
    Més detalls
    + +

    Si el navegador Mozilla no té DOMI, podeu instalar-ho des de la web de complements i reiniciar el navegador. A continuació, tornar a aquest tutorial.

    + +

    Si no voleu instal·lar DOMi (o esteu fent servir un navegador que no és Mozilla), poodeu utilitzar Web X-Ray Goggles, tal com es descriu en la següent secció. O bé, podeu ometre aquesta secció i anar directament a la pàgina següent. Saltar-se aquesta secció no interfereix amb la resta del programa d'aprenentatge.

    +
    +
    3. +
  3. En DOMi, s'expandeixi els nodes del document fent clic a les fletxes. +

    Nota: Els espais creats en el arxiu HTML pot causar que DOMi mostri alguns nodes de text buits, que podeu ignorar.

    + +

    Part del resultat podria tenir aquest aspecte, depenent de quins nodes heu expandit:

    + + 
    │ ▼╴P
+│ │ │ ▼╴STRONG
+│ │ └#text
+│ ├╴#text
+│ ►╴STRONG
+│ │
    + +

    En seleccionar qualsevol dels nodes, podeu utilitzar el panell de la dreta de DOMi per esbrinar més sobre ell. Per exemple, quan es selecciona un node de text, DOMi mostra el text en el panell de la dreta.

    + +

    Quan se selecciona un node element, DOMi analitza i ofereix una enorme quantitat d'informació en el seu panell de la dreta. La informació d'estil és només part de la informació que proporciona.

    +
    4. +
+ +
+
Repte
+ +

En DOMi, feu clic en un node STRONG.

+ +

Utilitzeu el panell de la dreta de DOMi per esbrinar on el color del node és vermell, i on la seva aparença es fa més destacable que el text normal.

+ +
+
Possible solution
+ +

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

+Hide solution
+Veure la solució per el repte.
+ +

Utilitzar Web X-Ray Goggles

+ +

Web X-Ray Goggles mostra menys informació que DOM Inspector, però és més fàcil d'instal·lar i utilitzar.

+ +
    +
  1. Anar a la pàgina principal de Web X-Ray Goggles.
    2. +
  2. Arrossegar el enllaç de marcador a la pàgina de la barra d'eines del navegador.
    3. +
  3. Obriu el document HTML d'exemple.
    4. +
  4. Activar Web X-Ray Goggles fent clic al marcador a la barra d'eines.
    5. +
  5. Moure el punter del ratolí per sobre del document, per veure els elements del document.
    6. +
+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada & herència") }}Si heu pres el repte, veureu que la informació d'estil de més d'un lloc interacciona per crear l'estil final per a un element. La pàgina següent explica més sobre aquestes interaccions.

diff --git a/files/ca/web/guide/css/inici_en_css/css_llegible/index.html b/files/ca/web/guide/css/inici_en_css/css_llegible/index.html new file mode 100644 index 0000000000..d04a30ab4b --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/css_llegible/index.html @@ -0,0 +1,173 @@ +--- +title: CSS llegible +slug: Web/Guide/CSS/Inici_en_CSS/CSS_llegible +tags: + - CSS + - 'CSS:Getting_Started' + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - Web +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}Aquesta és la 6th secció del tutorial CSS Getting Started; s'analitza l'estil i la gramàtica del propi llenguatge CSS. Es canvia la forma en què  es veu el vostre arxiu CSS d'exemple, perquè sigui més llegible.

+ +

Informació: CSS Llegible

+ +

Podeu afegir espais en blanc i comentaris en les fulles d'estil perquè siguin més llegibles. També es poden agrupar selectors, quan les mateixes regles d'estil s'apliquen als elements seleccionats de diferents maneres.

+ +

Espai en blanc

+ +

L'espai en blanc vol dir espais reals, tabuladors i noves línies. Podeu afegir espais en blanc per fer les fulles d'estil més llegible.

+ +

En el context del disseny de la pàgina i composició, l'espai en blanc és la part de la pàgina que es deixa sense marcar: marges, separacions, i l'espai entre columnes i línies de text.

+ +

El arxiu CSS d'exemple actualment té una regla per línia, i gairebé el mínim d'espai en blanc. En un full d'estil complex aquesta disposició seria difícil de llegir, de manera que difilcutaria el seu manteniment.

+ +

El disseny escullit sol ser una preferència personal, però si els fulls d'estil són part de projectes compartits, aquests projectes podrian tenir les seves pròpies convencions.

+ +
+
Exemples
+ +

Hi ha qui els agrada el disseny compacte que hem estat utilitzant, i només divideixen una línia quan es fa molt llarga:

+ +
.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+ +

Hi ha qui prefereix una propietat-valor per línia:

+ +
.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+ +

Hi ha qui utilitza la sagnia de dos espais, quatre espais, o una tabulació són comuns:

+ +
.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+ +

Hi ha qui els agrada que tot estigui alienat verticalment (però un disseny com aquest és difícil de mantenir):

+ +
.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+ +

Hi ha qui fa servir espais en blanc mixtes per millorar la lectura.

+ +
.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+
+
+ +

Hi ha qui utilitza tabulacions per al disseny. Hi ha qui només utilitza espais.

+ +

Comentaris

+ +

Els comentaris en CSS comencen amb /* i acaban amb */.

+ +

Podeu utilitzar els comentaris per fer comentaris reals en el full d'estil, i també per comentar parts d'ell temporalment per a propòsits de prova.

+ +

Per comentar part d'un full d'estil, col·locar aquesta part en un comentari perquè el navegador ho ignori. Aneu amb compte on s'inicia i acaba el comentari. La resta del full d'estil ha de tenir una sintaxi correcta.

+ +
+
Exemple
+ +
/* style for initial letter C in first paragraph */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+ +

Selectors agrupats

+ +

Quan molts elements tenen el mateix estil, podeu especificar un grup de selectors, separant-los per comes. La declaració és vàlida per a tots els elements seleccionats.

+ +

En una altra part del full d'estils es poden especificar els mateixos selectors de nou de forma individual, per aplicar les regles d'estil individuals a ells.

+ +
+
Exemple
+ +

Aquesta regla fa que els elements {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }} i {{ HTMLElement("h3") }} tinguin el mateix color.

+ +

És convenient especificar el color en un sol lloc, en el cas en què hagi de ser canviat.

+ +
/* color for headings */
+h1, h2, h3 {color: navy;}
+
+
+ +

Acció: Afegir comentaris i millorar el disseny

+ +
    +
  1. Editeu l'arxiu CSS, i assegurar-se que té aquestes regles (en qualsevol ordre): + 
    strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+
    +
    2. +
  2. Feu que sigui més llegible reordenant-ho d'una manera que ho trobeu lògic, i mitjançant l'afegit d'espais en blanc i comentaris de la millor manera que us sembli.
    3. +
  3. Deseu el fitxer i refresqueu la pantalla del navegador, per assegurar-se que els canvis no afectin el funcionament de la fulla d'estil: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    4. +
+ +
+
Repte
+ +

Comenteu una part de la fulla d'estils, sense canviar res més, perquè la primera lletra del document sigui vermella:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

(Hi ha més d'una manera de fer això.)

+ +
+
Possible solution
+One way to do this is to put comment delimiters around the rule for .carrot: + +
/*.carrot {
+  color: orange;
+}*/
+Hide solution
+Veure la solució per el repte.
+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Estil de text") }}En el estil d'exemple s'ha utilitzat el text en cursiva i subratllat. La pàgina següent descriu més formes d'especificar l'aspecte del text en el document.

diff --git a/files/ca/web/guide/css/inici_en_css/dades_xml/index.html b/files/ca/web/guide/css/inici_en_css/dades_xml/index.html new file mode 100644 index 0000000000..8885cbb036 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/dades_xml/index.html @@ -0,0 +1,241 @@ +--- +title: Dades XML +slug: Web/Guide/CSS/Inici_en_CSS/Dades_XML +tags: + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsUpdate + - Web +translation_of: Archive/Beginner_tutorials/XML_data +--- +

{{ CSSTutorialTOC() }}

+ +

Aquesta pàgina conté un exemple de com es pot utilitzar CSS amb dades XML.

+ +

Es crea un document XML d'exemple, i una fulla d'estil que s'utilitzarà per mostrar en el vostre navegador.

+ +

Aquesta és la 3rd secció de la Part II del tutorial CSS.
+ Secció anterior : SVG
+ Secció següent :  XBL binding

+ +

Informació: Dades XML

+ +

XML (eXtensible Markup Language) és un llenguatge de propòsit general per a qualsevol tipus de dades estructurades.

+ +

Per defecte, el navegador Mozilla mostra XML en un format molt similar a les dades originals d'un arxiu XML. Es veuen les etiquetes reals que defineixen l'estructura de les dades.

+ +

En vincular una fulla d'estil CSS amb el document XML, pot definir altres formes de mostrar la mateixa. Per a això, la fulla d'estils utilitza regles que assignen les etiquetes en el document XML als tipus de visualització que utilitza HTML.

+ + + + + + + + +
Exemple
Les dades d'un document XML utilitza etiquetes <INFO>. Voleu que els elements INFO del document es mostrin com paràgrafs HTML. +

En la fulla d'estil del document, s'especifica com els elements INFO es mostraran:

+ +
+ 
+INFO {
+  display: block;
+  margin: 1em 0;
+  }
+
+
+
+ +

Els valors més comuns per a la propietat display són:

+ + + + + + + + + + + + +
blockEs mostra com HTML DIV (per a les capçaleres, paràgrafs)
inlineEs mostra com HTML SPAN (per major èmfasi en el text)
+ +

Afegiu les vostres pròpies regles d'estil que especifiquin el tipus de lletra, espaiat i altres detalls de la mateixa manera que per a HTML.

+ + + + + + + + +
Més detalls
Altres valors de display mostren l'element com un element de llista, o com un component d'una taula. +

Per veure la llista completa de tipus de pantalla, consulteu La propietat display en l'Especificació CSS.

+ +

Utilitzant CSS sol, l'estructura de la pantalla ha de ser la mateixa que l'estructura del document. Altres tecnologies poden modificar l'estructura de la pantalla - per exemple, XBL pot afegir contingut, JavaScript i pot modificar el DOM.

+ +

Per obtenir més informació sobre XML en Mozilla, vegeu la pàgina XML en aquesta wiki.

+
+ +

Acció: Una demostració XML

+ +

Fer un nou arxiu XML , doc9.xml. Copieu i enganxeu el contingut d'aquí, assegurant-se que us desplaceu per obtenir tota ella:

+ +
+
<?xml version="1.0"?>
+<!-- XML demonstration -->
+
+<?xml-stylesheet type="text/css" href="style9.css"?>
+
+<!DOCTYPE planet>
+<planet>
+
+<ocean>
+<name>Arctic</name>
+<area>13,000</area>
+<depth>1,200</depth>
+</ocean>
+
+<ocean>
+<name>Atlantic</name>
+<area>87,000</area>
+<depth>3,900</depth>
+</ocean>
+
+<ocean>
+<name>Pacific</name>
+<area>180,000</area>
+<depth>4,000</depth>
+</ocean>
+
+<ocean>
+<name>Indian</name>
+<area>75,000</area>
+<depth>3,900</depth>
+</ocean>
+
+<ocean>
+<name>Southern</name>
+<area>20,000</area>
+<depth>4,500</depth>
+</ocean>
+
+</planet>
+
+
+ +

Feu un nou arxiu  CSS, style9.css. Copieu i enganxeu el contingut d'aquí, assegurant-se que us desplaceu per obtenir tota ella:

+ +
+
/*** XML demonstration ***/
+
+planet:before {
+  display: block;
+  width: 8em;
+  font-weight: bold;
+  font-size: 200%;
+  content: "Oceans";
+  margin: -.75em 0px .25em -.25em;
+  padding: .1em .25em;
+  background-color: #cdf;
+  }
+
+planet {
+  display: block;
+  margin: 2em 1em;
+  border: 4px solid #cdf;
+  padding: 0px 1em;
+  background-color: white;
+  }
+
+ocean {
+  display: block;
+  margin-bottom: 1em;
+  }
+
+name {
+  display: block;
+  font-weight: bold;
+  font-size: 150%;
+  }
+
+area {
+  display: block;
+  }
+
+area:before {
+  content: "Area: ";
+  }
+
+area:after {
+  content: " million km\B2";
+  }
+
+depth {
+  display: block;
+  }
+
+depth:before {
+  content: "Mean depth: ";
+  }
+
+depth:after {
+  content: " m";
+  }
+
+
+ +

Obriu el document en el navegador:

+ + + + + + + +
+
+

Oceans

+ +

Arctic
+ Area: 13,000 million km²
+ Mean depth: 1,200 m

+ +

Atlantic
+ Area: 87,000 million km²
+ Mean depth: 3,900 m

+ +

. . .

+
+
+ +


+ Notes sobre aquesta demostració:

+ + + +

 

+ + + + + + + + +
Repte
Canvieu la fulla d'estils perquè mostri el document com una taula. +

(Vegeu el capítol Taules en l'especificació CSS per exemples que es poden adaptar.)

+
+ +

I ara què?

+ +

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 discussió.

+ +

Aquesta és l'última pàgina del tutorial. Per obtenir més informació sobre CSS en Mozilla, consulteu la pàgina principal de CSS en aquesta wiki.

diff --git a/files/ca/web/guide/css/inici_en_css/disseny/index.html b/files/ca/web/guide/css/inici_en_css/disseny/index.html new file mode 100644 index 0000000000..3ebf8912d6 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/disseny/index.html @@ -0,0 +1,382 @@ +--- +title: Disseny +slug: Web/Guide/CSS/Inici_en_CSS/Disseny +tags: + - CSS + - CSS Float + - CSS Text Align + - CSS Unit + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/CSS_layout +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Caixes")}}Aquesta és la 12th secció del tutorial CSS Getting Started descriu algunes maneres d'ajustar el disseny del document. Es canvia el disseny del vostre document d'exemple.

+ +

Informació: Disseny

+ +

Feu servir CSS per especificar diversos efectes visuals que canvïin el disseny del document. Algunes de les tècniques especifiques de disseny son avançades, i van més enllà de l'àmbit d'aquest tutorial bàsic.

+ +

En dissenyar una presentació que tingui un aspecte similar en diferents navegadors, la vostre fulla d'estil interactua amb la fulla d'estil i el motor de disseny predeterminats del navegador de formes que poden ser complexes. Aquest és també un tema avançat, que va més enllà de l'àmbit d'aquest tutorial bàsic.

+ +

Aquesta pàgina descriu algunes tècniques simples que podeu intentar.

+ +

Estructura del document

+ +

Si voleu controlar el disseny del document, llavors és possible que hagiu de canviar la seva estructura.

+ +

El llenguatge de marcat del document podria tenir etiquetes d'ús general per a la creació de l'estructura. Per exemple, en HTML podeu utilitzar l'element {{ HTMLElement("div") }} per crear l'estructura.

+ +
+
Exemple
+ +

En el vostre document d'exemple, els paràgrafs numerats (Numbered paragraphs), en el marc del segon epígraf, no tenen un contenidor propi.

+ +

La vostre fulla d'estil no pot dibuixar una vora al voltant d'aquests paràgrafs, perquè no hi ha cap element per especificar en el selector.

+ +

Per solucionar aquest problema estructural, es pot afegir una etiqueta {{ HTMLElement("div") }} al voltant dels paràgrafs. Aquesta etiqueta és única, pel que pot ser identificada per un atribut id:

+ +
<h3>Numbered paragraphs</h3>
+<div id="numbered">
+  <p>Lorem ipsum</p>
+  <p>Dolor sit</p>
+  <p>Amet consectetuer</p>
+  <p>Magna aliquam</p>
+  <p>Autem veleum</p>
+</div>
+
+ +

Ara a la vostre fulla d'estil podeu utilitzar una regla per especificar les vores al voltant de les dues llistes:

+ +
ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+
+ +

El resultat és el següent:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+
+ +

Unitats de mida

+ +

Fins ara, en aquest tutorial, s'han especificat les mides en píxels (px). Aquestes són apropiades, en determinats casos, en un dispositiu de visualització com una pantalla d'ordinador. Però quan l'usuari canvia la mida de la font, el disseny pot semblar inadequat.

+ +

Per a molts propòsits, és millor especificar les mides com un percentatge o en ems (em). Un em és nominalment la mida de la font actual (l'amplada d'una lletra m). Quan l'usuari canvia la mida de la lletra, el seu disseny s'ajusta automàticament.

+ +
+
Exemple
+ +

La vora de l'esquerra d'aquest text té la mida definida en píxels.

+ +

La vora de la dreta té la mida definida en ems.

+ +

En el vostre navegador, al canviar la mida de la font veureu com la vora de la dreta s'ajusta, però la vora de l'esquerra no ho fa:

+ + + + + + + +
+
RESIZE ME PLEASE
+
+
+ +
+
Més detalls
+ +

Per a altres dispositius, altres unitats de longitud són les adequades.

+ +

Hi ha més informació sobre això en una pàgina posterior d'aquest tutorial.

+ +

Per als detalls complets dels valors i les unitats que es poden utilitzar, consulteu Valors en l'especificació CSS.

+
+ +

Disposició del text

+ +

Dues propietats defineixen com el contingut d'un element és alineat. Els podeu utilitzar per realitzar ajustos sencills en el disseny:

+ +
+
{{ cssxref("text-align") }}
+
Alinea el contingut. Utilitzeu un d'aquests valors: left, right, center, justify
+
{{ cssxref("text-indent") }}
+
Sagna el contingut en una quantitat que especifiqueu.
+
+ +

Aquestes propietats s'apliquen a qualsevol text contingut en l'element, no només al text real. Recordeu que són heretats pels fills de l'element, així que pot ser que hagiu de desactivar-los explícitament en els fills per evitar resultats sorprenents.

+ +
+
Exemple
+ +

Per centrar les capçaleres:

+ +
h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+
+ +

Resultant:

+ + + + + + + +
+

(A) The oceans

+
+ +

En un document HTML, el contingut que es veu per sota d'una capçalera no està estructuralment contingut per la capçalera. Així que quan s'alinea una capçalera com aquesta, les etiquetes sota de l'encapçalament no hereten l'estil.

+
+ +

Flotants

+ +

La propietat {{ cssxref("float") }} força un element cap a l'esquerra o cap a la dreta. Aquesta és una forma senzilla per controlar la seva posició i mida.

+ +

La resta del contingut del document flueix normalment al voltant de l'element flotant. Això es pot controlar mitjançant l'ús de la propietat {{ cssxref("clear") }} en altres elements per fer que es quedin allunyats dels flotants.

+ +
+
Exemple
+ +

En el vostre document d'exemple, les llistes s'estenen a través de la finestra. Això es pot evitar fent que flotin cap a l'esquerra

+ +

Per mantenir les capçaleress en el seu lloc, també heu d'especificar que es mantinguin allunyades dels flotants de la seva esquerra:

+ +
ul, #numbered {float: left;}
+h3 {clear: left;}
+
+
+ +

El resultat és el següent:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+ +

(Una mica de farciment (padding) es necessita a la dreta de les caixes, on la vora (border) està massa a prop del text.)

+ +

Posicionament

+ +

Podeu definir la posició d'un element de quatre maneres, especificant la propietat {{ cssxref ("position") }} i un dels següents valors.

+ +

Aquestes són les propietats avançades. És possible utilitzar-les en formes simples, és per això que s'esmenten en aquest tutorial bàsic. Però el seu ús per a dissenys complexos pot ser difícil.

+ +
+
relative
+
La posició de l'element es desplaça respecte a la seva posició normal. Utilitzeu aquesta opció per a desplaçar un element en una quantitat especificada. De vegades es pot utilitzar el marge de l'element per aconseguir el mateix efecte.
+
fixed
+
La posició de l'element és fix. Definir la posició de l'element respecte a la finestra del document. Fins i tot si la resta del document es desplaça, l'element roman fix.
+
absolute
+
La posició de l'element es fixa en relació amb un element pare. Solsament un pare que estugui posicionat amb relative, fixed o absolute. Es pot fer que qualsevol element pare sigui adequat especificant position:relative; però sense especificar cap canvi.
+
static
+
+

El valor per defecte. Utilitzeu aquest valor si cal desactivar el posicionament de manera explícita.

+
+
+ +

Juntament amb aquests valors de la propietat position (a excepció de static), especifiqueu una o més de les propietats: top, right, bottom, left, width, height per identificar on voleu que aparegui l'element, i potser també la seva grandària.

+ +
+
Exemple
+ +

Per situar dos elements en un sobre l'altre, crear un contenidor pare en el vostre document amb els dos elements en el seu interior:

+ +
<div id="parent-div">
+  <p id="forward">/</p>
+  <p id="back">\</p>
+</div>
+
+ +

En la vostre fulla d'estil, fer la posició dels pares relative. No hi ha necessitat d'especificar qualsevol canvi real. Fer la posició dels fills absolute:

+ +
#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+}
+
+#forward, #back {
+  position: absolute;
+  margin:0px; /* no margin around the elements */
+  top: 0px; /* distance from top */
+  left: 0px; /* distance from left */
+}
+
+#forward {
+  color: blue;
+}
+
+#back {
+  color: red;
+}
+
+ +

El resultat es veu així, amb la barra invertida a la part superior de la barra inclinada:

+ +
+

/

+ +

\

+
+ + + + + + + +
 
+
+ +
+
Més detalls
+ +

La història completa de posicionament ocupa dos capítols complexes en l'especificació CSS Model de format Visual i Detalls del model de format visual.

+ +

Si esteu dissenyant fulles d'estil per a treballar en molts navegadors, llavors també cal tenir en compte les diferències en la manera com els navegadors interpreten la norma, i potser els errors en determinades versions de navegadors particulars.

+
+ +

Acció: Especificació del disseny

+ +
    +
  1. Canvieu el document d'exemple, doc2.html, i la fulla d'estil, style2.css, utilitzant els exemples de més amunt en la secció Estructura del document i Flotants.
    2. +
  2. En l'exemple Flotants afegir farciment per separar el text de la vora dret en 0,5 em.
    3. +
+ +
+
Reptes
+ +

Modifiqueu el document d'exemple, doc2.html, afegint aquesta etiqueta prop del final, just abans de </body>.

+ +
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
+
+ +

Si no heu descarregat l'arxiu d'imatge al principi d'aquest tutorial, descarregar-ho ara, i ho col·loqueu en el mateix directori que els altres arxius d'exemple:

+ + + + + + + +
Image:Yellow-pin.png
+ +

Predir on la imatge apareixerà en el document. A continuació, actualitzeu el navegador per veure si és correcte.

+ +

Afegiu una regla a la fulla d'estil que col·loqui la imatge a la part superior dreta del document.

+ +

Actualitzeu el navegador i fer la finestra petita. Comproveu que la imatge es queda a la part superior dreta, fins i tot quan es desplaça el document

+ +
+
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +

 

+ +
Yellow map pin
+
+
+
+ +

 Veure la solució per el repte.

+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Taules") }}S'han cobert gairebé tots els temes d'aquest tutorial bàsic de CSS. La pàgina següent descriu selectors més avançats per a regles CSS, i algunes formes específiques en el disseny de taules.

diff --git a/files/ca/web/guide/css/inici_en_css/estils_de_text/index.html b/files/ca/web/guide/css/inici_en_css/estils_de_text/index.html new file mode 100644 index 0000000000..1ed66628e4 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/estils_de_text/index.html @@ -0,0 +1,161 @@ +--- +title: Estils de text +slug: Web/Guide/CSS/Inici_en_CSS/Estils_de_text +tags: + - Beginner + - CSS + - CSS Fonts + - 'CSS:Getting_Started' + - Guide + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "CSS llegible")}} Aquesta és la 7th secció del tutorial CSS Getting Started; es donen més exemples d'estils de text. Modifiqueu la fulla d'estil d'exemple per utilitzar diferents fonts.

+ +

Informació: Estils de text

+ +

CSS té diverses propietats d'estil de text.

+ +

Hi ha una propietat abreujada convenient, {{ cssxref("font") }}, que podeu utilitzar per especificar diversos aspectes alhora, per exemple:

+ + + +
+
Exemple
+ +
p {
+font: italic 75%/125% "Comic Sans MS", cursive;
+}
+
+ +

Aquesta regla estableix diverses propietats de la font, fent tots els paràgrafs en cursiva.

+ +

La mida de la font s'estableix en les tres quartes parts de la mida d'element pare de cada paràgraf, i l'alçada de la línia s'estableix en 125% (una mica més separats del normal).

+ +

El tipus de lletra s'estableix en la Comic Sans MS, però si aquest tipus de lletra no està disponible, el navegador farà ús del seu tipus de lletra cursiva per defecte (escrit a mà).

+ +

La regla té l'efecte secundari de desactivar negreta i small-caps (establint el seu valor a normal).

+
+ +

Tipus de fonts

+ +

No es pot predir que tipus de lletra tindran els lectors del vostre document . Quan especifiqueu tipus de lletra de font, és una bona idea proporcionar una llista d'alternatives en ordre de preferència.

+ +

Acabar la llista amb un dels tipus de lletra per defecte incorporats: serif, sans-serif, cursive, fantasy o monospace.

+ +

Si el tipus de lletra no és compatible amb algunes característiques en el document, el navegador pot substituir per un tipus de lletra diferent. Per exemple, el document pot contenir caràcters especials que el tipus de lletra no admet. Si el navegador pot trobar un altre tipus de lletra que té aquests caràcters, llavors farà servir un altre tipus de lletra.

+ +

Per especificar un tipus de lletra, utilitzar la propietat {{ cssxref("font-family") }}.

+ +

Les mides de la font

+ +

Els usuaris del navegador poden anul·lar les mides de font per defecte o canviar la mida de text mentre llegeixen una pàgina, pel que té sentit el que utilitzeu mides relatives on es pugui.

+ +

Podeu utilitzar alguns valors incorporats per mides de font, com small, medium i large. També podeu utilitzar valors relatius a la mida de font de l'element pare com: smaller, larger, 150% o 1.5em. Un "em" és equivalent a l'amplada de la lletra "m" (per la mida de font de l'element pare); per tant 1.5em és una vegada i mitja la mida de la font de l'element pare.

+ +

Si cal, podeu especificar una mida real com: 14px (14 píxels) per a un dispositiu de visualització o 14pt (14 punts) per a una impressora. Això no és accessible per als usuaris amb discapacitat visual, ja que no els permet canviar la mida. Una estratègia més accessible és establir un valor incorporat com a mitjà en un element de nivell superior del document i, a continuació establir les mides relatives de tots els seus elements descendents.

+ +

Per especificar una mida de font, utilitzar la propietat {{ cssxref("font-size") }}.

+ +

Alçada de la línia

+ +

L'alçada de la línia especifica l'espaiat entre línies. Si el document té els paràgrafs llargs amb moltes línies, una separació més gran del normal fa que sigui més fàcil de llegir, especialment si la mida de la font és petita.

+ +

Per especificar l'alçada de la línia, utilitzar la propietat {{ cssxref("line-height") }}.

+ +

Decoració

+ +

A part de la propietat {{ cssxref("text-decoration") }} podeu especificar altres estils, com el subratllat(underline) o ratllat(line-through). Podeu configurar-ho a none per eliminar explícitament qualsevol decoració.

+ +

Altres propietats

+ +

Per especificar cursiva, utilitzar {{ cssxref("font-style") }}: italic;
+ Per especificar negreta , utilitzar {{ cssxref("font-weight") }}: bold;
+ Per especificar majúscules petites , utilitzar {{ cssxref("font-variant") }}: small-caps;

+ +

Per desactivar qualsevol d'ells individualment, especificar el valor normal o inherit.

+ +
+
Mé detalls
+ +

Podeu especificar els estils de text d'altres maneres variades.

+ +

Per exemple, algunes de les propietats esmentades aquí tenen altres valors que podeu utilitzar.

+ +

En una fulla d'estil complexa, eviteu l'ús de la propietat de font abreujada, causa efectes secundaris (reposició d'altres propietats individuals).

+ +

Per a més detalls de les propietats que es relacionen amb les fonts, vegeu Fonts en l'especificació CSS. Per a més detalls de decoració del text, vegeu Text.

+ +

Si no voleu dependre dels tipus de lletra instal·lats en els sistemes dels usuaris, podeu utilitzar {{ cssxref("@font-face") }} per especificar una font en línia. No obstant això, requereix que els usuaris tinguin un navegador compatible amb aquesta regla.

+
+ +

Acció: Especificació de les fonts

+ +

Per a un document senzill, es pot establir la font de l'element {{ HTMLElement("body") }} i la resta del document hereta la configuració.

+ +
    +
  1. Editeu l'arxiu CSS.
    2. +
  2. Afegiu la següent regla per canviar el tipus de lletra en tot el document. La part superior de l'arxiu CSS és un lloc lògic per a ell, però té el mateix efecte allà on ho posis: + 
    body {
+font: 16px "Comic Sans MS", cursive;
+}
+
    +
    3. +
  3. Afegiu un comentari explicant la regla, i afegiu espai en blanc per a que coincideixi amb el vostre disseny preferit.
    4. +
  4. Deseu el fitxer i actualitzeu el navegador per veure l'efecte. Si el sistema té Comic Sans MS, o una altra font cursiva que no suporta cursiva, l'explorador tria un tipus de lletra diferent per al text en cursiva en la primera línia:: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    5. +
  5. Des de la barra de menú del navegador, seleccioneu View > Text Size > Increase (o View > Zoom > Zoom In). Tot i que heu especificat 16 píxels en l'estil, un usuari en llegir el document pot canviar la mida.
    6. +
+ +
+
Repte
+ +

Sense canviar res més, fer que totes les sis lletres inicials sigui dues vegades la mida de la font serif per defecte en el navegador:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +
+
Possible solution
+ +

Add the following style declaration to the strong rule:

+ +
  font: 200% serif;
+
+If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. + +

 

+Hide solution
+Veure la solució per el repte.
+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}El document d'exemple utilitza diversos colors amb nom. En la següent secció s'enumeren els noms dels colors estàndard i s'explica com es poden especificar altres.

diff --git a/files/ca/web/guide/css/inici_en_css/index.html b/files/ca/web/guide/css/inici_en_css/index.html new file mode 100644 index 0000000000..839b8e8341 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/index.html @@ -0,0 +1,55 @@ +--- +title: Inici en CSS +slug: Web/Guide/CSS/Inici_en_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - Needs + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/First_steps +--- +

Aquest tutorial és una introducció a les característiques bàsiques i llenguatge (la sintaxi) per als fulls d'estil en cascada(Cascading Style Sheets) (CSS). S'utilitza CSS per canviar l'aspecte d'un document estructurat, com ara una pàgina web. El tutorial també inclou exemples d'exercicis que podeu provar en el vostre ordinador per veure els efectes de les CSS i les característiques que funcionen en els navegadors moderns.

+ +

El tutorial és per a principiants i per qualsevol persona que desitji revisar els conceptes bàsics de CSS. Si teniu més experiència amb CSS, la pàgina principal de CSS enumera els recursos més avançats.

+ + + +

Que es necessita per començar

+ + + +

Encara que els exercicis poden ajudar-te a aprendre, no és necessari realitzar-los. Simplement podeu llegir el tutorial i mirar les imatges.

+ +

Nota: El tutorial s'explica com funciona CSS amb el color. Serà més fàcil per completar aquestes seccions amb una pantalla a color i visió de color normal.

+ +

Com utilitzar aquest tutorial

+ +

Per utilitzar aquest tutorial, llegiu les pàgines amb cura i de forma seqüencial. Si es salta una pàgina, pot ser difícil d'entendre les pàgines següents en el tutorial.

+ +

Part I: Els fonaments del CSS

+ +

A cada pàgina, utilitzeu la secció d'informació per entendre com funciona CSS. Utilitzeu la secció Acció per probar l'ús de CSS en el vostre ordinador.

+ +

Per posar a prova la vostre comprensió, prendre el repte al final de cada pàgina. Les solucions als reptes estan vinculats en virtut dels reptes, pel que no és necessari mirar-los si no ho desitjeu.

+ +

Per comprendre CSS amb més profunditat, llegiu la informació que es troba en les caselles de subtítols Més detalls. Utilitzeu els enllaços que hi ha per trobar informació de referència sobre CSS

+ +

Part II: L'Abast del CSS

+ +

Una segona part del programa d'aprenentatge proporciona exemples, que mostren l'abast de CSS amb altres tecnologies web i Mozilla.

+ +
    +
  1. JavaScript
    2. +
  2. SVG graphics
    3. +
  3. XML data
    4. +
  4. XBL bindings
    5. +
  5. XUL user interfaces
    6. +
diff --git a/files/ca/web/guide/css/inici_en_css/javascript/index.html b/files/ca/web/guide/css/inici_en_css/javascript/index.html new file mode 100644 index 0000000000..8fd453b50c --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/javascript/index.html @@ -0,0 +1,146 @@ +--- +title: JavaScript i CSS +slug: Web/Guide/CSS/Inici_en_CSS/JavaScript +tags: + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsUpdate + - Web +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +

{{ CSSTutorialTOC() }}

+ +

Aquesta és la primera secció de la Part II del tutorial CSS. La Part II conté alguns exemples que mostren l'abast de CSS utilitzat amb altres tecnologies web i Mozilla.

+ +

Cada pàgina en la part II il·lustra com interactua amb CSS alguna altra tecnologia. Aquestes pàgines no estan dissenyades per ensenyar com utilitzar aquestes altres tecnologies. Aneu a altres tutorials per aprendre sobre elles en detall.

+ +

En lloc d'això, aquestes pàgines estan dissenyades per il·lustrar els molts usos de CSS. Per utilitzar aquestes pàgines, heu de tenir algun coneixement de CSS, però no cal cap coneixement d'unes altres tecnologies.

+ +

Secció anterior (Part I): Mitjà
+ Secció següent: SVG

+ +

Informació: JavaScript

+ +

JavaScript és un llenguatge de programació. JavaScript s'utilitza àmpliament per proporcionar interactivitat en els llocs web i aplicacions.

+ +

JavaScript pot interactuar amb les fulles d'estil, permetent-li escriure programes que canvien l'estil d'un document de forma dinàmica.

+ +

Hi ha tres maneres de fer això:

+ + + + + + + + + + +
Més detalls
Per obtenir més informació sobre JavaScript, vegeu la pàgina de JavaScript en aquest wiki.
+ +

Acció: Una demostració de JavaScript

+ +

Feu un nou document HTML, doc5.html. Copieu i enganxeu el contingut d'aquí, assegurar-vos de deplaçar-vos per obtenir tota ella;

+ +
+
<!DOCTYPE html>
+<html>
+
+<head>
+<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
+<link rel="stylesheet" type="text/css" href="style5.css" />
+<script type="text/javascript" src="script5.js"></script>
+</head>
+
+<body>
+<h1>JavaScript sample</h1>
+<div id="square"></div>
+<button>Click Me</button>
+
+</body>
+</html>
+
+
+ +

Feu una nova fulla d'estil CSS, style5.css. Copieu i enganxeu el contingut d'aquí:

+ +
+
  #square {
+    width: 120px;
+    height: 120px;
+    border: 2px inset gray;
+    margin-bottom: 1em;
+  }
+
+  button {
+    padding: .5em 2em;
+  }
+
+ +

Feu un nou arxiu de text, script5.js. Copieu i enganxeu el contingut d'aquí:

+ +
+
// JavaScript demonstration
+var changeBg = function (event) {
+    console.log("method called");
+    var me = event.target
+    ,   square = document.getElementById("square");
+    square.style.backgroundColor = "#ffaa44";
+    me.setAttribute("disabled", "disabled");
+    setTimeout(function () { clearDemo(me) }, 2000);
+}
+
+function clearDemo(button) {
+    var square = document.getElementById("square");
+    square.style.backgroundColor = "transparent";
+    button.removeAttribute("disabled");
+}
+
+var button = document.querySelector("button");
+button.addEventListener("click", changeBg);
+console.log(button);
+
+
+ +

Obriu el document en el navegador i premeu el botó o vegeu una mostra del treball a continuació.

+ +

{{ EmbedLiveSample('Action:_A_JavaScript_demonstration', 320,320) }}

+ +
Notes importants sobre aquesta demostració: + + +
+ +
+

De fet, el document HTML anterior pot tenir una condició de competència  (informació relacionada en aquesta pàgina W3C), ja que té l'element script dins de l'element head podent inicar-se l'execució del codi JavaScript abans que la pàgina acabi de carregar-se i el codi no funcionarà perquè la variable button serà nul.la. En moure l'element script sota de l'element button (just damunt de l'etiqueta de tancament body) en el marcat HTML hauria de resoldre aquest problema.

+
+ + + + + + + + +
Repte
Canvieu el script perquè el quadre salti a la dreta 20 em quan el seu color canviï, i salti cap a enrere després.
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

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 discussió.

+ +

En aquesta demostració, el document HTML vincula el script tot i que només l'element button utilitza el script. Mozilla estén CSS de manera que pugui vincular codi JavaScript (i també contingut i altres fulles d'estil) per als elements seleccionats. La pàgina següent mostra això: vincles XBL

diff --git a/files/ca/web/guide/css/inici_en_css/llistes/index.html b/files/ca/web/guide/css/inici_en_css/llistes/index.html new file mode 100644 index 0000000000..6792f86eb7 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/llistes/index.html @@ -0,0 +1,275 @@ +--- +title: Llistes +slug: Web/Guide/CSS/Inici_en_CSS/Llistes +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Contingut") }} Aquesta és la 10th secció del tutorial CSS Getting Started; descriu com es pot utilitzar CSS per especificar l'aspecte de les llistes. Heu de crear un nou document d'exemple que contindrà les llistes, i un nova fulla d'estil que és el estil de les llistes.

+ +

Informació: Llistes

+ +

Si vau aprendre el repte en l'última secció, llavors va veure com es podia afegir contingut abans de qualsevol element perquè aparegués com un element de la llista.

+ +

CSS proporciona propietats especials que estan dissenyades per a les llistes. En general, és convenient utilitzar aquestes propietats sempre que pugueu.

+ +

Per especificar l'estil a una llista, utilitzeu la propietat {{ cssxref("list-style") }} per especificar el tipus de marcador.

+ +

El selector en la seva regla CSS pot seleccionar els elements de la llista d'elements (per exemple, {{ HTMLElement("li") }} ) o es pot seleccionar l'element de la llista dels pares (per exemple, {{ HTMLElement ("ul") }}) de manera que els elements de la llista hereten l'estil.

+ +

Llistes no ordenades

+ +

En una llista no ordenada, cada element de la llista està marcat de la mateixa manera.

+ +

CSS té tres tipus de marcadors, i aquí es veu com el navegador els mostra:

+ + + +

També podeu especificar l'adreça URL d'una imatge.

+ +
+
Exemple
+ +

Aquestes regles especifiquen diferents marcadors per a diferents classes d'elements de la llista:

+ +
li.open {list-style: circle;}
+li.closed {list-style: disc;}
+
+ +

Quan aquestes classes s'utilitzen en una llista, distingeix entre els elements oberts i tancats (per exemple, en una llista de tasques pendents):

+ +
<ul>
+  <li class="open">Lorem ipsum</li>
+  <li class="closed">Dolor sit</li>
+  <li class="closed">Amet consectetuer</li>
+  <li class="open">Magna aliquam</li>
+  <li class="closed">Autem veleum</li>
+</ul>
+
+ +

El resultat és el següent:

+ +

{{ EmbedLiveSample('Unordered_lists', '', '', '') }}

+
+ +

Llistes ordenades

+ +

En una llista ordenada, cada element de la llista es marca de manera diferent per mostrar la seva posició en la seqüència.

+ +

Utilitzeu la propietat {{ cssxref("list-style") }} per especificar el tipus de marcador:

+ + + +
+
Exemple
+ +

Aquesta regla especifica que els elements en {{ HTMLElement ("ol") }}  amb la classe info, els elements s'identifiquen amb lletres majúscules.

+ +
<ol class="info">
+  <li>Lorem ipsum</li>
+  <li>Dolor sit</li>
+  <li>Amet consectetuer</li>
+  <li>Magna aliquam</li>
+  <li>Autem veleum</li>
+</ol>
+ +
ol.info {list-style: upper-latin;}
+
+ +

El elements {{ HTMLElement ("li") }} en la llista hereten aquest estil:

+ +

{{ EmbedLiveSample('Ordered_lists', '', '', '') }}

+
+ +
+
Més detalls
+ +

La propietat {{ cssxref ("list-style") }} és una propietat abreujada. En les fulles d'estil complexes és possible que preferiu utilitzar les propietats independents per establir els valors per separat. Per als enllaços a aquestes propietats separades, i més detalls de com CSS especifica les llistes, consulteu la pàgina de referència {{ cssxref ("list-style") }}.

+ +

Si utilitzeu un llenguatge de marques com l'HTML que proporciona marques convencionals per llistes no ordenades ({{ HTMLElement("ul") }}) i llistes ordenades ({{ HTMLElement("ol") }}), llavors és una bona pràctica utilitzar les etiquetes en la forma en què estan destinades. No obstant això, podeu utilitzar CSS per fer que {{ HTMLElement("ul") }} aparegui ordenat i {{ HTMLElement("ol") }} aparegui desordenat si ho desitjeu.

+ +

Els navegadors difereixen en la forma d'aplicar els estils de llistes. No espereu que la vostre fulla d'estil doni resultats idèntics en tots els navegadors.

+
+ +

Comptadors

+ +
+

Note:  Alguns navegadors no suporten comptadors. La pàgina continguts CSS i compatibilitat del navegador en el lloc Quirks Mode conté un gràfic detallat de la compatibilitat dels navegadors per això i altres característiques CSS. Pàgines individuals en la Referència CSS d'aquest lloc, també tenen taules de compatibilitat del navegador.

+
+ +

Podeu utilitzar comptadors per enumerar els elements, no només els elements de la llista. Per exemple, en alguns documents és possible que vulgueu numerar les capçaleres o paràgrafs.

+ +

Per especificar la numeració, es necessita un comptador amb un nom que definiu.

+ +

En algun element abans que el recompte s'iniciï, reinicieu el comptador amb la propietat {{ cssxref("counter-reset") }} i el nom del seu comptador. El pare dels elements que està comptant és un bon lloc per fer-ho, però podeu utilitzar qualsevol element que vingui abans que els elements de la llista.

+ +

Per cada element en el qual s'incrementa el comptador, utilitzeu la propietat {{ cssxref("counter-increment") }} i el nom del seu comptador.

+ +

Per mostrar el comptador, afegiu {{ cssxref("::before") }} o {{ cssxref("::after") }} per al selector i l'ús de la propietat content (com ho va fer en la pàgina anterior, Content).

+ +

En el valor de la propietat content, especifiqueu counter() amb el nom del vostre comptador. També podeu indicar un tipus. Els tipus són els mateixos que en la secció anterior de llistes ordenades.

+ +

Normalment, l'element que mostra el comptador també l'incrementa.

+ +
+
Exemple
+ +

Aquesta regla inicialitza un comptador per a cada element {{ HTMLElement("h3") }} amb la classe numbered:

+ +
h3.numbered {counter-reset: mynum;}
+
+ +

Aquesta regla mostra i incrementa el comptador per a cada element {{ HTMLELement("p") }} amb la classe numbered:

+ +
<p class="numbered">Lorem ipsum</p>
+<p class="numbered">Dolor sit</p>
+<p class="numbered">Amet consectetuer</p>
+<p class="numbered">Magna aliquam</p>
+<p class="numbered">Autem veleum</p>
+
+ +
body {
+   counter-reset: mynum;
+}
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+ +

El resultat és el següent:

+ +

{{ EmbedLiveSample("Counters", '300', '200', '') }}

+
+ +
+
Més detalls
+ +

No podeu utilitzar comptadors a menys que sàpigueu que tot el que llegeixi el document té un navegador compatible amb ells.

+ +

Si sou capaços d'utilitzar els comptadors, tenen l'avantatge que podeu donar estil els comptadors per separat dels elements de la llista. En l'exemple anterior, els comptadors estan en negreta, però els elements de la llista no ho estan.

+ +

També podeu utilitzar els comptadors en formes més complexes, per exemple, al nombre de seccions, títols, subtítols i paràgrafs en els documents formals. Per a més detalls, consulteu Comptadors i numeració automàtica en l'especificació CSS.

+
+ +

Acció: Llistes amb estil

+ +

Feu un nou document HTML, doc2.html. Copieu i enganxeu el contingut d'aquí:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Sample document 2</title>
+    <link rel="stylesheet" href="style2.css">
+  </head>
+  <body>
+
+    <h3 id="oceans">The oceans</h3>
+    <ul>
+      <li>Arctic</li>
+      <li>Atlantic</li>
+      <li>Pacific</li>
+      <li>Indian</li>
+      <li>Southern</li>
+    </ul>
+
+    <h3 class="numbered">Numbered paragraphs</h3>
+    <p class="numbered">Lorem ipsum</p>
+    <p class="numbered">Dolor sit</p>
+    <p class="numbered">Amet consectetuer</p>
+    <p class="numbered">Magna aliquam</p>
+    <p class="numbered">Autem veleum</p>
+
+  </body>
+</html>
+
+ +

Feu un nova fulla d'estil, style2.css. Copieu i enganxeu el contingut d'aquí:

+ +
/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+ +

Si la disposició i el comentari no són del vostre gust, canvieu-los.

+ +

Obriu el document en el navegador. Si el navegador és compatible amb els comptadors, es veurà alguna cosa semblant com l'exemple a continuació. Si el vostre navegador no suporta comptadors, llavors no veureu els números (i probablement ni tan sols els dos punts):

+ +

{{ EmbedLiveSample('Action_Styled_lists', '300', '400', '') }}

+ +
+
Reptes
+ +

Afegiu una regla a la fulla d'estil, per numerar els oceans utilitzant nombres romans de l'I al V:

+ + + + + + + +
+

The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

 

+ +

Canvieu la fulla d'estil per identificar les capçaleres amb lletres majúscules i en parèntesi com aquest:

+ + + + + + + +
+

(A) The oceans

+ +

. . .

+ +

(B) Numbered paragraphs

+ +

. . .

+
+
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Caixes") }}Quan el navegador mostra el document d'exemple, es crea un espai al voltant dels elements quan els col·loca a la pàgina. La pàgina següent descriu com podeu utilitzar CSS per treballar amb les formes subjacents d'elements, caixes.

diff --git "a/files/ca/web/guide/css/inici_en_css/mitj\303\240/index.html" "b/files/ca/web/guide/css/inici_en_css/mitj\303\240/index.html" new file mode 100644 index 0000000000..f3b14fb062 --- /dev/null +++ "b/files/ca/web/guide/css/inici_en_css/mitj\303\240/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 +--- +

{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Taules")}}

+ +

Aquesta és la 14th secció de la Part I del tutorial CSS Getting Started 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.

+ +

Informació: Mitjà

+ +

El propòsit de CSS és especificar com els documents es presenten a l'usuari. La presentació pot tenir més d'una forma.

+ +

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.

+ +

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.

+ +
+
Exemple
+ +

Un document, en un lloc web, té una àrea de navegació per permetre a l'usuari moure's pel lloc.

+ +

En el llenguatge de marcat, l'element pare de l'àrea de navegació té el id nav-area. (A {{HTMLVersionInline (5)}}, això pot ser marcat amb l'element {{HTMLElement("nav")}} en lloc de {{HTMLElement("div")}} amb un atribut id.)

+ +

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:

+ +
@media print {
+  #nav-area {display: none;}
+  }
+
+
+ +

Alguns dels tipus de mitjans comuns són:

+ + + + + + + + + + + + + + + + + + + + +
screenColor pantalla ordinador
printMitjans paginats
projectionPantalla projectada
allTots els mitjans (per defecte)
+ +
+
Més detalls
+ +

Hi ha altres formes d'especificar el tipus de mitjà d'un conjunt de regles.

+ +

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 media en l'etiqueta LINK.

+ +

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à.

+ +

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.

+ +

Per a més detalls sobre els tipus de mitjans, vegeu Mtjà en l'especificació CSS.

+ +

Hi ha més exemples de la propietat {{cssxref ("display")}} en una pàgina posterior d'aquest tutorial: dades XML.

+
+ +

Impressió

+ +

CSS té algun suport específic per a la impressió i dels mitjans paginats en general.

+ +

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 @page:left i @page:right.

+ +

Per als mitjans d'impressió, normalment s'utilitza com a unitats de longitud les polzades (in) i punts (pt = 1/72 polzades) o centímetres (cm) i mil·límetres (mm). És igualment apropiat utilitzar ems (em) perquè coincideixi amb la mida de font i percentatges (%).

+ +

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")}}.

+ +
+
Exemple
+ +

Aquesta regla estableix els marges de pàgina a una polzada en els quatre costats:

+ +
@page {margin: 1in;}
+
+ +

Aquesta regla assegura que cada element H1 comença en una nova pàgina:

+ +
h1 {page-break-before: always;}
+
+
+ +
+
Més detalls
+ +

Per als detalls complets de suport de CSS per als mitjans paginats, veure Mitjans paginats en l'especificació CSS.

+ +

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.

+
+ +

Interfícies d'usuari

+ +

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.

+ +

No hi ha cap tipus de mitjà especial per als dispositius amb interfícies d'usuari.

+ +

Hi ha cinc selectors especials:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
E{{cssxref(":hover")}}Qualsevol element E que té el punter sobre ell
E{{cssxref(":focus")}}Qualsevol element E que té el focus del teclat
E{{cssxref(":active")}}L'element E que està implicat en l'acció de l'usuari actual
E{{cssxref(":link")}}Qualsevol element E que és un hipervincle a una adreça URL que l'usuari no ha visitat recentment
E{{cssxref(":visited")}}Qualsevol element E que és un hipervincle a una adreça URL que l'usuari ha visitat recentment
+ +
+

Nota: La informació que es pot obtenir del selector :visited està restringida a {{gecko("2.0")}}. Veure Privacitat i el selector :visited per a més detalls.

+
+ +

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:

+ + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
pointerIndica un vincle
waitIndica que el programa no pot acceptar l'entrada
progressIndica que el programa està funcionant, encara pot acceptar l'entrada
defaultEl valor per defecte (normalment una fletxa)
+ +

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.

+ +

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 disabled o l'atribut readonly. Els selectors poden especificar aquests atributs com qualsevol altre atribut, mitjançant l'ús de claudàtors: {{mediawiki.external('disabled')}} o {{mediawiki.external('readonly')}}.

+ +
+
Exemple
+ +

Aquestes regles especifiquen els estils per a un botó que canvia dinàmicament a mesura que l'usuari interactua amb ell:

+ +
.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;
+  }
+
+ +

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:

+ + + + + + + +
+ + + + + + + + + + + + + + + + +
Click MeClick MeClick Me
 
deshabilitatnormalactiu
+
+ +

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.

+
+ +
+
Més detalls
+ +

Per obtenir més informació sobre les interfícies d'usuari en el CSS, vegeu Interfície d'usuari en l'especificació CSS.

+ +

Hi ha un exemple del llenguatge de marcat de Mozilla per a interfícies d'usuari, XUL, en la Part II d'aquest tutorial.

+
+ +

Acció: Impressió d'un document

+ +
    +
  1. Feu un nou document HTML, doc4.html. Copieu i enganxeu el contingut d'aquí: + + 
    <!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>
+
    +
    2. +
  2. Feu una nova fulla d'estil, style4.css. Copieu i enganxeu el contingut d'aquí: + 
    /*** 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 */
+
    +
    3. +
  3. Vegeu aquest document en el vostre navegador; utilitza l'estil per defecte del navegador.
    4. +
  4. 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. + + + + + + + +
    + + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section A
    + +
    This is the first section...
    + +
    Page: 1
    +
    +
    +     		+ + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section B
    + +
    This is the second section...
    + +
    Page: 2
    +
    +
    +
    +
    5. +
+ + + + + + + + +
Reptes
Moveu les regles d'estil específiques d'impressió en un fitxer CSS independent. +

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 style4.css.

+ +

Feu que els encapçalaments es tornin blaus quan el punter del ratolí estigui sobre ells.

+
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

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 Discussió.

+ +

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ó: JavaScript

diff --git "a/files/ca/web/guide/css/inici_en_css/per_qu\303\250_utilitzar_css/index.html" "b/files/ca/web/guide/css/inici_en_css/per_qu\303\250_utilitzar_css/index.html" new file mode 100644 index 0000000000..d69cf9cdcf --- /dev/null +++ "b/files/ca/web/guide/css/inici_en_css/per_qu\303\250_utilitzar_css/index.html" @@ -0,0 +1,110 @@ +--- +title: Per què utilitzar CSS? +slug: Web/Guide/CSS/Inici_en_CSS/Per_què_utilitzar_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "Que és CSS?") }}Aquesta segona secció del tutorial CSS Getting Started explica la relació entre la CSS i els documents. En l'exercici aprendreu com afegir un full d'estil CSS en el document d'exemple que vam crear en la primera secció.

+ +

Informació: Per què utilitzar CSS?

+ +

S'utilitza CSS per definir estils en els documents, incloent el disseny, la disposició i les variacions en la imatge per als diferents dispositius i mides de pantalla. Podeu posar el CSS en el <head> d'un document amb un full d'estils incrustat, o adjuntar un arxiu separat que defineix els estils amb un full d'estils extern. Per enllaçar un full d'estils extern al document, se li afegeix simplement un enllaç al full d'estils en el <head> del document.

+ +

Un full d'estil extern té molts avantatges. Mantenir els estils separats del seu contingut HTML:

+ + + +
+
Exemple
+ +

L'ús de CSS, permet emmagatzemar la informació d'estil en arxius comuns que comparteixen totes les pàgines. Per exemple, quan els documents enllaçan amb el mateix full d'estil que defineix el color de les capçaleres h2, es pot aplicar l'estil de les etiquetes de capçalera h2 globalment, canviant un atribut css.

+ +

Quan un usuari visualitza una pàgina web, el navegador de l'usuari carrega la informació d'estil juntament amb el contingut de la pàgina.

+ +

Quan un usuari imprimeix una pàgina web, pot proporcionar informació de diferent estil que fa que la pàgina impresa sigui fàcil de llegir.

+
+ +

Com fer que HTML i CSS treballin junts? En general, s'utilitza HTML per descriure el contingut del document, no el seu estil. CSS s'utilitza per especificar l'estil del document, no el seu contingut. Més endavant en aquest tutorial, veureu algunes excepcions a aquesta disposició.

+ +
+
Més detalls
+ +

Un llenguatge de marcatge com l'HTML també proporciona algunes formes d'establir estil.

+ +
Per exemple, en HTML es pot utilitzar una etiqueta <b> per fer el text en negreta, i establir el color de fons d'una pàgina en la seva etiqueta <body>.
+ +
 
+ +

Quan s'utilitza CSS, normalment s'evita l'ús d'aquestes característiques del llenguatge de marcat, de manera que tota la informació d'estil del document està en un sol lloc.

+
+ +

Acció: Crear un full d'estil

+ +
    +
  1. Creeu un altre arxiu de text en el mateix directori que el document doc1.html que vau crear en la primera secció.
    2. +
  2. Guardeu el document com: style1.css. Aquest fitxer serà el full d'estil.
    3. +
  3. A l'arxiu CSS, copieu i enganxeu aquesta línia, a continuació, deseu el fitxer: + 
    strong {color: red;}
+
    +
    4. +
+ +

Vincular el document al full d'estils

+ +
    +
  1. Per enllaçar el document al full d'estils, editar l'arxiu HTML. Afegiu-hi la línia ressaltada aquí: + + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    2. +
  2. Deseu el fitxer i refrescar la pantalla del navegador. El full d'estil fa que les lletres inicials siguin de color vermell, com aixó:
    3. +
+ +

{{ EmbedLiveSample('Action_Creating_a_stylesheet', '', '', '', 'Web/Guide/CSS/Getting_started/Why_use_CSS') }}

+ +

{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}

+ +
+
Repte
+ +

A més de vermell, CSS permet a alguns altres noms de colors.

+ +

Sense buscar una referència, trobar cinc noms més de colors que treballin en el full d'estil.

+ +
+
Possible solution
+ +

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

+Hide solution
+Veure la solució per el repte
+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Com funciona el CSS.")}}Ara teniu un document de mostra vinculat a un full d'estil separat, ja esteu llestos per aprendre més sobre com el navegador les combina quan es mostra el document.

diff --git "a/files/ca/web/guide/css/inici_en_css/que_\303\251s_css/index.html" "b/files/ca/web/guide/css/inici_en_css/que_\303\251s_css/index.html" new file mode 100644 index 0000000000..70d89e8306 --- /dev/null +++ "b/files/ca/web/guide/css/inici_en_css/que_\303\251s_css/index.html" @@ -0,0 +1,119 @@ +--- +title: Que és CSS? +slug: Web/Guide/CSS/Inici_en_CSS/Que_és_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +
{{CSSTutorialTOC}}
+ +

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Inici en CSS")}} Aquesta primera secció del tutorial CSS Getting Started explica breument les fulles d'estil en cascada (CSS). També es crearà un document senzill per utilitzar en els exercicis CSS en les seccions següents.

+ +

Informació: Que és CSS?

+ +

Fulles d'estil en cascada (CSS) és un llenguatge per especificar com els documents es presenten als usuaris. Aquests documents estan escrits en un llenguatge de marcat com ara HTML.

+ +

Un document és un recull d'informació que s'estructura utilitzant un llenguatge de marcat.

+ +

La presentació d'un document a un usuari vol dir convertir-lo en una format utilitzable per al seu públic. Navegadors, com Firefox, Chrome o Internet Explorer, estan dissenyats per a presentar documents visuals, per exemple, en una pantalla d'ordinador, un projector o una impressora.

+ +
+

Exemples

+ + +
+ +

En aquest tutorial, caixes amb el subtítol, Més detalls, com la de baix, contenen informació opcional i enllaços a més recursos en un concepte o tema tractat en una secció. Llegir-los com els veieu, seguir els enllaços, o ometre aquestes caixes i tornar a llegir-los més tard.

+ +
+
Més detalls
+ +

Un document no és el mateix que un arxiu. Però, es pot desar un document en un arxiu.

+ +

El document que esteu llegint en aquest moment no està emmagatzemat en un arxiu. Quan el navegador demana aquesta pàgina, el servidor consulta una base de dades i genera el document, recollint les parts del document de diferents arxius. No obstant això, aquest tutorial també pot treballar amb documents emmagatzemats en arxius.

+ +

Podeu trobar més informació sobre els documents i llenguatges de marcatge en altres àrees d'aquest lloc web:

+ + + + + + + + + + + + + + + + + + + + +
HTMLper pàgines web
XMLper documents estructurats en general
SVGper gràfics
XULper interfícies d'usuari en Mozilla
+ +

A la Part II d'aquest tutorial podreu veure exemples d'aquests llenguatges de marques.

+
+ +
+
Més detalls
+ +

En la terminologia formal de CSS, el programa que presenta un document a un usuari se anomenat un agent d'usuari (UA). Un navegador és un tipus d'UA. CSS no és només per a navegadors o presentació visual, però en la part I d'aquesta guia, solament es treballarà amb CSS en un navegador.

+ +

Per a les definicions formals de terminologia relatives a la CSS, consulteu Definitions en l'especificació CSS del World Wide Web Consortium (W3C), una comunitat internacional que estableix estàndards oberts per al web.

+
+ +

Acció: Creació d'un document

+ +
    +
  1. Creeu un nou directori en l'ordinador per guardar i organitzar els exercicis del tutorial.
    2. +
  2. Obriu un editor de text i crear un nou arxiu de text. Aquest arxiu contindrà el document per als pròxims exercicis tutorials.
    3. +
  3. Copieu i enganxeu el codi HTML que es mostra a continuació. Deseu el fitxer amb el nom doc1.html + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
    + +

    {{ LiveSampleLink('Action_Creating_a_document', 'View above Demo') }}

    +
    4. +
  4. Obriu una nova pestanya o una nova finestra, a continuació, obriu el fitxer que acabeu de crear. +

    Hauria de veure el text amb les lletres inicials en negreta, com aquestes:

    + + + + + + + +
    Cascading Style Sheets
    + +

    El que veieu en el navegador pot no ser exactament el mateix a causa de la configuració del navegador i d'aquesta wiki. Algunes diferències en el tipus de lletra, espaiat i colors no són importants.

    +
    5. +
+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Per què utilitzar CSS?")}} El document encara no utilitza CSS. A la següent secció farem servir CSS per l'estil del document.

diff --git a/files/ca/web/guide/css/inici_en_css/selectors/index.html b/files/ca/web/guide/css/inici_en_css/selectors/index.html new file mode 100644 index 0000000000..32eaccf00b --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/selectors/index.html @@ -0,0 +1,455 @@ +--- +title: Selectors +slug: Web/Guide/CSS/Inici_en_CSS/Selectors +tags: + - Beginner + - CSS + - CSS Selector + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks/Selectors +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada & herència")}}Aquesta 5th secció del tutorial CSS Getting Started; s'explica com es poden aplicar estils de forma selectiva, i com els diferents tipus de selectors tenen diferents prioritats. Afegir alguns atributs a les etiquetes en el document d'exemple, i utilitzar aquests atributs en el full d'estils d'exemple.

+ +

Informació: Selectors

+ +

CSS té la seva pròpia terminologia per descriure el llenguatge CSS. Anteriorment en aquest tutorial, heu creat una línia al full d'estils com aquesta:

+ +
strong {
+  color: red;
+}
+
+ +

En la terminologia de CSS, tota aquesta línia és una regla. Aquesta regla s'inicia amb strong, que és un selector (o una llista de selectors). Es selecciona quins elements del DOM s'aplica la regla.

+ +
+
Més detalls
+ +

La part dins de les claus és la declaració.

+ +

L'identificador color és una propietat, i el vermell és un valor.

+ +

El punt i coma després del parell propietat-valor fa de separació d'altres parells propietat-valor en la mateixa declaració.

+ +

En aquest tutorial es refereix a un selector com strong com un selector d'etiquetes. L'especificació CSS es refereix a ell com un selector de tipus.

+
+ +

Aquesta pàgina del tutorial explica més sobre els selectors que es poden utilitzar en les regles CSS.

+ +

A més dels noms de les etiquetes, podeu utilitzar els valors dels atributs en els selectors. Això permet que les regles siguin més específiques.

+ +

Dos atributs tenen un estatus especial per CSS. Són class i id.

+ +

Selectors class

+ +

Utilitzeu l'atribut class en un element per assignar l'element un nom de classe. Depèn de vosaltres el nom que trieu per a la classe. Múltiples elements d'un document poden tenir el mateix valor de classe.

+ +

En el full d'estil, escriviu un punt (. punt) abans del nom de la classe, quan s'utilitza en un selector.

+ +

Selectors ID

+ +

Utilitzeu l'atribut id en un element per assignar un identificador a l'element. Depèn de vosaltres el nom que trieu per a l'identificador. El nom de l'identificador ha de ser únic en el document.

+ +

En el full d'estil, escriviu un signe (# hash) abans de l'identificador quan s'utilitza en un selector.

+ +
+
Exemple
+Aquesta etiqueta HTML té tant un atribut class com un atribut id: + +
<p class="key" id="principal">
+
+ +

El valor id, principal, ha de ser únic en el document, però altres etiquetes en el document poden tenir el mateix nom de la class, key.

+ +

En un full d'estil CSS, aquesta regla fa que tots els elements amb la class key siguin verds. (Pot ser que no tots siguin elements {{ HTMLElement("p") }}.)

+ +
.key {
+  color: green;
+}
+
+ +

Aquesta regla fa que l'únic element amb el id principal sigui negreta:

+ +
#principal {
+  font-weight: bolder;
+}
+
+
+ +

Selectors d'atributs

+ +

No està limitat als dos atributs especials, class i id. Podeu especificar altres atributs mitjançant claudàtors. Dins dels claudàtors es posa el nom de l'atribut, opcionalment seguit d'un operador coincident i un valor. A més, es pot fer entre majúscules i minúscules afegint una "i" després del valor, però no molts navegadors són compatibles amb aquesta funció fins al moment. Exemples:

+ +
+
[disabled]
+
Selecciona tots els elements amb un atribut "disabled".
+
[type='button']
+
Selecciona els elements amb un tipus "button".
+
[class~=key]
+
Selecciona elements amb la class "key" (però no, per exemple, "keyed", "monkey", "buckeye"). Funcionalment equivalent a .key.
+
[lang|=es]
+
Selecciona els elements especificats com espanyol. Això inclou "es" i "es-MX", però no "eu-ES" (que és basca).
+
[title*="example" i]
+
Selecciona elements title els quals conté "example", ignorant majúscules i minúscules . En els navegadors que no admeten l'indicador "i", aquest selector probablement no coincidirà amb cap element.
+
a[href^="https://"]
+
Especifica com ha de començar el valor de l'atribut; en aquest cas, es selecciona enllaços segurs.
+
img[src$=".png"]
+
Selecciona elements el valor dels quals finalitza amb la cadena proporcionada. Indirectament selecciona imatges PNG; les imatges són PNGs però la URL de les quals no acabi en ".png" no seràn seleccionades (e.g. `src="some-image.png?_=cachebusterhash"`).
+
+ +

Selectors de pseudo-classes

+ +

Un pseudo-classe CSS és una paraula clau afegida als selectors que especifica un estat especial de l'element a seleccionar. Per exemple {{ Cssxref(":hover") }} aplicarà un estil quan l'usuari es desplaci sobre l'element especificat pel selector.

+ +

Les pseudo-classes, juntament amb els pseudo-elements, permeten aplicar un estil a un element no només en relació amb el contingut de l'estructura del document, sinó també en relació als factors externs com l'historial del navegador ({{ cssxref(":visited") }}, per exemple), l'estat del seu contingut (com {{ cssxref(":checked") }} en alguns elements de formulari), o la posició del ratolí (com {{ cssxref(":hover") }} que permet saber si el ratolí està sobre un element o no). Per veure una llista completa dels selectors, visiteu especificació CSS3 Selectors working.

+ +
+
Sintaxi
+ +
selector:pseudo-class {
+  property: value;
+}
+
+
+ +

Llista de pseudo-classes

+ + + +

Llista de selectors

+ +

Una regla pot ser compartida per molts selectors mitjançant una coma (,) per separar els selectors.

+ +
+
Exemple
+En l'exemple, ambdós elements que tenen la classe "content-1" i elements que tenen la classe "content-2" per visualitzar el text en negreta. + +
.content-1, .content-2 {
+  font-weight: bold;
+}
+
+
+ +

Informació: Especificitat

+ +

Diverses regles poden tenir selectors que coincideixin amb el mateix element. Si una propietat es dóna en una sola regla, no hi ha conflicte i la propietat s'estableix en l'element. Si més d'una regla s'aplica a un element i estableix la mateixa propietat, llavors CSS dóna prioritat a la regla que té el selector més específic. Un selector de ID és més específic que una classe, pseudo-classe o selector d'atribut, que al seu torn són més específics que un selector d'etiquetes o pseudo-element.

+ +
+
Més detalls
+ +

També es poden combinar selectors, fent un selector més específic. Per exemple, el selector .key selecciona tots els elements que tenen el nom de classe key. El selector p.key selecciona només elements {{ HTMLElement("p") }} que tenen el nom de classe key.

+
+ +

Si el full d'estil té un conflicte de regles i són igualment específiques, llavors CSS doneu prioritat a la regla que és més posterior en el full d'estil.

+ +

Quan tingueu un problema amb regles en conflicte, tracteu de resoldre-ho fent una de les regles més específiques, de manera que tingui prioritat. Si no podeu fer-ho, tracteu de moure una de les regles el més prop del final de la fulla d'estils perquè tingui prioritat.

+ +

Informació: Els selectors basats en relacions

+ +

CSS té algunes maneres de seleccionar elements en funció de les relacions entre els elements. Podeu utilitzar aquests per fer selectors que siguin més específics.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Selectors comuns basats en les relacions
SelectorSeleccions
A EQualsevol element E que és un descendent d'un element A (que és: un fill, o un fill d'un fill, etc.)
A > EQualsevol element E que és un fill (és a dir, descendent directe) d'un element A
E:first-childQualsevol element E que és el primer fill del seu pare
B + EQualsevol element E que és el següent germà d'un element B (és a dir: el següent fill del mateix pare)
+ +

Es poden combinar aquests per expressar relacions complexes.

+ +

També es pot utilitzar el símbol * (asterisc) en el sentit de "qualsevol element".

+ +
+
Exemple
+ +

Una taula HTML té un atribut id, però les seves files i cel·les no tenen identificadors individuals:

+ +
<table id="data-table-1">
+...
+<tr>
+<td>Prefix</td>
+<td>0001</td>
+<td>default</td>
+</tr>
+...
+
+ +

Aquestes regles fan que la primera cel·la de cada fila estigui subratllat, i el germà de la primera cel·la de cada fila estigui tachat (en l'exemple la 2a cel·le). Només afecta a una taula específica en el document:

+ +
    #data-table-1 td:first-child {text-decoration: underline;}
+    #data-table-1 td:first-child + td {text-decoration: line-through;}
+
+ +

Aquest és el resultat:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ +
+
Més detalls
+ +

En la forma habitual, si feu un selector més específic, llavors s'augmenta la seva prioritat.

+ +

Si utilitzeu aquestes tècniques, s'evita la necessitat d'especificar els atributs class o id en tantes etiquetes en el document. En el seu lloc, CSS fa la feina.

+ +

En grans dissenys on la velocitat és important, podeu fer que les vostres fulles d'estil siguin més eficients, evitant regles complexes que depenen de les relacions entre els elements.

+ +

Per a més exemples sobre taules, consulteu Taules en la pàgina Referència CSS..

+
+ +

Acció: Ús dels selectors class i ID

+ +
    +
  1. Editeu l'arxiu HTML, i duplicar el paràgraf copiant i enganxant.
    2. +
  2. A continuació, afegir els atributs id i class a la primera còpia, i un atribut id a la segona còpia com es mostra a continuació. Com a alternativa, copiar i enganxar tot l'arxiu de nou: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p id="first">
+      <strong class="carrot">C</strong>ascading
+      <strong class="spinach">S</strong>tyle
+      <strong class="spinach">S</strong>heets
+    </p>
+    <p id="second">
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    3. +
  3. Ara editeu el fitxer CSS. Substituir tot el contingut per: + 
    strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
    +
    4. +
  4. Guardeu els arxius i actualitzar el navegador per veure el resultat: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    + +

    Podeu tractar de reordenar les línies de l'arxiu CSS per mostrar que l'ordre no té efecte.

    + +

    Els selectors class .carrot i .spinach tenen prioritat sobre el selector d'etiqueta strong.

    + +

    El selector ID #first té prioritat sobre els selectors class i tag.

    +
    5. +
+ +
+
Reptes
+ +
    +
  1. Sense canviar el arxiu HTML, afegiu una sola regla a l'arxiu CSS que mantingui totes les lletres inicials en el mateix color que estan ara, però faci que tot l'altre text en el segon paràgraf sigui blau: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. Ara canvieu la regla que acabeu d'afegir (sense canviar res més), per fer el primer paràgraf també blau: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    3. +
+ +
+
Possible solution
+ +
    +
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: + + 
    #second { color: blue; }
+
    + A more specific selector, p#second also works.
    2. +
  2. Change the selector of the new rule to be a tag selector using p: + 
    p { color: blue; }
+
    +
    3. +
+Hide solution
+Veure la solució per el repte.
+ +

Acció: L'ús de selectors de pseudo-classes

+ +
    +
  1. Creeu un arxiu HTML amb el següent contingut: + + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
+  </body>
+</html>
+
    +
    2. +
  2. Ara editeu el fitxer CSS. Substituir tot el contingut per: + 
    a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+
    +
    3. +
  3. Guardeu els arxius i actualitzar el navegador per veure el resultat (posar el ratolí sobre el següent enllaç per veure l'efecte): + + + + + + +
    Anem-nos  Home page  
    +
    4. +
+ +

Acció: L'ús de selectors basats en les relacions i pseudo-classes

+ +

Amb els selectors basats en relacions i pseudo-classes es poden crear complexes algoritmes en cascada. Aquesta és una tècnica comuna que s'utilitza, per exemple, amb la finalitat de crear menús desplegables en CSS pur (això només és CSS, sense necessitat d'utilitzar JavaScript). L'essència d'aquesta tècnica és la creació d'una regla com la següent:

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+ +

per a ser aplicat a una estructura HTML com la següent:

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menu</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Submenu</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Submenu</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

Vegeu el exemple complet d'un menú desplegable basat en CSS com a possible referència.

+ +

I ara què?

+ +

La vostre fulla d'estils, d'exemple, està començant a semblar densa i complicada. La següent secció descriu la manera de fer més fàcil de llegir la CSS.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "CSS llegible")}}

diff --git a/files/ca/web/guide/css/inici_en_css/svg_i_css/index.html b/files/ca/web/guide/css/inici_en_css/svg_i_css/index.html new file mode 100644 index 0000000000..6dac20b5a6 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/svg_i_css/index.html @@ -0,0 +1,223 @@ +--- +title: SVG i CSS +slug: Web/Guide/CSS/Inici_en_CSS/SVG_i_CSS +tags: + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsLiveSample + - NeedsUpdate + - SVG + - Web +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +
{{CSSTutorialTOC}}
+ +

Aquesta pàgina il·lustra l'aplicació de CSS per al llenguatge especialitzat en la creació de gràfics: SVG.

+ +

Crea una demostració senzilla que s'executa en el vostre navegador habilitat per SVG.

+ +

Aquesta és la 2nd secció de la Part II del tutorial CSS.
+ Secció anterior: JavaScript
+ Secció següent: XML data

+ +

Informació: SVG

+ +

SVG (Scalable Vector Graphics) és un llenguatge basat en XML per a la creació de gràfics.

+ +

Es pot utilitzar per a imatges estàtiques, i també per a animacions i interfícies d'usuari.

+ +

Igual que altres llenguatges basats en XML, SVG suporta fulles d'estil CSS perquè pugui separar l'estil d'un gràfic del seu contingut.

+ +

A més, les fulles d'estil que s'utilitzen amb altres llenguatges de marcat de documents poden especificar l'adreça URL d'un gràfic SVG on es requereix una imatge. Per exemple, una fulla d'estil que s'utilitza amb un document HTML pot especificar l'adreça URL d'un gràfic SVG en el valor d'una propietat background.

+ + + + + + + + +
Més detalls
+

En el moment d'escriure (mitjans 2011), la majoria dels navegadors moderns tenen suport bàsic per a SVG, incloent Internet Explorer 9 o superior. Algunes de les característiques de SVG són compatibles parcialment o no en alguns navegadors. Consulteu les taulae SVG en caniuse.com per a una visió general de suport per SVG, o les taules de compatibilitat referència de l'element SVG per al suport de determinats elements.

+ +

Podeu afegir suport SVG a altres versions mitjançant la instal·lació d'un plug-in, com el proporcionat per Adobe.

+ +

Per obtenir més informació sobre SVG en Mozilla, consulteu la pàgina principal de SVG al wiki.

+
+ +

Acció: Una demostració SVG

+ +

Feu un nou document SVG com un arxiu de text pla, doc8.svg. Copieu i enganxeu el contingut d'aquí, assegurant-se que us desplaceu per obtenir tota ella;

+ +
<?xml version="1.0" standalone="no"?>
+
+<?xml-stylesheet type="text/css" href="style8.css"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg width="600px" height="600px" viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg" version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<title>SVG demonstration</title>
+<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
+
+<defs>
+  <g id="segment" class="segment">
+    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+    </g>
+  <g id="quadrant">
+    <use xlink:href="#segment"/>
+    <use xlink:href="#segment" transform="rotate(18)"/>
+    <use xlink:href="#segment" transform="rotate(36)"/>
+    <use xlink:href="#segment" transform="rotate(54)"/>
+    <use xlink:href="#segment" transform="rotate(72)"/>
+    </g>
+  <g id="petals">
+    <use xlink:href="#quadrant"/>
+    <use xlink:href="#quadrant" transform="rotate(90)"/>
+    <use xlink:href="#quadrant" transform="rotate(180)"/>
+    <use xlink:href="#quadrant" transform="rotate(270)"/>
+    </g>
+  <radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse">
+    <stop id="fade-stop-1" offset="33%"/>
+    <stop id="fade-stop-2" offset="95%"/>
+    </radialGradient>
+  </defs>
+
+<text id="heading" x="-280" y="-270">
+  SVG demonstration</text>
+<text  id="caption" x="-280" y="-250">
+  Move your mouse pointer over the flower.</text>
+
+<g id="flower">
+  <circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/>
+  <use id="outer-petals" xlink:href="#petals"/>
+  <use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/>
+  </g>
+
+</svg>
+
+ +

Feu una nou arxiu CSS, style8.css. Copieu i enganxeu el contingut d'aquí, assegurant-se que us desplaceu per obtenir tota ella;

+ +
/*** SVG demonstration ***/
+
+/* page */
+svg {
+  background-color: beige;
+  }
+
+#heading {
+  font-size: 24px;
+  font-weight: bold;
+  }
+
+#caption {
+  font-size: 12px;
+  }
+
+/* flower */
+#flower:hover {
+  cursor: crosshair;
+  }
+
+/* gradient */
+#fade-stop-1 {
+  stop-color: blue;
+  }
+
+#fade-stop-2 {
+  stop-color: white;
+  }
+
+/* outer petals */
+#outer-petals {
+  opacity: .75;
+  }
+
+#outer-petals .segment-fill {
+  fill: azure;
+  stroke: lightsteelblue;
+  stroke-width: 1;
+  }
+
+#outer-petals .segment-edge {
+  fill: none;
+  stroke: deepskyblue;
+  stroke-width: 3;
+  }
+
+#outer-petals .segment:hover > .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover > .segment-edge {
+  stroke: slateblue;
+  }
+
+/* inner petals */
+#inner-petals .segment-fill {
+  fill: yellow;
+  stroke: yellowgreen;
+  stroke-width: 1;
+  }
+
+#inner-petals .segment-edge {
+  fill: none;
+  stroke: yellowgreen;
+  stroke-width: 9;
+  }
+
+#inner-petals .segment:hover > .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover > .segment-edge {
+  stroke: green;
+  }
+
+ +

Obriu el document en el navegador habilitat per SVG. Moure el punter del ratolí sobre el gràfic.

+ +

Aquest wiki no suporta SVG en les pàgines, de manera que no es pot mostrar la demostració aquí. El gràfic es veu així:

+ + + + + + + +
SVG demonstration
+ +

Notes sobre aquesta demostració:

+ + + + + + + + + + +
Repte
Canvieu la fulla d'estil perquè els pètals interns es tornin tots de color rosa quan el punter del ratolí està sobre qualsevol d'ells, sense canviar la forma en què els pètals externs funcionen.
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

En aquesta demostració, el vostre navegador habilitat per SVG  ja sap com mostrar els elements SVG. La fulla d'estil només modifica la visualització de certes maneres. Això també és cert per als documents HTML i XUL. Però es pot utilitzar CSS per a documents XML d'ús general, on no hi ha un camí predefinit per mostrar els elements. La pàgina següent mostra això: dades XML

diff --git a/files/ca/web/guide/css/inici_en_css/taules/index.html b/files/ca/web/guide/css/inici_en_css/taules/index.html new file mode 100644 index 0000000000..c12e76f397 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/taules/index.html @@ -0,0 +1,474 @@ +--- +title: Taules +slug: Web/Guide/CSS/Inici_en_CSS/Taules +tags: + - CSS + - CSS Tables + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +

{{CSSTutorialTOC}}{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny")}}

+ +

Aquesta és la 13th secció del tutorial CSS Getting Started tutorial; descriu selectors més avançats, i algunes formes específiques en el disseny de taules. Es crea un nou document d'exemple que conté una taula, i un full d'estil per a això.

+ +

Informació: Taules

+ +

Una taula és una disposició de la informació en una reixeta rectangular. Algunes taules poden ser complexes, i per a taules complexes, diferents navegadors poden donar resultats diferents.

+ +

En dissenyar el vostre document, utilitzeu una taula per expressar les relacions entre els elements d'informació. Llavors no importa si els diferents navegadors presenten la informació de manera lleugerament diferent, ja que el significat segueix sent clar.

+ +

No utilitzeu taules en formes inusuals per produir determinats dissenys visuals. Les tècniques de la pàgina anterior d'aquest tutorial (Disseny) són millors per a aquest propòsit.

+ +

Estructura de la taula

+ +

En una taula, cada peça d'informació es mostra en una cel·la.

+ +

Les cel·les en una línia de la pàgina constitueix una fila.

+ +

En algunes taules, les files poden ser agrupades. Un grup especial de files en l'inici de la taula és la capçalera (header). Un grup especial de files al final de la taula és el peu de pàgina (footer). Les principals files de la taula són el cos (body), i que també podrien estar en grups.

+ +

Les cel·les en una línia de la pàgina conformen una columna, però les columnes tenen un ús limitat en la CSS de les taules.

+ +
+
Exemple
+ +

La taula de Selectors basats en relacion en la pàgina Selectors té deu cel·les en cinc files.

+ +

La primera fila és la capçalera. Les altres quatre files són el cos. No hi ha peu de pàgina.

+ +

Té dues columnes.

+
+ +

Aquest tutorial només cobreix taules simples, on els resultats són bastant predictibles. En una taula simple, cada cel·la ocupa només una fila i columna. Es pot utilitzar CSS per a taules complexes en les cel·les que s'estenen (s'estenen a través) més d'una fila o columna, però les taules com aquestes estan més enllà de l'abast d'aquest tutorial bàsic.

+ +

Vores

+ +

Les cel·les no tenen marges.

+ +

Les cel·les tenen vores i farciment. Per defecte, les vores estan separades pel valor de la propietat {{cssxref("border-spacing")}} de la taula. També podeu eliminar completament l'espai mitjançant l'establiment de la propietat {{cssxref ("border-collapse")}} de la taula a col·lapsar (collapse).

+ +
+
Exemple
+ +

Aquí hi ha tres taules.

+ +

La taula de l'esquerra té 0,5 em espaiat de vores. La taula del centre té espaiat de vores zero. La taula de la dreta ha col·lapsat les vores:

+ + + + + + + + +
+ +

{{embedLiveSample('Borders', 600)}}

+
+ +

Llegendes

+ +

Un element {{HTMLElement("caption")}} és una etiqueta que s'aplica a tota la taula. Per defecte, es mostra a la part superior de la taula.

+ +

Per moure'l a la part inferior, establiu la seva  propietat {{cssxref("caption-side")}} a baix. La propietat s'hereta, de manera que, alternativament, es pot establir sobre la taula o un altre element antecessor.

+ +

Per l'estil del text de la Llegenda, utilitzeu qualsevol de les propietats usuals de text.

+ +
+
Exemple
+ +

Aquesta taula té una llegenda a la part inferior.

+ +
#demo-table > caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+
+ + + +

{{embedLiveSample('Captions', 300)}}

+
+ +

Cel·les buides

+ +

Es poden mostrar cel·les buides (és a dir, les seves vores i fons) especificant {{cssxref("empty-cells")}}: show; per a l'element de la taula.

+ +

Es poden amagar mitjançant l'especificació empty-cells: hide;. Llavors, si l'element pare d'una cel·la té un fons, es mostra a través de la cel.la buida.

+ +
+
Exemple
+ +

Aquestes taules tenen un fons de color verd pàl·lid. Les seves cel·les tenen un fons gris clar i unes vores gris fosc.

+ +

A la taula de l'esquerra, es mostra la cel·la buida. A la dreta, està oculta:

+ + + + + + + + +
+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+
+
+ +
+
Detalls
+ +

Per obtenir informació detallada sobre les taules, vegeu Taules en l'especificació CSS.

+ +

La informació no va més enllà d'aquest tutorial, però no cobreix les diferències entre els navegadors que poden afectar a taules complexes.

+
+ +

Acció: Estil d'una taula

+ +
    +
  1. Feu un nou document HTML, doc3.html. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella; + + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample document 3</title>
+    <link rel="stylesheet" href="style3.css">
+  </head>
+  <body>
+    <table id="demo-table">
+      <caption>Oceans</caption>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Area</th>
+          <th>Mean depth</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>million km<sup>2</sup></th>
+          <th>m</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>Arctic</th>
+          <td>13,000</td>
+          <td>1,200</td>
+        </tr>
+        <tr>
+          <th>Atlantic</th>
+          <td>87,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Pacific</th>
+          <td>180,000</td>
+          <td>4,000</td>
+        </tr>
+        <tr>
+          <th>Indian</th>
+          <td>75,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Southern</th>
+          <td>20,000</td>
+          <td>4,500</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th>Total</th>
+          <td>361,000</td>
+          <td></td>
+        </tr>
+        <tr>
+          <th>Mean</th>
+          <td>72,000</td>
+          <td>3,800</td>
+        </tr>
+      </tfoot>
+    </table>
+  </body>
+</html>
+
    +
    2. +
  2. Feu un nova fulla d'estil, style3.css. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella; + 
    /*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table > caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table > thead > tr:first-child > th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table > thead > tr + tr > th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table > tfoot td {
+  background-color: #cee;
+}
+
+#demo-table > tfoot > tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+
    +
    3. +
  3. Obriu el document en el navegador. Ha de tenir un aspecte molt similar a aquest:
    + {{EmbedLiveSample("Action_Styling_a_table", 400, 380)}}
    4. +
  4. Compareu les regles de la fulla d'estil amb la taula que es mostra, per assegurar-se que compreneu l'efecte de cada regla. Si trobeu una regla que no esteu segur sobre ella, comentar-la i refresqueu el navegador per veure què passa. Aquí hi ha algunes notes sobre aquesta taula: +
      +
    • La llegenda es troba fora de la vora de la taula.
      • +
    • Si teniu una mida de punt mínim establert en les Opcions, podria afectar el superíndex en km2.
      • +
    • Hi ha tres cel·les buides. Dos d'elles permeten mostrar el fons de la taula a través. El tercer té un fons i una vora superior.
      • +
    • Els dos punts son afegits per la fulla d'estil.
      • +
    +
    5. +
+ +
+
Repte
+ +

Modifiqueu la fulla d'estils per fer que la taula tingui aquest aspecte:

+ + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
+
+ +

Oceans

+
+
+
+ +

Veure la solució per el repte.

+ +

I ara què?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Media", "Media")}}Aquesta és l'última pàgina d'aquest tutorial que se centra en les propietats i els valors CSS. Per a un resum complet de les propietats i valors, vegeu Taula de propietats completa en l'especificació CSS

+ +

En la següent pàgina es veu de nou el propòsit i l'estructura de les fulles d'estil CSS.

diff --git "a/files/ca/web/guide/gr\303\240fics/index.html" "b/files/ca/web/guide/gr\303\240fics/index.html" new file mode 100644 index 0000000000..a65c99ec66 --- /dev/null +++ "b/files/ca/web/guide/gr\303\240fics/index.html" @@ -0,0 +1,49 @@ +--- +title: Gràfics en la Web +slug: Web/Guide/Gràfics +tags: + - 2D + - 3D + - Canvas + - Graphics + - HTML5 + - SVG + - Web + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +

Els llocs web i les aplicacions sovint necessiten presentar gràfics. Les imatges estàtiques poden visualitzar-se fàcilment usant l'element {{HTMLElement("img")}} o configurant el fons dels elements HTML  utilitzant la propietat {{cssxref("background-image")}}. També podeu construir gràfics sobre la marxa o manipular imatges després de fetes. Aquests articles proporcionen informació sobre com podeu aconseguir-ho.

+ +
+
+

Gràfics 2D

+ +
+
Canvas
+
L'element {{HTMLElement("canvas")}} proporciona APIs per dibuixar gràfics 2D utilitzant JavaScript.
+
SVG
+
Els Gràfics Vectorials Escalables (SVG) permeten utilitzar línies, corbes i altres formes geomètriques per representar gràfics. Amb vectors, podeu crear imatges que s'escalen netament a qualsevol grandària.
+
+ +

Veure Tot...

+
+ +
+

Gràfics 3D

+ +
+
WebGL
+
Una guia per començar amb WebGL, l'API de gràfics 3D per a la web. Aquesta tecnologia permet utilitzar OpenGL ES estàndard en contingut web.
+
+ +

Vídeo

+ +
+
Ús d'àudio i vídeo HTML5
+
Incrustar vídeo i/o àudio en una pàgina web i controlar la seva reproducció.
+
WebRTC
+
El RTC en WebRTC significa Comunicacions en Temps Real, tecnologia que permet la transmissió d'àudio/vídeo i l'intercanvi de dades entre clients del navegador (parells).
+
+
+
diff --git "a/files/ca/web/guide/html/_consells_per_crear_p\303\240gines_html_de_c\303\240rrega_r\303\240pida/index.html" "b/files/ca/web/guide/html/_consells_per_crear_p\303\240gines_html_de_c\303\240rrega_r\303\240pida/index.html" new file mode 100644 index 0000000000..6c683a8156 --- /dev/null +++ "b/files/ca/web/guide/html/_consells_per_crear_p\303\240gines_html_de_c\303\240rrega_r\303\240pida/index.html" @@ -0,0 +1,186 @@ +--- +title: Consells per crear pàgines HTML de càrrega ràpida +slug: Web/Guide/HTML/_Consells_per_crear_pàgines_HTML_de_càrrega_ràpida +tags: + - Advanced + - Guide + - HTML + - NeedsUpdate + - Performance + - Web +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

Aquests consells es basen en el coneixement i l'experimentació comuna.

+ +

Una pàgina web optimitzada no només preveu un lloc més sensible per als seus visitants, sinó que també redueix la càrrega dels servidors web i la connexió a Internet. Això pot ser crucial per als llocs d'alt volum o dels llocs que tenen un pic en el tràfic a causa de circumstàncies inusuals, com ara notícies d'última hora.

+ +

Optimitzar el rendiment de càrrega de pàgina no és només per a contingut que serà vist pels visitants de dispositius telefònics o mòbils de banda estreta. És igual d'important que el contingut en banda ampla i pot conduir a millores espectaculars fins i tot per als seus visitants amb les connexions més ràpides.

+ +

Consells

+ +

Reduir el pes de la pàgina

+ +

El pes de la pàgina és, de bon tros, el factor més important en el rendiment de càrrega de pàgines.

+ +

La reducció del pes de la pàgina a través de l'eliminació d'espais en blanc i comentaris innecessaris, comunament coneguda com la reducció al mínim, i movent el script en línia i CSS en arxius externs, pot millorar el rendiment de descàrrega amb una necessitat mínima d'altres canvis en l'estructura de la pàgina.

+ +

Eines com ara HTML Tidy pot treure automàticament espais en blanc i les línies en blanc addicionals del codi HTML vàlid. Altres eines poden "comprimir" JavaScript canviant el format o per ofuscació de la font i la substitució dels identificadors llargs amb versions més curtes.

+ +

Reduir al mínim el nombre d'arxius

+ +

La reducció del nombre d'arxius que es fa referència en una pàgina web redueix el nombre de connexions HTTP necessaries per descarregar una pàgina.

+ +

Depenent de la configuració de la memòria cau d'un navegador, es pot enviar una petició If-Modified-Since al servidor web per a cada arxiu CSS, JavaScript o imatge, preguntant si l'arxiu ha estat modificat des de l'última vegada que es va descarregar.

+ +

En reduir el nombre d'arxius que es fa referència en una pàgina web, es redueix el temps necessari perquè aquestes peticions siguin enviades, i per les respostes que es rebin.

+ +

Si utilitzeu moltes imatges de fons en el vostre CSS, es pot reduir la quantitat de cerques HTTP necessaries mitjançant la combinació de les imatges en una, conegut com un sprite d'imatge. A continuació, només s'aplica la mateixa imatge cada vegada que ho necessiteu per a un fons, i ajustant les coordenades x/y de manera apropiada. Aquesta tècnica funciona millor amb els elements que tenen dimensions limitades, i no funcionarà per a cada ús d'una imatge de fons. No obstant això, el menor nombre de peticions HTTP i l'emmagatzematge en memòria cau d'una sola imatge pot ajudar a reduir el temps pageload.

+ +

L'excés de temps dedicat a la consulta de l'última modificació dels arxius de referència pot retardar la visualització inicial d'una pàgina web, ja que el navegador ha de comprovar el temps de modificació per a cada arxiu CSS o JavaScript, abans de processar la pàgina.

+ +

Reduir la recerca de dominis

+ +

Atès que cada domini per separat porta temps en la recerca de DNS, el temps de càrrega de la pàgina creixerà juntament amb el nombre de dominis independents que apareguin en link(s) CSS i src(es) JavaScript i imatge.

+ +

Això no sempre és pràctic; no obstant això, sempre s'ha de tenir en compte d'utilitzar només el nombre mínim necessari dels diferents dominis en les vostres pàgines.

+ +

Contingut reutilitzat en memòria cau

+ +

Assegureu-vos que qualsevol contingut que es pugui emmagatzemar en memòria cau, s'emmagatzemi en memòria cau, i amb els temps de caducitat apropiades.

+ +

En concret, presteu atenció a la capçalera Last-Modified. Permet d'una manera eficient l'emmagatzematge en memòria cau de la pàgina; per mitjà d'aquesta capçalera, la informació es transmet a l'agent d'usuari sobre l'arxiu que vol carregar, com quan es va modificar per última vegada. La majoria dels servidors web afegeixen automàticament la capçalera Last-Modified a pàgines estàtiques (per exemple .html, .css), d'acord amb la data d'última modificació emmagatzemada en el sistema d'arxius. Amb les pàgines dinàmiques (per exemple, .php, .aspx), això, per descomptat, no es pot fer, i la capçalera no s'envia.

+ +

Així, en particular, per a les pàgines que es generen de forma dinàmica, una mica de recerca sobre aquest tema és beneficiós. Pot ser una mica complicat, però s'estalviarà molt en les sol·licituds de pàgina en les pàgines que normalment no serien emmagatzemades en memòria cau.

+ +

Més informació:

+ +
    +
  1. HTTP Conditional Get for RSS Hackers
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. HTTP ETag on Wikipedia
    4. +
  4. Caching in HTTP
    5. +
+ +

Ordenar de manera òptima els components de la pàgina

+ +

Descarregar el contingut de la pàgina en primer lloc, juntament amb qualsevol CSS o JavaScript que pugui ser necessàri per a la seva visualització inicial, de manera que l'usuari obté una resposta aparent més ràpida durant la càrrega de les pàgines. Aquest contingut és normalment de text, i per tant pot beneficiar-se de la compressió del text en trànsit, proporcionant així una resposta fins i tot més ràpida per a l'usuari.

+ +

Cap característica dinàmica que requereixi la pàgina per completar la càrrega abans de ser utilitzada, ha de ser desactivada inicialment, i només es permet després que la pàgina s'hagi carregat. Això farà que el JavaScript es carregui després del contingut de la pàgina, el que millorarà l'aspecte general de la càrrega de la pàgina.

+ +

Reduir el nombre de scripts en línia

+ +

Els scripts en línia poden ser costosos per a la càrrega de la pàgina, ja que l'analitzador ha d'assumir que un script en línia podria modificar l'estructura de la pàgina, mentre que l'anàlisi està en curs. Reduir l'ús de scripts en línia en general, i reduir l'ús de document.write() per a continguts de sortida en particular, pot millorar la càrrega total de la pàgina. Utilitzeu mètodes moderns d'AJAX per manipular el contingut de la pàgina per als navegadors moderns, en lloc dels antics enfocaments basats en document.write().

+ +

Utilitzar CSS modern i marcat vàlid

+ +

L'ús de CSS modern redueix la quantitat de marcat, pot reduir la necessitat d'imatges (spacer), en termes de disseny, i molt sovint pot substituir les imatges de text estilitzat - el "cost" és molt més que l'equivalent de text-i-CSS.

+ +

L'ùs del marcat vàlid té altres avantatges. En primer lloc, els navegadors no tenen necessitat de dur a terme la correcció d'errors a l'analitzar el codi HTML (això és, a part de la qüestió filosòfica, de si s'ha de permetre la variació de format a l'entrada de l'usuari, i després mitjançant programació "corregir" o normalitzar aquest o si, en canvi, fer complir un estricte format d'entrada, no tolerància).

+ +

D'altra banda, el marcat vàlid permet el lliure ús d'altres eines les quals poden pre-processar les vostres pàgines web. Per exemple, HTML Tidy pot eliminar espais en blanc i les etiquetes opcionals de tancament; però, es negarà a executar una pàgina amb greus errors de marcat.

+ +

Part del teu contingut

+ +

Les taules de dissenys són un mètode llegat que no ha de ser utilitzat més. Dissenys que utilitzen blocs {{HTMLElement ("div")}}, i en un futur pròxim, CSS3 Multi-column Layout o CSS3 Flexible Box Layout, s'han d'utilitzar al seu lloc.

+ +

Les taules encara es consideren marcat vàlid, però han de ser utilitzades per a la visualització de dades tabulars. Per ajudar al navegador a processar la vostre pàgina més ràpidament, heu d'evitar niar les vostres taules.

+ +

En lloc de niar profundament les taules com en:

+ +
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+ +

utilitzar taules no niats o divs com a:

+ +
<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+
+ +

Veure: CSS3 Multi-column Layout Spec i CSS3 Flexible Box Layout

+ +

Minimitzar i comprimir recursos SVG

+ +

SVG produït per la majoria de les aplicacions de dibuix, sovint conté metadades innecessaries que es poden treure. Configureu els servidors per aplicar la compressió gzip per als recursos SVG.

+ +

Especificar les mides de les imatges i taules

+ +

Si el navegador pot determinar immediatament l'altura i/o amplada de les vostres imatges i taules, serà capaç de mostrar una pàgina web sense haver de reorganitzar el contingut. Això no només accelera la visualització de la pàgina, sinó que evita els molestos canvis en el disseny d'una pàgina quan la pàgina completa la càrrega. Per aquesta raó, height i width s'han d'especificar per a les imatges, sempre que sigui possible.

+ +

Les taules han d'utilitzar la combinació CSS selector:propietat:

+ +
  table-layout: fixed;
+
+ +

i ha de precisar les amplades de les columnes utilitzant les etiquetes HTML COL i COLGROUP.

+ +

Trieu els vostres requisits d'agent d'usuari sàviament

+ +

Per aconseguir les millores més importants en el disseny de la pàgina, assegureu-vos que els requisits raonables d'agent d'usuari s'especifiquin en els projectes. No requereix que el seu contingut aparegui un píxel perfecte en tots els navegadors, especialment no en els navegadors de versions més antigues.

+ +

L'ideal és que, els requisits mínims bàsics s'han de basar en la consideració dels navegadors moderns que suporten les normes pertinents. Això pot incloure les versions recents de Firefox, Internet Explorer, Google Chrome, Opera i Safari.

+ +

Recordeu, però, que molts dels consells que apareixen en aquest article són tècniques de sentit comú que s'apliquen a qualsevol agent d'usuari, i que es poden aplicar a qualsevol pàgina web, independentment dels requisits de compatibilitat amb els navegadors.

+ +

Exemple de l'estructura d'una pàgina

+ +

· HTML

+ +
+
· HEAD
+
+ +
+
+
+
· LINK ...
+ arxius CSS necessaris per l'aparença de la pàgina. Minimitzar el nombre d'arxius per el rendiment, mentre es manté CSS no relacionat en arxius separats per al manteniment.
+
+
+
+ +
+
+
+
· SCRIPT ...
+ arxius JavaScript per a funcions requerides durant la càrrega de la pàgina, però no qualsevol DHTML que només es pot executar després de càrrega de la pàgina.
+
Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.
+
+
+
+ +
+
· BODY
+
· Contingut de la pàgina, visible per a l'usuari, en trossos petits (taules/divs) que es poden visualitzar sense esperar que la pàgina completi la seva descàrrega.
+
+ +
+
+
+
· SCRIPT ...
+ Qualsevol script que s'utilitzarà per realitzar DHTML. El script DHTML normalment es pot executar després que la pàgina s'hagi carregat completament i tots els objectes necessaris hagin estat inicialitzats. No hi ha necessitat de carregar aquests scripts abans que el contingut de la pàgina. Això només ralenteix l'aparença inicial de la càrrega de la pàgina.
+
Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.
+
Si s'utilitzen les imatges per a efectes rollover, s'ha de carregar prèviament aquí després que el contingut de la pàgina s'hagi descarregat.
+
+
+
+ +

Utilitzar asyn i defer, si és possible

+ +

Fer que els scripts de JavaScript siguin compatibles tant amb async i defer i utilitzar async sempre que sigui possible, especialment si té diverses etiquetes de script. Amb això, la pàgina pot aturar el processament, mentre que encara s'estigui carregant JavaScript. En cas contrari, el navegador no renderizará res que estigui darrere de les etiquetes de script que no tinguin aquests atributs.

+ +

Nota: Tot i que aquests atributs ens ajuden molt per a la primera vegada que es carrega una pàgina, s'han d'usar, però no dependre de que funcionarà en tots els navegadors. Si seguiu totes les pautes per fer un bon codi JavaScript, no hi ha necessitat de canviar el codi.

+ +

Enllaços relacionats

+ + diff --git a/files/ca/web/guide/html/html5/index.html b/files/ca/web/guide/html/html5/index.html new file mode 100644 index 0000000000..6ed392c033 --- /dev/null +++ b/files/ca/web/guide/html/html5/index.html @@ -0,0 +1,171 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +tags: + - Guide + - HTML + - HTML5 + - Overview + - Web + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5 és l'última evolució de la norma que defineix HTML. El terme representa dos conceptes diferents:

+ + + +

Dissenyat per a ser utilitzable per tots els desenvolupadors de la Web Oberta, aquesta pàgina de referència enllaça a nombrosos recursos sobre tecnologies HTML5, que es classifiquen en diversos grups segons la seva funció.

+ + + +
+
+

SemàntIcA

+ +
+
Seccions i esquemes en HTML5
+
Una ullada als nous elements d'esquema i secció en HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} i {{HTMLElement("aside")}}.
+
Ús d'àudio i vídeo en HTML5
+
Els elements {{HTMLElement ("àudio")}} i {{HTMLElement ("vídeo")}} incrustats, permeten la manipulació dels nous continguts multimèdia.
+
Formularis en HTML5
+
Una mirada a les millores en els formularis web en HTML5: l'API de validació restringida, diversos atributs nous, nous valors per l'atribut {{htmlattrxref("type", "input")}} de l'element {{HTMLElement("input")}}  i l'element nou {{HTMLElement("output")}}.
+
Nous elements semàntics
+
Al costat dels elements de seccions, de medis i de formularis, hi ha nombrosos elements nous, com {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} o {{HTMLElement("meter")}} i {{HTMLElement("main")}}, augmentant la quantitat d'elements HTML5 vàlids.
+
Millora en {{HTMLElement ("iframe")}}
+
Utilitzant els atributs {{htmlattrxref("sandbox", "iframe")}} i {{htmlattrxref("srcdoc", "iframe")}}, els autors ara poden ser precisos sobre el nivell de seguretat i la representació desitjada d'un element {{HTMLElement("iframe")}}.
+
MathML
+
Permet la incorporació directa de fórmules matemàtiques.
+
Introducció a HTML5
+
Aquest article presenta com indicar al navegador que utilitzeu HTML5 en el vostre disseny web o una aplicació web.
+
Analitzador HTML5 compatible
+
L'analitzador, que converteix els bytes d'un document HTML en un DOM, s'ha ampliat i ara defineix amb precisió el comportament d'utilitzar en tots els casos, fins i tot quan s'enfronten amb HTML vàlid. Això condueix a una major previsibilitat i interoperabilitat entre els navegadors compatibles amb HTML5.
+
+ +

Conectivitat

+ +
+
Web Sockets
+
Permet la creació d'una connexió permanent entre la pàgina i el servidor i l'intercanvi de dades no HTML a través d'aquest mitjà.
+
Esdeveniments enviats pel servidor
+
Permet a un servidor enviar esdeveniments a un client, en lloc del paradigma clàssic en què el servidor podria enviar les dades només en resposta a la petició d'un client.
+
WebRTC
+
Aquesta tecnologia, on RTC és sinònim de comunicació en temps real, permet la connexió amb altres persones i el control de la videoconferència directament en el navegador, sense necessitat d'un complament o una aplicació externa.
+
+ +

Sense connexió & emmagatzematge

+ +
+
Recursos sense connexió: El cau de l'aplicació
+
Firefox és totalment compatible amb l'especificació de recursos sense connexió d'HTML5. La majoria dels altres recursos sense connexió tenen suport en un cert nivell.
+
Esdeveniments amb i sense connexió
+
Firefox 3 suporta WHATWG, esdeveniments amb i sense connexió, que permeten a les aplicacions i extensions detectar si hi ha o no una connexió a Internet, així com tambien, detectar quan la connexió es perd o es recupera.
+
WHATWG sessió del costat client i emmagatzamatge continu (emmagatzamatge DOM)
+
Sessió del costat client i l'emmagatzematge continu permet a les aplicacions web emmagatzemar dades estructurades al costat del client.
+
IndexedDB
+
IndexedDB és un estàndard web per a l'emmagatzematge de grans quantitats de dades estructurades en el navegador i per a les recerques d'alt rendiment d'aquestes dades mitjançant índexs .
+
Ús d'arxius des d'aplicacions web
+
El suport per a la nova API d'arxius d'HTML5 ha estat afegit a Gecko, per la qual cosa és possible que les aplicacions d'Internet accedeixin als arxius locals seleccionats per l'usuari. Això inclou el suport per a la selecció de diversos arxius utilitzant l'element HTML {{HTMLElement("input")}} de type file amb el nou atribut multiple. També hi ha FileReader.
+
+ +

Multimèdia

+ +
+
L'ús àudio i vídeo en HTML5
+
Els elements {{HTMLElement("audio")}} i {{HTMLElement("video")}} incrustats permeten la manipulació dels nous continguts multimèdia.
+
WebRTC
+
Aquesta tecnologia, on RTC és sinònim de comunicació en temps real, permet la connexió amb altres persones i el control de la videoconferència directament en el navegador, sense necessitat d'un complement o una aplicació externa.
+
Ús de l'API de la càmera
+
Permet utilitzar, manipular i emmagatzemar una imatge des de la càmera de l'ordinador.
+
Pista i WebVTT
+
L'element {{HTMLElement("track")}} permet subtítols i capítols. WebVTT és un format de pista de text.
+
+ +

Gràfics i efectes 3D

+ +
+
Tutorial Canvas
+
Aprendre sobre el nou element {{HTMLElement("canvas")}} i com dibuixar gràfics i altres objectes en Firefox.
+
API de text HTML5 per elements <canvas>
+
L'API de text HTML5 és ara compatible amb elements {{HTMLElement("canvas")}}..
+
WebGL
+
WebGL porta gràfics en 3D a la web mitjançant la introducció d'una API que s'ajusta estretament a OpenGL ÉS 2.0 que pot ser utilitzat en elements HTML5 {{HTMLElement("canvas")}}.
+
SVG
+
Un format basat en XML d'imatges vectorials que pot ser directament incrustat en el codi HTML.
+
+
+ +
+

Rendiment i Integració

+ +
+
Web Workers
+
Permet delegar l'avaluació de JavaScript a subprocessos en segon pla, permetent que aquestes activitats evitin alentir esdeveniments interactius.
+
XMLHttpRequest nivell 2
+
Permet anar a buscar de forma asíncrona algunes parts de la pàgina, la qual cosa li permet mostrar contingut dinàmic, variant segons el temps i les accions de l'usuari. Aquesta és la tecnologia que hi ha darrere d'Ajax.
+
Motors JavaScript un compilador JIT
+
La nova generació de motors de JavaScript són molt més potents, el que porta a un major rendiment.
+
API historial
+
Permet la manipulació del històrial del navegador. Això és especialment útil per a les pàgines que carreguen interactivament nova informació.
+
L'atribut contentEditable: Transformeu el vostre lloc web en una wiki!
+
HTML5 ha estandarditzat l'atribut contentEditable. Més informació sobre aquesta característica.
+
Arrosegar i deixar anar
+
El API d'arrossegar i deixar anar d'HTML5 permet el suport per arrossegar i deixar anar elements dins i entre llocs web. Això també proporciona una API senzilla per a l'ús d'extensions i aplicacions basats en Mozilla.
+
Gestió del focus en HTML
+
Els nous atributs d'HTML5 activeElement i hasFocus són compatibles.
+
Controladors de protocols basats en la Web
+
Ara podeu registrar aplicacions web com controladors de protocol utilitzant el mètode navigator.registerProtocolHandler().
+
requestAnimationFrame
+
Permet controlar les animacions de renderitzat per obtenir un rendiment òptim.
+
API Pantalla completa
+
Controla l'ús de tota la pantalla per a una pàgina Web o aplicació, sense que es mostri la interfície d'usuari del navegador.
+
API Bloqueig del punter
+
Permet bloquejar el punter al contingut, de manera que els jocs i aplicacions similars no perdin el focus quan el punter arriba al límit de la finestra.
+
Esdeveniments amb línia i sense línia
+
Amb la finalitat de construir una bona aplicació web sense connexió, necessiteu saber quan la vostra aplicació està realment fora de línia. Per cert, també necessiteu saber quan la vostra aplicació ha tornat a un estat en línia de nou.
+
+ +

accés al dispositiu

+ +
+
Ús de l'API de la càmera
+
Permet utilitzar, manipular i emmagatzemar una imatge des de la càmera de l'ordinador.
+
Esdeveniments tàctils
+
Manipuladors per reaccionar als esdeveniments creats per un usuari pressionant pantalles tàctils.
+
Ús de la geolocalització
+
Permet als navegadors localitzar la posició de l'usuari mitjançant la geolocalització.
+
Detecció de l'orientació del dispositiu
+
Obtenir la informació quan el dispositiu en el qual s'executa el navegador canvia l'orientació. Això pot ser usat com un dispositiu d'entrada (per exemple, per fer jocs que reaccionen a la posició del dispositiu) o per adaptar el disseny d'una pàgina a l'orientació de la pantalla (vertical o horitzontal)..
+
API Bloqueig del punter
+
Permet bloquejar el punter al contingut, de manera que els jocs i aplicacions similars no perdin el focus quan el punter arriba al límit de la finestra.
+
+ +

ESTIL

+ +

CSS s'ha ampliat per ser capaç de poder donar estil als elements en una forma molt més complexa. Això es coneix com CSS3, encara que CSS no és una especificació monolítica i els diferents mòduls no estan tots en el nivell 3: alguns són en el nivell 1 i altres al nivell 4, amb tots els nivells intermedis coberts.

+ +
+
Noves característiques d'estil de fons
+
Ara és possible posar una ombra a una caixa, mitjançant {{cssxref ("box-shadow")}} i es poden configurar diversos fons.
+
Més vores de luxe
+
No només ara és possible usar imatges per a l'estil de vores, usant {{cssxref ("border-image")}} i les seves propietats associades, també les vores arrodonides són suportades a través de la propietat {{cssxref("border-radius")}}.
+
Animació del vostre estil
+
Usant CSS Transitions per animar entre diferents estats o usar CSS Animations per animar parts de la pàgina sense un esdeveniment desencadenant, ara podeu controlar elements mòbils en la vostra pàgina.
+
Tipografia millorada
+
Els autors tenen un millor control per arribar a una millor tipografia. Poden controlar {{cssxref ("text-overflow")}} i la separació de síl·labes (hyphenation), però també poden afegir una ombra (shadow) a ella o controlar amb més precisió les seves decoracions (decorations). Tipus de lletra personalitzades poden ser descarregades i aplicades gràcies a la nova regla {{cssxref ("@ font-face")}}.
+
Nous dissenys de presentació
+
Per tal de millorar la flexibilitat dels dissenys, s'han afegit dos nous dissenys: el CSS multi-column layouts i CSS flexible box layout.
+
+
+
diff --git a/files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html b/files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html new file mode 100644 index 0000000000..5da074b341 --- /dev/null +++ b/files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html @@ -0,0 +1,341 @@ +--- +title: Us de seccions i esquemes en HTML 5 +slug: Web/Guide/HTML/Us_de_seccions_i_esquemes_en_HTML +tags: + - Advanced + - Example + - Guide + - HTML + - HTML5 + - Outlines + - Overview + - Sections + - Web +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
+

Important: Actualment no existeixen implementacions de l'algorisme d'esquema en els navegadors gràfics o agents d'usuari de tecnologia d'assistència, encara que l'algorisme s'executa a un altre programari, com comprobadors de conformitat. Per tant, l'algorisme d'esquema no pot ser invocat per transmetre l'estructura dels documents als usuaris. Es recomana als autors a utilitzar les capçaleres de rang (h1-h6) per transmetre l'estructura.

+
+ +

L'especificació HTML5 aporta diversos elements nous als desenvolupadors web que els permet descriure l'estructura d'un document web amb la semàntica estàndard. En aquest document es descriuen aquests elements i la forma d'utilitzar-los per definir el contorn desitjat per a qualsevol document.

+ +

Estructura de un document en HTML 4

+ +

L'estructura d'un document, és a dir, l'estructura semàntica del que està entre <body> i </body>, és fonamental per a la presentació de la pàgina a l'usuari. HTML 4 utilitza la noció de seccions i subseccions d'un document per a descriure la seva estructura. Una secció està definida per un element  ({{HTMLElement("div")}}) amb elements de capçalera ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} o {{HTMLElement("h6")}}) dins d'ella, definint el seu títol. Les relacions d'aquests elements dóna lloc a l'estructura del document i el seu contorn.

+ +

Així que el següent marcat:

+ +
+
<div class="section" id="forest-elephants" >
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <div class="subsection" id="forest-habitat" >
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  </div>
+</div>
+
+
+ +

condueix al següent esquema:

+ +
1. Forest elephants
+   1.1 Habitat
+
+ +

Els elements {{HTMLElement("div")}} no són obligatoris per definir una nova secció. La mera presència d'un element capçalera és suficient perquè  impliqui una nova secció. Per tant aixó,

+ +
<h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h2>Habitat</h2>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  <h2>Diet</h2>
+<h1>Mongolian gerbils</h1>
+
+ +

condueix al següent esquema:

+ +
1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+
+ +

Problemes resolts per HTML5

+ +

La definició d'HTML 4 de l'estructura d'un document i el seu algoritme d'esquematització implícit és molt perillos i condueix a nombrosos problemes:

+ +
    +
  1. L'ús de {{HTMLElement("div")}} per definir seccions semàntiques, sense definir valors específics per als atributs class fa impossible l'automatització de l'algoritme d'esquema ( "És que {{HTMLElement("div")}} part de la esquema de la pàgina, defineix una secció o un subsecció? "o" és només una presentació de {{HTMLElement ( "div")}}, unicament utilitzat per a l'estil? "). En altres termes, l'especificació HTML 4 és molt imprecisa en el que és una secció i com es defineix el seu àmbit. La generació automàtica dels esquemes és important, especialment per la tecnologia d'assistència, que és possible adaptar-la a la forma en què es presenta la informació als usuaris, d'acord a l'estructura del document. HTML5 elimina la necessitat d'elements {{HTMLElement ( "div")}} de l'algoritme d'esquema mitjançant la introducció d'un nou element, {{HTMLElement("section")}}, l'element  HTML Section.
    2. +
  2. La fusió de diversos documents és difícil: la inclusió d'un sub-document en un document principal significa canviar el nivell de elements d'encapçalament HTML de manera que es mantigui l'esquema. Això es soluciona en HTML5 amb els elements de seccionament recentment introduïts ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} i {{HTMLElement("aside")}}), són sempre subseccions de la secció del seu ancestre més proper, independentment de quines seccions són creades per les capçaleres internes.
    3. +
  3. En HTML 4, cada secció és part de l'esquema del document. Però els documents sovint no són tan lineals. Un document pot tenir seccions especials que contenen informació que no és part de, tot i que està relacionat amb el flux principal, com un bloc d'anunci o una caixa d'explicació. HTML 5 introdueix l'element {{HTMLElement("aside")}} que permet aquestes seccions per no ser part de l'esquema principal.
    4. +
  4. Un cop més, en HTML 4, ja que cada secció és part de l'esquema del document, no hi ha manera de tenir seccions que continguin informació relacionada no amb el document, sinó a tot el lloc, com logotips, menús, taula de continguts, o la informació de copyright i avisos legals . Amb aquesta finalitat, HTML 5 introdueix tres nous elements: {{HTMLElement("nav")}} per a les col·leccions d'enllaços, com una taula de continguts, {{HTMLElement("footer")}} i {{HTMLElement("header")}} per obtenir informació relacionada amb el lloc. Recordeu que {{HTMLElement("header")}} i {{HTMLElement("footer")}} no seccionan el contingut com {{HTMLElement("section")}}, sinó que hi són per a marcar semànticament parts d'una secció.
    5. +
+ +

De manera més general, HTML5 aporta precisió a les característiques de seccionament i encapçalament, permetent que l'esquema del document pogui ser predictible i utilitzat pel navegador per millorar l'experiència de l'usuari.

+ +

Algoritme d'esquema HTML5

+ +

Anem a considerar els algoritmes subjacents la forma en que HTML s'encarrega de les seccions i esquemes.

+ +

Definir seccions

+ +

Tot el contingut situat a l'interior de l'element {{HTMLElement("body")}} és part d'una secció. Les seccions en HTML5 es poden niar. Al costat de la secció principal, definit per l'element {{HTMLElement("body")}}, els límits de secció es defineixen de manera explícita o implícita. Les seccions definides de forma explícita, són els continguts dins de les etiquetes {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}} i {{HTMLElement("nav")}}.

+ +
Cada secció pot tenir la seva pròpia jerarquia de encapçalaments. Per tant, fins i tot una secció niada pot tenir un {{HTMLElement("h1")}}. Veure {{anch("Defining headings")}}
+ +

Vegem un exemple - aquí tenim un document amb una secció de nivell superior i un peu de pàgina definit. Dins de la secció de nivell superior tenim tres subseccions, que es defineixen per dos elements {{htmlelement("section")}} i un element {{htmlelement("aside")}}:

+ +
<section>
+
+  <h1>Forest elephants</h1>
+
+  <section>
+    <h1>Introduction</h1>
+    <p>In this section, we discuss the lesser known forest elephants.</p>
+  </section>
+
+  <section>
+    <h1>Habitat</h1>
+    <p>Forest elephants do not live in trees but among them.</p>
+  </section>
+
+  <aside>
+    <p>advertising block</p>
+  </aside>
+
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

Això ens porta al següent esquema::

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+
+ +

Definir encapçalaments

+ +

Mentre que els elements de seccionament HTML defineixen l'estructura del document, un esquema també necessita encapçalaments per ser útil. La regla bàsica és simple: el primer element d'encapçalament HTML (un de {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}})) defineix el encapçalament de la secció actual.

+ +

Els elements de capçalera tenen un rang donat pel nombre en el nom de l'element, on {{HTMLElement ("h1")}} té el rang més alt, i {{HTMLElement ("H6")}} té el rang més baix. Temes de classificació relativa només dins d'una secció; l'estructura de les seccions determina el esquema, no el rang d'encapçalament de les seccions. Per exemple, considereu aquest codi:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  </section>
+</section>
+<section>
+  <h3>Mongolian gerbils</h3>
+  <p>In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+</section>
+ +

Aixó crea el següent esquema:

+ +
1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils
+ +

Recordeu que el rang de l'element d'encapçalament (en l'exemple {{HTMLElement("h1")}} per a la primera secció de nivell superior, {{HTMLElement("h2")}} per a la subsecció i {{HTMLElement("h3")}} per a la segona secció de nivell superior) no és important. (Qualsevol rang es pot utilitzar com l'encapçalament d'una secció definida de manera explícita, encara que no es recomana aquesta pràctica.)

+ +

Seccionament implícit

+ +

A causa que el Seccionament d'elements HTML5 no són obligatoris per definir un esquema, per mantenir la compatibilitat amb la web existent, dominat per HTML 4, hi ha una manera de definir seccions sense ells. Això es diu seccionament implícit.

+ +

Els elements de capçalera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) defineixen una nova secció implícita, quan no són el primer encapçalament de les seccions explícites dels seue pares. La forma implícita d'aquesta secció es posiciona en l'esquema que es defineix per la seu rang relatiu amb l'encapçalat anterior en la seva secció per a pares. Si es tracta d'un rang inferior al de l'encapçalat anterior, s'obre una subsecció de la secció implícita. Aquest codi:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h3 class="implicit subsection">Habitat</h3>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+</section>
+ +

condueix al següent esquema:

+ +
1. Forest elephants
+   1.1 Habitat (implicitly defined by the h3 element)
+
+ +

Si es tracta del mateix rang que l'encapçalat anterior, es tanca la secció anterior (que pot haver estat explícit!) I s'obre una nova implícita en el mateix nivell: 

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h1 class="implicit section">Mongolian gerbils</h1>
+  <p>Mongolian gerbils are cute little mammals.
+    ...this section continues...
+</section>
+ +

condueix al següent esquema:

+ +
1. Forest elephants
+2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)
+
+ +

Si es tracta d'un rang més alt que l'encapçalat anterior, es tanca la secció anterior i s'obre una nova implícita en el nivell superior:

+ +
<body>
+  <h1>Mammals</h1>
+  <h2>Whales</h2>
+  <p>In this section, we discuss the swimming whales.
+    ...this section continues...
+  <section>
+    <h3>Forest elephants</h3>
+    <p>In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    <h3>Mongolian gerbils</h3>
+      <p>Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    <h2>Reptiles</h2>
+      <p>Reptiles are animals with cold blood.
+          ...this section continues...
+  </section>
+</body>
+ +

condueix al següent esquema:

+ +
1. Mammals
+   1.1 Whales (implicitly defined by the h2 element)
+   1.2 Forest elephants (explicitly defined by the section element)
+   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
+2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
+
+ +

Aquest no és l'esquema que es podria esperar fent una ullada ràpida a les etiquetes d'encapçalament. Per fer un marcat humà comprensible, és una bona pràctica utilitzar etiquetes explícites per a l'obertura i tancament de seccions, i per a que coincideixi amb el rang d'encapçalament a nivell de niament de secció previst. No obstant això, no és requerit per l'especificació HTML5. Si trobeu que els navegadors mostran el seu esquema de document de manera inesperada, comproveu si té seccions que es tanquen de manera implícita pels elements d'encapçalament.

+ +

Una excepció a la regla general és que el rang d'encapçalament ha de coincidir amb el nivell de niament de secció, és per a les seccions que poden ser reutilitzades en múltiples documents. Per exemple, una secció podria ser emmagatzemada en un sistema de gestió de continguts i muntada en documents en temps d'execució. En aquest cas, una bona pràctica és començar per {{HTMLElement("h1")}} per al nivell d'encapçalament superior de la secció reutilitzable. El nivell de niament de la secció reutilitzable serà determinat per la jerarquia de les seccions del document en què apareix. Les etiquetes de secció explícites són encara útils en aquest cas.

+ +

Arrels de seccionament

+ +

Una arrel de seccionament és un element HTML que pot tenir el seu propi esquema, però les seccions i encapçalaments en el seu interior no contribueixen a l'esquema del seu ancestre. Al costat de {{HTMLElement("body")}} que és l'arrel de seccionament lògica d'un document, aquests són sovint elements que introdueixen contingut extern a la pàgina: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} i {{HTMLElement("td")}}.

+ +

Exemple:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <section>
+    <h2>Introduction</h2>
+    <p>In this section, we discuss the lesser known forest elephants</p>
+  </section>
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
+    <blockquote>
+       <h1>Borneo</h1>
+       <p>The forest element lives in Borneo...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

El resultat d'aquest exemple en el següent esquema:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+ +

Aquest esquema no conté el esquema intern de l'element {{HTMLElement("blockquote")}}, que sent una citació externa, és una arrel de seccionament i aïlla el seu esquema intern.

+ +

Seccions fora de l'esquema

+ +

HTML 5 introdueix dos nous elements que permeten definir seccions que no pertanyen el esquema principal d'un document web:

+ +
    +
  1. L'element de secció HTML Aside ({{HTMLElement("aside")}}) defineix una secció que, encara que es relaciona amb l'element principal, no pertany al corrent principal, com un quadre d'explicació o un anunci. Té el seu propi esquema, però no pertany a la principal.
    2. +
  2. L'element de secció HTML de navegació ({{HTMLElement("nav")}}) defineix una secció que conté enllaços de navegació. Pot haver-hi diversos d'ells en un document, per exemple, una pàgina amb enllaços interns com una taula de continguts, i un altre amb el lloc d'enllaços de navegació. Aquests enllaços no són part del flux principal del document i esquema, i en general no són mostrats inicialment pels lectors de pantalla i tecnologies de suport similars.
    3. +
+ +

Encapçalats i peus de pàgina

+ +

HTML5 també introdueix dos nous elements que es poden utilitzar per marcar la capçalera i el peu de pàgina d'una secció:

+ +
    +
  1. L'element Header HTML ({{HTMLElement("header")}}) defineix una capçalera de la pàgina - en general conté el logotip i el nom del lloc i, possiblement, un menú horitzontal - o encapçalament de secció, que potser conté la capçalera de la secció, el nom de l'autor, etc.. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir la seva pròpia {{HTMLElement("header")}}. Malgrat el seu nom, no necessàriament es col·locat al començament de la pàgina o secció.
    2. +
  2. L'element Footer HTML ({{HTMLElement("footer")}}) defineix un peu de pàgina - en general conté el dret d'autor i avisos legals i, de vegades alguns enllaços - o secció de peu de pàgina, que potser conté la data de publicació de la secció, la informació de llicència, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir el seu pròpi {{HTMLElement("footer")}}. Malgrat el seu nom, no necessàriament es col·locat al final de la pàgina o secció.
    3. +
+ +

Aquests no creen noves seccions en l'esquema, més aviat, marcan el contingut dins de les seccions de la pàgina.

+ +

Adreces en elements de seccionament

+ +

L'autor d'un document, sovint, vol publicar alguna informació de contacte, com el nom i l'adreça de l'autor. HTML 4 permet això a través de l'element {{HTMLElement("address")}}, que s'ha ampliat en HTML5.

+ +

Un document pot estar fet de diferentes seccions per diferents autors. Una secció d'un altre autor, que el de la pàgina principal, es defineix mitjançant l'element {{HTMLElement("article")}}. En conseqüència, l'element {{HTMLElement("address")}} està enllaçat al seu més proper ancestre {{HTMLElement("body")}} o {{HTMLElement("article")}}.

+ +

Usar elements HTML5 en navegadors no HTML5

+ +

Els elements de seccions i capçaleres han de treballar en la majoria dels navegadors no HTML5. Tot i que no són compatibles, no necessiten una interfície especial DOM i només necessiten un estil CSS específic com a elements desconeguts, que son, se'ls dóna estil amb display:inline per defecte:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

Per descomptat, el desenvolupador web els pot donar estil de manera diferent però tinguen en compte que en un navegador no HTML5, l'estil per defecte és diferent del que s'espera per a aquest tipus d'elements. També tingueu en compte que l'element {{HTMLElement("time")}} no s'ha inclòs, ja que l'estil predeterminat per a ell en un navegador no HTML 5 és el mateix que en un amb HTML5 compatible.

+ +

Aquest mètode té les seves limitacions,  ja que alguns navegadors no permeten un estil d'elements no compatibles. Aquest és el cas d'Internet Explorer (versió 8 i anteriors), que necessiten un script específic per permetre això:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+ +

Aquest script significa que, en el cas d'Internet Explorer (8 i anteriors), el script ha d'estar habilitat per tal de mostrar els elements de seccionament HTML5 i de capçaleres correctament. Si no és així, no es mostraran, la qual cosa pot ser problemàtic, ja que aquests elements són propensos a definir l'estructura de la pàgina sencera. És per això que un element explícit {{HTMLElement( "noscript")}} ha de ser afegit per a aquest cas:

+ +
<noscript>
+   <strong>Warning !</strong>
+   Because your browser does not support HTML5, some elements are simulated using JScript.
+   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+</noscript>
+ +

Això ens porta al següent codi per permetre el suport dels elements de seccions HTML5 i capçaleres en els navegadors no HTML5, fins i tot per a Internet Explorer (8 i anteiors), amb un retorn adequat per al cas en què aquest últim navegador estigui configurat per no utilitzar scripts:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>Warning !</strong>
+     Because your browser does not support HTML5, some elements are created using JavaScript.
+     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+  </noscript>
+<![endif]-->
+ +

Conclusió

+ +

Els nous elements semàntics introduïts en HTML5 tene la capacitat de descriure l'estructura i l'esquema d'un document web d'una manera estàndard. Aporten una gran avantatge per a les persones que tenen navegadors HTML5 i que necessitan l'estructura per ajudar-los a entendre la pàgina, per exemple les persones que necessiten l'ajuda d'una mica de tecnologia d'assistència. Aquests nous elements semàntics són senzills d'usar i, amb molt poques càrregues, es poden fer funcionar també en els navegadors no HTML5. Per tant han de ser utilitzats sense restriccions.

+ +
{{HTML5ArticleTOC()}}
diff --git a/files/ca/web/guide/index.html b/files/ca/web/guide/index.html new file mode 100644 index 0000000000..d8bb064439 --- /dev/null +++ b/files/ca/web/guide/index.html @@ -0,0 +1,56 @@ +--- +title: Web developer guides +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +

Aquests articles proporcionen una guia pràctica d'informació per ajudar a fer ús de les tecnologies i les API específiques.

+ +
+
+
+
HTML Àrea d'Aprenentatge
+
HyperText Markup Language (HTML) és el nucli del llenguatge de gairebé tot el contingut web. La major part del que veieu a la pantalla en el vostre navegador es descrit, fonamentalment, amb l'ús d'HTML.
+
  CSS Àrea d'Aprenentatge
+
Fulles d'estil en cascada (CSS) és un llenguatge de full d'estil s'utilitza per descriure la presentació d'un document escrit en HTML.
+
Esdeveniments guia per a desenvolupador
+
Esdeveniments es refereix tant a un patró de disseny utilitzat per al maneig asíncrona de diversos incidents que es produeixen en el curs de la vida d'una pàgina web i a la nomenclatura, la caracterització i l'ús d'un gran nombre d'incidents de diferents tipus
+
Gràfics a la Web
+
Els llocs web moderns i aplicacions sovint han de presentar gràfics de complexitat variable.
+
Guia de les Web APIs
+
Una llista de totes les API Web i el que fan.
+
JavaScript
+
JavaScript és un potent llenguatge de scripting usat per crear aplicacions per a la Web.
+
Localizacions i codificaciones de caràcter
+
Els navegadors procesan el text internament com Unicode. No obstant això, una forma de representar caràcters en termes de bytes (codificació de caràcters) s'utilitza per a la transferència de text a través de la xarxa al navegador. The L'especificació HTML recomana l'ùs de la codificació UTF-8  (que pot representar a tots Unicode), i independentment de la codificació utilitzada requereix de contingut web per declarar aquesta codificació.
+
Mòvil Desenvolupament Web
+
Aquesta pàgina ofereix una visió general d'algunes de les principals tècniques necessàries per dissenyar llocs web que funcionen correctament en dispositius mòbils. Si esteu buscant informació sobre el projecte Firefox OS de Mozilla, vegeu la pàgina de Firefox OS. O si esteu interessat en els detalls sobre Firefox per Android.
+
+
+ +
+
+
Optimització i rendiment
+
En la construcció d'aplicacions i llocs web moderns, és important que el seu contingut funcioni de forma ràpida i eficient. Això permetrà que es realitzi de manera efectiva tant per als potents sistemes d'escriptori com per els dispositius portatils més febles.
+
Anàlisi i serialització XML
+
La plataforma web ofereix diferents mètodes d'anàlisi sintàctica i la serialització XML, cadascun amb els seus propis avantatges i desavantatges.
+
La Web Open Font Format (WOFF)
+
WOFF (Web Open Font Format) és un format d'arxiu font que és lliure perquè qualsevol el faci servir a la web.
+
L'ùs d'objectes FormData
+
L'objecte FormData permet compilar un conjunt de parells clau/valor per enviar mitjançant XMLHttpRequest. Està destinat principalment a l'enviament de dades de formularis, però pot ser utilitzat independentment dels formularis per tal de transmetre dades codificades. La transmissió està en el mateix format que el mètode submit() dels formularis per enviar les dades del formulari si el tipus de codificació s'estableix en "multipart/form-data".
+
Glossari
+
Defineix nombrosos termes tècnics relacionats amb la Web i Internet.
+
+
+
+ +

Veure

+ + diff --git a/files/ca/web/html/block-level_elements/index.html b/files/ca/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..91cfcad2de --- /dev/null +++ b/files/ca/web/html/block-level_elements/index.html @@ -0,0 +1,127 @@ +--- +title: Elements a nivell de bloc +slug: Web/HTML/Block-level_elements +translation_of: Web/HTML/Block-level_elements +--- +

Els elements HTML (HyperText Markup Language) són normalment elements "en bloc" o elements "en línia". Un element en bloc ocupa tot l'espai del seu element pare (contenidor), creant així un "bloc". Aquest article ajuda a explicar el que això significa.

+ +

Els navegadors solen mostrar l'element a nivell de bloc amb un salt de línia abans i després de l'element. Es pot visualitzar com una pila de caixes. El següent exemple demostra la influència de l'element en bloc:

+ +

Elements en Bloc

+ +

HTML

+ +
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
+ +

CSS

+ +
p { background-color: #8ABB55; }
+
+ +

{{ EmbedLiveSample('Block-level_Example') }}

+ +

Ús

+ + + +

En bloc vs. En línia

+ +

Hi ha un parell de diferències clau entre els elements en bloc i els elements en línia:

+ +
+
Formateig
+
Per defecte, els elements de bloc comencen en línies noves, però els elements en línia poden començar en qualsevol part d'una línia.
+
Model de contingut
+
En general, els elements de bloc poden contenir elements en línia i altres elements en bloc. Inherent a aquesta distinció estructural és la idea que els elements de bloc creen estructures "més gran" que els elements en línia.
+
+ +

La distinció entre els elements en bloc vs. línia s'utilitza en les especificacions d'HTML fins 4.01. En HTML5, aquesta distinció binària se substitueix amb un conjunt més complex de categories de contingut. La categoria "en bloc" correspon aproximadament a la categoria de contingut dinàmic en HTML 5, mentre que "en línia" es correspon amb el contingut fraseig, però hi ha categories addicionals.

+ +

Elements

+ +

La següent és una llista completa de tots els elements HTML de bloc (encara que "a nivell de bloc" no es defineix tècnicament per als elements que són nous en HTML5).

+ +
+
+
{{ HTMLElement("address") }}
+
Informació de contacte
+
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
+
Contingut Article.
+
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
+
Contingut  Aside.
+
{{ HTMLElement("blockquote") }}
+
Cita extensa ("bloc").
+
{{ HTMLElement("br") }}
+
Salt de línia.
+
{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}
+
Gràfic canvas.
+
{{ HTMLElement("dd") }}
+
Descripció Definició.
+
{{ HTMLElement("div") }}
+
Divisió document.
+
{{ HTMLElement("dl") }}
+
Llista de definicions.
+
{{ HTMLElement("fieldset") }}
+
Etiquetes de camp.
+
+ +
+
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
+
Llegenda de la imatge.
+
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
+
Contingut multimèdia, grups amb una llegenda (veure {{ HTMLElement("figcaption") }}).
+
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
+
Secció o peu de pàgina.
+
{{ HTMLElement("form") }}
+
Formulari d'entrada.
+
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
+
Nivells de capçalera 1-6.
+
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
+
Secció o encapçalament de pàgina.
+
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
+
+
+
Informació de capçalera de grups.
+
+
+
{{ HTMLElement("hr") }}
+
Regla horitzontal (línia divisòria).
+
{{ HTMLElement("li") }}
+
Element de la llista..
+
{{ HTMLElement("main") }}
+
Conté el contingut central únic per aquest document.
+
{{ HTMLElement("nav") }}
+
Conté enllaços de navegació.
+
+ +
+
{{ HTMLElement("noscript") }}
+
Contingut d'ùs si scripting no és compatible o apagat.
+
{{ HTMLElement("ol") }}
+
Llista ordenada.
+
{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}
+
Formulari de sortida.
+
{{ HTMLElement("p") }}
+
Paràgraf.
+
{{ HTMLElement("pre") }}
+
Text amb format predefinit.
+
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
+
Secció d'una pàgina web.
+
{{ HTMLElement("table") }}
+
Taula.
+
{{ HTMLElement("tfoot") }}
+
Peu de pàgina de la taula.
+
{{ HTMLElement("ul") }}
+
Llista desordenada.
+
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
+
Reproductor de vídeo.
+
+
+ +

Veure

+ + diff --git a/files/ca/web/html/element/a/index.html b/files/ca/web/html/element/a/index.html new file mode 100644 index 0000000000..be0d62e025 --- /dev/null +++ b/files/ca/web/html/element/a/index.html @@ -0,0 +1,531 @@ +--- +title: +slug: Web/HTML/Element/a +translation_of: Web/HTML/Element/a +--- +

The HTML Anchor Element (<a>) defines a hyperlink to a location on the same page or any other page on the Web. It can also be used (in an obsolete way) to create an anchor point—a destination for hyperlinks within the content of a page, so that links aren't limited to connecting simply to the top of a page.

+ +
<a href="https://developer.mozilla.org">MDN</a>
+
+ + + +

Atributs

+ +

Aquest element només inclou els atributs globals.

+ +
+
{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}
+
This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource so that when the user clicks on the link they will be prompted to save it as a local file. If the attribute has a value, the value will be used as the pre-filled file name in the Save prompt that opens when the user clicks on the link (the user can change the name before actually saving the file of course). There are no restrictions on allowed values (though / and \ will be converted to underscores, preventing specific path hints), but you should consider that most file systems have limitations with regard to what punctuation is supported in file names, and browsers are likely to adjust file names accordingly. +
+

Note:

+ +
    +
  • Can be used with blob: URLs and data: URLs, to make it easy for users to download content that is generated programmatically using JavaScript (e.g. a picture created using an online drawing Web app.
    • +
  • If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.
    • +
  • If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute.
    • +
  • This attribute is only honored for links to resources with the same-origin.
    • +
+
+
+
{{htmlattrdef("href")}}
+
This was the single required attribute for anchors defining a hypertext source link, but the attribute may now be omitted (as of HTML5) in order to create a placeholder link. A placeholder link presents itself like a traditional hyperlink but when activated does not result in redirection to a new page or a sub-section of the same document. The href is still required when specifying a link target, either a URL or a URL fragment. A URL fragment is a name preceded by a hash mark (#), which specifies an internal target location (an ID of an HTML element) within the current document. URLs are not restricted to Web (HTTP)-based documents. URLs might use any protocol supported by the browser. For example, file, ftp, and mailto work in most user agents. +
+

Note: You can use the special fragment "top" to create a link back to the top of the page; for example href="#top">Return to top. This behavior is specified by HTML5.

+
+
+
{{htmlattrdef("hreflang")}}
+
This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by BCP47 for HTML5 and by RFC1766 for HTML4. Use this attribute only if the {{htmlattrxref("href", "a")}} attribute is present.
+
{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}
+
The 'ping' attribute, if present, sends the URLs of the resources a notification/ping if the user follows the hyperlink.
+
{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+
A string indicating which referrer to use when fetching the resource: +
    +
  • 'no-referrer' meaning that the Referer: header will not be sent.
    • +
  • 'no-referrer-when-downgrade' meaning that no Referer: header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.
    • +
  • 'origin' meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
    • +
  • 'origin-when-cross-origin' meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.
    • +
  • 'unsafe-url' meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.
    • +
+
+
{{htmlattrdef("rel")}}
+
For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of link types values. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the href attribute is present.
+
{{htmlattrdef("target")}}
+
This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings: +
    +
  • _self: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
    • +
  • _blank: Load the response into a new unnamed HTML4 window or HTML5 browsing context.
    • +
  • _parent: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • +
  • _top: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
    • +
+ Use this attribute only if the href attribute is present. + +
+

Note: When using target you should consider adding rel="noopener noreferrer" to avoid exploitation of the window.opener API.

+
+
+
{{htmlattrdef("type")}}
+
This attribute specifies the media type in the form of a {{Glossary("MIME type")}} for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Use this attribute only if the href attribute is present.
+
+ +

Obsolete

+ +
+
{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}
+
This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in RFC 2045. The default value is ISO-8859-1. +
+

Usage note: This attribute is obsolete in HTML5 and should not be used by authors. To achieve its effect, use the HTTP Content-Type header on the linked resource.

+
+
+
{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
For use with object shapes, this attribute uses a comma-separated list of numbers to define the coordinates of the object on the page. +
+
{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute is required in an anchor defining a target location within a page. A value for name is similar to a value for the id core attribute and should be an alphanumeric identifier unique to the document. Under the HTML 4.01 specification, id and name both can be used with the element as long as they have identical values. +
+

Usage note: This attribute is obsolete in HTML5, use global attribute id instead.

+
+
+
{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute specifies a reverse link, the inverse relationship of the rel attribute. It is useful for indicating where an object came from, such as the author of a document.
+
{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute is used to define a selectable region for hypertext source links associated with a figure to create an image map. The values for the attribute are circle, default, polygon, and rect. The format of the coords attribute depends on the value of shape. For circle, the value is x,y,r where x and y are the pixel coordinates for the center of the circle and r is the radius value in pixels. For rect, the coords attribute should be x,y,w,h. The x,y values define the upper-left-hand corner of the rectangle, while w and h define the width and height respectively. A value of polygon for shape requires x1,y1,x2,y2,... values for coords. Each of the x,y pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value default for shape requires that the entire enclosed area, typically an image, be used. +
+

Note: It is advisable to use the usemap attribute for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the shape attribute.

+
+
+
+ +

Non standard

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
{{htmlattrdef("datafld")}} {{Non-standard_inline}}
+
This attribute specifies the column name from that data source object that supplies the bound data. +
+

Usage note: This attribute is non-standard and should not be used by authors. To achieve its effect, use scripting and a mechanism such as XMLHttpRequest to populate the page dynamically

+
+ + + + + + + + + + + + + + + + + + + + + +
SupportGeckoPrestoWebKitTrident
Not implementedNot implementedNot implementedIE4, IE5, IE6, IE7 (Removed in IE8)
Normative documentMicrosoft's Data Binding: dataFld Property (MSDN)
+
+
{{htmlattrdef("datasrc")}} {{Non-standard_inline}}
+
This attribute indicates the ID of the data source object that supplies the data that is bound to this element. +
+

Usage note: This attribute is non-standard and should not be used by authors. To achieve its effect, use scripting and a mechanism such as XMLHttpRequest to populate the page dynamically.

+
+ + + + + + + + + + + + + + + + + + + + + +
SupportGeckoPrestoWebKitTrident
Not implementedNot implementedNot implementedIE4, IE5, IE6, IE7 (Removed in IE8)
Normative documentMicrosoft's Data Binding: dataSrc Property (MSDN)
+
+
{{htmlattrdef("hreflang")}}
+
This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by BCP47 for HTML5 and by RFC1766 for HTML4. Use this attribute only if the {{htmlattrxref("href", "a")}} attribute is present.
+
{{htmlattrdef("methods")}} {{Non-standard_inline}}
+
The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. Methods Property (MSDN)
+
{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute is required in an anchor defining a target location within a page. A value for name is similar to a value for the id core attribute and should be an alphanumeric identifier unique to the document. Under the HTML 4.01 specification, id and name both can be used with the <a> element as long as they have identical values. +
+

Usage note: This attribute is obsolete in HTML5, use global attribute id instead.

+
+
+
{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute specifies a reverse link, the inverse relationship of the rel attribute. It is useful for indicating where an object came from, such as the author of a document.
+
+ +
+
{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
This attribute is used to define a selectable region for hypertext source links associated with a figure to create an image map. The values for the attribute are circle, default, polygon, and rect. The format of the coords attribute depends on the value of shape. For circle, the value is x,y,r where x and y are the pixel coordinates for the center of the circle and r is the radius value in pixels. For rect, the coords attribute should be x,y,w,h. The x,y values define the upper-left-hand corner of the rectangle, while w and h define the width and height respectively. A value of polygon for shape requires x1,y1,x2,y2,... values for coords. Each of the x,y pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value default for shape requires that the entire enclosed area, typically an image, be used. +
Note: It is advisable to use the usemap attribute for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the shape attribute.
+
+
{{htmlattrdef("type")}}
+
This attribute specifies the media type in the form of a MIME type for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Use this attribute only if the href attribute is present.
+
{{htmlattrdef("urn")}} {{Non-standard_inline}}
+
This supposedly Microsoft-supported attribute relates a uniform resource name (URN) with the link. While it is based on standards work years back, the meaning of URNs is still not well defined, so this attribute is meaningless. urn Property (MSDN)
+
+ +

Examples

+ +

Linking to an external location

+ +
<!-- anchor linking to external file -->
+<a href="http://www.mozilla.com/">
+External Link
+</a>
+
+ +

Result

+ +

External Link

+ +

Linking to another section on the same page

+ +
<!-- anchor link to section on this page named id="attr-href" -->
+<a href="#attr-href">
+Description of Same-Page Links
+</a>
+
+ +

Result

+ +

Description of Same Page Links

+ +

Creating a clickable image

+ +

This small example use an image to link to the MDN home page. The home page will open in a new browsing context, that is a new page or a new tab.

+ +
<a href="https://developer.mozilla.org/en-US/" target="_blank">
+  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo" />
+</a>
+
+ +

Result

+ +
+

{{EmbedLiveSample("Example.3A_Creating_a_clickable_image", "320", "64")}}

+
+ + + +

It's common to create buttons or links that will open in the user's email program to allow them to send a new message. This is done by using a mailto link. Here's a simple example:

+ +
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
+ +

This results in a link that looks like this: Send email to nowhere.

+ +

For additional details about the mailto URL scheme, such as how to include the subject, body, or other predetermined content, see Email links or {{RFC(6068)}}.

+ + + +

With phones viewing web documents and laptops being connected to phones offering clickable phone links becomes increasingly helpful.

+ +
<a href="tel:+491570156">+49 157 0156;/a>
+
+ +

For additional details about the tel URL scheme, see {{RFC(2806)}} and {{RFC(2396)}}.

+ +

Using the download attribute to save a canvas as a PNG

+ +

If you want to allow a user to download an HTML Canvas as an image you can create a link with a download attribute and the canvas data as a file URL:

+ +
var link = document.createElement('a');
+link.innerHTML = 'download image';
+link.addEventListener('click', function(ev) {
+    link.href = canvas.toDataURL();
+    link.download = "mypainting.png";
+}, false);
+document.body.appendChild(link);
+ +

You can see this in action http://jsfiddle.net/codepo8/V6ufG/2/

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}{{Spec2('HTML4.01')}} 
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
download{{CompatChrome("14")}}{{CompatGeckoDesktop("20.0")}}Edge 13 [5]{{CompatOpera("15")}}{{CompatNo}}
ping{{CompatVersionUnknown}}{{CompatNo}} [2]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
referrerpolicy{{CompatChrome(46.0)}} [3]{{CompatGeckoDesktop("45")}} [4]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
download{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("20.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
ping{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
referrerpolicy{{CompatNo}}{{CompatChrome(46.0)}} [3]{{CompatGeckoMobile("45.0")}} [4]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(46.0)}} [3]
+
+ +

[1] Starting from Gecko 41 {{geckoRelease("41.0")}}, {{HTMLElement("a")}} without href attribute is no more classified as interactive content. Clicking it inside {{HTMLElement("label")}} will activate labelled content ({{bug(1167816)}}).

+ +

[2] Disabled by default

+ +

[3] Implemented behind a flag.

+ +

[4] Attempting to download data URIs causes Edge to crash until v14.14357.

+ +

Clicking and focus

+ +

Whether clicking on an {{HTMLElement("a")}} causes it to (by default) become focused varies by browser and OS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Does clicking on an {{HTMLElement("a")}} give it the focus?
Navegadors d'escriptoriWindows 8.1OS X 10.9
Firefox 30.0SíSí
Chrome ≥39
+ (Chromium bug 388666)		SíSí
Safari 7.0.5N/ANomés quan tabindex està definit
Internet Explorer 11SíN/A
Presto (Opera 12)SíSí
+ + + + + + + + + + + + + + + + + + + + +
Does tapping on an {{HTMLElement("a")}} give it the focus?
Mobile BrowsersiOS 7.1.2Android 4.4.4
Safari MobileNomés quan tabindex està definitN/A
Chrome 35???Només quan tabindex està definit
+ +

Notes

+ +

The following are reserved browser key bindings for the two major browsers and should not be used as values to accesskey: a, c, e, f, g, h, v, left arrow, and right arrow.

+ +

HTML 3.2 defineix només name, href, rel, rev, i title.

+ +

L'atribut target no està definit en navegadors que no suporten frames, com ara la generació de navegadors Netscape 1. Furthermore, target is not allowed under strict variants of XHTML but is limited to frameset or transitional forms.

+ +

Recomanacions per JavaScript

+ +

It is often the case that an anchor tag is used with the onclick event. In order to prevent the page from refreshing, href is often set to either "#" or "javascript:void(0)". Both of these values can lead to some unexpected errors when copying links and opening links in a new tab and/or window. Be aware of this for usability reasons, and when users do use anchor tags and you prevent default behavior.

+ +

Veure

+ + + +
{{HTMLRef}}
diff --git a/files/ca/web/html/element/abbr/index.html b/files/ca/web/html/element/abbr/index.html new file mode 100644 index 0000000000..8086ac2a23 --- /dev/null +++ b/files/ca/web/html/element/abbr/index.html @@ -0,0 +1,131 @@ +--- +title: +slug: Web/HTML/Element/abbr +translation_of: Web/HTML/Element/abbr +--- +

Resum

+ +

L'element HTML <abbr>  (de l'Anglès Abbreviation Element) representa una abreviació i opcionalment en proveeix una descripció completa. en cas de ser-hi present, l'atribut title ha de contenir la descripció completa i res més.

+ +

<p>I do <abbr title="Hypertext Markup Language">HTML</abbr></p>

+ +
 
+ +

Vegeu més exemples en detall en l'article How to mark abbreviations and make them understandable.

+ + + +

Atributs

+ +

Aquest element només inclou els atributs globals.

+ +

Fer servir l'atribut {{htmlattrxref("title")}} per definir la descripció completa de la descripció de l'abreviació. Molts agents d'usuaris presenten això com un suggeriment.

+ +
+

Nota d'ús: En llengües amb nombres gramaticals (especialment les llengües amb més de dos nombres, com l'Àrab), utilitzeu el mateix nombre gramatical en el vostre atribut  title com dins del vostre element <abbr> .

+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentaris
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilitat amb navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2.0{{CompatGeckoDesktop(1.0)}}7.01.3{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Estil per defecte

+ +

L'objectiu d'aquest element és purament per la conveniència del autor i que tots els navegadors ho mostrin en línia ({{cssxref('display')}}: inline) per defecte, tot i que els estils per defectes varien d'un navegador a un altre:

+ + + +

Vegeu també

+ + + +
{{HTMLRef}}
diff --git a/files/ca/web/html/element/acronym/index.html b/files/ca/web/html/element/acronym/index.html new file mode 100644 index 0000000000..5101ea266d --- /dev/null +++ b/files/ca/web/html/element/acronym/index.html @@ -0,0 +1,125 @@ +--- +title: +slug: Web/HTML/Element/acronym +tags: + - Element + - HTML + - 'HTML:Flow content' + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/acronym +--- +
{{obsolete_header}}
+ +

Sumari

+ +

L'element HTML acrònim  (<acronym>) permet als autors indicar clarament una seqüència de caràcters que componen un acrònim o l'abreviatura d'una paraula. Aquest element s'ha eliminat en HTML5. Utilitzar l'element {{HTMLElement("abbr")}}.

+ +
+

Nota d'ùs: Aquest element s'ha eliminat en HTML5 i no s'ha d'utilitzar més. En lloc d'això els desenvolupadors web han d'utilitzar l'element {{HTMLElement("abbr")}}.

+
+ +

Atributs

+ +

Aquest element només té atributs globals  que és comú a tots els elements.

+ +

Interfície DOM

+ +

Aquest element implementa la interície {{domxref('HTMLElement')}}.

+ +
Nota d'implementació: Fins Gecko 1.9.2 inclosos, Firefox implementa per a aquest element la interfície {{domxref('HTMLSpanElement')}}.
+ +

Exemple

+ +
<p>The <acronym title="World Wide Web">WWW</acronym> is only a component of the Internet.</p>
+
+ +

Estil per defecte

+ +

Encara que el propòsit d'aquesta etiqueta és purament per a la comoditat de l'autor, el seu estil per defecte varia d'un navegador a un altre:

+ +
    +
  • Alguns navegadors, com Internet Explorer, no té un estil diferent que un element {{HTMLElement("span")}} .
    • +
  • Opera, Firefox,Chrome i alguns altres afegeixen un subratllat de punts amb el contingut de l'element.
    • +
  • Uns navegadors no només afegeixen un subratllat de punts, sinó que també ho posen en versals; per evitar aquest estil, afegeixen alguna cosa com {{cssxref('font-variant')}}: none on el CSS s'encarregue d'aquest cas.
    • +
+ +

Per tant, es recomana encaridament que els autors web no confien  totalment en l'estil predeterminat.

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}{{Spec2('HTML4.01')}} 
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

Veure

+ +
    +
  • L'element HTML {{HTMLElement("abbr")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/ca/web/html/element/address/index.html b/files/ca/web/html/element/address/index.html new file mode 100644 index 0000000000..c583f49925 --- /dev/null +++ b/files/ca/web/html/element/address/index.html @@ -0,0 +1,161 @@ +--- +title:
+slug: Web/HTML/Element/address +tags: + - Element + - HTML + - HTML sections + - Refrència + - Web +translation_of: Web/HTML/Element/address +--- +

{{HTMLRef}}

+ +

L'element HTML <address> proporciona informació de contacte per el seu element mes proper {{HTMLElement("article")}} o ancestre {{HTMLElement("body")}} ; en aquest últim cas, s'aplica a tot el document.

+ +
+

Nota d'us:

+ +
    +
  • Per representar una adreça arbitrària, que no està relacionada amb la informació de contacte, utilitzar un element {{HTMLElement("p")}} en lloc de l'element <address>.
    • +
  • Aquest element no ha de contenir més informació que la informació de contacte, com una data de publicació (que pertany a un element {{HTMLElement("time")}}).
    • +
  • Normalment, un element <address> pot ser col·locat dins de l'element {{HTMLElement("footer")}} de la secció actual, si n'hi ha.
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Categories de contingutContingut de flux , contingut palpable.
Contingut permèsContingut de flux, pero sense cap element <address> niu, sense continguts de capaçalera ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), sense continguts de secció ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), i sense elements {{HTMLElement("header")}} o {{HTMLElement("footer")}}.
Omissió de l'etiqueta{{no_tag_omission}}
Elements pares permesosQualsevol element que accepti Contingut de flux.
Interfície DOM{{domxref("HTMLElement")}} Abans de Gecko 2.0 (Firefox 4), Gecko implementa aquest element utilitzant la interficie {{domxref("HTMLSpanElement")}}
+ +

Atributs

+ +

Aquest element només inclou els atributs globals.

+ +

Exemple

+ +
  <address>
+    You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
+    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
+    You may also want to visit us:<br>
+    Mozilla Foundation<br>
+    1981 Landings Drive<br>
+    Building K<br>
+    Mountain View, CA 94043-0801<br>
+    USA
+  </address>
+
+ +

Resultat del codi HTML:

+ +

Image:HTML-address.png

+ +

Encara que l'element address representa el text amb el mateix estil predeterminat com els elements {{HTMLElement("i")}} o {{HTMLElement("em")}}, és més apropiat utilitzar-la quan es tracta d'informació de contacte, ja que transmet la informació semàntica addicional.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}{{Spec2('HTML4.01')}} 
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7")}}1.05.121.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoMobile("1.7")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veure

+ +
    +
  • Altres elements relacionats amb la secció: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};
    • +
  • Seccions i línies generals d'un document HTML5.
    • +
diff --git a/files/ca/web/html/element/applet/index.html b/files/ca/web/html/element/applet/index.html new file mode 100644 index 0000000000..f46b9a3d63 --- /dev/null +++ b/files/ca/web/html/element/applet/index.html @@ -0,0 +1,121 @@ +--- +title: +slug: Web/HTML/Element/applet +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/applet +--- +
{{obsolete_header}}
+ +

Sumari

+ +

L'element HTML Applet (<applet>) identifica la inclusió d'un applet de Java .

+ +
+

Nota d'ùs: Aquest element s'ha eliminat en HTML5 i no s'ha d'utilitzar més. En lloc d'això els desenvolupadors web han d'utilitzar l'element més genèric {{HTMLElement("object")}}.

+
+ +

Atributs

+ +
+
{{htmlattrdef("align")}}
+
Aquest atribut s'utilitza per posicionar l'applet a la pàgina en relació amb el contingut que podria fluir al seu voltant. L'especificació HTML 4.01 defineix els valors bottom, left, middle, right i top, mentre que Microsoft i Netscape també podrien donar suport absbottom, absmiddle, baseline, center i texttop.
+
{{htmlattrdef("alt")}}
+
Aquest atribut fa que un text descriptiu alternatiu es mostri en els navegadors que no suporten Java. Els dissenyadors de pàgines també han de recordar que el contingut inclòs dins de l'element <applet> també pot traduir-se com a text alternatiu.
+
{{htmlattrdef("archive")}}
+
Aquest atribut es refereix a una versió arxivada o comprimida de l'applet i els seus arxius de classes associats, el que podria ajudar a reduir el temps de descàrrega.
+
{{htmlattrdef("code")}}
+
Aquest atribut especifica la URL de l'arxiu de classe de l'applet per a ser carregat i executat. Els noms d'arxiu de l'applet s'identifiquen per una extensió d'arxiu .class. La direcció URL especificada pel codi podria ser relativa a l'atribut codebase.
+
{{htmlattrdef("codebase")}}
+
Aquest atribut proporciona la URL absoluta o relativa del directori on s'emmagatzemen els arxius applets' .class, referènciats per l'atribut code.
+
{{htmlattrdef("datafld")}}
+
Aquest atribut, suportat per Internet Explorer 4 i superior, especifica el nom de la columna de l'objecte d'origen de dades que subministra les dades consolidades. Aquest atribut es pot utilitzar per especificar els diversos elements {{HTMLElement("param")}} passats a l'applet de Java.
+
{{htmlattrdef("datasrc")}}
+
Igual que datafld, aquest atribut s'utilitza per a l'enllaç de dades en Internet Explorer 4. Indica l'id de l'objecte d'origen de dades que subministra les dades que estan enllaçades als elements {{HTMLElement("param")}} associats amb el applet.
+
{{htmlattrdef("height")}}
+
Aquest atribut especifica l'altura, en píxels, que l'applet necessita.
+
{{htmlattrdef("hspace")}}
+
Aquest atribut especifica l'espai horitzontal addicional, en píxels, que es reservarà a banda i banda del applet.
+
{{htmlattrdef("mayscript")}}
+
En la implementació de Netscape, aquest atribut permet l'accés a un applet de programes en un llenguatge de script incrustat en el document.
+
{{htmlattrdef("name")}}
+
Aquest atribut assigna un nom a l'applet de manera que pugui ser identificat per altres recursos; en particular els scripts.
+
{{htmlattrdef("object")}}
+
Aquest atribut especifica l'URL d'una representació serialitzada d'un applet.
+
{{htmlattrdef("src")}}
+
Tal com es defineix per a Internet Explorer 4 i superior, aquest atribut especifica una adreça URL d'un fitxer associat per l'applet. El significat i l'ús no està clar i no forma part de l'estàndard HTML.
+
{{htmlattrdef("vspace")}}
+
Aquest atribut especifica l'espai vertical addicional, en píxels, que es reserva per sobre i sota de l'applet.
+
{{htmlattrdef("width")}}
+
Aquest atribut especifica en píxels l'ample que l'applet necessita.
+
+ +

Exemple

+ +
<applet code="game.class" align="left" archive="game.zip" height="250" width="350">
+  <param name="difficulty" value="easy">
+  <b>Sorry, you need Java to play this game.</b>
+</applet>
+
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Notes

+ +

L'especificació W3C no fomenta l'ús de <applet> i prefereix l'ús de l'etiqueta {{HTMLElement("object")}}. Sota la definició estricta d'HTML 4.01, aquest element no s'utilitza i està totalment obsolet en HTML5.

+ +
{{HTMLRef}}
diff --git a/files/ca/web/html/element/area/index.html b/files/ca/web/html/element/area/index.html new file mode 100644 index 0000000000..4c4100d484 --- /dev/null +++ b/files/ca/web/html/element/area/index.html @@ -0,0 +1,247 @@ +--- +title: +slug: Web/HTML/Element/area +translation_of: Web/HTML/Element/area +--- +

El element HTML <area> defineix una regió dins d'una imatge, i, opcionalment, l'associa amb un {{Glossary("Hyperlink", "hypertext link")}}. Aquest element s'utilitza només dins d'un element {{HTMLElement("map")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Categories de contingut +

Contingut de flux, phrasing content.

+
Contingut permèsCap, és una {{Glossary("empty element")}}.
Omissió de l'etiquetaHa de tenir etiqueta d'inici i no ha de tenir etiqueta de tancament.
Elements pares permesosQualsevol element que accepti phrasing content. El element <area> ha de tenir un ancestre {{HTMLElement("map")}}, però no té per què ser un pare directa.
Interfície DOM{{domxref("HTMLAreaElement")}}
+ +

Atributs

+ +

Aquest element inclou els atributs globals.

+ +
+
{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} solsament, {{obsolete_inline("5.0")}}
+
Especifica una tecla d'access de navegació per a l'element. Pressionant ALT o una tecla similar en associació amb el caràcter especificat selecciona el control de forma correlacionada amb la seqüència de tecles. Els dissenyadors de pàgines estan previnguts per evitar seqüències de tecles ja vinculades als navegadors. Aquest atribut és global des de HTML5.
+
+ +
+
{{htmlattrdef("alt")}}
+
Una cadena de text alternativa, per visualitzar, en navegadors que no mostren les imatges. El text ha de redactar-se de manera que es presenta a l'usuari amb el mateix tipus d'elecció com la imatge oferiria quan apareix sense text alternatiu. En HTML 4, es requereix aquest atribut, però la cadena pot ser buida (""). En HTML5, es requereix aquest atribut només si s'utilitza l'atribut href.
+
+ +
+
{{htmlattrdef("coords")}}
+
Un conjunt de valors que especifiquen les coordenades de la regió. El nombre i el significat dels valors depenen del valor especificat per a l'atribut shape. Per un rect o rectangle, el valor coords son dos parelles x,y: left, top, right i bottom. Per un circle, el valor es x,y,r on x,y es una parella que defineix el centre del cercle i r es el valor del radi. Per un poly o poligon, el valor es un conjunt de parells x, y per cada punt en el poligon: x1,y1,x2,y2,x3,y3, i així succesivament. En HTML 4, els valors són nombres de píxels o percentatges, si s'afegeix un signe de percentatge (%); en HTML5, els valors són nombres de píxels CSS.
+
{{htmlattrdef("download")}} {{HTMLVersionInline("5")}}
+
Aquest atribut, si està present, indica que l'autor proposa un hipervincle que s'utilitzarà per a la descàrrega d'un recurs. Veure {{HTMLElement("a")}} per a una descripció completa de l'atribut de {{htmlattrxref("download", "a")}}.
+
+ +
+
{{htmlattrdef("href")}}
+
El destí de hipervincle del element area. El seu valor és un URL vàlid. En HTML 4, ja sigui aquest atribut o l'atribut nohref han d'estar presents en l'element. En HTML5, aquest atribut es pot ometre; si és així, l'element area no representa un enllaç.
+
+ +
+
{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}
+
Indica l'idioma del recurs vinculat. Els valors permesos són determinats per BCP47. Utilitzeu aquest atribut només si l'atribut href és present.
+
+ +
+
{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Definir un nom per a l'àrea seleccionable de manera que pugui ser escrit pels navegadors antics.
+
+ +
+
{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}
+
Un mitjà de l'atribut media per els quals es va dissenyar el recurs vinculat, per exemple print i screen. Si s'omet, el valor predeterminat es per a tothom. Utilitzeu aquest atribut només si l'atribut href és present.
+
+ +
+
{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Indica que no hi ha cap hipervincle per a l'àrea associada. Qualsevol d'aquest atribut o l'atribut href han d'estar presents en l'element. +
+

Nota d'ús: Aquest atribut és obsolet en HTML 5, en comptes, ometent l'atribut href és suficient.

+
+
+
+ +
+
{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+
Una cadena que indica el referrer per utilitzar en recuperar el recurs : +
    +
  • "no-referrer" significa que en el Referrer: la capçalera no s'enviarà.
    • +
  • "no-referrer-when-downgrade" significa que si no hi ha Referrer: la capçalera serà enviada al navegar a un origen sense TLS (HTTPS). Aquest és el comportament per defecte d'un agent d'usuari, si no hi ha política que especifiqui el contrari.
    • +
  • "origin" significa que el referrer serà l'origen de la pàgina, que és més o menys l'esquema, el host i el port.
    • +
  • "origin-when-cross-origin" significa que les navegacions d'altres orígens es limitaràn a l'esquema, el host i el port, mentre que les navegacions en el mateix origen inclouran el camí dels referrer's.
    • +
  • "unsafe-url" significa que el referrer inclourà l'origen i la ruta d'accés (però no el fragment, la contrasenya o nom d'usuari). Aquest cas no és segur, ja que pot filtrar-se orígens i trajectòries dels recursos protegits-TLS a orígens insegurs.
    • +
+
+
{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}
+
Per als ancoratges que contenen l'atribut href, aquest atribut especifica la relació de l'objecte de destinació per a l'objecte de vincle. El valor és una llista separada per comes dels valors dels tipus d'enllaços. Els valors i la seva semàntica seran registrades per alguna autoritat que podria haver significat l'autor del document. La relació per defecte, si no es dóna una altra, és nul·la. Utilitzeu aquest atribut només si l'atribut href és present.
+
{{htmlattrdef("shape")}}
+
La forma de la zona activa associada. Les especificacions per a HTML 5 i HTML 4 defineixen els valors rect, defineix una regió rectangular; circle, defineix una regió circular; poly, defineix un polígon; i per defecte, el que indica tota la regió més enllà de les formes definides. Molts navegadors, especialment Internet Explorer 4 i superior, suportan circ, polygon, i rectangle com a valors vàlids de shape; aquests valors són {{Non-standard_inline}}.
+
{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Un valor numèric que especifica la posició de la zona definida en l'ordre de tabulació del  navegador. Aquest atribut és global en HTML5.
+
+ +
+
{{htmlattrdef("target")}}
+
Aquest atribut especifica el lloc per visualitzar el recurs vinculat. En HTML 4, aquest és el nom de, o una paraula clau per a un marc. En HTML5, que és un nom de, o una paraula clau per a un context de navegació (per exemple, pestanya, finestra o marc en línia). Les següents paraules clau tenen un significat especial: +
    +
  • _self: Carrega la resposta en el mateix marc de HTML 4 (o context de navegació en HTML 5) com l'actual. Aquest valor és el valor per defecte si no s'especifica l'atribut.
    • +
  • _blank: Carregar la resposta en una nova finestra sense nom HTML 4 o en un context de navegació HTML5.
    • +
  • _parent: Carregar la resposta en el conjunt de marcs pare HTML 4 del quadre actual o HTML5 en el context de navegació dels pares de l'actual. Si no hi ha pare, aquesta opció es comporta de la mateixa manera que _self.
    • +
  • _top: In HTML4: Carregar la resposta sencera a la finestra original, cancel·lant tots els altres marcs. En HTML 5: Carregar la resposta en el context de navegació de nivell superior (és a dir, el context de navegació que és un ancestre de l'actual, i no té pare). Si no hi ha pare, aquesta opció es comporta de la mateixa manera que _self.
    • +
+ Utilitzeu aquest atribut només si l'atribut href és present.
+
{{htmlattrdef("type")}}
+
Aquest atribut especifica el tipus de suport en forma d'un tipus MIME per a la destinació de l'enllaç. Generalment, això proporciona informació estrictament com d'assessorament; No obstant això, en el futur, un navegador podria afegir una icona petit per a aquest tipus de mitjà. Per exemple, un navegador podria afegir una petita icona de l'altaveu quan el tipus s'estableix en l'àudio / wav. Per obtenir una llista completa dels tipus MIME reconeguts, veure http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Utilitzeu aquest atribut només si l'atribut href és present.
+
+ +

Exemple

+ +
<map name="primary">
+  <area shape="circle" coords="200,250,25" href="another.htm" />
+  <area shape="default" nohref />
+</map>
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}{{Spec2('Referrer Policy')}}Afegeix l'atribut referrerpolicy. .
{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '<area>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}{{Spec2('HTML4.01')}} 
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
referrerpolicy{{CompatNo}}{{CompatGeckoDesktop("50")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari MobileChrome for Android
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
referrerpolicy{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("50")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Notes

+ +

En les especificacions l'HTML 3.2, 4.0 i 5, l'etiqueta de tancament </area> està prohibida.

+ +

L'especificació XHTML 1.0 requereix una barra final: <area />.

+ +

Els atributs id, class, i style  tenen el mateix significat que els atributs fonamentals definits en l'especificació HTML 4, però només Netscape i Microsoft els defineixen.

+ +

Netscape, navegadors de nivell 1 no entén l'atribut target pel que fa als frames.

+ +

HTML 3.2 només defineix alt, coords, href, nohref i shape.

+ +

{{HTMLRef}}

diff --git a/files/ca/web/html/element/article/index.html b/files/ca/web/html/element/article/index.html new file mode 100644 index 0000000000..a905d37a7f --- /dev/null +++ b/files/ca/web/html/element/article/index.html @@ -0,0 +1,172 @@ +--- +title:
+slug: Web/HTML/Element/article +translation_of: Web/HTML/Element/article +--- +

{{HTMLRef}}

+ +

L'element HTML <article> representa una composició autònoma en un document, pàgina, aplicació o lloc, que està destinada a ser distribuir de forma independent o reutilitzables (per exemple, en la sindicació). Això podria ser un missatge del fòrum, un article d'una revista o un diari, una entrada de blog, un objecte, o qualsevol altre element independent del contingut. Cada <article> ha de ser identificat, generalment mitjançant la inclusió d'una capçalera (element <h1>-<h6>) com un fill de l'element <article>.

+ +

+

+

Notes d'us:

+ +
    +
  • Quan es nia un element <article>, l'element interior representa un article relacionat amb l'element exterior. Per exemple, els comentaris d'un blog poden ser elements <article> niats en <article> representen a l'entrada del bloc.
    • +
  • La informació sobre l'autor d'un element <article> pot ser proporcionada a través de l'element {{HTMLElement("address")}} , però no s'aplica a elements niats <article>.
    • +
  • La data de publicació i el temps d'un element <article> es poden descriure mitjançant l'atribut {{htmlattrxref("datetime", "time")}} d'un element {{HTMLElement("time")}}. Recordeu que el atribut {{htmlattrxref("pubdate", "time")}} de {{HTMLElement("time")}} ja no és una part de l'estàndard HTML 5 del W3C.
    • +
+
+

+ + + + + + + + + + + + + + + + + + + + + + + + +
Categories de contingutContingut de Flux, contingut de seccionament , contingut palpable.
Contingut permèsContingut de Flux.
Omissió de l'etiqueta{{no_tag_omission}}
Elements pares permesosQualsevol element que accepti  contingut de flux. Recordeu que un element <article> no ha de ser un descendent d'un element {{HTMLElement("address")}}.
Interfície DOM{{domxref("HTMLElement")}}
+ +

Atributs

+ +

Aquest element només inclou els atributs globals.

+ +

Exemples

+ +
<article class="film_review">
+  <header>
+    <h2>Jurassic Park</h2>
+  </header>
+  <section class="main_review">
+    <p>Dinos were great!</p>
+  </section>
+  <section class="user_reviews">
+    <article class="user_review">
+      <p>Way too scary for me.</p>
+      <footer>
+        <p>
+          Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
+        </p>
+      </footer>
+    </article>
+    <article class="user_review">
+      <p>I agree, dinos are my favorite.</p>
+      <footer>
+        <p>
+          Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
+        </p>
+      </footer>
+    </article>
+  </section>
+  <footer>
+    <p>
+      Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
+    </p>
+  </footer>
+</article>
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5 W3C')}} 
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +

+ Característica		ChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic5{{CompatGeckoDesktop("2.0")}}9.011.104.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +

+ Característica		AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.2{{CompatGeckoMobile("2.0")}}9.011.04.2
+
+ +

Veure

+ +
    +
  • Altres elements relacionats amb la secció : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
    • +
  • Seccions i línies generals d'un document HTML5
    • +
diff --git a/files/ca/web/html/element/aside/index.html b/files/ca/web/html/element/aside/index.html new file mode 100644 index 0000000000..c6d98154ca --- /dev/null +++ b/files/ca/web/html/element/aside/index.html @@ -0,0 +1,126 @@ +--- +title: