From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../aplikacje_internetowe_i_aria_faq/index.html | 299 ++ files/pl/web/accessibility/aria/index.html | 127 + files/pl/web/api/attr/index.html | 164 + files/pl/web/api/audiobuffer/index.html | 174 ++ .../createdynamicscompressor/index.html | 142 + files/pl/web/api/audiocontext/index.html | 293 ++ files/pl/web/api/audioparam/index.html | 224 ++ .../web/api/audioparam/setvalueattime/index.html | 182 ++ files/pl/web/api/cache/index.html | 121 + .../api/canvas_api/tutorial/basic_usage/index.html | 169 + files/pl/web/api/canvas_api/tutorial/index.html | 60 + .../tutorial/optymalizacja_canvas/index.html | 119 + .../tutorial/rysowanie_ksztaltow/index.html | 571 ++++ files/pl/web/api/childnode/index.html | 190 ++ files/pl/web/api/childnode/remove/index.html | 91 + files/pl/web/api/console/index.html | 232 ++ files/pl/web/api/console/log/index.html | 69 + files/pl/web/api/cssnumericvalue/div/index.html | 59 + files/pl/web/api/cssnumericvalue/index.html | 113 + files/pl/web/api/cssrule/index.html | 97 + files/pl/web/api/document/activeelement/index.html | 26 + files/pl/web/api/document/alinkcolor/index.html | 24 + files/pl/web/api/document/anchors/index.html | 38 + files/pl/web/api/document/applets/index.html | 26 + files/pl/web/api/document/bgcolor/index.html | 33 + files/pl/web/api/document/body/index.html | 31 + files/pl/web/api/document/characterset/index.html | 26 + files/pl/web/api/document/clear/index.html | 19 + files/pl/web/api/document/close/index.html | 26 + files/pl/web/api/document/compatmode/index.html | 32 + files/pl/web/api/document/cookie/index.html | 49 + .../pl/web/api/document/createattribute/index.html | 29 + .../api/document/createdocumentfragment/index.html | 43 + files/pl/web/api/document/createelement/index.html | 74 + files/pl/web/api/document/createevent/index.html | 134 + files/pl/web/api/document/createrange/index.html | 29 + .../pl/web/api/document/createtextnode/index.html | 62 + files/pl/web/api/document/defaultview/index.html | 24 + files/pl/web/api/document/designmode/index.html | 53 + files/pl/web/api/document/doctype/index.html | 21 + .../pl/web/api/document/documentelement/index.html | 60 + files/pl/web/api/document/domain/index.html | 30 + files/pl/web/api/document/drag_event/index.html | 333 ++ files/pl/web/api/document/embeds/index.html | 22 + files/pl/web/api/document/execcommand/index.html | 280 ++ files/pl/web/api/document/fgcolor/index.html | 28 + files/pl/web/api/document/firstchild/index.html | 36 + files/pl/web/api/document/forms/index.html | 45 + .../pl/web/api/document/getelementbyid/index.html | 67 + .../api/document/getelementsbyclassname/index.html | 82 + .../web/api/document/getelementsbyname/index.html | 35 + .../api/document/getelementsbytagname/index.html | 108 + files/pl/web/api/document/hasfocus/index.html | 25 + files/pl/web/api/document/head/index.html | 110 + files/pl/web/api/document/height/index.html | 34 + files/pl/web/api/document/images/index.html | 31 + .../pl/web/api/document/implementation/index.html | 21 + files/pl/web/api/document/importnode/index.html | 57 + files/pl/web/api/document/index.html | 332 ++ files/pl/web/api/document/lastmodified/index.html | 25 + files/pl/web/api/document/linkcolor/index.html | 33 + files/pl/web/api/document/links/index.html | 30 + files/pl/web/api/document/location/index.html | 37 + files/pl/web/api/document/namespaceuri/index.html | 25 + files/pl/web/api/document/open/index.html | 40 + files/pl/web/api/document/plugins/index.html | 40 + files/pl/web/api/document/queryselector/index.html | 159 + files/pl/web/api/document/referrer/index.html | 22 + .../pl/web/api/document/releasecapture/index.html | 31 + files/pl/web/api/document/stylesheets/index.html | 19 + files/pl/web/api/document/title/index.html | 45 + files/pl/web/api/document/url/index.html | 25 + files/pl/web/api/document/vlinkcolor/index.html | 29 + files/pl/web/api/document/width/index.html | 28 + files/pl/web/api/document/write/index.html | 38 + files/pl/web/api/document/writeln/index.html | 41 + .../api/domapplicationsmanager/getall/index.html | 47 + files/pl/web/api/domapplicationsmanager/index.html | 86 + .../pl/web/api/element/addeventlistener/index.html | 109 + files/pl/web/api/element/appendchild/index.html | 52 + files/pl/web/api/element/attributes/index.html | 82 + files/pl/web/api/element/blur/index.html | 21 + files/pl/web/api/element/childnodes/index.html | 49 + files/pl/web/api/element/classlist/index.html | 264 ++ files/pl/web/api/element/classname/index.html | 37 + files/pl/web/api/element/click/index.html | 23 + files/pl/web/api/element/clientheight/index.html | 47 + files/pl/web/api/element/clientnode/index.html | 32 + files/pl/web/api/element/clientwidth/index.html | 47 + files/pl/web/api/element/dir/index.html | 34 + files/pl/web/api/element/dispatchevent/index.html | 43 + files/pl/web/api/element/firstchild/index.html | 101 + files/pl/web/api/element/focus/index.html | 23 + files/pl/web/api/element/getattribute/index.html | 43 + .../pl/web/api/element/getattributenode/index.html | 36 + .../web/api/element/getattributenodens/index.html | 39 + files/pl/web/api/element/getattributens/index.html | 47 + .../api/element/getboundingclientrect/index.html | 146 + .../api/element/getelementsbytagnamens/index.html | 49 + files/pl/web/api/element/hasattribute/index.html | 34 + files/pl/web/api/element/hasattributens/index.html | 39 + files/pl/web/api/element/hasattributes/index.html | 28 + files/pl/web/api/element/haschildnodes/index.html | 28 + files/pl/web/api/element/id/index.html | 38 + files/pl/web/api/element/index.html | 677 ++++ files/pl/web/api/element/innerhtml/index.html | 67 + .../web/api/element/insertadjacenthtml/index.html | 91 + files/pl/web/api/element/insertbefore/index.html | 86 + files/pl/web/api/element/lang/index.html | 40 + files/pl/web/api/element/lastchild/index.html | 28 + files/pl/web/api/element/length/index.html | 37 + files/pl/web/api/element/localname/index.html | 64 + files/pl/web/api/element/name/index.html | 60 + files/pl/web/api/element/namespaceuri/index.html | 39 + files/pl/web/api/element/nextsibling/index.html | 63 + files/pl/web/api/element/nodename/index.html | 98 + files/pl/web/api/element/nodetype/index.html | 44 + files/pl/web/api/element/nodevalue/index.html | 85 + files/pl/web/api/element/normalize/index.html | 22 + files/pl/web/api/element/offsetheight/index.html | 61 + files/pl/web/api/element/offsetleft/index.html | 73 + files/pl/web/api/element/offsetparent/index.html | 28 + files/pl/web/api/element/offsetwidth/index.html | 70 + files/pl/web/api/element/onclick/index.html | 66 + files/pl/web/api/element/onkeypress/index.html | 21 + files/pl/web/api/element/onkeyup/index.html | 24 + files/pl/web/api/element/onmousedown/index.html | 23 + files/pl/web/api/element/onmousemove/index.html | 29 + files/pl/web/api/element/ownerdocument/index.html | 30 + files/pl/web/api/element/parentnode/index.html | 34 + files/pl/web/api/element/prefix/index.html | 28 + .../pl/web/api/element/previoussibling/index.html | 28 + files/pl/web/api/element/queryselector/index.html | 180 ++ .../pl/web/api/element/removeattribute/index.html | 36 + .../web/api/element/removeattributenode/index.html | 37 + .../web/api/element/removeattributens/index.html | 35 + files/pl/web/api/element/removechild/index.html | 36 + files/pl/web/api/element/replacechild/index.html | 53 + files/pl/web/api/element/scrollleft/index.html | 58 + files/pl/web/api/element/scrolltop/index.html | 70 + files/pl/web/api/element/scrollwidth/index.html | 32 + files/pl/web/api/element/setattribute/index.html | 34 + .../pl/web/api/element/setattributenode/index.html | 40 + .../web/api/element/setattributenodens/index.html | 41 + files/pl/web/api/element/setattributens/index.html | 33 + files/pl/web/api/element/style/index.html | 52 + files/pl/web/api/element/tabindex/index.html | 31 + files/pl/web/api/element/tagname/index.html | 37 + files/pl/web/api/element/textcontent/index.html | 41 + files/pl/web/api/event/altkey/index.html | 31 + files/pl/web/api/event/bubbles/index.html | 31 + files/pl/web/api/event/button/index.html | 66 + files/pl/web/api/event/cancelable/index.html | 34 + files/pl/web/api/event/cancelbubble/index.html | 15 + files/pl/web/api/event/charcode/index.html | 27 + files/pl/web/api/event/clientx/index.html | 25 + files/pl/web/api/event/clienty/index.html | 16 + files/pl/web/api/event/ctrlkey/index.html | 26 + files/pl/web/api/event/currenttarget/index.html | 25 + files/pl/web/api/event/eventphase/index.html | 40 + files/pl/web/api/event/index.html | 179 ++ files/pl/web/api/event/initevent/index.html | 45 + files/pl/web/api/event/initmouseevent/index.html | 86 + files/pl/web/api/event/inituievent/index.html | 49 + files/pl/web/api/event/ischar/index.html | 24 + files/pl/web/api/event/keycode/index.html | 23 + files/pl/web/api/event/layerx/index.html | 15 + files/pl/web/api/event/layery/index.html | 17 + files/pl/web/api/event/metakey/index.html | 30 + files/pl/web/api/event/pagex/index.html | 17 + files/pl/web/api/event/pagey/index.html | 15 + files/pl/web/api/event/relatedtarget/index.html | 56 + files/pl/web/api/event/screenx/index.html | 33 + files/pl/web/api/event/screeny/index.html | 23 + files/pl/web/api/event/shiftkey/index.html | 26 + files/pl/web/api/event/stoppropagation/index.html | 26 + files/pl/web/api/event/target/index.html | 27 + files/pl/web/api/event/timestamp/index.html | 47 + files/pl/web/api/event/type/index.html | 19 + files/pl/web/api/event/view/index.html | 23 + files/pl/web/api/file/file/index.html | 68 + files/pl/web/api/file/index.html | 112 + files/pl/web/api/geolocation_api/index.html | 92 + files/pl/web/api/globaleventhandlers/index.html | 714 +++++ .../web/api/globaleventhandlers/onblur/index.html | 85 + .../web/api/globaleventhandlers/onfocus/index.html | 87 + .../api/htmlcanvaselement/capturestream/index.html | 73 + .../api/htmlcanvaselement/getcontext/index.html | 129 + .../pl/web/api/htmlcanvaselement/height/index.html | 79 + files/pl/web/api/htmlcanvaselement/index.html | 97 + .../pl/web/api/htmlcanvaselement/width/index.html | 79 + files/pl/web/api/htmlelement/dataset/index.html | 134 + files/pl/web/api/htmlelement/index.html | 409 +++ .../api/htmlformelement/acceptcharset/index.html | 33 + files/pl/web/api/htmlformelement/action/index.html | 36 + .../pl/web/api/htmlformelement/elements/index.html | 36 + .../pl/web/api/htmlformelement/encoding/index.html | 15 + .../pl/web/api/htmlformelement/enctype/index.html | 39 + files/pl/web/api/htmlformelement/index.html | 143 + files/pl/web/api/htmlformelement/length/index.html | 33 + files/pl/web/api/htmlformelement/method/index.html | 35 + files/pl/web/api/htmlformelement/name/index.html | 44 + files/pl/web/api/htmlformelement/reset/index.html | 37 + files/pl/web/api/htmlformelement/submit/index.html | 37 + files/pl/web/api/htmlformelement/target/index.html | 35 + files/pl/web/api/htmliframeelement/index.html | 288 ++ files/pl/web/api/htmlselectelement/index.html | 166 + .../pl/web/api/htmltableelement/caption/index.html | 39 + files/pl/web/api/htmltableelement/index.html | 72 + files/pl/web/api/htmltableelement/tfoot/index.html | 39 + files/pl/web/api/htmltableelement/thead/index.html | 45 + files/pl/web/api/index.html | 11 + files/pl/web/api/location/index.html | 114 + files/pl/web/api/location/reload/index.html | 67 + .../web/api/mediaelementaudiosourcenode/index.html | 84 + files/pl/web/api/midiaccess/index.html | 70 + files/pl/web/api/mousescrollevent/index.html | 126 + files/pl/web/api/navigator/appcodename/index.html | 30 + files/pl/web/api/navigator/appname/index.html | 29 + files/pl/web/api/navigator/appversion/index.html | 32 + files/pl/web/api/navigator/buildid/index.html | 41 + .../pl/web/api/navigator/cookieenabled/index.html | 45 + files/pl/web/api/navigator/index.html | 119 + files/pl/web/api/navigator/javaenabled/index.html | 39 + files/pl/web/api/navigator/language/index.html | 45 + files/pl/web/api/navigator/mimetypes/index.html | 40 + .../api/navigator/mozpermissionsettings/index.html | 33 + files/pl/web/api/navigator/online/index.html | 47 + files/pl/web/api/navigator/oscpu/index.html | 41 + files/pl/web/api/navigator/platform/index.html | 28 + files/pl/web/api/navigator/plugins/index.html | 58 + files/pl/web/api/navigator/product/index.html | 38 + files/pl/web/api/navigator/productsub/index.html | 52 + .../navigator/registercontenthandler/index.html | 49 + .../navigator/registerprotocolhandler/index.html | 66 + .../web-based_protocol_handlers/index.html | 107 + files/pl/web/api/navigatorlanguage/index.html | 148 + files/pl/web/api/navigatoronline/index.html | 127 + .../zdarzenia_online_i_offline/index.html | 84 + files/pl/web/api/navigatorplugins/index.html | 111 + .../api/parentnode/childelementcount/index.html | 93 + files/pl/web/api/parentnode/children/index.html | 96 + files/pl/web/api/parentnode/index.html | 90 + files/pl/web/api/powiadomienie/index.html | 348 +++ files/pl/web/api/push_api/index.html | 167 + files/pl/web/api/range/index.html | 105 + files/pl/web/api/response/index.html | 132 + files/pl/web/api/screen/colordepth/index.html | 43 + files/pl/web/api/screen/index.html | 74 + files/pl/web/api/screen/width/index.html | 108 + files/pl/web/api/selection/addrange/index.html | 40 + files/pl/web/api/selection/anchornode/index.html | 22 + files/pl/web/api/selection/anchoroffset/index.html | 23 + files/pl/web/api/selection/collapse/index.html | 45 + .../pl/web/api/selection/collapsetoend/index.html | 22 + .../web/api/selection/collapsetostart/index.html | 22 + files/pl/web/api/selection/containsnode/index.html | 47 + .../api/selection/deletefromdocument/index.html | 24 + files/pl/web/api/selection/extend/index.html | 40 + files/pl/web/api/selection/focusnode/index.html | 21 + files/pl/web/api/selection/focusoffset/index.html | 22 + files/pl/web/api/selection/getrangeat/index.html | 44 + files/pl/web/api/selection/index.html | 100 + files/pl/web/api/selection/iscollapsed/index.html | 21 + files/pl/web/api/selection/rangecount/index.html | 19 + .../web/api/selection/removeallranges/index.html | 22 + files/pl/web/api/selection/removerange/index.html | 40 + .../web/api/selection/selectallchildren/index.html | 40 + files/pl/web/api/selection/tostring/index.html | 35 + files/pl/web/api/speechrecognition/index.html | 153 + files/pl/web/api/storage/index.html | 154 + files/pl/web/api/stylesheet/cssrules/index.html | 46 + files/pl/web/api/stylesheet/deleterule/index.html | 26 + files/pl/web/api/stylesheet/disabled/index.html | 25 + files/pl/web/api/stylesheet/href/index.html | 42 + files/pl/web/api/stylesheet/index.html | 57 + files/pl/web/api/stylesheet/insertrule/index.html | 42 + files/pl/web/api/stylesheet/media/index.html | 29 + files/pl/web/api/stylesheet/ownerrule/index.html | 24 + .../web/api/stylesheet/parentstylesheet/index.html | 29 + files/pl/web/api/stylesheet/title/index.html | 18 + files/pl/web/api/stylesheet/type/index.html | 22 + files/pl/web/api/web_audio_api/index.html | 503 +++ files/pl/web/api/webgl_api/index.html | 252 ++ files/pl/web/api/webgl_api/tutorial/index.html | 40 + files/pl/web/api/window/alert/index.html | 58 + .../pl/web/api/window/applicationcache/index.html | 33 + files/pl/web/api/window/clearinterval/index.html | 28 + files/pl/web/api/window/cleartimeout/index.html | 40 + files/pl/web/api/window/closed/index.html | 59 + files/pl/web/api/window/content/index.html | 43 + files/pl/web/api/window/controllers/index.html | 24 + files/pl/web/api/window/crypto/index.html | 19 + files/pl/web/api/window/defaultstatus/index.html | 35 + files/pl/web/api/window/directories/index.html | 33 + files/pl/web/api/window/document/index.html | 40 + files/pl/web/api/window/dump/index.html | 30 + files/pl/web/api/window/focus/index.html | 24 + files/pl/web/api/window/frameelement/index.html | 34 + files/pl/web/api/window/frames/index.html | 31 + files/pl/web/api/window/getselection/index.html | 39 + files/pl/web/api/window/index.html | 494 +++ files/pl/web/api/window/localstorage/index.html | 125 + files/pl/web/api/window/name/index.html | 27 + files/pl/web/api/window/navigator/index.html | 84 + files/pl/web/api/window/onload/index.html | 62 + files/pl/web/api/window/open/index.html | 796 +++++ files/pl/web/api/window/opendialog/index.html | 75 + files/pl/web/api/window/opener/index.html | 49 + files/pl/web/api/window/prompt/index.html | 33 + .../api/window/requestanimationframe/index.html | 170 + files/pl/web/api/window/resizeby/index.html | 32 + files/pl/web/api/window/resizeto/index.html | 36 + files/pl/web/api/window/scroll/index.html | 33 + files/pl/web/api/window/scrollbylines/index.html | 35 + files/pl/web/api/window/scrollbypages/index.html | 35 + files/pl/web/api/window/scrollto/index.html | 32 + files/pl/web/api/window/setinterval/index.html | 87 + files/pl/web/api/window/settimeout/index.html | 46 + files/pl/web/api/window/sidebar/index.html | 56 + files/pl/web/api/windowbase64/atob/index.html | 104 + files/pl/web/api/windowbase64/btoa/index.html | 126 + files/pl/web/api/windowbase64/index.html | 113 + files/pl/web/api/zdarzenia_dotykowe/index.html | 336 ++ .../certificate_transparency/index.html" | 63 + "files/pl/web/bezpiecze\305\204stwo/index.html" | 24 + .../podstawy_bezpieczenstwa_informacji/index.html" | 36 + .../podatnosci/index.html" | 100 + .../same-origin_policy/index.html" | 277 ++ .../subresource_integrity/index.html" | 163 + files/pl/web/css/-moz-binding/index.html | 48 + .../web/css/-moz-border-bottom-colors/index.html | 56 + .../pl/web/css/-moz-border-left-colors/index.html | 15 + files/pl/web/css/-moz-box-align/index.html | 77 + files/pl/web/css/-moz-box-flex/index.html | 64 + files/pl/web/css/-moz-box-orient/index.html | 54 + files/pl/web/css/-moz-box-pack/index.html | 82 + files/pl/web/css/-moz-image-region/index.html | 41 + files/pl/web/css/-moz-outline-color/index.html | 12 + .../css/-moz-outline-radius-bottomleft/index.html | 17 + .../css/-moz-outline-radius-bottomright/index.html | 15 + .../web/css/-moz-outline-radius-topleft/index.html | 15 + files/pl/web/css/-moz-outline-radius/index.html | 71 + files/pl/web/css/@document/index.html | 46 + files/pl/web/css/@import/index.html | 34 + files/pl/web/css/@media/index.html | 193 ++ files/pl/web/css/@supports/index.html | 123 + files/pl/web/css/_colon_-moz-last-node/index.html | 63 + .../web/css/_colon_-moz-tree-cell-text/index.html | 25 + files/pl/web/css/_colon_-moz-tree-cell/index.html | 28 + .../pl/web/css/_colon_-moz-tree-column/index.html | 25 + .../css/_colon_-moz-tree-drop-feedback/index.html | 26 + files/pl/web/css/_colon_-moz-tree-image/index.html | 28 + .../css/_colon_-moz-tree-indentation/index.html | 23 + files/pl/web/css/_colon_-moz-tree-line/index.html | 24 + .../css/_colon_-moz-tree-progressmeter/index.html | 24 + files/pl/web/css/_colon_-moz-tree-row/index.html | 47 + .../web/css/_colon_-moz-tree-separator/index.html | 27 + .../pl/web/css/_colon_-moz-tree-twisty/index.html | 29 + files/pl/web/css/_colon_active/index.html | 160 + files/pl/web/css/_colon_after/index.html | 63 + files/pl/web/css/_colon_before/index.html | 60 + files/pl/web/css/_colon_empty/index.html | 44 + files/pl/web/css/_colon_first-child/index.html | 74 + files/pl/web/css/_colon_first-letter/index.html | 49 + files/pl/web/css/_colon_first-node/index.html | 58 + files/pl/web/css/_colon_hover/index.html | 101 + files/pl/web/css/_colon_lang/index.html | 31 + files/pl/web/css/_colon_last-child/index.html | 51 + files/pl/web/css/_colon_link/index.html | 70 + files/pl/web/css/_colon_not/index.html | 73 + files/pl/web/css/_colon_root/index.html | 26 + files/pl/web/css/appearance/index.html | 96 + files/pl/web/css/attribute_selectors/index.html | 238 ++ files/pl/web/css/azimuth/index.html | 97 + files/pl/web/css/background-attachment/index.html | 124 + files/pl/web/css/background-color/index.html | 82 + files/pl/web/css/background-image/index.html | 114 + files/pl/web/css/background-origin/index.html | 52 + files/pl/web/css/background-position/index.html | 122 + files/pl/web/css/background-size/index.html | 190 ++ files/pl/web/css/background/index.html | 134 + files/pl/web/css/border-bottom-color/index.html | 149 + .../web/css/border-bottom-left-radius/index.html | 20 + .../web/css/border-bottom-right-radius/index.html | 20 + files/pl/web/css/border-bottom-style/index.html | 159 + files/pl/web/css/border-bottom-width/index.html | 143 + files/pl/web/css/border-bottom/index.html | 146 + files/pl/web/css/border-collapse/index.html | 89 + files/pl/web/css/border-color/index.html | 135 + files/pl/web/css/border-left-color/index.html | 109 + files/pl/web/css/border-left-style/index.html | 16 + files/pl/web/css/border-left-width/index.html | 19 + files/pl/web/css/border-left/index.html | 123 + files/pl/web/css/border-radius/index.html | 69 + files/pl/web/css/border-right-color/index.html | 16 + files/pl/web/css/border-right-style/index.html | 16 + files/pl/web/css/border-right-width/index.html | 17 + files/pl/web/css/border-right/index.html | 123 + files/pl/web/css/border-spacing/index.html | 101 + files/pl/web/css/border-style/index.html | 126 + files/pl/web/css/border-top-color/index.html | 14 + files/pl/web/css/border-top-left-radius/index.html | 20 + .../pl/web/css/border-top-right-radius/index.html | 14 + files/pl/web/css/border-top-style/index.html | 16 + files/pl/web/css/border-top-width/index.html | 16 + files/pl/web/css/border-top/index.html | 123 + files/pl/web/css/border-width/index.html | 113 + files/pl/web/css/border/index.html | 123 + files/pl/web/css/bottom/index.html | 149 + files/pl/web/css/box-decoration-break/index.html | 202 ++ files/pl/web/css/box-direction/index.html | 72 + files/pl/web/css/box-shadow/index.html | 222 ++ files/pl/web/css/box-sizing/index.html | 45 + files/pl/web/css/clear/index.html | 98 + files/pl/web/css/clip/index.html | 92 + files/pl/web/css/color/index.html | 62 + files/pl/web/css/content/index.html | 107 + files/pl/web/css/counter-increment/index.html | 67 + files/pl/web/css/counter-reset/index.html | 66 + files/pl/web/css/css_colors/index.html | 119 + .../css_colors/narzedzie_doboru_kolorow/index.html | 3241 ++++++++++++++++++++ .../pl/web/css/css_flexible_box_layout/index.html | 156 + .../auto-placement_in_css_grid_layout/index.html | 609 ++++ files/pl/web/css/css_grid_layout/index.html | 245 ++ .../index.html | 594 ++++ files/pl/web/css/css_reference/index.html | 56 + files/pl/web/css/css_selectors/index.html | 133 + .../index.html" | 64 + files/pl/web/css/cursor/index.html | 156 + .../index.html" | 41 + .../css/cz\304\231ste_pytania_o_css/index.html" | 162 + files/pl/web/css/direction/index.html | 50 + files/pl/web/css/display/index.html | 168 + files/pl/web/css/dziedziczenie/index.html | 50 + files/pl/web/css/empty-cells/index.html | 77 + files/pl/web/css/float/index.html | 116 + files/pl/web/css/font-family/index.html | 58 + files/pl/web/css/font-size-adjust/index.html | 60 + files/pl/web/css/font-size/index.html | 339 ++ files/pl/web/css/font-stretch/index.html | 77 + files/pl/web/css/font-style/index.html | 49 + files/pl/web/css/font-variant/index.html | 79 + files/pl/web/css/font-weight/index.html | 107 + files/pl/web/css/font/index.html | 145 + files/pl/web/css/grid/index.html | 200 ++ files/pl/web/css/height/index.html | 92 + files/pl/web/css/id_selectors/index.html | 77 + files/pl/web/css/ime-mode/index.html | 9 + files/pl/web/css/index.html | 95 + files/pl/web/css/initial/index.html | 118 + files/pl/web/css/inne_zasoby/index.html | 28 + files/pl/web/css/letter-spacing/index.html | 74 + files/pl/web/css/list-style-image/index.html | 70 + files/pl/web/css/list-style-position/index.html | 99 + files/pl/web/css/list-style-type/index.html | 108 + files/pl/web/css/margin/index.html | 112 + files/pl/web/css/media_queries/index.html | 122 + .../media_queries/using_media_queries/index.html | 643 ++++ files/pl/web/css/mozilla_extensions/index.html | 679 ++++ .../web/css/na_pocz\304\205tek/bloki/index.html" | 70 + .../na_pocz\304\205tek/czym_jest_css/index.html" | 132 + .../na_pocz\304\205tek/czytelny_css/index.html" | 153 + .../css/na_pocz\304\205tek/dane_xml/index.html" | 191 ++ .../css/na_pocz\304\205tek/grafika_svg/index.html" | 195 ++ "files/pl/web/css/na_pocz\304\205tek/index.html" | 63 + .../jak_dzia\305\202a_css/index.html" | 113 + .../css/na_pocz\304\205tek/javascript/index.html" | 126 + .../index.html" | 96 + .../web/css/na_pocz\304\205tek/kolor/index.html" | 208 ++ .../web/css/na_pocz\304\205tek/listy/index.html" | 268 ++ .../web/css/na_pocz\304\205tek/media/index.html" | 318 ++ .../po_co_u\305\274ywa\304\207_css/index.html" | 85 + .../css/na_pocz\304\205tek/selektory/index.html" | 259 ++ .../na_pocz\304\205tek/style_tekstowe/index.html" | 115 + .../web/css/na_pocz\304\205tek/tables/index.html" | 596 ++++ .../na_pocz\304\205tek/uk\305\202ad/index.html" | 274 ++ .../wi\304\205zania_xbl/index.html" | 176 ++ .../index.html" | 299 ++ files/pl/web/css/opacity/index.html | 180 ++ files/pl/web/css/outline-offset/index.html | 42 + files/pl/web/css/outline/index.html | 57 + files/pl/web/css/page-break-after/index.html | 101 + .../index.html | 68 + files/pl/web/css/right/index.html | 148 + files/pl/web/css/rozszerzenia_webkit/index.html | 358 +++ files/pl/web/css/selektor_klasy/index.html | 86 + files/pl/web/css/selektor_uniwersalny/index.html | 104 + files/pl/web/css/selektory_typu/index.html | 80 + .../css/skr\303\263cone_deklaracje_css/index.html" | 56 + files/pl/web/css/text-transform/index.html | 81 + files/pl/web/css/transform-function/index.html | 201 ++ .../web/css/transform-function/matrix()/index.html | 58 + .../web/css/using_css_custom_properties/index.html | 244 ++ files/pl/web/css/vertical-align/index.html | 66 + .../index.html" | 25 + files/pl/web/css/white-space/index.html | 93 + files/pl/web/css/width/index.html | 207 ++ files/pl/web/css/word-spacing/index.html | 78 + files/pl/web/css/z-index/index.html | 128 + .../index.html" | 165 + .../dost\304\231pno\305\233\304\207/index.html" | 94 + .../index.html" | 171 ++ files/pl/web/exslt/index.html | 93 + files/pl/web/guide/ajax/index.html | 23 + .../web/guide/ajax/na_pocz\304\205tek/index.html" | 221 ++ files/pl/web/guide/api/index.html | 25 + files/pl/web/guide/css/kolumny_css3/index.html | 65 + .../guide/css/sprawdzanie_media_queries/index.html | 116 + files/pl/web/guide/graphics/index.html | 41 + .../pl/web/guide/html/editable_content/index.html | 216 ++ files/pl/web/guide/index.html | 55 + files/pl/web/guide/liczniki_css/index.html | 86 + files/pl/web/guide/performance/index.html | 14 + files/pl/web/html(pl)/index.html | 108 + .../tryb_zgodnosci_oraz_tryb_standardow/index.html | 54 + files/pl/web/html/canvas/index.html | 55 + files/pl/web/html/element/a/index.html | 384 +++ files/pl/web/html/element/abbr/index.html | 200 ++ files/pl/web/html/element/acronym/index.html | 81 + files/pl/web/html/element/address/index.html | 140 + files/pl/web/html/element/applet/index.html | 74 + files/pl/web/html/element/aside/index.html | 126 + files/pl/web/html/element/b/index.html | 30 + files/pl/web/html/element/base/index.html | 129 + files/pl/web/html/element/basefont/index.html | 34 + files/pl/web/html/element/bdo/index.html | 22 + files/pl/web/html/element/bgsound/index.html | 45 + files/pl/web/html/element/big/index.html | 20 + files/pl/web/html/element/blink/index.html | 22 + files/pl/web/html/element/blockquote/index.html | 49 + files/pl/web/html/element/body/index.html | 166 + files/pl/web/html/element/br/index.html | 41 + files/pl/web/html/element/center/index.html | 36 + files/pl/web/html/element/cite/index.html | 38 + files/pl/web/html/element/code/index.html | 23 + files/pl/web/html/element/comment/index.html | 33 + files/pl/web/html/element/dd/index.html | 33 + files/pl/web/html/element/details/index.html | 195 ++ files/pl/web/html/element/div/index.html | 131 + files/pl/web/html/element/dl/index.html | 112 + files/pl/web/html/element/dt/index.html | 24 + files/pl/web/html/element/em/index.html | 31 + files/pl/web/html/element/head/index.html | 130 + .../web/html/element/heading_elements/index.html | 250 ++ files/pl/web/html/element/hr/index.html | 57 + files/pl/web/html/element/html/index.html | 122 + files/pl/web/html/element/i/index.html | 19 + files/pl/web/html/element/iframe/index.html | 292 ++ files/pl/web/html/element/index.html | 131 + files/pl/web/html/element/input/button/index.html | 341 ++ files/pl/web/html/element/input/index.html | 1376 +++++++++ files/pl/web/html/element/kbd/index.html | 27 + files/pl/web/html/element/li/index.html | 50 + files/pl/web/html/element/link/index.html | 412 +++ files/pl/web/html/element/marquee/index.html | 112 + files/pl/web/html/element/meta/index.html | 144 + files/pl/web/html/element/ol/index.html | 123 + files/pl/web/html/element/p/index.html | 45 + files/pl/web/html/element/q/index.html | 36 + files/pl/web/html/element/ruby/index.html | 103 + files/pl/web/html/element/s/index.html | 23 + files/pl/web/html/element/samp/index.html | 25 + files/pl/web/html/element/section/index.html | 128 + files/pl/web/html/element/small/index.html | 26 + files/pl/web/html/element/span/index.html | 138 + files/pl/web/html/element/strong/index.html | 22 + files/pl/web/html/element/title/index.html | 122 + files/pl/web/html/element/tt/index.html | 27 + files/pl/web/html/element/ul/index.html | 103 + files/pl/web/html/element/video/index.html | 355 +++ files/pl/web/html/elementy_blokowe/index.html | 38 + files/pl/web/html/elementy_liniowe/index.html | 30 + files/pl/web/html/global_attributes/index.html | 480 +++ .../web/html/global_attributes/pisownia/index.html | 63 + .../web/html/global_attributes/tabindex/index.html | 114 + files/pl/web/html/index.html | 56 + .../index.html | 28 + .../zarz\304\205dzanie_fokusem_w_html/index.html" | 18 + .../znaczenie_poprawnego_komentowania/index.html | 64 + files/pl/web/http/authentication/index.html | 135 + files/pl/web/http/ciasteczka/index.html | 263 ++ files/pl/web/http/headers/cache-control/index.html | 171 ++ files/pl/web/http/headers/data/index.html | 81 + files/pl/web/http/headers/index.html | 374 +++ .../pl/web/http/headers/referrer-policy/index.html | 260 ++ .../http/http_wiadomosci_og\303\263lne/index.html" | 178 ++ files/pl/web/http/index.html | 89 + files/pl/web/index.html | 53 + files/pl/web/javascript/domkniecia/index.html | 408 +++ .../dziedziczenie_lancuch_prototypow/index.html | 295 ++ files/pl/web/javascript/eventloop/index.html | 98 + .../control_flow_and_error_handling/index.html | 380 +++ files/pl/web/javascript/guide/funkcje/index.html | 642 ++++ files/pl/web/javascript/guide/index.html | 122 + .../web/javascript/guide/introduction/index.html | 150 + .../guide/iterators_and_generators/index.html | 165 + .../guide/loops_and_iteration/index.html | 332 ++ .../javascript/guide/o_tym_przewodniku/index.html | 138 + .../web/javascript/guide/obsolete_pages/index.html | 10 + .../blok_instrukcji/index.html" | 41 + .../definiowanie_funkcji/index.html" | 61 + .../index.html" | 20 + .../funkcja_eval/index.html" | 20 + .../funkcja_isfinite/index.html" | 24 + .../funkcja_isnan/index.html" | 29 + .../funkcje_escape_i_unescape/index.html" | 25 + .../funkcje_number_i_string/index.html" | 26 + .../funkcje_parseint_i_parsefloat/index.html" | 27 + .../funkcje_predefiniowane/index.html" | 23 + .../index.html" | 875 ++++++ .../instrukcje_komentarzy/index.html" | 26 + .../instrukcje_manipulacji_obiektem/index.html" | 50 + .../index.html" | 42 + .../instrukcja_throw/index.html" | 45 + .../instrukcja_try...catch/index.html" | 114 + .../instrukcje_p\304\231tli/index.html" | 23 + .../instrukcja_break/index.html" | 27 + .../instrukcja_continue/index.html" | 51 + .../instrukcja_do_...while/index.html" | 23 + .../instrukcja_for/index.html" | 56 + .../instrukcja_label/index.html" | 23 + .../instrukcja_while/index.html" | 38 + .../instrukcje_warunkowe/index.html" | 89 + .../litera\305\202y/index.html" | 207 ++ .../o_tym_przewodniku/index.html" | 159 + .../obiekty_i_w\305\202asno\305\233ci/index.html" | 49 + .../obiekty_predefiniowane/index.html" | 24 + .../obiekt_array/index.html" | 94 + .../obiekt_boolean/index.html" | 14 + .../obiekty_predefiniowane/obiekt_date/index.html" | 87 + .../obiekt_function/index.html" | 50 + .../obiekty_predefiniowane/obiekt_math/index.html" | 72 + .../obiekt_number/index.html" | 83 + .../obiekt_regexp/index.html" | 12 + .../obiekt_string/index.html" | 92 + .../operatory/index.html" | 112 + .../index.html" | 17 + .../operatory/operatory_arytmetyczne/index.html" | 48 + .../operatory/operatory_logiczne/index.html" | 72 + .../operatory_por\303\263wnania/index.html" | 73 + .../operatory/operatory_przypisania/index.html" | 67 + .../operatory/operatory_specjalne/index.html" | 227 ++ .../podgl\304\205d_klas_liveconnect/index.html" | 47 + .../index.html" | 39 + .../konwersja_typu_danych/index.html" | 24 + .../konwersja_javascript_do_java/index.html" | 320 ++ .../index.html" | 24 + .../index.html" | 71 + .../praca_z_przyk\305\202adem/index.html" | 37 + .../tworzenie_hierarchii/index.html" | 149 + .../dodawanie_w\305\202asno\305\233ci/index.html" | 23 + .../index.html" | 33 + .../w\305\202asno\305\233ci_obiektu/index.html" | 19 + .../index.html" | 49 + .../index.html" | 122 + .../praca_z_zamkni\304\231ciami/index.html" | 286 ++ .../sta\305\202e/index.html" | 29 + .../definiowanie_metod/index.html" | 48 + .../index.html" | 19 + .../index.html" | 16 + .../tworzenie_nowych_obiekt\303\263w/index.html" | 22 + .../usuwanie_w\305\202asno\305\233ci/index.html" | 26 + .../u\305\274ywanie_inicjacji_obiektu/index.html" | 36 + .../index.html" | 32 + .../index.html" | 62 + .../index.html" | 43 + .../unicode/index.html" | 110 + .../warto\305\233ci/index.html" | 46 + .../wyra\305\274enia/index.html" | 22 + .../wywo\305\202anie_funkcji/index.html" | 45 + .../index.html" | 215 ++ .../zastosowanie_obiektu_arguments/index.html" | 41 + .../zmienne/index.html" | 63 + .../guide/sk\305\202adnia_i_typy/index.html" | 595 ++++ files/pl/web/javascript/index.html | 131 + .../web/javascript/na_pocz\304\205tek/index.html" | 903 ++++++ .../pl/web/javascript/new_in_javascript/index.html | 10 + .../nowo\305\233ci_w_javascript_1.5/index.html" | 36 + .../nowo\305\233ci_w_javascript_1.6/index.html" | 62 + .../nowo\305\233ci_w_javascript_1.4/index.html" | 24 + .../nowo\305\233ci_w_javascript_1.8/index.html" | 135 + files/pl/web/javascript/o_javascript/index.html | 57 + .../ponowne_wprowadzenie_do_javascript/index.html | 965 ++++++ .../reference/classes/extends/index.html | 88 + .../pl/web/javascript/reference/classes/index.html | 410 +++ .../reference/classes/konstruktor/index.html | 188 ++ .../classes/private_class_fields/index.html | 205 ++ .../classes/public_class_fields/index.html | 269 ++ .../javascript/reference/classes/static/index.html | 138 + .../index.html" | 77 + .../pl/web/javascript/reference/errors/index.html | 28 + .../errors/invalid_array_length/index.html | 79 + .../reference/errors/invalid_date/index.html | 59 + .../reference/errors/json_bad_parse/index.html | 114 + .../missing_curly_after_function_body/index.html | 72 + .../errors/missing_initializer_in_const/index.html | 61 + .../index.html | 59 + .../missing_semicolon_before_statement/index.html | 82 + .../errors/more_arguments_needed/index.html | 44 + .../reference/errors/not_a_function/index.html | 84 + .../reference/errors/not_defined/index.html | 66 + .../errors/property_access_denied/index.html | 53 + .../reference/errors/unexpected_type/index.html | 69 + .../functions/funkcje_strzalkowe/index.html | 355 +++ .../javascript/reference/functions/get/index.html | 216 ++ .../web/javascript/reference/functions/index.html | 657 ++++ .../parametry_domy\305\233lne/index.html" | 225 ++ .../javascript/reference/functions/set/index.html | 146 + .../referencje/funkcje/arguments/callee/index.html | 60 + .../referencje/funkcje/arguments/caller/index.html | 48 + .../referencje/funkcje/arguments/index.html | 129 + .../referencje/funkcje/arguments/length/index.html | 59 + files/pl/web/javascript/referencje/index.html | 70 + .../web/javascript/referencje/komentarz/index.html | 54 + .../javascript/referencje/liveconnect/index.html | 23 + .../referencje/liveconnect/jsexception/index.html | 93 + .../referencje/liveconnect/jsobject/index.html | 186 ++ .../referencje/o_tym_dokumencie/index.html | 58 + .../konwencje_formatowania_tekstu/index.html | 31 + .../referencje/obiekty/array/concat/index.html | 71 + .../referencje/obiekty/array/copywithin/index.html | 181 ++ .../referencje/obiekty/array/entries/index.html | 77 + .../referencje/obiekty/array/every/index.html | 89 + .../referencje/obiekty/array/fill/index.html | 185 ++ .../referencje/obiekty/array/filter/index.html | 150 + .../referencje/obiekty/array/find/index.html | 278 ++ .../referencje/obiekty/array/findindex/index.html | 214 ++ .../referencje/obiekty/array/flat/index.html | 173 ++ .../referencje/obiekty/array/foreach/index.html | 104 + .../referencje/obiekty/array/from/index.html | 248 ++ .../referencje/obiekty/array/includes/index.html | 110 + .../javascript/referencje/obiekty/array/index.html | 279 ++ .../referencje/obiekty/array/indexof/index.html | 95 + .../referencje/obiekty/array/isarray/index.html | 139 + .../referencje/obiekty/array/join/index.html | 50 + .../referencje/obiekty/array/keys/index.html | 120 + .../obiekty/array/lastindexof/index.html | 114 + .../referencje/obiekty/array/length/index.html | 53 + .../referencje/obiekty/array/map/index.html | 93 + .../referencje/obiekty/array/of/index.html | 92 + .../referencje/obiekty/array/pop/index.html | 138 + .../referencje/obiekty/array/prototype/index.html | 12 + .../referencje/obiekty/array/push/index.html | 51 + .../referencje/obiekty/array/reduce/index.html | 300 ++ .../obiekty/array/reduceright/index.html | 344 +++ .../referencje/obiekty/array/reverse/index.html | 55 + .../referencje/obiekty/array/shift/index.html | 48 + .../referencje/obiekty/array/slice/index.html | 99 + .../referencje/obiekty/array/some/index.html | 110 + .../referencje/obiekty/array/sort/index.html | 122 + .../referencje/obiekty/array/splice/index.html | 86 + .../obiekty/array/tolocalestring/index.html | 128 + .../referencje/obiekty/array/tosource/index.html | 62 + .../referencje/obiekty/array/tostring/index.html | 42 + .../referencje/obiekty/array/unshift/index.html | 56 + .../referencje/obiekty/array/values/index.html | 84 + .../referencje/obiekty/arraybuffer/index.html | 222 ++ .../referencje/obiekty/bigint/asintn/index.html | 79 + .../referencje/obiekty/bigint/asuintn/index.html | 78 + .../referencje/obiekty/bigint/index.html | 293 ++ .../referencje/obiekty/bigint/tostring/index.html | 95 + .../referencje/obiekty/bigint/valueof/index.html | 59 + .../referencje/obiekty/boolean/index.html | 111 + .../obiekty/boolean/prototype/index.html | 48 + .../referencje/obiekty/boolean/tosource/index.html | 51 + .../referencje/obiekty/boolean/tostring/index.html | 41 + .../referencje/obiekty/boolean/valueof/index.html | 43 + .../referencje/obiekty/dataview/index.html | 118 + .../referencje/obiekty/date/constructor/index.html | 18 + .../referencje/obiekty/date/getdate/index.html | 47 + .../referencje/obiekty/date/getday/index.html | 47 + .../referencje/obiekty/date/getfullyear/index.html | 47 + .../referencje/obiekty/date/gethours/index.html | 46 + .../obiekty/date/getmilliseconds/index.html | 44 + .../referencje/obiekty/date/getminutes/index.html | 48 + .../referencje/obiekty/date/getmonth/index.html | 46 + .../referencje/obiekty/date/getseconds/index.html | 46 + .../referencje/obiekty/date/gettime/index.html | 47 + .../obiekty/date/gettimezoneoffset/index.html | 35 + .../referencje/obiekty/date/getutcdate/index.html | 45 + .../referencje/obiekty/date/getutcday/index.html | 45 + .../obiekty/date/getutcfullyear/index.html | 44 + .../referencje/obiekty/date/getutchours/index.html | 44 + .../obiekty/date/getutcmilliseconds/index.html | 44 + .../obiekty/date/getutcminutes/index.html | 44 + .../referencje/obiekty/date/getutcmonth/index.html | 44 + .../obiekty/date/getutcseconds/index.html | 44 + .../referencje/obiekty/date/getyear/index.html | 97 + .../javascript/referencje/obiekty/date/index.html | 138 + .../referencje/obiekty/date/now/index.html | 43 + .../referencje/obiekty/date/parse/index.html | 74 + .../referencje/obiekty/date/prototype/index.html | 115 + .../referencje/obiekty/date/setdate/index.html | 43 + .../referencje/obiekty/date/setfullyear/index.html | 58 + .../referencje/obiekty/date/sethours/index.html | 66 + .../obiekty/date/setmilliseconds/index.html | 45 + .../referencje/obiekty/date/setminutes/index.html | 60 + .../referencje/obiekty/date/setmonth/index.html | 56 + .../referencje/obiekty/date/setseconds/index.html | 56 + .../referencje/obiekty/date/settime/index.html | 46 + .../referencje/obiekty/date/setutcdate/index.html | 45 + .../obiekty/date/setutcfullyear/index.html | 57 + .../referencje/obiekty/date/setutchours/index.html | 62 + .../obiekty/date/setutcmilliseconds/index.html | 45 + .../obiekty/date/setutcminutes/index.html | 57 + .../referencje/obiekty/date/setutcmonth/index.html | 52 + .../obiekty/date/setutcseconds/index.html | 52 + .../referencje/obiekty/date/setyear/index.html | 52 + .../referencje/obiekty/date/togmtstring/index.html | 44 + .../referencje/obiekty/date/tojson/index.html | 70 + .../obiekty/date/tolocaledatestring/index.html | 55 + .../obiekty/date/tolocalestring/index.html | 51 + .../obiekty/date/tolocaletimestring/index.html | 52 + .../referencje/obiekty/date/tosource/index.html | 49 + .../referencje/obiekty/date/tostring/index.html | 49 + .../referencje/obiekty/date/toutcstring/index.html | 43 + .../referencje/obiekty/date/utc/index.html | 69 + .../referencje/obiekty/date/valueof/index.html | 46 + .../referencje/obiekty/decodeuri/index.html | 39 + .../obiekty/decodeuricomponent/index.html | 41 + .../referencje/obiekty/encodeuri/index.html | 72 + .../obiekty/encodeuricomponent/index.html | 38 + .../obiekty/error/columnnumber/index.html | 81 + .../referencje/obiekty/error/filename/index.html | 49 + .../javascript/referencje/obiekty/error/index.html | 246 ++ .../referencje/obiekty/error/linenumber/index.html | 57 + .../referencje/obiekty/error/message/index.html | 108 + .../referencje/obiekty/error/name/index.html | 109 + .../referencje/obiekty/error/prototype/index.html | 113 + .../referencje/obiekty/error/stack/index.html | 127 + .../referencje/obiekty/error/tosource/index.html | 60 + .../referencje/obiekty/error/tostring/index.html | 98 + .../referencje/obiekty/escape/index.html | 120 + .../referencje/obiekty/evalerror/index.html | 87 + .../referencje/obiekty/function/apply/index.html | 289 ++ .../obiekty/function/arguments/index.html | 41 + .../referencje/obiekty/function/arity/index.html | 23 + .../referencje/obiekty/function/bind/index.html | 332 ++ .../referencje/obiekty/function/caller/index.html | 69 + .../obiekty/function/displayname/index.html | 119 + .../referencje/obiekty/function/index.html | 237 ++ .../referencje/obiekty/function/length/index.html | 42 + .../obiekty/function/tostring/index.html | 56 + .../referencje/obiekty/generator/index.html | 178 ++ .../web/javascript/referencje/obiekty/index.html | 193 ++ .../referencje/obiekty/infinity/index.html | 35 + .../referencje/obiekty/isfinite/index.html | 56 + .../javascript/referencje/obiekty/isnan/index.html | 53 + .../javascript/referencje/obiekty/java/index.html | 29 + .../referencje/obiekty/javaarray/index.html | 68 + .../referencje/obiekty/javaarray/length/index.html | 29 + .../obiekty/javaarray/tostring/index.html | 38 + .../referencje/obiekty/javaclass/index.html | 60 + .../referencje/obiekty/javaobject/index.html | 67 + .../referencje/obiekty/javapackage/index.html | 46 + .../javascript/referencje/obiekty/json/index.html | 147 + .../referencje/obiekty/map/clear/index.html | 87 + .../referencje/obiekty/map/delete/index.html | 85 + .../referencje/obiekty/map/entries/index.html | 128 + .../referencje/obiekty/map/foreach/index.html | 104 + .../referencje/obiekty/map/get/index.html | 80 + .../referencje/obiekty/map/has/index.html | 85 + .../javascript/referencje/obiekty/map/index.html | 458 +++ .../referencje/obiekty/map/keys/index.html | 78 + .../referencje/obiekty/map/set/index.html | 96 + .../referencje/obiekty/map/size/index.html | 65 + .../referencje/obiekty/map/values/index.html | 77 + .../referencje/obiekty/math/abs/index.html | 54 + .../referencje/obiekty/math/acos/index.html | 59 + .../referencje/obiekty/math/asin/index.html | 58 + .../referencje/obiekty/math/atan/index.html | 51 + .../referencje/obiekty/math/atan2/index.html | 63 + .../referencje/obiekty/math/ceil/index.html | 49 + .../referencje/obiekty/math/cos/index.html | 52 + .../referencje/obiekty/math/e/index.html | 40 + .../referencje/obiekty/math/exp/index.html | 49 + .../referencje/obiekty/math/floor/index.html | 46 + .../javascript/referencje/obiekty/math/index.html | 94 + .../referencje/obiekty/math/ln10/index.html | 42 + .../referencje/obiekty/math/ln2/index.html | 40 + .../referencje/obiekty/math/log/index.html | 54 + .../referencje/obiekty/math/log10e/index.html | 44 + .../referencje/obiekty/math/log2e/index.html | 42 + .../referencje/obiekty/math/max/index.html | 43 + .../referencje/obiekty/math/min/index.html | 44 + .../referencje/obiekty/math/pi/index.html | 40 + .../referencje/obiekty/math/pow/index.html | 49 + .../referencje/obiekty/math/random/index.html | 67 + .../referencje/obiekty/math/round/index.html | 50 + .../referencje/obiekty/math/sign/index.html | 118 + .../referencje/obiekty/math/sin/index.html | 51 + .../referencje/obiekty/math/sqrt/index.html | 46 + .../referencje/obiekty/math/sqrt1_2/index.html | 39 + .../referencje/obiekty/math/sqrt2/index.html | 41 + .../referencje/obiekty/math/tan/index.html | 53 + .../javascript/referencje/obiekty/nan/index.html | 45 + .../referencje/obiekty/netscape/index.html | 29 + .../javascript/referencje/obiekty/null/index.html | 134 + .../obiekty/number/constructor/index.html | 22 + .../referencje/obiekty/number/epsilon/index.html | 76 + .../referencje/obiekty/number/index.html | 111 + .../referencje/obiekty/number/isinteger/index.html | 88 + .../referencje/obiekty/number/isnan/index.html | 108 + .../referencje/obiekty/number/max_value/index.html | 35 + .../referencje/obiekty/number/min_value/index.html | 39 + .../referencje/obiekty/number/nan/index.html | 48 + .../obiekty/number/negative_infinity/index.html | 53 + .../obiekty/number/positive_infinity/index.html | 57 + .../obiekty/number/toexponential/index.html | 53 + .../referencje/obiekty/number/tofixed/index.html | 61 + .../obiekty/number/tolocalestring/index.html | 182 ++ .../obiekty/number/toprecision/index.html | 56 + .../referencje/obiekty/number/tostring/index.html | 59 + .../referencje/obiekty/object/assign/index.html | 307 ++ .../obiekty/object/constructor/index.html | 49 + .../referencje/obiekty/object/eval/index.html | 64 + .../referencje/obiekty/object/freeze/index.html | 201 ++ .../object/getownpropertydescriptor/index.html | 121 + .../obiekty/object/hasownproperty/index.html | 150 + .../referencje/obiekty/object/index.html | 212 ++ .../referencje/obiekty/object/proto/index.html | 193 ++ .../referencje/obiekty/object/prototype/index.html | 218 ++ .../referencje/obiekty/object/seal/index.html | 165 + .../obiekty/object/tolocalestring/index.html | 35 + .../referencje/obiekty/object/tosource/index.html | 73 + .../referencje/obiekty/object/tostring/index.html | 98 + .../referencje/obiekty/object/unwatch/index.html | 39 + .../referencje/obiekty/object/valueof/index.html | 63 + .../referencje/obiekty/object/watch/index.html | 78 + .../referencje/obiekty/packages/index.html | 50 + .../referencje/obiekty/packages/java/index.html | 49 + .../obiekty/packages/nazwaklasy/index.html | 41 + .../obiekty/packages/netscape/index.html | 35 + .../referencje/obiekty/packages/sun/index.html | 32 + .../referencje/obiekty/parsefloat/index.html | 68 + .../referencje/obiekty/parseint/index.html | 112 + .../referencje/obiekty/promise/index.html | 256 ++ .../obiekty/proxy/handler/apply/index.html | 117 + .../referencje/obiekty/proxy/handler/index.html | 77 + .../javascript/referencje/obiekty/proxy/index.html | 401 +++ .../referencje/obiekty/rangeerror/index.html | 162 + .../obiekty/rangeerror/prototype/index.html | 123 + .../referencje/obiekty/regexp/exec/index.html | 144 + .../referencje/obiekty/regexp/global/index.html | 35 + .../obiekty/regexp/ignorecase/index.html | 35 + .../referencje/obiekty/regexp/index.html | 383 +++ .../referencje/obiekty/regexp/lastmatch/index.html | 54 + .../referencje/obiekty/regexp/prototype/index.html | 53 + .../referencje/obiekty/regexp/source/index.html | 29 + .../referencje/obiekty/regexp/test/index.html | 53 + .../referencje/obiekty/regexp/tosource/index.html | 47 + .../referencje/obiekty/regexp/tostring/index.html | 46 + .../javascript/referencje/obiekty/set/index.html | 486 +++ .../obiekty/set/set.prototype.add()/index.html | 134 + .../obiekty/set/set.prototype.clear()/index.html | 124 + .../obiekty/set/set.prototype.delete()/index.html | 102 + .../referencje/obiekty/string/anchor/index.html | 56 + .../referencje/obiekty/string/big/index.html | 43 + .../referencje/obiekty/string/blink/index.html | 50 + .../referencje/obiekty/string/bold/index.html | 45 + .../referencje/obiekty/string/charat/index.html | 68 + .../obiekty/string/charcodeat/index.html | 42 + .../referencje/obiekty/string/concat/index.html | 44 + .../referencje/obiekty/string/fontcolor/index.html | 50 + .../referencje/obiekty/string/fontsize/index.html | 48 + .../obiekty/string/fromcharcode/index.html | 50 + .../obiekty/string/fromcodepoint/index.html | 149 + .../referencje/obiekty/string/index.html | 194 ++ .../referencje/obiekty/string/italics/index.html | 45 + .../referencje/obiekty/string/link/index.html | 43 + .../referencje/obiekty/string/prototype/index.html | 220 ++ .../referencje/obiekty/string/repeat/index.html | 166 + .../referencje/obiekty/string/search/index.html | 49 + .../referencje/obiekty/string/slice/index.html | 51 + .../referencje/obiekty/string/small/index.html | 37 + .../referencje/obiekty/string/strike/index.html | 44 + .../referencje/obiekty/string/sub/index.html | 44 + .../referencje/obiekty/string/substr/index.html | 66 + .../referencje/obiekty/string/substring/index.html | 90 + .../referencje/obiekty/string/sup/index.html | 45 + .../obiekty/string/tolowercase/index.html | 40 + .../referencje/obiekty/string/tosource/index.html | 41 + .../referencje/obiekty/string/tostring/index.html | 41 + .../obiekty/string/touppercase/index.html | 38 + .../referencje/obiekty/string/valueof/index.html | 40 + .../javascript/referencje/obiekty/sun/index.html | 29 + .../referencje/obiekty/symbol/index.html | 227 ++ .../referencje/obiekty/syntaxerror/index.html | 100 + .../referencje/obiekty/uint16array/index.html | 224 ++ .../referencje/obiekty/undefined/index.html | 40 + .../operatory/bitwise_operators/index.html | 558 ++++ .../operatory/destructuring_assignment/index.html | 493 +++ .../index.html" | 78 + .../referencje/operatory/function_star_/index.html | 90 + .../referencje/operatory/grouping/index.html | 90 + .../web/javascript/referencje/operatory/index.html | 282 ++ .../operatory/logical_operators/index.html | 253 ++ .../referencje/operatory/new.target/index.html | 134 + .../nullish_coalescing_operator/index.html | 251 ++ .../operatory/object_initializer/index.html | 387 +++ .../operatory/operator_delete/index.html | 74 + .../operatory/operator_function/index.html | 144 + .../referencje/operatory/operator_in/index.html | 92 + .../operatory/operator_instanceof/index.html | 168 + .../referencje/operatory/operator_new/index.html | 183 ++ .../operatory/operator_potoku/index.html | 65 + .../operatory/operator_przecinkowy/index.html | 37 + .../operatory/operator_typeof/index.html | 91 + .../referencje/operatory/operator_void/index.html | 51 + .../operatory/operator_warunkowy/index.html | 34 + .../operatory/operatory_arytmetyczne/index.html | 267 ++ .../index.html" | 34 + .../operatory/operatory_pami\304\231ci/index.html" | 177 ++ .../operatory_por\303\263wnania/index.html" | 129 + .../operatory/operatory_przypisania/index.html | 74 + .../index.html" | 336 ++ .../sk\305\202adnia_rozwini\304\231cia/index.html" | 244 ++ .../operatory/spread_operator/index.html | 229 ++ .../referencje/operatory/super/index.html | 171 ++ .../referencje/operatory/this/index.html | 346 +++ .../referencje/operatory/yield/index.html | 168 + .../referencje/operatory/yield_star_/index.html | 200 ++ .../referencje/polecenia/block/index.html | 160 + .../referencje/polecenia/break/index.html | 67 + .../referencje/polecenia/class/index.html | 113 + .../referencje/polecenia/const/index.html | 53 + .../referencje/polecenia/continue/index.html | 166 + .../referencje/polecenia/debugger/index.html | 126 + .../referencje/polecenia/default/index.html | 120 + .../referencje/polecenia/do...while/index.html | 54 + .../referencje/polecenia/empty/index.html | 92 + .../referencje/polecenia/etykieta/index.html | 51 + .../referencje/polecenia/export/index.html | 47 + .../referencje/polecenia/for...in/index.html | 173 ++ .../javascript/referencje/polecenia/for/index.html | 58 + .../referencje/polecenia/for_each...in/index.html | 80 + .../referencje/polecenia/function/index.html | 68 + .../referencje/polecenia/function_star_/index.html | 309 ++ .../referencje/polecenia/funkcja_async/index.html | 264 ++ .../referencje/polecenia/if...else/index.html | 65 + .../referencje/polecenia/import/index.html | 55 + .../web/javascript/referencje/polecenia/index.html | 149 + .../referencje/polecenia/return/index.html | 48 + .../referencje/polecenia/switch/index.html | 285 ++ .../referencje/polecenia/throw/index.html | 197 ++ .../javascript/referencje/polecenia/var/index.html | 61 + .../referencje/polecenia/while/index.html | 61 + .../index.html" | 292 ++ .../s\305\202owa_zarezerwowane/index.html" | 17 + files/pl/web/javascript/shells/index.html | 42 + files/pl/web/javascript/typed_arrays/index.html | 277 ++ .../typy_oraz_struktury_danych/index.html | 443 +++ .../index.html | 341 ++ .../zasoby_j\304\231zyka_javascript/index.html" | 48 + files/pl/web/mathml/index.html | 62 + files/pl/web/progressive_web_apps/index.html | 113 + .../pl/web/security/securing_your_site/index.html | 55 + .../konfiguracja_mime_na_serwerze/index.html | 114 + files/pl/web/svg/element/a/index.html | 149 + .../pl/web/svg/element/animatetransform/index.html | 95 + files/pl/web/svg/element/index.html | 252 ++ "files/pl/web/svg/element/okr\304\205g/index.html" | 99 + files/pl/web/svg/index.html | 100 + files/pl/web/svg/inne_zasoby/index.html | 19 + files/pl/web/svg/przewodnik/index.html | 28 + .../svg_w_xhtml_-_wprowadzenie/index.html | 78 + files/pl/web/tutorials/index.html | 154 + files/pl/web/xml/index.html | 17 + files/pl/web/xml/wprowadzenie_do_xml-a/index.html | 46 + files/pl/web/xpath/funkcje/boolean/index.html | 38 + files/pl/web/xpath/funkcje/ceiling/index.html | 36 + files/pl/web/xpath/funkcje/concat/index.html | 31 + files/pl/web/xpath/funkcje/contains/index.html | 36 + files/pl/web/xpath/funkcje/count/index.html | 33 + files/pl/web/xpath/funkcje/current/index.html | 30 + files/pl/web/xpath/funkcje/document/index.html | 42 + .../web/xpath/funkcje/element-available/index.html | 30 + files/pl/web/xpath/funkcje/false/index.html | 37 + files/pl/web/xpath/funkcje/floor/index.html | 33 + .../pl/web/xpath/funkcje/format-number/index.html | 38 + .../xpath/funkcje/function-available/index.html | 29 + files/pl/web/xpath/funkcje/generate-id/index.html | 36 + files/pl/web/xpath/funkcje/id/index.html | 36 + files/pl/web/xpath/funkcje/index.html | 55 + files/pl/web/xpath/funkcje/key/index.html | 36 + files/pl/web/xpath/funkcje/lang/index.html | 58 + files/pl/web/xpath/funkcje/last/index.html | 33 + files/pl/web/xpath/funkcje/local-name/index.html | 36 + files/pl/web/xpath/funkcje/name/index.html | 35 + .../pl/web/xpath/funkcje/namespace-uri/index.html | 37 + .../web/xpath/funkcje/normalize-space/index.html | 34 + files/pl/web/xpath/funkcje/not/index.html | 37 + files/pl/web/xpath/funkcje/number/index.html | 37 + files/pl/web/xpath/funkcje/position/index.html | 44 + files/pl/web/xpath/funkcje/round/index.html | 36 + files/pl/web/xpath/funkcje/starts-with/index.html | 36 + .../pl/web/xpath/funkcje/string-length/index.html | 32 + files/pl/web/xpath/funkcje/string/index.html | 43 + .../web/xpath/funkcje/substring-after/index.html | 40 + .../web/xpath/funkcje/substring-before/index.html | 38 + files/pl/web/xpath/funkcje/substring/index.html | 40 + files/pl/web/xpath/funkcje/sum/index.html | 36 + .../web/xpath/funkcje/system-property/index.html | 36 + files/pl/web/xpath/funkcje/translate/index.html | 86 + files/pl/web/xpath/funkcje/true/index.html | 30 + .../xpath/funkcje/unparsed-entity-url/index.html | 29 + files/pl/web/xpath/index.html | 14 + files/pl/web/xpath/osie/index.html | 44 + files/pl/web/xslt/apply-imports/index.html | 30 + files/pl/web/xslt/apply-templates/index.html | 35 + files/pl/web/xslt/attribute-set/index.html | 35 + files/pl/web/xslt/attribute/index.html | 34 + files/pl/web/xslt/call-template/index.html | 32 + files/pl/web/xslt/choose/index.html | 35 + files/pl/web/xslt/comment/index.html | 31 + files/pl/web/xslt/copy-of/index.html | 32 + files/pl/web/xslt/copy/index.html | 32 + files/pl/web/xslt/decimal-format/index.html | 73 + files/pl/web/xslt/element/element/index.html | 36 + files/pl/web/xslt/element/index.html | 58 + files/pl/web/xslt/fallback/index.html | 32 + files/pl/web/xslt/for-each/index.html | 32 + files/pl/web/xslt/if/index.html | 33 + files/pl/web/xslt/import/index.html | 31 + files/pl/web/xslt/include/index.html | 31 + files/pl/web/xslt/index.html | 19 + files/pl/web/xslt/key/index.html | 36 + files/pl/web/xslt/message/index.html | 31 + files/pl/web/xslt/namespace-alias/index.html | 33 + files/pl/web/xslt/number/index.html | 98 + files/pl/web/xslt/otherwise/index.html | 32 + files/pl/web/xslt/output/index.html | 63 + files/pl/web/xslt/param/index.html | 34 + files/pl/web/xslt/preserve-space/index.html | 31 + .../pl/web/xslt/processing-instruction/index.html | 33 + files/pl/web/xslt/sort/index.html | 49 + files/pl/web/xslt/strip-space/index.html | 31 + files/pl/web/xslt/stylesheet/index.html | 34 + files/pl/web/xslt/template/index.html | 47 + files/pl/web/xslt/text/index.html | 34 + files/pl/web/xslt/transform/index.html | 17 + .../dokumentacja_xslt_xpath/index.html | 243 ++ .../web/xslt/transformacje_xml_z_xslt/index.html | 147 + .../przeczytaj_wi\304\231cej/index.html" | 205 ++ files/pl/web/xslt/value-of/index.html | 32 + files/pl/web/xslt/variable/index.html | 35 + files/pl/web/xslt/when/index.html | 33 + files/pl/web/xslt/with-param/index.html | 32 + 1149 files changed, 113548 insertions(+) create mode 100644 files/pl/web/accessibility/aria/aplikacje_internetowe_i_aria_faq/index.html create mode 100644 files/pl/web/accessibility/aria/index.html create mode 100644 files/pl/web/api/attr/index.html create mode 100644 files/pl/web/api/audiobuffer/index.html create mode 100644 files/pl/web/api/audiocontext/createdynamicscompressor/index.html create mode 100644 files/pl/web/api/audiocontext/index.html create mode 100644 files/pl/web/api/audioparam/index.html create mode 100644 files/pl/web/api/audioparam/setvalueattime/index.html create mode 100644 files/pl/web/api/cache/index.html create mode 100644 files/pl/web/api/canvas_api/tutorial/basic_usage/index.html create mode 100644 files/pl/web/api/canvas_api/tutorial/index.html create mode 100644 files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html create mode 100644 files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html create mode 100644 files/pl/web/api/childnode/index.html create mode 100644 files/pl/web/api/childnode/remove/index.html create mode 100644 files/pl/web/api/console/index.html create mode 100644 files/pl/web/api/console/log/index.html create mode 100644 files/pl/web/api/cssnumericvalue/div/index.html create mode 100644 files/pl/web/api/cssnumericvalue/index.html create mode 100644 files/pl/web/api/cssrule/index.html create mode 100644 files/pl/web/api/document/activeelement/index.html create mode 100644 files/pl/web/api/document/alinkcolor/index.html create mode 100644 files/pl/web/api/document/anchors/index.html create mode 100644 files/pl/web/api/document/applets/index.html create mode 100644 files/pl/web/api/document/bgcolor/index.html create mode 100644 files/pl/web/api/document/body/index.html create mode 100644 files/pl/web/api/document/characterset/index.html create mode 100644 files/pl/web/api/document/clear/index.html create mode 100644 files/pl/web/api/document/close/index.html create mode 100644 files/pl/web/api/document/compatmode/index.html create mode 100644 files/pl/web/api/document/cookie/index.html create mode 100644 files/pl/web/api/document/createattribute/index.html create mode 100644 files/pl/web/api/document/createdocumentfragment/index.html create mode 100644 files/pl/web/api/document/createelement/index.html create mode 100644 files/pl/web/api/document/createevent/index.html create mode 100644 files/pl/web/api/document/createrange/index.html create mode 100644 files/pl/web/api/document/createtextnode/index.html create mode 100644 files/pl/web/api/document/defaultview/index.html create mode 100644 files/pl/web/api/document/designmode/index.html create mode 100644 files/pl/web/api/document/doctype/index.html create mode 100644 files/pl/web/api/document/documentelement/index.html create mode 100644 files/pl/web/api/document/domain/index.html create mode 100644 files/pl/web/api/document/drag_event/index.html create mode 100644 files/pl/web/api/document/embeds/index.html create mode 100644 files/pl/web/api/document/execcommand/index.html create mode 100644 files/pl/web/api/document/fgcolor/index.html create mode 100644 files/pl/web/api/document/firstchild/index.html create mode 100644 files/pl/web/api/document/forms/index.html create mode 100644 files/pl/web/api/document/getelementbyid/index.html create mode 100644 files/pl/web/api/document/getelementsbyclassname/index.html create mode 100644 files/pl/web/api/document/getelementsbyname/index.html create mode 100644 files/pl/web/api/document/getelementsbytagname/index.html create mode 100644 files/pl/web/api/document/hasfocus/index.html create mode 100644 files/pl/web/api/document/head/index.html create mode 100644 files/pl/web/api/document/height/index.html create mode 100644 files/pl/web/api/document/images/index.html create mode 100644 files/pl/web/api/document/implementation/index.html create mode 100644 files/pl/web/api/document/importnode/index.html create mode 100644 files/pl/web/api/document/index.html create mode 100644 files/pl/web/api/document/lastmodified/index.html create mode 100644 files/pl/web/api/document/linkcolor/index.html create mode 100644 files/pl/web/api/document/links/index.html create mode 100644 files/pl/web/api/document/location/index.html create mode 100644 files/pl/web/api/document/namespaceuri/index.html create mode 100644 files/pl/web/api/document/open/index.html create mode 100644 files/pl/web/api/document/plugins/index.html create mode 100644 files/pl/web/api/document/queryselector/index.html create mode 100644 files/pl/web/api/document/referrer/index.html create mode 100644 files/pl/web/api/document/releasecapture/index.html create mode 100644 files/pl/web/api/document/stylesheets/index.html create mode 100644 files/pl/web/api/document/title/index.html create mode 100644 files/pl/web/api/document/url/index.html create mode 100644 files/pl/web/api/document/vlinkcolor/index.html create mode 100644 files/pl/web/api/document/width/index.html create mode 100644 files/pl/web/api/document/write/index.html create mode 100644 files/pl/web/api/document/writeln/index.html create mode 100644 files/pl/web/api/domapplicationsmanager/getall/index.html create mode 100644 files/pl/web/api/domapplicationsmanager/index.html create mode 100644 files/pl/web/api/element/addeventlistener/index.html create mode 100644 files/pl/web/api/element/appendchild/index.html create mode 100644 files/pl/web/api/element/attributes/index.html create mode 100644 files/pl/web/api/element/blur/index.html create mode 100644 files/pl/web/api/element/childnodes/index.html create mode 100644 files/pl/web/api/element/classlist/index.html create mode 100644 files/pl/web/api/element/classname/index.html create mode 100644 files/pl/web/api/element/click/index.html create mode 100644 files/pl/web/api/element/clientheight/index.html create mode 100644 files/pl/web/api/element/clientnode/index.html create mode 100644 files/pl/web/api/element/clientwidth/index.html create mode 100644 files/pl/web/api/element/dir/index.html create mode 100644 files/pl/web/api/element/dispatchevent/index.html create mode 100644 files/pl/web/api/element/firstchild/index.html create mode 100644 files/pl/web/api/element/focus/index.html create mode 100644 files/pl/web/api/element/getattribute/index.html create mode 100644 files/pl/web/api/element/getattributenode/index.html create mode 100644 files/pl/web/api/element/getattributenodens/index.html create mode 100644 files/pl/web/api/element/getattributens/index.html create mode 100644 files/pl/web/api/element/getboundingclientrect/index.html create mode 100644 files/pl/web/api/element/getelementsbytagnamens/index.html create mode 100644 files/pl/web/api/element/hasattribute/index.html create mode 100644 files/pl/web/api/element/hasattributens/index.html create mode 100644 files/pl/web/api/element/hasattributes/index.html create mode 100644 files/pl/web/api/element/haschildnodes/index.html create mode 100644 files/pl/web/api/element/id/index.html create mode 100644 files/pl/web/api/element/index.html create mode 100644 files/pl/web/api/element/innerhtml/index.html create mode 100644 files/pl/web/api/element/insertadjacenthtml/index.html create mode 100644 files/pl/web/api/element/insertbefore/index.html create mode 100644 files/pl/web/api/element/lang/index.html create mode 100644 files/pl/web/api/element/lastchild/index.html create mode 100644 files/pl/web/api/element/length/index.html create mode 100644 files/pl/web/api/element/localname/index.html create mode 100644 files/pl/web/api/element/name/index.html create mode 100644 files/pl/web/api/element/namespaceuri/index.html create mode 100644 files/pl/web/api/element/nextsibling/index.html create mode 100644 files/pl/web/api/element/nodename/index.html create mode 100644 files/pl/web/api/element/nodetype/index.html create mode 100644 files/pl/web/api/element/nodevalue/index.html create mode 100644 files/pl/web/api/element/normalize/index.html create mode 100644 files/pl/web/api/element/offsetheight/index.html create mode 100644 files/pl/web/api/element/offsetleft/index.html create mode 100644 files/pl/web/api/element/offsetparent/index.html create mode 100644 files/pl/web/api/element/offsetwidth/index.html create mode 100644 files/pl/web/api/element/onclick/index.html create mode 100644 files/pl/web/api/element/onkeypress/index.html create mode 100644 files/pl/web/api/element/onkeyup/index.html create mode 100644 files/pl/web/api/element/onmousedown/index.html create mode 100644 files/pl/web/api/element/onmousemove/index.html create mode 100644 files/pl/web/api/element/ownerdocument/index.html create mode 100644 files/pl/web/api/element/parentnode/index.html create mode 100644 files/pl/web/api/element/prefix/index.html create mode 100644 files/pl/web/api/element/previoussibling/index.html create mode 100644 files/pl/web/api/element/queryselector/index.html create mode 100644 files/pl/web/api/element/removeattribute/index.html create mode 100644 files/pl/web/api/element/removeattributenode/index.html create mode 100644 files/pl/web/api/element/removeattributens/index.html create mode 100644 files/pl/web/api/element/removechild/index.html create mode 100644 files/pl/web/api/element/replacechild/index.html create mode 100644 files/pl/web/api/element/scrollleft/index.html create mode 100644 files/pl/web/api/element/scrolltop/index.html create mode 100644 files/pl/web/api/element/scrollwidth/index.html create mode 100644 files/pl/web/api/element/setattribute/index.html create mode 100644 files/pl/web/api/element/setattributenode/index.html create mode 100644 files/pl/web/api/element/setattributenodens/index.html create mode 100644 files/pl/web/api/element/setattributens/index.html create mode 100644 files/pl/web/api/element/style/index.html create mode 100644 files/pl/web/api/element/tabindex/index.html create mode 100644 files/pl/web/api/element/tagname/index.html create mode 100644 files/pl/web/api/element/textcontent/index.html create mode 100644 files/pl/web/api/event/altkey/index.html create mode 100644 files/pl/web/api/event/bubbles/index.html create mode 100644 files/pl/web/api/event/button/index.html create mode 100644 files/pl/web/api/event/cancelable/index.html create mode 100644 files/pl/web/api/event/cancelbubble/index.html create mode 100644 files/pl/web/api/event/charcode/index.html create mode 100644 files/pl/web/api/event/clientx/index.html create mode 100644 files/pl/web/api/event/clienty/index.html create mode 100644 files/pl/web/api/event/ctrlkey/index.html create mode 100644 files/pl/web/api/event/currenttarget/index.html create mode 100644 files/pl/web/api/event/eventphase/index.html create mode 100644 files/pl/web/api/event/index.html create mode 100644 files/pl/web/api/event/initevent/index.html create mode 100644 files/pl/web/api/event/initmouseevent/index.html create mode 100644 files/pl/web/api/event/inituievent/index.html create mode 100644 files/pl/web/api/event/ischar/index.html create mode 100644 files/pl/web/api/event/keycode/index.html create mode 100644 files/pl/web/api/event/layerx/index.html create mode 100644 files/pl/web/api/event/layery/index.html create mode 100644 files/pl/web/api/event/metakey/index.html create mode 100644 files/pl/web/api/event/pagex/index.html create mode 100644 files/pl/web/api/event/pagey/index.html create mode 100644 files/pl/web/api/event/relatedtarget/index.html create mode 100644 files/pl/web/api/event/screenx/index.html create mode 100644 files/pl/web/api/event/screeny/index.html create mode 100644 files/pl/web/api/event/shiftkey/index.html create mode 100644 files/pl/web/api/event/stoppropagation/index.html create mode 100644 files/pl/web/api/event/target/index.html create mode 100644 files/pl/web/api/event/timestamp/index.html create mode 100644 files/pl/web/api/event/type/index.html create mode 100644 files/pl/web/api/event/view/index.html create mode 100644 files/pl/web/api/file/file/index.html create mode 100644 files/pl/web/api/file/index.html create mode 100644 files/pl/web/api/geolocation_api/index.html create mode 100644 files/pl/web/api/globaleventhandlers/index.html create mode 100644 files/pl/web/api/globaleventhandlers/onblur/index.html create mode 100644 files/pl/web/api/globaleventhandlers/onfocus/index.html create mode 100644 files/pl/web/api/htmlcanvaselement/capturestream/index.html create mode 100644 files/pl/web/api/htmlcanvaselement/getcontext/index.html create mode 100644 files/pl/web/api/htmlcanvaselement/height/index.html create mode 100644 files/pl/web/api/htmlcanvaselement/index.html create mode 100644 files/pl/web/api/htmlcanvaselement/width/index.html create mode 100644 files/pl/web/api/htmlelement/dataset/index.html create mode 100644 files/pl/web/api/htmlelement/index.html create mode 100644 files/pl/web/api/htmlformelement/acceptcharset/index.html create mode 100644 files/pl/web/api/htmlformelement/action/index.html create mode 100644 files/pl/web/api/htmlformelement/elements/index.html create mode 100644 files/pl/web/api/htmlformelement/encoding/index.html create mode 100644 files/pl/web/api/htmlformelement/enctype/index.html create mode 100644 files/pl/web/api/htmlformelement/index.html create mode 100644 files/pl/web/api/htmlformelement/length/index.html create mode 100644 files/pl/web/api/htmlformelement/method/index.html create mode 100644 files/pl/web/api/htmlformelement/name/index.html create mode 100644 files/pl/web/api/htmlformelement/reset/index.html create mode 100644 files/pl/web/api/htmlformelement/submit/index.html create mode 100644 files/pl/web/api/htmlformelement/target/index.html create mode 100644 files/pl/web/api/htmliframeelement/index.html create mode 100644 files/pl/web/api/htmlselectelement/index.html create mode 100644 files/pl/web/api/htmltableelement/caption/index.html create mode 100644 files/pl/web/api/htmltableelement/index.html create mode 100644 files/pl/web/api/htmltableelement/tfoot/index.html create mode 100644 files/pl/web/api/htmltableelement/thead/index.html create mode 100644 files/pl/web/api/index.html create mode 100644 files/pl/web/api/location/index.html create mode 100644 files/pl/web/api/location/reload/index.html create mode 100644 files/pl/web/api/mediaelementaudiosourcenode/index.html create mode 100644 files/pl/web/api/midiaccess/index.html create mode 100644 files/pl/web/api/mousescrollevent/index.html create mode 100644 files/pl/web/api/navigator/appcodename/index.html create mode 100644 files/pl/web/api/navigator/appname/index.html create mode 100644 files/pl/web/api/navigator/appversion/index.html create mode 100644 files/pl/web/api/navigator/buildid/index.html create mode 100644 files/pl/web/api/navigator/cookieenabled/index.html create mode 100644 files/pl/web/api/navigator/index.html create mode 100644 files/pl/web/api/navigator/javaenabled/index.html create mode 100644 files/pl/web/api/navigator/language/index.html create mode 100644 files/pl/web/api/navigator/mimetypes/index.html create mode 100644 files/pl/web/api/navigator/mozpermissionsettings/index.html create mode 100644 files/pl/web/api/navigator/online/index.html create mode 100644 files/pl/web/api/navigator/oscpu/index.html create mode 100644 files/pl/web/api/navigator/platform/index.html create mode 100644 files/pl/web/api/navigator/plugins/index.html create mode 100644 files/pl/web/api/navigator/product/index.html create mode 100644 files/pl/web/api/navigator/productsub/index.html create mode 100644 files/pl/web/api/navigator/registercontenthandler/index.html create mode 100644 files/pl/web/api/navigator/registerprotocolhandler/index.html create mode 100644 files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html create mode 100644 files/pl/web/api/navigatorlanguage/index.html create mode 100644 files/pl/web/api/navigatoronline/index.html create mode 100644 files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html create mode 100644 files/pl/web/api/navigatorplugins/index.html create mode 100644 files/pl/web/api/parentnode/childelementcount/index.html create mode 100644 files/pl/web/api/parentnode/children/index.html create mode 100644 files/pl/web/api/parentnode/index.html create mode 100644 files/pl/web/api/powiadomienie/index.html create mode 100644 files/pl/web/api/push_api/index.html create mode 100644 files/pl/web/api/range/index.html create mode 100644 files/pl/web/api/response/index.html create mode 100644 files/pl/web/api/screen/colordepth/index.html create mode 100644 files/pl/web/api/screen/index.html create mode 100644 files/pl/web/api/screen/width/index.html create mode 100644 files/pl/web/api/selection/addrange/index.html create mode 100644 files/pl/web/api/selection/anchornode/index.html create mode 100644 files/pl/web/api/selection/anchoroffset/index.html create mode 100644 files/pl/web/api/selection/collapse/index.html create mode 100644 files/pl/web/api/selection/collapsetoend/index.html create mode 100644 files/pl/web/api/selection/collapsetostart/index.html create mode 100644 files/pl/web/api/selection/containsnode/index.html create mode 100644 files/pl/web/api/selection/deletefromdocument/index.html create mode 100644 files/pl/web/api/selection/extend/index.html create mode 100644 files/pl/web/api/selection/focusnode/index.html create mode 100644 files/pl/web/api/selection/focusoffset/index.html create mode 100644 files/pl/web/api/selection/getrangeat/index.html create mode 100644 files/pl/web/api/selection/index.html create mode 100644 files/pl/web/api/selection/iscollapsed/index.html create mode 100644 files/pl/web/api/selection/rangecount/index.html create mode 100644 files/pl/web/api/selection/removeallranges/index.html create mode 100644 files/pl/web/api/selection/removerange/index.html create mode 100644 files/pl/web/api/selection/selectallchildren/index.html create mode 100644 files/pl/web/api/selection/tostring/index.html create mode 100644 files/pl/web/api/speechrecognition/index.html create mode 100644 files/pl/web/api/storage/index.html create mode 100644 files/pl/web/api/stylesheet/cssrules/index.html create mode 100644 files/pl/web/api/stylesheet/deleterule/index.html create mode 100644 files/pl/web/api/stylesheet/disabled/index.html create mode 100644 files/pl/web/api/stylesheet/href/index.html create mode 100644 files/pl/web/api/stylesheet/index.html create mode 100644 files/pl/web/api/stylesheet/insertrule/index.html create mode 100644 files/pl/web/api/stylesheet/media/index.html create mode 100644 files/pl/web/api/stylesheet/ownerrule/index.html create mode 100644 files/pl/web/api/stylesheet/parentstylesheet/index.html create mode 100644 files/pl/web/api/stylesheet/title/index.html create mode 100644 files/pl/web/api/stylesheet/type/index.html create mode 100644 files/pl/web/api/web_audio_api/index.html create mode 100644 files/pl/web/api/webgl_api/index.html create mode 100644 files/pl/web/api/webgl_api/tutorial/index.html create mode 100644 files/pl/web/api/window/alert/index.html create mode 100644 files/pl/web/api/window/applicationcache/index.html create mode 100644 files/pl/web/api/window/clearinterval/index.html create mode 100644 files/pl/web/api/window/cleartimeout/index.html create mode 100644 files/pl/web/api/window/closed/index.html create mode 100644 files/pl/web/api/window/content/index.html create mode 100644 files/pl/web/api/window/controllers/index.html create mode 100644 files/pl/web/api/window/crypto/index.html create mode 100644 files/pl/web/api/window/defaultstatus/index.html create mode 100644 files/pl/web/api/window/directories/index.html create mode 100644 files/pl/web/api/window/document/index.html create mode 100644 files/pl/web/api/window/dump/index.html create mode 100644 files/pl/web/api/window/focus/index.html create mode 100644 files/pl/web/api/window/frameelement/index.html create mode 100644 files/pl/web/api/window/frames/index.html create mode 100644 files/pl/web/api/window/getselection/index.html create mode 100644 files/pl/web/api/window/index.html create mode 100644 files/pl/web/api/window/localstorage/index.html create mode 100644 files/pl/web/api/window/name/index.html create mode 100644 files/pl/web/api/window/navigator/index.html create mode 100644 files/pl/web/api/window/onload/index.html create mode 100644 files/pl/web/api/window/open/index.html create mode 100644 files/pl/web/api/window/opendialog/index.html create mode 100644 files/pl/web/api/window/opener/index.html create mode 100644 files/pl/web/api/window/prompt/index.html create mode 100644 files/pl/web/api/window/requestanimationframe/index.html create mode 100644 files/pl/web/api/window/resizeby/index.html create mode 100644 files/pl/web/api/window/resizeto/index.html create mode 100644 files/pl/web/api/window/scroll/index.html create mode 100644 files/pl/web/api/window/scrollbylines/index.html create mode 100644 files/pl/web/api/window/scrollbypages/index.html create mode 100644 files/pl/web/api/window/scrollto/index.html create mode 100644 files/pl/web/api/window/setinterval/index.html create mode 100644 files/pl/web/api/window/settimeout/index.html create mode 100644 files/pl/web/api/window/sidebar/index.html create mode 100644 files/pl/web/api/windowbase64/atob/index.html create mode 100644 files/pl/web/api/windowbase64/btoa/index.html create mode 100644 files/pl/web/api/windowbase64/index.html create mode 100644 files/pl/web/api/zdarzenia_dotykowe/index.html create mode 100644 "files/pl/web/bezpiecze\305\204stwo/certificate_transparency/index.html" create mode 100644 "files/pl/web/bezpiecze\305\204stwo/index.html" create mode 100644 "files/pl/web/bezpiecze\305\204stwo/podstawy_bezpieczenstwa_informacji/index.html" create mode 100644 "files/pl/web/bezpiecze\305\204stwo/podstawy_bezpieczenstwa_informacji/podatnosci/index.html" create mode 100644 "files/pl/web/bezpiecze\305\204stwo/same-origin_policy/index.html" create mode 100644 "files/pl/web/bezpiecze\305\204stwo/subresource_integrity/index.html" create mode 100644 files/pl/web/css/-moz-binding/index.html create mode 100644 files/pl/web/css/-moz-border-bottom-colors/index.html create mode 100644 files/pl/web/css/-moz-border-left-colors/index.html create mode 100644 files/pl/web/css/-moz-box-align/index.html create mode 100644 files/pl/web/css/-moz-box-flex/index.html create mode 100644 files/pl/web/css/-moz-box-orient/index.html create mode 100644 files/pl/web/css/-moz-box-pack/index.html create mode 100644 files/pl/web/css/-moz-image-region/index.html create mode 100644 files/pl/web/css/-moz-outline-color/index.html create mode 100644 files/pl/web/css/-moz-outline-radius-bottomleft/index.html create mode 100644 files/pl/web/css/-moz-outline-radius-bottomright/index.html create mode 100644 files/pl/web/css/-moz-outline-radius-topleft/index.html create mode 100644 files/pl/web/css/-moz-outline-radius/index.html create mode 100644 files/pl/web/css/@document/index.html create mode 100644 files/pl/web/css/@import/index.html create mode 100644 files/pl/web/css/@media/index.html create mode 100644 files/pl/web/css/@supports/index.html create mode 100644 files/pl/web/css/_colon_-moz-last-node/index.html create mode 100644 files/pl/web/css/_colon_-moz-tree-cell-text/index.html create mode 100644 files/pl/web/css/_colon_-moz-tree-cell/index.html create mode 100644 files/pl/web/css/_colon_-moz-tree-column/index.html create mode 100644 files/pl/web/css/_colon_-moz-tree-drop-feedback/index.html create mode 100644 files/pl/web/css/_colon_-moz-tree-image/index.html create mode 100644 files/pl/web/css/_colon_-moz-tree-indentation/index.html create mode 100644 files/pl/web/css/_colon_-moz-tree-line/index.html create mode 100644 files/pl/web/css/_colon_-moz-tree-progressmeter/index.html create mode 100644 files/pl/web/css/_colon_-moz-tree-row/index.html create mode 100644 files/pl/web/css/_colon_-moz-tree-separator/index.html create mode 100644 files/pl/web/css/_colon_-moz-tree-twisty/index.html create mode 100644 files/pl/web/css/_colon_active/index.html create mode 100644 files/pl/web/css/_colon_after/index.html create mode 100644 files/pl/web/css/_colon_before/index.html create mode 100644 files/pl/web/css/_colon_empty/index.html create mode 100644 files/pl/web/css/_colon_first-child/index.html create mode 100644 files/pl/web/css/_colon_first-letter/index.html create mode 100644 files/pl/web/css/_colon_first-node/index.html create mode 100644 files/pl/web/css/_colon_hover/index.html create mode 100644 files/pl/web/css/_colon_lang/index.html create mode 100644 files/pl/web/css/_colon_last-child/index.html create mode 100644 files/pl/web/css/_colon_link/index.html create mode 100644 files/pl/web/css/_colon_not/index.html create mode 100644 files/pl/web/css/_colon_root/index.html create mode 100644 files/pl/web/css/appearance/index.html create mode 100644 files/pl/web/css/attribute_selectors/index.html create mode 100644 files/pl/web/css/azimuth/index.html create mode 100644 files/pl/web/css/background-attachment/index.html create mode 100644 files/pl/web/css/background-color/index.html create mode 100644 files/pl/web/css/background-image/index.html create mode 100644 files/pl/web/css/background-origin/index.html create mode 100644 files/pl/web/css/background-position/index.html create mode 100644 files/pl/web/css/background-size/index.html create mode 100644 files/pl/web/css/background/index.html create mode 100644 files/pl/web/css/border-bottom-color/index.html create mode 100644 files/pl/web/css/border-bottom-left-radius/index.html create mode 100644 files/pl/web/css/border-bottom-right-radius/index.html create mode 100644 files/pl/web/css/border-bottom-style/index.html create mode 100644 files/pl/web/css/border-bottom-width/index.html create mode 100644 files/pl/web/css/border-bottom/index.html create mode 100644 files/pl/web/css/border-collapse/index.html create mode 100644 files/pl/web/css/border-color/index.html create mode 100644 files/pl/web/css/border-left-color/index.html create mode 100644 files/pl/web/css/border-left-style/index.html create mode 100644 files/pl/web/css/border-left-width/index.html create mode 100644 files/pl/web/css/border-left/index.html create mode 100644 files/pl/web/css/border-radius/index.html create mode 100644 files/pl/web/css/border-right-color/index.html create mode 100644 files/pl/web/css/border-right-style/index.html create mode 100644 files/pl/web/css/border-right-width/index.html create mode 100644 files/pl/web/css/border-right/index.html create mode 100644 files/pl/web/css/border-spacing/index.html create mode 100644 files/pl/web/css/border-style/index.html create mode 100644 files/pl/web/css/border-top-color/index.html create mode 100644 files/pl/web/css/border-top-left-radius/index.html create mode 100644 files/pl/web/css/border-top-right-radius/index.html create mode 100644 files/pl/web/css/border-top-style/index.html create mode 100644 files/pl/web/css/border-top-width/index.html create mode 100644 files/pl/web/css/border-top/index.html create mode 100644 files/pl/web/css/border-width/index.html create mode 100644 files/pl/web/css/border/index.html create mode 100644 files/pl/web/css/bottom/index.html create mode 100644 files/pl/web/css/box-decoration-break/index.html create mode 100644 files/pl/web/css/box-direction/index.html create mode 100644 files/pl/web/css/box-shadow/index.html create mode 100644 files/pl/web/css/box-sizing/index.html create mode 100644 files/pl/web/css/clear/index.html create mode 100644 files/pl/web/css/clip/index.html create mode 100644 files/pl/web/css/color/index.html create mode 100644 files/pl/web/css/content/index.html create mode 100644 files/pl/web/css/counter-increment/index.html create mode 100644 files/pl/web/css/counter-reset/index.html create mode 100644 files/pl/web/css/css_colors/index.html create mode 100644 files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html create mode 100644 files/pl/web/css/css_flexible_box_layout/index.html create mode 100644 files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html create mode 100644 files/pl/web/css/css_grid_layout/index.html create mode 100644 files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html create mode 100644 files/pl/web/css/css_reference/index.html create mode 100644 files/pl/web/css/css_selectors/index.html create mode 100644 "files/pl/web/css/css_selectors/u\305\274ycie_pseudoklasy__colon_target_w_selektorach/index.html" create mode 100644 files/pl/web/css/cursor/index.html create mode 100644 "files/pl/web/css/cursor/u\305\274ycie_warto\305\233ci_url_dla_w\305\202asno\305\233ci_cursor/index.html" create mode 100644 "files/pl/web/css/cz\304\231ste_pytania_o_css/index.html" create mode 100644 files/pl/web/css/direction/index.html create mode 100644 files/pl/web/css/display/index.html create mode 100644 files/pl/web/css/dziedziczenie/index.html create mode 100644 files/pl/web/css/empty-cells/index.html create mode 100644 files/pl/web/css/float/index.html create mode 100644 files/pl/web/css/font-family/index.html create mode 100644 files/pl/web/css/font-size-adjust/index.html create mode 100644 files/pl/web/css/font-size/index.html create mode 100644 files/pl/web/css/font-stretch/index.html create mode 100644 files/pl/web/css/font-style/index.html create mode 100644 files/pl/web/css/font-variant/index.html create mode 100644 files/pl/web/css/font-weight/index.html create mode 100644 files/pl/web/css/font/index.html create mode 100644 files/pl/web/css/grid/index.html create mode 100644 files/pl/web/css/height/index.html create mode 100644 files/pl/web/css/id_selectors/index.html create mode 100644 files/pl/web/css/ime-mode/index.html create mode 100644 files/pl/web/css/index.html create mode 100644 files/pl/web/css/initial/index.html create mode 100644 files/pl/web/css/inne_zasoby/index.html create mode 100644 files/pl/web/css/letter-spacing/index.html create mode 100644 files/pl/web/css/list-style-image/index.html create mode 100644 files/pl/web/css/list-style-position/index.html create mode 100644 files/pl/web/css/list-style-type/index.html create mode 100644 files/pl/web/css/margin/index.html create mode 100644 files/pl/web/css/media_queries/index.html create mode 100644 files/pl/web/css/media_queries/using_media_queries/index.html create mode 100644 files/pl/web/css/mozilla_extensions/index.html create mode 100644 "files/pl/web/css/na_pocz\304\205tek/bloki/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/czym_jest_css/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/czytelny_css/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/dane_xml/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/grafika_svg/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/jak_dzia\305\202a_css/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/javascript/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/kaskadowo\305\233\304\207_i_dziedziczenie/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/kolor/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/listy/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/media/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/po_co_u\305\274ywa\304\207_css/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/selektory/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/style_tekstowe/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/tables/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/uk\305\202ad/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/wi\304\205zania_xbl/index.html" create mode 100644 "files/pl/web/css/na_pocz\304\205tek/xul-owe_interfejsy_u\305\274ytkownika/index.html" create mode 100644 files/pl/web/css/opacity/index.html create mode 100644 files/pl/web/css/outline-offset/index.html create mode 100644 files/pl/web/css/outline/index.html create mode 100644 files/pl/web/css/page-break-after/index.html create mode 100644 files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html create mode 100644 files/pl/web/css/right/index.html create mode 100644 files/pl/web/css/rozszerzenia_webkit/index.html create mode 100644 files/pl/web/css/selektor_klasy/index.html create mode 100644 files/pl/web/css/selektor_uniwersalny/index.html create mode 100644 files/pl/web/css/selektory_typu/index.html create mode 100644 "files/pl/web/css/skr\303\263cone_deklaracje_css/index.html" create mode 100644 files/pl/web/css/text-transform/index.html create mode 100644 files/pl/web/css/transform-function/index.html create mode 100644 files/pl/web/css/transform-function/matrix()/index.html create mode 100644 files/pl/web/css/using_css_custom_properties/index.html create mode 100644 files/pl/web/css/vertical-align/index.html create mode 100644 "files/pl/web/css/warto\305\233\304\207_pocz\304\205tkowa/index.html" create mode 100644 files/pl/web/css/white-space/index.html create mode 100644 files/pl/web/css/width/index.html create mode 100644 files/pl/web/css/word-spacing/index.html create mode 100644 files/pl/web/css/z-index/index.html create mode 100644 "files/pl/web/dost\304\231pno\305\233\304\207/an_overview_of_accessible_web_applications_and_widgets/index.html" create mode 100644 "files/pl/web/dost\304\231pno\305\233\304\207/index.html" create mode 100644 "files/pl/web/dost\304\231pno\305\233\304\207/keyboard-navigable_javascript_widgets/index.html" create mode 100644 files/pl/web/exslt/index.html create mode 100644 files/pl/web/guide/ajax/index.html create mode 100644 "files/pl/web/guide/ajax/na_pocz\304\205tek/index.html" create mode 100644 files/pl/web/guide/api/index.html create mode 100644 files/pl/web/guide/css/kolumny_css3/index.html create mode 100644 files/pl/web/guide/css/sprawdzanie_media_queries/index.html create mode 100644 files/pl/web/guide/graphics/index.html create mode 100644 files/pl/web/guide/html/editable_content/index.html create mode 100644 files/pl/web/guide/index.html create mode 100644 files/pl/web/guide/liczniki_css/index.html create mode 100644 files/pl/web/guide/performance/index.html create mode 100644 files/pl/web/html(pl)/index.html create mode 100644 files/pl/web/html(pl)/tryb_zgodnosci_oraz_tryb_standardow/index.html create mode 100644 files/pl/web/html/canvas/index.html create mode 100644 files/pl/web/html/element/a/index.html create mode 100644 files/pl/web/html/element/abbr/index.html create mode 100644 files/pl/web/html/element/acronym/index.html create mode 100644 files/pl/web/html/element/address/index.html create mode 100644 files/pl/web/html/element/applet/index.html create mode 100644 files/pl/web/html/element/aside/index.html create mode 100644 files/pl/web/html/element/b/index.html create mode 100644 files/pl/web/html/element/base/index.html create mode 100644 files/pl/web/html/element/basefont/index.html create mode 100644 files/pl/web/html/element/bdo/index.html create mode 100644 files/pl/web/html/element/bgsound/index.html create mode 100644 files/pl/web/html/element/big/index.html create mode 100644 files/pl/web/html/element/blink/index.html create mode 100644 files/pl/web/html/element/blockquote/index.html create mode 100644 files/pl/web/html/element/body/index.html create mode 100644 files/pl/web/html/element/br/index.html create mode 100644 files/pl/web/html/element/center/index.html create mode 100644 files/pl/web/html/element/cite/index.html create mode 100644 files/pl/web/html/element/code/index.html create mode 100644 files/pl/web/html/element/comment/index.html create mode 100644 files/pl/web/html/element/dd/index.html create mode 100644 files/pl/web/html/element/details/index.html create mode 100644 files/pl/web/html/element/div/index.html create mode 100644 files/pl/web/html/element/dl/index.html create mode 100644 files/pl/web/html/element/dt/index.html create mode 100644 files/pl/web/html/element/em/index.html create mode 100644 files/pl/web/html/element/head/index.html create mode 100644 files/pl/web/html/element/heading_elements/index.html create mode 100644 files/pl/web/html/element/hr/index.html create mode 100644 files/pl/web/html/element/html/index.html create mode 100644 files/pl/web/html/element/i/index.html create mode 100644 files/pl/web/html/element/iframe/index.html create mode 100644 files/pl/web/html/element/index.html create mode 100644 files/pl/web/html/element/input/button/index.html create mode 100644 files/pl/web/html/element/input/index.html create mode 100644 files/pl/web/html/element/kbd/index.html create mode 100644 files/pl/web/html/element/li/index.html create mode 100644 files/pl/web/html/element/link/index.html create mode 100644 files/pl/web/html/element/marquee/index.html create mode 100644 files/pl/web/html/element/meta/index.html create mode 100644 files/pl/web/html/element/ol/index.html create mode 100644 files/pl/web/html/element/p/index.html create mode 100644 files/pl/web/html/element/q/index.html create mode 100644 files/pl/web/html/element/ruby/index.html create mode 100644 files/pl/web/html/element/s/index.html create mode 100644 files/pl/web/html/element/samp/index.html create mode 100644 files/pl/web/html/element/section/index.html create mode 100644 files/pl/web/html/element/small/index.html create mode 100644 files/pl/web/html/element/span/index.html create mode 100644 files/pl/web/html/element/strong/index.html create mode 100644 files/pl/web/html/element/title/index.html create mode 100644 files/pl/web/html/element/tt/index.html create mode 100644 files/pl/web/html/element/ul/index.html create mode 100644 files/pl/web/html/element/video/index.html create mode 100644 files/pl/web/html/elementy_blokowe/index.html create mode 100644 files/pl/web/html/elementy_liniowe/index.html create mode 100644 files/pl/web/html/global_attributes/index.html create mode 100644 files/pl/web/html/global_attributes/pisownia/index.html create mode 100644 files/pl/web/html/global_attributes/tabindex/index.html create mode 100644 files/pl/web/html/index.html create mode 100644 files/pl/web/html/kontrola_sprawdzania_pisowni_w_formularzach_html/index.html create mode 100644 "files/pl/web/html/zarz\304\205dzanie_fokusem_w_html/index.html" create mode 100644 files/pl/web/html/znaczenie_poprawnego_komentowania/index.html create mode 100644 files/pl/web/http/authentication/index.html create mode 100644 files/pl/web/http/ciasteczka/index.html create mode 100644 files/pl/web/http/headers/cache-control/index.html create mode 100644 files/pl/web/http/headers/data/index.html create mode 100644 files/pl/web/http/headers/index.html create mode 100644 files/pl/web/http/headers/referrer-policy/index.html create mode 100644 "files/pl/web/http/http_wiadomosci_og\303\263lne/index.html" create mode 100644 files/pl/web/http/index.html create mode 100644 files/pl/web/index.html create mode 100644 files/pl/web/javascript/domkniecia/index.html create mode 100644 files/pl/web/javascript/dziedziczenie_lancuch_prototypow/index.html create mode 100644 files/pl/web/javascript/eventloop/index.html create mode 100644 files/pl/web/javascript/guide/control_flow_and_error_handling/index.html create mode 100644 files/pl/web/javascript/guide/funkcje/index.html create mode 100644 files/pl/web/javascript/guide/index.html create mode 100644 files/pl/web/javascript/guide/introduction/index.html create mode 100644 files/pl/web/javascript/guide/iterators_and_generators/index.html create mode 100644 files/pl/web/javascript/guide/loops_and_iteration/index.html create mode 100644 files/pl/web/javascript/guide/o_tym_przewodniku/index.html create mode 100644 files/pl/web/javascript/guide/obsolete_pages/index.html create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/blok_instrukcji/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/definiowanie_funkcji/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/dodawanie_obiektom_nowej_funkcjonalno\305\233ci/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/funkcje_predefiniowane/funkcja_eval/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/funkcje_predefiniowane/funkcja_isfinite/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/funkcje_predefiniowane/funkcja_isnan/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/funkcje_predefiniowane/funkcje_escape_i_unescape/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/funkcje_predefiniowane/funkcje_number_i_string/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/funkcje_predefiniowane/funkcje_parseint_i_parsefloat/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/funkcje_predefiniowane/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/instrukcje_komentarzy/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/instrukcje_manipulacji_obiektem/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/instrukcje_obs\305\202ugi_wyj\304\205tk\303\263w/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/instrukcje_obs\305\202ugi_wyj\304\205tk\303\263w/instrukcja_throw/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/instrukcje_obs\305\202ugi_wyj\304\205tk\303\263w/instrukcja_try...catch/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/instrukcje_p\304\231tli/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/instrukcje_p\304\231tli/instrukcja_break/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/instrukcje_p\304\231tli/instrukcja_continue/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/instrukcje_p\304\231tli/instrukcja_do_...while/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/instrukcje_p\304\231tli/instrukcja_for/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/instrukcje_p\304\231tli/instrukcja_label/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/instrukcje_p\304\231tli/instrukcja_while/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/instrukcje_warunkowe/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/litera\305\202y/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/o_tym_przewodniku/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/obiekty_i_w\305\202asno\305\233ci/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/obiekty_predefiniowane/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/obiekty_predefiniowane/obiekt_array/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/obiekty_predefiniowane/obiekt_boolean/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/obiekty_predefiniowane/obiekt_date/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/obiekty_predefiniowane/obiekt_function/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/obiekty_predefiniowane/obiekt_math/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/obiekty_predefiniowane/obiekt_number/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/obiekty_predefiniowane/obiekt_regexp/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/obiekty_predefiniowane/obiekt_string/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/operatory/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/operatory/operacje_na_\305\202a\305\204cuchach/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/operatory/operatory_arytmetyczne/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/operatory/operatory_logiczne/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/operatory/operatory_por\303\263wnania/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/operatory/operatory_przypisania/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/operatory/operatory_specjalne/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/podgl\304\205d_klas_liveconnect/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/podgl\304\205d_klas_liveconnect/komunikacja_mi\304\231dzy_java_a_javascript/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/podgl\304\205d_klas_liveconnect/konwersja_typu_danych/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/podgl\304\205d_klas_liveconnect/konwersja_typu_danych/konwersja_javascript_do_java/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/powr\303\263t_dziedziczenia_w\305\202asno\305\233ci/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/powr\303\263t_dziedziczenia_w\305\202asno\305\233ci/warto\305\233ci_lokalne_vs._dziedziczone/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/praca_z_przyk\305\202adem/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/praca_z_przyk\305\202adem/tworzenie_hierarchii/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/praca_z_przyk\305\202adem/w\305\202asno\305\233ci_obiektu/dodawanie_w\305\202asno\305\233ci/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/praca_z_przyk\305\202adem/w\305\202asno\305\233ci_obiektu/dziedziczenie_w\305\202asno\305\233ci/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/praca_z_przyk\305\202adem/w\305\202asno\305\233ci_obiektu/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/praca_z_wyra\305\274eniami_regularnymi/globalne_wyszukiwanie,_wielko\305\233\304\207_znak\303\263w,_wieloliniowe_wej\305\233cie/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/praca_z_wyra\305\274eniami_regularnymi/przyk\305\202ady_wyra\305\274e\305\204_regularnych/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/praca_z_zamkni\304\231ciami/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/sta\305\202e/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/tworzenie_nowych_obiekt\303\263w/definiowanie_metod/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/tworzenie_nowych_obiekt\303\263w/definiowanie_w\305\202asno\305\233ci_typu_obiektu/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/tworzenie_nowych_obiekt\303\263w/indeksowanie_w\305\202asno\305\233ci_obiektu/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/tworzenie_nowych_obiekt\303\263w/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/tworzenie_nowych_obiekt\303\263w/usuwanie_w\305\202asno\305\233ci/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/tworzenie_nowych_obiekt\303\263w/u\305\274ywanie_inicjacji_obiektu/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/tworzenie_nowych_obiekt\303\263w/zastosowanie_'this'_do_obiektu_referencji/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/tworzenie_nowych_obiekt\303\263w/zastosowanie_konstruktor\303\263w_funkcji/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/tworzenie_wyra\305\274enia_regularnego/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/unicode/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/warto\305\233ci/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/wyra\305\274enia/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/wywo\305\202anie_funkcji/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/zapisywanie_wzorca_wyra\305\274enia_regularnego/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/zastosowanie_obiektu_arguments/index.html" create mode 100644 "files/pl/web/javascript/guide/obsolete_pages/przewodnik_po_j\304\231zyku_javascript_1.5/zmienne/index.html" create mode 100644 "files/pl/web/javascript/guide/sk\305\202adnia_i_typy/index.html" create mode 100644 files/pl/web/javascript/index.html create mode 100644 "files/pl/web/javascript/na_pocz\304\205tek/index.html" create mode 100644 files/pl/web/javascript/new_in_javascript/index.html create mode 100644 "files/pl/web/javascript/new_in_javascript/nowo\305\233ci_w_javascript_1.5/index.html" create mode 100644 "files/pl/web/javascript/new_in_javascript/nowo\305\233ci_w_javascript_1.6/index.html" create mode 100644 "files/pl/web/javascript/nowo\305\233ci_w_javascript_1.4/index.html" create mode 100644 "files/pl/web/javascript/nowo\305\233ci_w_javascript_1.8/index.html" create mode 100644 files/pl/web/javascript/o_javascript/index.html create mode 100644 files/pl/web/javascript/ponowne_wprowadzenie_do_javascript/index.html create mode 100644 files/pl/web/javascript/reference/classes/extends/index.html create mode 100644 files/pl/web/javascript/reference/classes/index.html create mode 100644 files/pl/web/javascript/reference/classes/konstruktor/index.html create mode 100644 files/pl/web/javascript/reference/classes/private_class_fields/index.html create mode 100644 files/pl/web/javascript/reference/classes/public_class_fields/index.html create mode 100644 files/pl/web/javascript/reference/classes/static/index.html create mode 100644 "files/pl/web/javascript/reference/errors/brakuj\304\205cy_\305\233rednik_po_w\305\202asno\305\233ci_id/index.html" create mode 100644 files/pl/web/javascript/reference/errors/index.html create mode 100644 files/pl/web/javascript/reference/errors/invalid_array_length/index.html create mode 100644 files/pl/web/javascript/reference/errors/invalid_date/index.html create mode 100644 files/pl/web/javascript/reference/errors/json_bad_parse/index.html create mode 100644 files/pl/web/javascript/reference/errors/missing_curly_after_function_body/index.html create mode 100644 files/pl/web/javascript/reference/errors/missing_initializer_in_const/index.html create mode 100644 files/pl/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html create mode 100644 files/pl/web/javascript/reference/errors/missing_semicolon_before_statement/index.html create mode 100644 files/pl/web/javascript/reference/errors/more_arguments_needed/index.html create mode 100644 files/pl/web/javascript/reference/errors/not_a_function/index.html create mode 100644 files/pl/web/javascript/reference/errors/not_defined/index.html create mode 100644 files/pl/web/javascript/reference/errors/property_access_denied/index.html create mode 100644 files/pl/web/javascript/reference/errors/unexpected_type/index.html create mode 100644 files/pl/web/javascript/reference/functions/funkcje_strzalkowe/index.html create mode 100644 files/pl/web/javascript/reference/functions/get/index.html create mode 100644 files/pl/web/javascript/reference/functions/index.html create mode 100644 "files/pl/web/javascript/reference/functions/parametry_domy\305\233lne/index.html" create mode 100644 files/pl/web/javascript/reference/functions/set/index.html create mode 100644 files/pl/web/javascript/referencje/funkcje/arguments/callee/index.html create mode 100644 files/pl/web/javascript/referencje/funkcje/arguments/caller/index.html create mode 100644 files/pl/web/javascript/referencje/funkcje/arguments/index.html create mode 100644 files/pl/web/javascript/referencje/funkcje/arguments/length/index.html create mode 100644 files/pl/web/javascript/referencje/index.html create mode 100644 files/pl/web/javascript/referencje/komentarz/index.html create mode 100644 files/pl/web/javascript/referencje/liveconnect/index.html create mode 100644 files/pl/web/javascript/referencje/liveconnect/jsexception/index.html create mode 100644 files/pl/web/javascript/referencje/liveconnect/jsobject/index.html create mode 100644 files/pl/web/javascript/referencje/o_tym_dokumencie/index.html create mode 100644 files/pl/web/javascript/referencje/o_tym_dokumencie/konwencje_formatowania_tekstu/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/concat/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/copywithin/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/entries/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/every/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/fill/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/filter/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/find/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/findindex/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/flat/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/foreach/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/from/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/includes/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/indexof/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/isarray/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/join/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/keys/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/lastindexof/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/length/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/map/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/of/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/pop/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/prototype/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/push/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/reduce/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/reduceright/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/reverse/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/shift/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/slice/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/some/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/sort/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/splice/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/tolocalestring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/tosource/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/tostring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/unshift/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/array/values/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/arraybuffer/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/bigint/asintn/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/bigint/asuintn/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/bigint/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/bigint/tostring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/bigint/valueof/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/boolean/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/boolean/prototype/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/boolean/tosource/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/boolean/tostring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/boolean/valueof/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/dataview/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/constructor/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getdate/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getday/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getfullyear/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/gethours/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getmilliseconds/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getminutes/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getmonth/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getseconds/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/gettime/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/gettimezoneoffset/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getutcdate/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getutcday/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getutcfullyear/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getutchours/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getutcmilliseconds/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getutcminutes/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getutcmonth/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getutcseconds/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/getyear/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/now/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/parse/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/prototype/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setdate/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setfullyear/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/sethours/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setmilliseconds/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setminutes/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setmonth/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setseconds/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/settime/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setutcdate/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setutcfullyear/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setutchours/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setutcmilliseconds/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setutcminutes/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setutcmonth/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setutcseconds/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/setyear/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/togmtstring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/tojson/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/tolocaledatestring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/tolocalestring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/tolocaletimestring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/tosource/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/tostring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/toutcstring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/utc/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/date/valueof/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/decodeuri/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/decodeuricomponent/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/encodeuri/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/encodeuricomponent/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/error/columnnumber/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/error/filename/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/error/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/error/linenumber/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/error/message/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/error/name/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/error/prototype/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/error/stack/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/error/tosource/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/error/tostring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/escape/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/evalerror/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/function/apply/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/function/arguments/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/function/arity/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/function/bind/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/function/caller/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/function/displayname/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/function/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/function/length/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/function/tostring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/generator/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/infinity/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/isfinite/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/isnan/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/java/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/javaarray/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/javaarray/length/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/javaarray/tostring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/javaclass/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/javaobject/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/javapackage/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/json/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/map/clear/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/map/delete/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/map/entries/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/map/foreach/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/map/get/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/map/has/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/map/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/map/keys/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/map/set/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/map/size/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/map/values/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/abs/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/acos/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/asin/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/atan/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/atan2/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/ceil/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/cos/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/e/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/exp/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/floor/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/ln10/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/ln2/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/log/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/log10e/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/log2e/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/max/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/min/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/pi/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/pow/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/random/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/round/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/sign/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/sin/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/sqrt/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/sqrt1_2/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/sqrt2/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/math/tan/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/nan/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/netscape/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/null/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/constructor/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/epsilon/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/isinteger/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/isnan/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/max_value/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/min_value/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/nan/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/negative_infinity/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/positive_infinity/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/toexponential/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/tofixed/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/tolocalestring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/toprecision/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/number/tostring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/assign/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/constructor/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/eval/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/freeze/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/getownpropertydescriptor/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/hasownproperty/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/proto/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/prototype/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/seal/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/tolocalestring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/tosource/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/tostring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/unwatch/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/valueof/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/object/watch/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/packages/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/packages/java/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/packages/nazwaklasy/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/packages/netscape/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/packages/sun/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/parsefloat/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/parseint/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/promise/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/proxy/handler/apply/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/proxy/handler/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/proxy/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/rangeerror/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/rangeerror/prototype/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/regexp/exec/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/regexp/global/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/regexp/ignorecase/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/regexp/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/regexp/lastmatch/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/regexp/prototype/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/regexp/source/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/regexp/test/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/regexp/tosource/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/regexp/tostring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/set/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/set/set.prototype.add()/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/set/set.prototype.clear()/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/set/set.prototype.delete()/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/anchor/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/big/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/blink/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/bold/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/charat/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/charcodeat/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/concat/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/fontcolor/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/fontsize/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/fromcharcode/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/fromcodepoint/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/italics/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/link/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/prototype/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/repeat/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/search/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/slice/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/small/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/strike/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/sub/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/substr/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/substring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/sup/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/tolowercase/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/tosource/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/tostring/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/touppercase/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/string/valueof/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/sun/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/symbol/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/syntaxerror/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/uint16array/index.html create mode 100644 files/pl/web/javascript/referencje/obiekty/undefined/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/bitwise_operators/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/destructuring_assignment/index.html create mode 100644 "files/pl/web/javascript/referencje/operatory/domkni\304\231cia_wyra\305\274e\305\204/index.html" create mode 100644 files/pl/web/javascript/referencje/operatory/function_star_/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/grouping/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/logical_operators/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/new.target/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/nullish_coalescing_operator/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/object_initializer/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/operator_delete/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/operator_function/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/operator_in/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/operator_instanceof/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/operator_new/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/operator_potoku/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/operator_przecinkowy/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/operator_typeof/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/operator_void/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/operator_warunkowy/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/operatory_arytmetyczne/index.html create mode 100644 "files/pl/web/javascript/referencje/operatory/operatory_dzia\305\202aj\304\205ce_na_ci\304\205gach_znak\303\263w/index.html" create mode 100644 "files/pl/web/javascript/referencje/operatory/operatory_pami\304\231ci/index.html" create mode 100644 "files/pl/web/javascript/referencje/operatory/operatory_por\303\263wnania/index.html" create mode 100644 files/pl/web/javascript/referencje/operatory/operatory_przypisania/index.html create mode 100644 "files/pl/web/javascript/referencje/operatory/pierwsze\305\204stwo_operator\303\263w/index.html" create mode 100644 "files/pl/web/javascript/referencje/operatory/sk\305\202adnia_rozwini\304\231cia/index.html" create mode 100644 files/pl/web/javascript/referencje/operatory/spread_operator/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/super/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/this/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/yield/index.html create mode 100644 files/pl/web/javascript/referencje/operatory/yield_star_/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/block/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/break/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/class/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/const/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/continue/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/debugger/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/default/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/do...while/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/empty/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/etykieta/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/export/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/for...in/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/for/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/for_each...in/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/function/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/function_star_/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/funkcja_async/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/if...else/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/import/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/return/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/switch/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/throw/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/var/index.html create mode 100644 files/pl/web/javascript/referencje/polecenia/while/index.html create mode 100644 "files/pl/web/javascript/referencje/przestarza\305\202e_w\305\202asno\305\233ci_i_metody/index.html" create mode 100644 "files/pl/web/javascript/referencje/s\305\202owa_zarezerwowane/index.html" create mode 100644 files/pl/web/javascript/shells/index.html create mode 100644 files/pl/web/javascript/typed_arrays/index.html create mode 100644 files/pl/web/javascript/typy_oraz_struktury_danych/index.html create mode 100644 files/pl/web/javascript/wprowadzenie_do_programowania_obiektowego_w_jezyku_javascript/index.html create mode 100644 "files/pl/web/javascript/zasoby_j\304\231zyka_javascript/index.html" create mode 100644 files/pl/web/mathml/index.html create mode 100644 files/pl/web/progressive_web_apps/index.html create mode 100644 files/pl/web/security/securing_your_site/index.html create mode 100644 files/pl/web/security/securing_your_site/konfiguracja_mime_na_serwerze/index.html create mode 100644 files/pl/web/svg/element/a/index.html create mode 100644 files/pl/web/svg/element/animatetransform/index.html create mode 100644 files/pl/web/svg/element/index.html create mode 100644 "files/pl/web/svg/element/okr\304\205g/index.html" create mode 100644 files/pl/web/svg/index.html create mode 100644 files/pl/web/svg/inne_zasoby/index.html create mode 100644 files/pl/web/svg/przewodnik/index.html create mode 100644 files/pl/web/svg/przewodnik/svg_w_xhtml_-_wprowadzenie/index.html create mode 100644 files/pl/web/tutorials/index.html create mode 100644 files/pl/web/xml/index.html create mode 100644 files/pl/web/xml/wprowadzenie_do_xml-a/index.html create mode 100644 files/pl/web/xpath/funkcje/boolean/index.html create mode 100644 files/pl/web/xpath/funkcje/ceiling/index.html create mode 100644 files/pl/web/xpath/funkcje/concat/index.html create mode 100644 files/pl/web/xpath/funkcje/contains/index.html create mode 100644 files/pl/web/xpath/funkcje/count/index.html create mode 100644 files/pl/web/xpath/funkcje/current/index.html create mode 100644 files/pl/web/xpath/funkcje/document/index.html create mode 100644 files/pl/web/xpath/funkcje/element-available/index.html create mode 100644 files/pl/web/xpath/funkcje/false/index.html create mode 100644 files/pl/web/xpath/funkcje/floor/index.html create mode 100644 files/pl/web/xpath/funkcje/format-number/index.html create mode 100644 files/pl/web/xpath/funkcje/function-available/index.html create mode 100644 files/pl/web/xpath/funkcje/generate-id/index.html create mode 100644 files/pl/web/xpath/funkcje/id/index.html create mode 100644 files/pl/web/xpath/funkcje/index.html create mode 100644 files/pl/web/xpath/funkcje/key/index.html create mode 100644 files/pl/web/xpath/funkcje/lang/index.html create mode 100644 files/pl/web/xpath/funkcje/last/index.html create mode 100644 files/pl/web/xpath/funkcje/local-name/index.html create mode 100644 files/pl/web/xpath/funkcje/name/index.html create mode 100644 files/pl/web/xpath/funkcje/namespace-uri/index.html create mode 100644 files/pl/web/xpath/funkcje/normalize-space/index.html create mode 100644 files/pl/web/xpath/funkcje/not/index.html create mode 100644 files/pl/web/xpath/funkcje/number/index.html create mode 100644 files/pl/web/xpath/funkcje/position/index.html create mode 100644 files/pl/web/xpath/funkcje/round/index.html create mode 100644 files/pl/web/xpath/funkcje/starts-with/index.html create mode 100644 files/pl/web/xpath/funkcje/string-length/index.html create mode 100644 files/pl/web/xpath/funkcje/string/index.html create mode 100644 files/pl/web/xpath/funkcje/substring-after/index.html create mode 100644 files/pl/web/xpath/funkcje/substring-before/index.html create mode 100644 files/pl/web/xpath/funkcje/substring/index.html create mode 100644 files/pl/web/xpath/funkcje/sum/index.html create mode 100644 files/pl/web/xpath/funkcje/system-property/index.html create mode 100644 files/pl/web/xpath/funkcje/translate/index.html create mode 100644 files/pl/web/xpath/funkcje/true/index.html create mode 100644 files/pl/web/xpath/funkcje/unparsed-entity-url/index.html create mode 100644 files/pl/web/xpath/index.html create mode 100644 files/pl/web/xpath/osie/index.html create mode 100644 files/pl/web/xslt/apply-imports/index.html create mode 100644 files/pl/web/xslt/apply-templates/index.html create mode 100644 files/pl/web/xslt/attribute-set/index.html create mode 100644 files/pl/web/xslt/attribute/index.html create mode 100644 files/pl/web/xslt/call-template/index.html create mode 100644 files/pl/web/xslt/choose/index.html create mode 100644 files/pl/web/xslt/comment/index.html create mode 100644 files/pl/web/xslt/copy-of/index.html create mode 100644 files/pl/web/xslt/copy/index.html create mode 100644 files/pl/web/xslt/decimal-format/index.html create mode 100644 files/pl/web/xslt/element/element/index.html create mode 100644 files/pl/web/xslt/element/index.html create mode 100644 files/pl/web/xslt/fallback/index.html create mode 100644 files/pl/web/xslt/for-each/index.html create mode 100644 files/pl/web/xslt/if/index.html create mode 100644 files/pl/web/xslt/import/index.html create mode 100644 files/pl/web/xslt/include/index.html create mode 100644 files/pl/web/xslt/index.html create mode 100644 files/pl/web/xslt/key/index.html create mode 100644 files/pl/web/xslt/message/index.html create mode 100644 files/pl/web/xslt/namespace-alias/index.html create mode 100644 files/pl/web/xslt/number/index.html create mode 100644 files/pl/web/xslt/otherwise/index.html create mode 100644 files/pl/web/xslt/output/index.html create mode 100644 files/pl/web/xslt/param/index.html create mode 100644 files/pl/web/xslt/preserve-space/index.html create mode 100644 files/pl/web/xslt/processing-instruction/index.html create mode 100644 files/pl/web/xslt/sort/index.html create mode 100644 files/pl/web/xslt/strip-space/index.html create mode 100644 files/pl/web/xslt/stylesheet/index.html create mode 100644 files/pl/web/xslt/template/index.html create mode 100644 files/pl/web/xslt/text/index.html create mode 100644 files/pl/web/xslt/transform/index.html create mode 100644 files/pl/web/xslt/transformacje_xml_z_xslt/dokumentacja_xslt_xpath/index.html create mode 100644 files/pl/web/xslt/transformacje_xml_z_xslt/index.html create mode 100644 "files/pl/web/xslt/transformacje_xml_z_xslt/przeczytaj_wi\304\231cej/index.html" create mode 100644 files/pl/web/xslt/value-of/index.html create mode 100644 files/pl/web/xslt/variable/index.html create mode 100644 files/pl/web/xslt/when/index.html create mode 100644 files/pl/web/xslt/with-param/index.html (limited to 'files/pl/web') diff --git a/files/pl/web/accessibility/aria/aplikacje_internetowe_i_aria_faq/index.html b/files/pl/web/accessibility/aria/aplikacje_internetowe_i_aria_faq/index.html new file mode 100644 index 0000000000..35510946d6 --- /dev/null +++ b/files/pl/web/accessibility/aria/aplikacje_internetowe_i_aria_faq/index.html @@ -0,0 +1,299 @@ +--- +title: Aplikacje internetowe i ARIA FAQ +slug: Web/Accessibility/ARIA/Aplikacje_internetowe_i_ARIA_FAQ +tags: + - ARIA +translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ +--- +

Czym jest ARIA?

+ +

WAI-ARIA z angielskiego Accessible Rich Internet Applications (ARIA) dokumentacja stworzona przez Web Accessibility Initiative (WAI) z inicjatywy W3C. ARIA dostarcza sposób aby tworzyć aplikacje internetowe, lepiej dostępne dla osób zmagającymi się z różnorakimi problemami, włącznie z tymi, którzy muszą korzystać z dodatkowych narzędzi, które umożliwiają im użytkowanie stron internetowych takich jak: czytniki ekranowe czy szkła powiększające.

+ +

ARIA dostarcza semantykę opisującą role (eng. roles), statusy (eng. states) oraz funkcjonalności dla wielu komponentów stron internetowych takich jak: nawigacje (menu), slajdery, okna dialogowe czy drzewa rozwijane (częściej występujące w aplikacjach desktopowych). Dostarcza również informacje strukturalne, które pomagają twórcom identyfikować odpowiednie komponenty. ARIA pozwala dynamicznym aplikacjom internetowym opartym o JavaScript na interpolację z technologiami pochodzenia desktopowego.

+ +

Po więcej informacji na temat ARIA, przejdź do: Overview of accessible web applications and widgets. (TBD Polish translation).

+ +

Wsparcie dla ARIA

+ +

ARIA jest relatywnie młodą specyfikacją ale jest coraz lepiej wspierana. Posiada wsparcie głównych przeglądarek, technologii wspomagających, narzędzi JavaScript oraz aplikacji. Jednakże część użytkowników może wciąż używać starszych wersji tych narzędzi czy aplikacji. W takim przypadku możesz rozważyć implementację ARIA ulepszając swoją aplikację progresywnie, na przykład przy użyciu JavaScript, zamiast znaczników HTML w celu lepszego wsparcia dla użytkowników wciąż kożystających ze starych technologii.

+ +

Przeglądarki

+ +

ARIA posiada wsparcie następujacych przeglądarek:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NazwaWersja minimumInformacja dodatkowa
Firefox3.0+Działa z NVDA, JAWS 10+ i Orca
Chrome15+Czytniki ekranowe mogą mieć problem z Chrome 15 i starszymi
Safari4+Działa z VoiceOver od iOS5 oraz OS X Lion
Opera9.5+Wymaga VoiceOver na OS X w początkowych wersjach
Internet Explorer8+Działa z JAWS 10+ i NVDA.
+ +

W niektórych przypadkach, we wczesnych wersjach przeglądarek, wsparcie ARIA może być ograniczone, po bardziej dokładne informacje udaj się na:

+ + + +

Technologie wspomagające

+ +

Technologie wspomagające coraz częściej wspierają ARIA. Między innymi:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nazwa TechnologiiWersja minimum, podstawowe wsparcie ARIAWersja minimum dla live region i alert support
NVDA2010.2
+ (NVDA is always a free upgrade)		2011.1 dla Firefox, brak wsparcia live region dla IE z dniem 2011.2.
Orca? (TBD)? (TBD)
VoiceOverOSX 10.5,
+ iOS 4		OS X 10.7
+ iOS 5
JAWS810
Window-Eyes7? (TBD)
ZoomText?? (TBD)
+ +

Wczesne wersje tych narzędzi często mają częściową implementację ARIA lub zawierającą błędy.

+ +

Na temat wsparcia JAWS dla ARIA, przeczytaj artykuł Paciello Group: JAWS Support for ARIA.

+ +

Narzędzia JavaScript

+ +

Role (roles), statusy (states), właściwości (properties) zostały dodane do wielu popularnych narzędzi JavaScript do tworzenia komponentów webowych, między innymi:

+ + + +

Po więcej informacji na temat dostępności ARIA w narzędziach JavaScript, przeczytaj:

+ + + +

ARIA w akcji

+ +

Przykład atrybutu ARIA dla paska postępu:

+ +
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />
+ +

Ten pasek postępu jest zbudowany z <div> z atrybutami ARIA określającymi role i właściwości. W tym przykładzie role="progressbar" daje informację przeglądarce, że działanie paska postępu jest sterowane w JavaScript. Atrybuty aria-valuemin oraz aria-valuemax określają minimalną i maksymalną wartość dla paska postępu, a aria-valuenow opisuje aktualny jego status.

+ +

Atrybuty ARIA umieszczone wewnątrz tagu HTML mogą być dodawane i aktualizowane w JavaScript, kod poniżej:

+ +
// Szukam elementu <div> w DOM.
+var progressBar = document.getElementById("percent-loaded");
+
+// Ustawiam role i statusy ARIA, aby technologie pomocnicze miały informację na temat komponentu.
+progressBar.setAttribute("role", "progressbar");
+progressBar.setAttribute("aria-valuemin", 0);
+progressBar.setAttribute("aria-valuemax", 100);
+
+// Tworzę funkcję aktualizującą pasek postępu,
+// którą następnie wywołam w odpowiednim miejscu aby zaktualizować pasek postępu
+function updateProgress(percentComplete) {
+  progressBar.setAttribute("aria-valuenow", percentComplete);
+}
+ +

Czy ARIA zmieni styl mojej strony lub działanie?

+ +

Nie. ARIA jest przeznaczona tylko dla API technologi pomocniczych (assistive technologies), nie ma wpływu na DOM czy style. ARIA jest tylko dodatawanym do elementu HTML przez developera atrybutem, który ma wspomóc AT API (assistive technologi API). Mimo, że sama ARIA nie zmienia stylów to w połączeniu z atrybutem HTML, możemy odpowiednio stylować elementy ARIA w CSS:

+ +
.tab-panel[aria-hidden="true"] {
+  display: none;
+  }
+
+.tab-panel[aria-hidden="false"] {
+  display: block;
+  }
+
+ +

Co z walidacją?

+ +

Nowe atrybuty ARIA, jak role czy prefiks aria- nie są oficjalnie częścią specyfikacji HTML 4 czy XHTML 4. Przez co mogą nie przechodzić walidacji W3C: W3C's Markup Validator.

+ +

Jednym z rozwiązań tego problemu jest umieszczenie roli i statusów ARIA przy pomocy JavaScript jak zostało pokazane w powyższym przykładzie ARIA w akcji. Strona teoretycznie będzie niezgodna ze standardem ale przejdzie walidację.

+ +

Problem rozwiązuje się w HTML5, który zawiera wbudowane wsparcie dla ARIA. Walidator W3C's HTML5 znajdzie nawet nieprawidłowe użycie ARIA na stronie HTML5.

+ +

Co w związku z HTML5 i ARIA?

+ +

HTML5 przedstawia wiele nowych tagów. Kilka z nich dotyczy bezpośrednio roli ARIA, jak na przykład nowy element <progress>. W przypadkach gdy przeglądarka wspiera tag HTML5 to również dotyczy ARIA, w takich przypadkach zazwyczaj nie ma potrzeby dodawania ról i statusów do elementu. ARIA zawiera jednak wiele ról, statusów i właściwości, które nie są dostępne w HTML5. W takim przypadku developer HTML5 może z nich korzystać. Po więcej informacji można się udać do artykułu Steve'a Faulkner'a o relacji HTML5 i ARIA.

+ +

Łagodne zejście z HTML5 do ARIA

+ +

Przy tworzeniu aplikacji kompatybilnej HTML5 możesz zastosować w swoim kodzie łagodne zejście do ARIA w przypadku braku wsparcia dla przeglądarku. Używając przykładu z paskiem postępu, zastosować łagodne zejście, gdy tag <progressbar> nie jest wspierany.

+ +

Przykład markupu HTML5 dla paska postępu:

+ +
<!DOCTYPE html>
+<html>
+  <head><title>Gracefully degrading progress bar</title></head>
+  <body>
+    <progress id="progress-bar" value="0" max="100">0% complete</progress>
+    <button id="update-button">Update</button>
+ </body>
+</html>
+
+ +

... i kod JavaScript zapewniający wsparcie dla starszych przeglądarek:

+ +
var progressBar = document.getElementById("progress-bar");
+
+// Sprawdza wsparcie tagu <progress> dla przeglądarki.
+var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined");
+
+function setupProgress() {
+  if (!supportsHTML5Progress) {
+    // HTML5 <progress> nie jest wspierany więc dodaje.
+    // ARIA role i statusy do elementu.
+    progressBar.setAttribute("role", "progressbar");
+    progressBar.setAttribute("aria-valuemin", 0);
+    progressBar.setAttribute("aria-valuemax", 100);
+  }
+}
+
+function updateProgress(percentComplete) {
+  if (!supportsHTML5Progress) {
+    // HTML5 <progress> nie jest wspierany przez przeglądarkę,
+    // więc musimy zaktualizować aria-valuenow atrybut
+    progressBar.setAttribute("aria-valuenow", percentComplete);
+  } else {
+    // HTML5 <progress> jest wspierany, więc aktualizujemy atrybut value.
+    progressBar.setAttribute("value", percentComplete);
+  }
+
+  progressBar.textContent = percentComplete + "% complete";
+}
+
+function initDemo() {
+  setupProgress(); // Instalacja paska postępu.
+
+  // Dodajemy click handler do przycisku, który zaktualizuje pasek postępu do 75%.
+  document.getElementById("update-button").addEventListener("click", function (e) {
+    updateProgress(75);
+    e.preventDefault();
+  }, false);
+}
+initDemo();
+
+ +

Jak działają technologie pomocnicze (assistive technologies)?

+ +

Technologie pomocnicze używają używają API wbudowane w każdy system operacyjny, zaprojektowane tak aby opisywać role, statusy oraz strukturę interfejsu użytkownika. Na przykład: czytnik ekranu używa API do czytania interfejsu użytkownika przy pomocy silnika text-to-speech (tekst do mowy), a szkło powiększające używa go do uwyraźnienia  ważnych elementów na ekranie,  klawiatura ekranowa może używać API aby dostosować się do aktualnego kontekstu lub interfejsu. Technologie pomocnicze często korzystają z DOM przez API, aby najlepiej zrozumieć semantykę i atrybuty na stronie.

+ +

ARIA jest mostem pomiędzy DOM a desktopem. Przeglądarki wskazują elementy ARIA do API technologii pomocniczych aby wyglądały jak komponenty natywne. W rezultacie użytkownik dostaje bardziej zwarty UX, gdzie komponenty JavaScript można porównywać do odpowiedników desktopowych.

+ +

Jak można przetestować ARIA? Są do tego darmowe narzędzia?

+ +

Istnieją narzędzia do sprawdzania i debugowania ARIA:

+ + + +

Są również darmowe open source'owe czytniki ekranu, które mogą być użyte do testowania ARIA:

+ + + +

Kiedy testujesz ARIA pamiętaj:

+ +
    +
  1. Nieformalne testowanie przy pomocy czytników ekranu, nigdy nie zastąpi informacji zwrotnej, testowania i pomocy prawdziwych użytkowników
    2. +
  2. Czytniki ekranu to nie wszystko. Spróbuj testować przy pomocy różnych metod użyczyteczności i dostępności.
    3. +
+ +

Inne pomocne narzędzia i techniki testowania ARIA:

+ + + +

Gdzie można pogadać i dopytać o ARIA?

+ + + +

Gdzie się więcej dowiem o ARIA?

+ + diff --git a/files/pl/web/accessibility/aria/index.html b/files/pl/web/accessibility/aria/index.html new file mode 100644 index 0000000000..55e431478e --- /dev/null +++ b/files/pl/web/accessibility/aria/index.html @@ -0,0 +1,127 @@ +--- +title: ARIA +slug: Web/Accessibility/ARIA +tags: + - ARIA + - Accessibility + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Accessibility/ARIA +--- +

Accessible Rich Internet Applications (ARIA) jest zbiorem atrybutów, które umożliwiają rozwój aplikacji webowych (szczególnie tych, które wykorzystują AJAX, Javascript itp.) w taki sposób, iż są one przyjaźniejsze ludziom z niepełnosprawnościami.  Dla przykładu, ARIA umożliwia bezproblemową nawigację po stronie, pomoce przy typowaniu, przyjazne użytkownikowi aktualizacje treści, i wiele, wiele więcej.

+ +

ARIA jest zbiorem specjalnych atrybutów poprawiajacych dostępność aplikacji, które mogą zostać dodane do dowolnego języka znaczników. Jednakże atrybuty te są przystosowane głównie pod HTML, co powoduje, iż są one wyłącznie tam stosowane.
+ Atrybut role definiuje specjalne role dla obiektów (takich jak article , alert , slider , czy button ). Dodatkowo atrubuty ARIA dostarczają inne przydatne opcje, takie jak opis do form , albo właściwą długość pasku postępu (np. instalacji, aktualizacji lub innego działania). Atrybuty aria moga także zostać użyte w celu aktywacji, deaktywacji, czy ustalenia innego stanu obiektów (np. stanu button)
+  

+ +

ARIA jest zaimplementowana w najbardziej popularnych przeglądarkach i czytnikach ekranowych. Jednakże, implementacje różnią się między sobą i starsze technologie mogą takich atrybutów dobrze nie wspierać. Oczywiście jeśli w ogóle wspierają.

+ +
+

Note: Please contribute and make ARIA better for the next person! Not enough time? Send suggestions to Mozilla's accessibility mailing list, or #accessibility IRC channel.

+
+ +
+
+

Zacznij z ARIĄ

+ +
+
Instrukcje do ARI
+
A quick introduction to making dynamic content accessible with ARIA. See also the classic ARIA intro by Gez Lemon, from 2008.
+
Web Applications and ARIA FAQ
+
Answers common questions about WAI-ARIA and why it's needed to make web applications accessible.
+
Videos of Screen Readers Using ARIA
+
See both real and simplified examples from around the web, including "before" and "after" ARIA videos.
+
Using ARIA in HTML
+
A practical guide for developers. It suggests what ARIA attributes to use on HTML elements. Suggestions are based on implementation realities.
+
+ +

Simple ARIA Enhancements

+ +
+
Enhancing Page Navigation with ARIA Landmarks
+
A nice intro to using ARIA landmarks to improve web page navigation for screen reader users. See also, ARIA landmark implementation notes and examples on real sites (updated as of July 2011).
+
Improving Form Accessibility
+
ARIA is not just for dynamic content! Learn how to improve accessibility of HTML forms using additional ARIA attributes.
+
Live regions (work-in-progress)
+
Live regions provide suggestions to screen readers about how to handle changes to the contents of a page.
+
Using ARIA Live Regions to Announce Content Changes
+
A quick summary of live regions, by the makers of JAWS screen reader software. Live regions are also supported by NVDA with Firefox, and VoiceOver with Safari.
+
+ +

ARIA for Scripted Widgets

+ +
+
Keyboard Navigation and Focus for JavaScript Widgets
+
The first step in developing an accessible JavaScript widget is to make it keyboard navigable. This article steps through the process. The Yahoo! focus management article is a great resource as well.
+
Style Guide for Keyboard Navigation
+
A challenge with ARIA is getting developers to implement consistent behavior — clearly best for users. This style guide describes the keyboard interface for common widgets.
+
+ +

ARIA Resources

+ +
+
Widget Techniques, Tutorials, and Examples
+
Need a slider, a menu, or another kind of widget? Find resources here.
+
ARIA-Enabled JavaScript UI Libraries
+
If you're starting a new project, choose a UI widget library with ARIA support already built-in. Warning: this is from 2009 — content should be moved to an MDN page where it can be updated.
+
+
+ +
+

Mailing List

+ +
+
Free ARIA Google Group
+
A place to ask questions about ARIA, as well as make suggestions for improving the ARIA documentation found on these pages.
+
+ +

Blogs

+ +

ARIA information on blogs tends to get out of date quickly. Still, there is some great info out there from other developers making ARIA work today.

+ +

Paciello Group

+ +

Accessible Culture

+ +

Filing Bugs

+ +

File ARIA bugs on browsers, screen readers, and JavaScript libraries.

+ +

Examples

+ +
+
ARIA Examples Library
+
A set of barebones example files which are easy to learn from.
+
Accessible JS Widget Library Demos
+
jQuery, YUI
+
Yahoo! Mail
+
Yahoo! puts it all together with Yahoo! Mail, a web app that almost looks like a native app. It works very well. As a review of Yahoo! Mail by screen reader Marco Zehe says, "Keep up the good work!".
+
Yahoo! Search
+
Yahoo! has done an amazing job of advancing ARIA here, by exercising ARIA's full capabilities and sharing their techniques. Yahoo! Search uses a combination of ARIA landmarks, live regions, and widgets.
+
+ +

Standardization Efforts

+ +
+
WAI-ARIA Activities Overview at W3C
+
Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)
+
WAI-ARIA Specification
+
The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.
+
WAI-ARIA Authoring Practices
+
+

Like the W3C WAI-ARIA specification, the official best practices represents a future ideal — a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.

+ +

For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.

+
+
Open AJAX Accessibility Task Force
+
The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.
+
Under Construction: WCAG 2.0 ARIA Techniques
+
The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is important when regulations or policies are based on WCAG.
+
+
+
+ + + +

Accessibility, AJAX, JavaScript

diff --git a/files/pl/web/api/attr/index.html b/files/pl/web/api/attr/index.html new file mode 100644 index 0000000000..8088fae8a9 --- /dev/null +++ b/files/pl/web/api/attr/index.html @@ -0,0 +1,164 @@ +--- +title: Attr +slug: Web/API/Attr +tags: + - API + - DOM +translation_of: Web/API/Attr +--- +
{{APIRef("DOM")}}
+ +

Interfejs Attr reprezentuje jeden z atrybutów elementu DOM jako obiekt.W większości metod DOM otrzymujesz wartość atrybutu bezpośrednio jako ciąg znaków (np., {{domxref("Element.getAttribute()")}}), oprócz niektórych funkcji (np., {{domxref("Element.getAttributeNode()")}}) lub sposobów iteracji zwracających typ Attr.

+ +

{{InheritanceDiagram}}

+ +
Warning: Poczynając od Gecko 7.0 {{geckoRelease("7.0")}}, pojawia się szereg przestarzałych właściwości i metod wyświetlających ostrzeżenia w konsoli.  Powinieneś odpowiednio przejrzeć swój kod. Zobacz  Przestarzałe właściwości i metody aby zobacyć pełną listę.
+ +

Właściwości

+ +
+
{{domxref("Attr.name", "name")}} {{readOnlyInline}}
+
Nazwa atrybutu.
+
{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} reprezentujący przestrzeń nazw URI atrybutu lub null jeśli nie ma określonej przestrzeni nazw.
+
{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} reprezentujący lokalną część kwalifikowanej przestrzeni nazw atrybutu.
+
{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} reprezentujący prefiks przestrzeni nazw atrybutu lub null jeśli nie określono prefiksu.
+
{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}
+
+

Element posiadający atrybut.

+ +
+

Note: DOM Level 4 usunął tę właściwość. Założono, że skoro otrzymujesz  Attr z  {{domxref("Element")}}, powinieneś znać powiązany element.
+ Ponieważ nie jest to prawdą w przypadkach, takich jak obiekty Attr zwracane przez {{domxref("Document.evaluate")}}, DOM Living Standard wprowadził tę właściwość ponownie.

+ +

Gecko wyświetla notę o deprecjonowaniu poczynając od Gecko 7.0 {{geckoRelease("7.0")}}. Nota została usunięta w in Gecko 49.0 {{geckoRelease("49.0")}}.

+
+
+
{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}
+
Ta właściwosć zawsze zwraca true. Pierwotnie, zwracała true jeśli właściwość była określona wprost w kodzie źródłowym lub poprzez skrypt a false jeśli była domyślna lub określona w DTD.
+
{{domxref("Attr.value", "value")}}
+
Wartość atrybutu.
+
+ +
+

Note: DOM Level 3 zdefiniował namespaceURI, localName i prefix w interfejsie{{domxref("Node")}}. W DOM4 zostały przeniesione do Attr.

+ +

Ta zmiana została zaimplementowana w Chrome 46.0 i Firefox od wersji 48.0.

+
+ +

Przestarzałe właściwości i metody

+ +

Następujące właściwości są przestarzałe. Kiedy to możliwe, odpowiednie zastępcze właściwości są podane.

+ +
+
attributes
+
Obecnie zawsze zwraca NULL.
+
childNodes {{obsolete_inline(14)}}
+
Ta właściwość obecnie zawsze zwraca pusty {{domxref("NodeList")}}.
+
firstChild {{obsolete_inline(14)}}
+
Obecnie zawsze zwraca NULL.
+
isId {{readOnlyInline}}
+
Wskazuje czy atrybut jest atrybutem "ID". An "ID" jest atrybutem, którego wartość powinna być unikalna w całym dokumencie DOM. W HTML DOM, "id" to atrybut ID, ale XML może definiować inne. To, czy atrybut jest unikalny, czy nie, jest często determinowane przez {{Glossary("DTD")}} lub inny schemat dokumentu.
+
lastChild {{obsolete_inline(14)}}
+
Obecnie zawsze zwraca NULL.
+
nextSibling
+
Obecnie zawsze zwraca NULL.
+
nodeName
+
Zamiast tego używaj {{domxref("Attr.name")}} .
+
nodeType
+
Obecnie zawsze zwraca 2 (ATTRIBUTE_NODE).
+
nodeValue
+
Zamiast tego używaj {{domxref("Attr.value")}}.
+
ownerDocument
+
Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.
+
parentNode
+
Obecnie zawsze zwraca NULL.
+
previousSibling
+
Obecnie zawsze zwraca NULL.
+
schemaTypeInfo {{obsolete_inline}} {{readOnlyInline}}
+
Typ informacji powiązane z tym atrybutem. Podczas gdy typ informacji zawierany przez ten atrybut ma gwarantowaną poprawność po waładowaniu dokumentu lub wywołaniu {{domxref("Document.normalizeDocument")}}, ta właściwość może nie być wiarygodna jeśli węzeł został przeniesiony.
+
specified
+
Obecnie zawsze zwraca true.
+
textContent
+
Zamiast tego używaj {{domxref("Attr.value")}}.
+
+ +

Poniższe metody są przestarzałe:

+ +
+
appendChild() {{obsolete_inline(14)}}
+
Zamiast tego, modyfikuj wartość {{domxref("Attr.value")}}.
+
cloneNode()
+
Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.
+
createAttribute()
+
Zamiast tego używaj {{domxref("Element.setAttribute()")}}.
+
createAttributeNS()
+
Zamiast tego używaj {{domxref("Element.setAttributeNS()")}}.
+
getAttributeNode()
+
Zamiast tego używaj {{domxref("Element.getAttribute()")}}.
+
getAttributeNodeNS()
+
Zamiast tego używaj {{domxref("Element.getAttributeNS()")}}.
+
hasAttributes() {{obsolete_inline("21.0")}}
+
Obecnie zawsze zwraca false.
+
hasChildNodes()
+
Obecnie zawsze zwraca false.
+
insertBefore()
+
Zamiast tego modyfikuj wartość {{domxref("Attr.value")}}.
+
isSupported()
+
Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.
+
isEqualNode()
+
Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.
+
normalize()
+
Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.
+
removeAttributeNode()
+
Zamiast tego używaj {{domxref("Element.removeAttribute()")}}.
+
removeChild() {{obsolete_inline(14)}}
+
Zamiast tego, modyfikuj wartość {{domxref("Attr.value")}} instead.
+
replaceChild() {{obsolete_inline(14)}}
+
Zamiast tego, modyfikuj wartość {{domxref("Attr.value")}} instead.
+
setAttributeNode()
+
Zamiast tego używaj {{domxref("Element.setAttribute()")}}.
+
setAttributeNodeNS()
+
Zamiast tego używaj {{domxref("Element.setAttributeNS()")}}.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#interface-attr", "Attr")}}{{Spec2("DOM WHATWG")}}Przywraca właściwość ownerElement 
{{SpecName("DOM4", "#interface-attr", "Attr")}}{{Spec2("DOM4")}} +
    +
  • Przenosi namespaceURI, prefix i localName z {{domxref("Node")}} do tego API i usuwa ownerElement, schemaTypeInfo oraz isId.
    • +
+
{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}{{Spec2("DOM3 Core")}}Wstępna definicja
+ +

Kompatybilność z przeglądarkami

+ + + +

{{Compat("api.Attr")}}

diff --git a/files/pl/web/api/audiobuffer/index.html b/files/pl/web/api/audiobuffer/index.html new file mode 100644 index 0000000000..ea611b7250 --- /dev/null +++ b/files/pl/web/api/audiobuffer/index.html @@ -0,0 +1,174 @@ +--- +title: AudioBuffer +slug: Web/API/AudioBuffer +translation_of: Web/API/AudioBuffer +--- +

{{APIRef("Web Audio API")}}

+ +
+

Interfejs AudioBuffer przedstawia krótki zasób dźwiękowy znajdujący się w pamięci, stworzony z pliku dźwiękowego za pomocą metody {{ domxref("AudioContext.decodeAudioData()") }} lub z surowych danych przy użyciu {{ domxref("AudioContext.createBuffer()") }}. Dane audio umieszczone w AudioBuffer mogą być następnie odtwarzane przez przekazanie ich do {{ domxref("AudioBufferSourceNode") }}.

+
+ +

Obiekty tego typu są przeznaczone do przechowywania drobnych fragmentów dźwiękowych, zwykle mniej niż 45s. W przypadku dłuższych dźwięków, obiekty implementujące {{domxref("MediaElementAudioSourceNode")}} są bardziej odpowiednie. Bufor zawiera dane w następującym formacie: IEEE754 32 -bitowy liniowy PCM bez przeplotu o nominalnym zakresie między -1 i +1 , czyli 32-bitowy zmiennoprzecinkowy bufor z próbkami o znormalizowanych wartościach między -1.0 a 1.0. Jeśli {{domxref("AudioBuffer")}} ma wiele kanałów, są one przechowywane w osobnym buforze.

+ +

Właściwości

+ +
+
{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}
+
Zwraca wartość typu float reprezentującą częstotliwość próbkowania danych PCM przechowywanych w buforze wyrażoną w próbkach na sekundę.
+
{{domxref("AudioBuffer.length")}} {{readonlyInline}}
+
Zwraca wartość typu int reprezentującą wielkość danych PCM przechowywanych w buforze wyrażoną jako liczba okien próbek.
+
{{domxref("AudioBuffer.duration")}} {{readonlyInline}}
+
Zwraca wartość typu double reprezentującą czas trwania danych PCM zapisanych w buforze wyrażoną w sekundach.
+
{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}
+
Zwraca wartość typu int reprezentującą liczbę pojedynczych kanałów audio opisanych przez dane PCM zapisanych w buforze.
+
+ +

Metody

+ +
+
{{domxref("AudioBuffer.getChannelData()")}}
+
Zwraca tablicę {{jsxref("Float32Array")}} zawierającą dane PCM powiązane z kanałem audio określonym jako parametr channel (0 reprezentuje pierwszy kanał).
+
{{domxref("AudioBuffer.copyFromChannel()")}}
+
Kopiuje próbki z danego kanału w AudioBuffer do danej tablicy.
+
{{domxref("AudioBuffer.copyToChannel()")}}
+
Kopiuje próbki z danej tablicy do danego kanału w AudioBuffer.
+
+ +

Przykład

+ +

Następujący przykład kodu pokazuje jak stworzyć AudioBuffer i wypełnić go białym szumem. Pełną wersję kodu można znależć w naszym repozytorium audio-buffer demo; jest dostępna także uruchomiona na żywo wersja running live version.

+ +
// Stereo
+var channels = 2;
+
+// Tworzenie pustego, dwusekundowego buffera stereo
+// na wskaźniku audio z AudioContext
+var frameCount = audioCtx.sampleRate * 2.0;
+var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // Wypełnienie buffera białym szumem;
+  // Wartość losowa pomiędzy -1.0 a 1.0
+  for (var channel = 0; channel < channels; channel++) {
+    // To daje nam aktualną tablice zawierającą dane
+    var nowBuffering = myArrayBuffer.getChannelData(channel);
+    for (var i = 0; i < frameCount; i++) {
+      // Math.random() znajduje się w przedziale [0; 1.0]
+      // audio musi znajdować się w [-1.0; 1.0]
+      nowBuffering[i] = Math.random() * 2 - 1;
+    }
+  }
+
+  // Dostarczenie AudioBufferSourceNode.
+  // To jest AudioNode dedykowane do używania wtedy, kiedy chcemy odtworzyć dany AudioBuffer
+  var source = audioCtx.createBufferSource();
+
+  // Określanie buffera w AudioBufferSourceNode
+  source.buffer = myArrayBuffer;
+
+  // Podłączanie AudioBufferSourceNode do
+  // destynacji, dzięki czemu możemy usłyszeć dźwięk
+  source.connect(audioCtx.destination);
+
+  // start odtwarzania źródła
+  source.start();
+
+}
+
+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('Web Audio API', '#the-audiobuffer-interface', 'AudioBuffer')}}{{Spec2('Web Audio API')}}Definicja wstępna.
+ +

Kompatybilność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Wsparcie podstawowe14 {{property_prefix("webkit")}}{{CompatGeckoDesktop(25)}}{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22		6 {{property_prefix("webkit")}}
copyFromChannel() and copyToChannel(){{CompatUnknown}}{{CompatGeckoDesktop(27)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Wsparcie podstawowe{{CompatNo}}28 {{property_prefix("webkit")}}{{CompatGeckoMobile(25)}}1.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
copyFromChannel() and copyToChannel(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(27)}} {{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Zobacz także

+ + diff --git a/files/pl/web/api/audiocontext/createdynamicscompressor/index.html b/files/pl/web/api/audiocontext/createdynamicscompressor/index.html new file mode 100644 index 0000000000..7788cc64a9 --- /dev/null +++ b/files/pl/web/api/audiocontext/createdynamicscompressor/index.html @@ -0,0 +1,142 @@ +--- +title: AudioContext.createDynamicsCompressor() +slug: Web/API/AudioContext/createDynamicsCompressor +translation_of: Web/API/BaseAudioContext/createDynamicsCompressor +--- +

{{ APIRef("Web Audio API") }}

+ +
+

Metoda createDynamicsCompressor() interfejsu domxref("AudioContext") }} jest używana do utworzenia {{domxref("DynamicsCompressorNode")}}, który może być zastosowany do dodawania kompresji na sygnał audio.

+
+ +

Kompresja zcisza najgłośniejsze fragmenty sygnału i podgłaśnia najcichsze. W rezultacie możemy uzyskać głośniejszy, bogatszy i pełniejszy dźwięk. Jest to szczególnie istotne w przypadku gier oraz aplikacji muzycznych, w których duża ilość dźwięków jest odtwarzana jednocześnie oraz tam, gdzie chcesz kontrolować poziom sygnału głównego i unikać zniekształceń sygnału wyjściowego audio.

+ +

Składnia

+ +
var audioCtx = new AudioContext();
+var compressor = audioCtx.createDynamicsCompressor();
+ +

Zwracanie wartości funkcji (return)

+ +

{{domxref("DynamicsCompressorNode")}}.

+ +

Przykład

+ +

Poniższy kod przedstawia przykład prostego zastosowania createDynamicsCompressor() w celu dodania kompresji do ścieżki dźwiękowej. Pełniejszy przykład znajdziesz klikając na nasz przykład podstawowego kompresora (zobacz kod źródłowy).

+ +
// utworzenie MediaElementAudioSourceNode
+// wprowadzenie HTMLMediaElement
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// utworzenie węzła kompresora (compressor node)
+var compressor = audioCtx.createDynamicsCompressor();
+compressor.threshold.value = -50;
+compressor.knee.value = 40;
+compressor.ratio.value = 12;
+compressor.reduction.value = -20;
+compressor.attack.value = 0;
+compressor.release.value = 0.25;
+
+// podłączenie AudioBufferSourceNode do destynacji
+source.connect(audioCtx.destination);
+
+button.onclick = function() {
+  var active = button.getAttribute('data-active');
+  if(active == 'false') {
+    button.setAttribute('data-active', 'true');
+    button.innerHTML = 'Remove compression';
+
+    source.disconnect(audioCtx.destination);
+    source.connect(compressor);
+    compressor.connect(audioCtx.destination);
+  } else if(active == 'true') {
+    button.setAttribute('data-active', 'false');
+    button.innerHTML = 'Add compression';
+
+    source.disconnect(compressor);
+    compressor.disconnect(audioCtx.destination);
+    source.connect(audioCtx.destination);
+  }
+}
+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('Web Audio API', '#widl-AudioContext-createDynamicsCompressor-DynamicsCompressorNode', 'createDynamicsCompressor()')}}{{Spec2('Web Audio API')}} 
+ +

Zgodność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CechaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Wsparcie podstawowe{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CechaAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Wsparcie podstawowe{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

Zobacz również

+ + diff --git a/files/pl/web/api/audiocontext/index.html b/files/pl/web/api/audiocontext/index.html new file mode 100644 index 0000000000..db5d07d69c --- /dev/null +++ b/files/pl/web/api/audiocontext/index.html @@ -0,0 +1,293 @@ +--- +title: AudioContext +slug: Web/API/AudioContext +translation_of: Web/API/AudioContext +--- +

{{APIRef("Web Audio API")}}

+ +
+

Interfejs AudioContext reprezentuje wykres przetwarzania sygnału audio, utworzonego z połączonych ze sobą modułów audio, przy czym każdy z tych modułów reprezentowany jest przez {{domxref("AudioNode")}}. Kontekst audio kontroluje zarówno powstawanie zawartych w nim powiązań, jak również realizację przetwarzania audio lub dekodowania.  Niezbędne jest stworzenie AudioContext przez wprowadzeniem czegokolwiek innego, jako że wszystko dzieje się w kontekście.

+
+ +

AudioCintext może stanowić cel (target) eventów, dlatego implementuje inferfejs {{domxref("EventTarget")}}.

+ +

Konstruktor

+ +
+
{{domxref("AudioContext.AudioContext", "AudioContext()")}}
+
Tworzy i zwraca nowy obiekt AudioContext.
+
+ +

Właściwości

+ +
+
{{domxref("AudioContext.currentTime")}} {{readonlyInline}}
+
Zwraca double reprezentujące stale liczony czas w sekundach, używany do przyporządkowywania. Rozpoczyna się od 0.
+
{{domxref("AudioContext.destination")}} {{readonlyInline}}
+
Zwraca {{domxref("AudioDestinationNode")}} reprezentujące ostateczny cel wszyskich audio w kontekście. Należy traktować go jako urządzenie interpretujące audio.
+
{{domxref("AudioContext.listener")}} {{readonlyInline}}
+
Zwraca obiekt {{domxref("AudioListener")}}, używany do przestrzenności 3D.
+
{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}
+
Zwraca float reprezentujący wskaźnik próbkowania (w samplach na sekundę) używany we wszystkich połączeniach w tym kontekście. Wskaźnik próbkowania {{domxref("AudioContext")}} nie może być zmieniany.
+
{{domxref("AudioContext.state")}} {{readonlyInline}}
+
Zwraca aktualny status AudioContext.
+
{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}
+
Używany do zwracania kanału audio, tak by grany dźwięk w {{domxref("AudioContext")}} był poprawnie odtwarzany na urządządzeniu Firefox OS.
+
+ +

Event handlers

+ +
+
{{domxref("AudioContext.onstatechange")}}
+
An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the AudioContext's state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}).
+
+ +

Methods

+ +

Also implements methods from the interface {{domxref("EventTarget")}}.

+ +
+
{{domxref("AudioContext.close()")}}
+
Closes the audio context, releasing any system audio resources that it uses.
+
{{domxref("AudioContext.createBuffer()")}}
+
Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.
+
{{domxref("AudioContext.createConstantSource()")}}
+
Creates a {{domxref("ConstantSourceNode")}} object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.
+
{{domxref("AudioContext.createBufferSource()")}}
+
Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.
+
{{domxref("AudioContext.createMediaElementSource()")}}
+
Creates a {{domxref("MediaElementAudioSourceNode")}} associated with an {{domxref("HTMLMediaElement")}}. This can be used to play and manipulate audio from {{HTMLElement("video")}} or {{HTMLElement("audio")}} elements.
+
{{domxref("AudioContext.createMediaStreamSource()")}}
+
Creates a {{domxref("MediaStreamAudioSourceNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may come from the local computer microphone or other sources.
+
{{domxref("AudioContext.createMediaStreamDestination()")}}
+
Creates a {{domxref("MediaStreamAudioDestinationNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may be stored in a local file or sent to another computer.
+
{{domxref("AudioContext.createScriptProcessor()")}}
+
Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.
+
{{domxref("AudioContext.createStereoPanner()")}}
+
Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.
+
{{domxref("AudioContext.createAnalyser()")}}
+
Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.
+
{{domxref("AudioContext.createBiquadFilter()")}}
+
Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.
+
{{domxref("AudioContext.createChannelMerger()")}}
+
Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.
+
{{domxref("AudioContext.createChannelSplitter()")}}
+
Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.
+
{{domxref("AudioContext.createConvolver()")}}
+
Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.
+
{{domxref("AudioContext.createDelay()")}}
+
Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.
+
{{domxref("AudioContext.createDynamicsCompressor()")}}
+
Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.
+
{{domxref("AudioContext.createGain()")}}
+
Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.
+
{{domxref("AudioContext.createIIRFilter()")}}
+
Creates an {{domxref("IIRFilterNode")}}, which represents a second order filter configurable as several different common filter types.
+
{{domxref("AudioContext.createOscillator()")}}
+
Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.
+
{{domxref("AudioContext.createPanner()")}}
+
Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.
+
{{domxref("AudioContext.createPeriodicWave()")}}
+
Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.
+
{{domxref("AudioContext.createWaveShaper()")}}
+
Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.
+
{{domxref("AudioContext.createAudioWorker()")}}
+
Creates an {{domxref("AudioWorkerNode")}}, which can interact with a web worker thread to generate, process, or analyse audio directly. This was added to the spec on August 29 2014, and is not implemented in any browser yet.
+
{{domxref("AudioContext.decodeAudioData()")}}
+
Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s response attribute after setting the responseType to arraybuffer. This method only works on complete files, not fragments of audio files.
+
{{domxref("AudioContext.getOutputTimestamp()")}}
+
Returns a new AudioTimestamp containing two correlated context's audio stream position values: the AudioTimestamp.contextTime member contains the time of the sample frame which is currently being rendered by the audio output device (i.e., output audio stream position), in the same units and origin as context's {{domxref("AudioContext.currentTime")}}; the AudioTimestamp.performanceTime member contains the time estimating the moment when the sample frame corresponding to the stored contextTime value was rendered by the audio output device, in the same units and origin as {{domxref("performance.now()")}}.
+
{{domxref("AudioContext.resume()")}}
+
Resumes the progression of time in an audio context that has previously been suspended.
+
{{domxref("AudioContext.suspend()")}}
+
Suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing CPU/battery usage in the process.
+
+ +

Obsolete methods

+ +
+
{{domxref("AudioContext.createJavaScriptNode()")}}
+
Creates a {{domxref("JavaScriptNode")}}, used for direct audio processing via JavaScript. This method is obsolete, and has been replaced by {{domxref("AudioContext.createScriptProcessor()")}}.
+
{{domxref("AudioContext.createWaveTable()")}}
+
Creates a {{domxref("WaveTableNode")}}, used to define a periodic waveform. This method is obsolete, and has been replaced by {{domxref("AudioContext.createPeriodicWave()")}}.
+
+ +

Examples

+ +

Basic audio context declaration:

+ +
var audioCtx = new AudioContext();
+ +

Cross browser variant:

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}{{Spec2('Web Audio API')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}
+ 35		{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
createStereoPanner(){{CompatChrome(42.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(37.0)}} {{CompatNo}}{{CompatNo}}{{CompatNo}}
onstatechange, state, suspend(), resume(){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(40.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
createConstantSource(){{CompatChrome(56.0)}}{{CompatNo}}{{CompatGeckoDesktop(52)}}{{CompatNo}}{{CompatOpera(43)}}{{CompatNo}}
Unprefixed{{CompatVersionUnknown}}{{CompatVersionUnknown}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(37.0)}} 2.2{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
createStereoPanner(){{CompatChrome(42.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
onstatechange, state, suspend(), resume(){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
createConstantSource(){{CompatChrome(56.0)}}{{CompatNo}}{{CompatGeckoMobile(52)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(56.0)}}
Unprefixed{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(43)}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/pl/web/api/audioparam/index.html b/files/pl/web/api/audioparam/index.html new file mode 100644 index 0000000000..390e9726f5 --- /dev/null +++ b/files/pl/web/api/audioparam/index.html @@ -0,0 +1,224 @@ +--- +title: AudioParam +slug: Web/API/AudioParam +tags: + - API + - Audio + - AudioParam + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Audio API +translation_of: Web/API/AudioParam +--- +

{{APIRef("Web Audio API")}}

+ +
+

The AudioParam interface represents an audio-related parameter, usually a parameter of an {{domxref("AudioNode")}} (such as {{ domxref("GainNode.gain") }}). An AudioParam can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.

+
+ +

There are two kinds of AudioParam, a-rate and k-rate parameters:

+ + + +

Each {{domxref("AudioNode")}} defines which of its parameters are a-rate or k-rate in the spec.

+ +

Each AudioParam has a list of events, initially empty, that define when and how values change. When this list is not empty, changes using the AudioParam.value attributes are ignored. This list of events allows us to schedule changes that have to happen at very precise times, using arbitrary timelime-based automation curves. The time used is the one defined in {{domxref("AudioContext.currentTime")}}.

+ +

Properties

+ +

AudioParam Inherits properties from its parent, AudioNode.

+ +
+
{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}
+
Represents the initial volume of the attribute as defined by the specific {{domxref("AudioNode")}} creating the AudioParam.
+
{{domxref("AudioParam.maxValue")}} {{readonlyInline}}
+
Represents the maximum possible value for the parameter's nominal (effective) range. 
+
{{domxref("AudioParam.minValue")}} {{readonlyinline}}
+
Represents the minimum possible value for the parameter's nominal (effective) range. 
+
{{domxref("AudioParam.value")}}
+
Represents the parameter's current volume as a floating point value; initially set to the value of AudioParam.defaultValue. Though it can be set, any modifications happening while there are automation events scheduled — that is events scheduled using the methods of the AudioParam — are ignored, without raising any exception.
+
+ +

Methods

+ +

AudioParam Inherits methods from its parent, AudioNode.

+ +
+
{{domxref("AudioParam.setValueAtTime()")}}
+
Schedules an instant change to the value of the AudioParam at a precise time, as measured against {{domxref("AudioContext.currentTime")}}. The new value is given in the value parameter.
+
{{domxref("AudioParam.linearRampToValueAtTime()")}}
+
Schedules a gradual linear change in the value of the AudioParam. The change starts at the time specified for the previous event, follows a linear ramp to the new value given in the value parameter, and reaches the new value at the time given in the endTime parameter.
+
{{domxref("AudioParam.exponentialRampToValueAtTime()")}}
+
Schedules a gradual exponential change in the value of the AudioParam. The change starts at the time specified for the previous event, follows an exponential ramp to the new value given in the value parameter, and reaches the new value at the time given in the endTime parameter.
+
{{domxref("AudioParam.setTargetAtTime()")}}
+
Schedules the start of a change to the value of the AudioParam. The change starts at the time specified in startTime and exponentially moves towards the value given by the target parameter. The exponential decay rate is defined by the timeConstant parameter, which is a time measured in seconds.
+
{{domxref("AudioParam.setValueCurveAtTime()")}}
+
Schedules the values of the AudioParam to follow a set of values, defined by the values {{domxref("Float32Array")}} scaled to fit into the given interval, starting at startTime, and having a specific duration.
+
{{domxref("AudioParam.cancelScheduledValues()")}}
+
Cancels all scheduled future changes to the AudioParam.
+
{{domxref("AudioParam.cancelAndHoldAtTime()")}}
+
Cancels all scheduled future changes to the AudioParam but holds its value at a given time until further changes are made using other methods. The new value is given in the value parameter.
+
+ +

Examples

+ +

First, a basic example showing a {{domxref("GainNode")}} having its gain value set. gain is an example of an a-rate AudioParam, as the value can potentially be set differently for each sample frame of the audio.

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0;
+ +

Next, an example showing a {{ domxref("BiquadFilterNode") }} having some values set. These are examples of k-rate AudioParam's, as the values are set for the entire audio block at once.

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var biquadFilter = audioCtx.createBiquadFilter();
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-audioparam-interface', 'AudioParam')}}{{Spec2('Web Audio API')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(14)}} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(23)}}{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
Unprefixed{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
minValue and maxValue{{CompatChrome(52)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}39{{CompatNo}}
cancelAndHoldAtTime(){{CompatChrome(57)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatChrome(28)}} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoMobile(25)}}{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
Unprefixed{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
minValue and maxValue{{CompatChrome(52)}}{{CompatChrome(52)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}39{{CompatNo}}
cancelAndHoldAtTime(){{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/pl/web/api/audioparam/setvalueattime/index.html b/files/pl/web/api/audioparam/setvalueattime/index.html new file mode 100644 index 0000000000..7d733e7b2b --- /dev/null +++ b/files/pl/web/api/audioparam/setvalueattime/index.html @@ -0,0 +1,182 @@ +--- +title: AudioParam.setValueAtTime() +slug: Web/API/AudioParam/setValueAtTime +tags: + - API + - AudioParam + - Metodă + - Referencja + - Web Audio API + - setValueAtTime +translation_of: Web/API/AudioParam/setValueAtTime +--- +

{{ APIRef("Web Audio API") }}

+ +
+

Metoda setValueAtTime() interfejsu {{ domxref("AudioParam") }} odpowiada za precyzyjne przyporządkowanie nagłych zmian do wartości {{domxref("AudioParam")}} w określonym czasie względem {{domxref("AudioContext.currentTime")}}. Nowa wartość zostaje podana w wartości parametru.

+
+ +

Składnia

+ +
var AudioParam = AudioParam.setValueAtTime(value, startTime)
+ +

Parametry

+ +
+
value
+
Liczba zmiennoprzecinkowa reprezentująca wartość AudioParam przyporządkuje się do podanego czasu.
+
startTime
+
Zmienna double reprezentująca czas (w sekundach) po {{ domxref("AudioContext") }} została utworzona jako pierwsza, dzięki czemu dochodzi do zmiany wartości. {{jsxref("TypeError")}} zostanie zwrócony, jeśli uzyskana wartość jest negatywna.
+
+ +

Zwracanie wartości funkcji (return)

+ +

Odnośnik do obiektu AudioParam. W niektórych przeglądarkach wprowadzenie tego interfejsu zaskutkuje zwróceniem pustego typu danych (void).

+ +

Przykłady

+ +

Ten stosunkowo prosty przykład zawiera źródło mediaelementu z dwiema kontrolkami (sprawdź kod źródłowy poprzez nasze repo audio-param lub zobacz przykład live). Jeśli kontrolki są wciśnięte, zmienna currGain jest inkrementowana/dekrementowana o 0.25. Wówczas metoda setValueAtTime() zostaje użyta do ustawienia wartości przedwzmacniacza (gain) jako równej currGain, jedną sekundę od teraz (audioCtx.currentTime + 1).

+ +
// utworzenie kontekstu audio
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+// podanie podstawowych zmiennych dla przykładu
+var myAudio = document.querySelector('audio');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+var targetAtTimePlus = document.querySelector('.set-target-at-time-plus');
+var targetAtTimeMinus = document.querySelector('.set-target-at-time-minus');
+
+// utworzenie MediaElementAudioSourceNode
+// wprowadzenie HTMLMediaElement
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// utworzenie parametrów przedwzmacniacza (gain node) i ustawienie wartości przedwzmacniacza na wartość 0.5
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0.5;
+var currGain = gainNode.gain.value;
+
+// podłączenie AudioBufferSourceNode do gainNode
+// oraz gainNode do destynacji
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// określenie, co ma się wykonać po kliknięciu
+targetAtTimePlus.onclick = function() {
+  currGain += 0.25;
+  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
+}
+
+targetAtTimeMinus.onclick = function() {
+  currGain -= 0.25;
+  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
+}
+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecifikacjaStatusKomentarz
{{SpecName('Web Audio API', '#widl-AudioParam-setValueAtTime-void-float-value-double-startTime', 'setValueAtTime')}}{{Spec2('Web Audio API')}} 
+ +

Zgodność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Wsparcie podstawowe{{CompatChrome(14)}} {{property_prefix("webkit")}}{{CompatVersionUnknown}}23{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
Bez prefiksu{{CompatVersionUnknown}}{{CompatVersionUnknown}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari MobileChrome for Android
Wsparcie podstawowe{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}{{CompatChrome(28)}} {{property_prefix("webkit")}}
Bez prefiksu{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}     {{CompatVersionUnknown}}
+
+ +

Zobacz również

+ + diff --git a/files/pl/web/api/cache/index.html b/files/pl/web/api/cache/index.html new file mode 100644 index 0000000000..a4c75fd8d0 --- /dev/null +++ b/files/pl/web/api/cache/index.html @@ -0,0 +1,121 @@ +--- +title: Cache +slug: Web/API/Cache +translation_of: Web/API/Cache +--- +
{{draft}} {{APIRef("Service Workers API")}}
+ +

Interfejs Cache ServiceWorkera API reprezentuje magazyn dla par obiektu żądania oraz obiektu odpowiedzi, które są cache'owane jako część cyklu życia {{domxref("ServiceWorker", "ServiceWorkera")}}. Domena może mieć wielokrotne nazwane obiekty Cache, których zawartość jest pod całkowitą kontrolą service workerów.

+ +

Każdy obiekt Cache jest kolekcją par klucz/wartość. By w pełni zarządzać zawartością cache'ów (by następnie użyć je offline), interfejs ten dostarcza metody w dużej mierze zgodne z obiektem {{jsxref("Map")}}, jednakże wraz z dodatkowymi, poręcznymi metodami.

+ +

Jesteś odpowiedzialny za sposób zarządzania aktualizacjami Cache'u przez {{domxref("ServiceWorker", "ServiceWorkera")}}. Elementy w Cache'u nie są aktualizowane, chyba że jest to wyraźnie zażądane; nie wygasają jeżeli nie usunięte. Użyj {{domxref("CacheStorage.open", "CacheStorage.open(nazwa)")}}, by otworzyć własny, określony obiekt Cache'u, a następnie wywołać jakąkolwiek z jego metod, by nim operować.

+ +

Również do Ciebie należy okresowe opróżnianie wpisów cache'u. Każda przeglądarka ma określony limit powierzchni, który może zostać użyty przez danego service workera. Upewnij się, że opisujesz cache'y poprzez nazwy oraz używasz cache tylko z danej wersji {{domxref("ServiceWorker", "ServiceWorkera")}}, ażeby mogły one bezpiecznie na nich pracować.

+ +

Właściwości

+ +
+
{{domxref("Cache.options")}}
+
Opcjonalny parametr przekazywany do metod: {{domxref("Cache.match", "Cache.match(żądanie, opcje)")}}, {{domxref("Cache.add", "Cache.add(żądanie)")}} i {{domxref("Cache.keys", "Cache.keys(żądanie, opcje)")}} z poniższymi atrybutami: ignoreSearch, ignoreMethod, ignoreVary, prefixMatch, cacheName.
+
+ +

Metody

+ +
+
{{domxref("Cache.match", "Cache.match(żądanie, opcje)")}}
+
Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do pierwszego pasującego żądania w obiekcie {{domxref("Cache", "Cache'u")}}.
+
{{domxref("Cache.add", "Cache.add(żądanie)")}}
+
Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do nowego wpisu {{domxref("Cache", "Cache'u")}}, którego kluczem jest żądanie. Ta metoda nadal jest w trakcie tworzenia (zobacz http://crbug.com/427652). Póki co używaj ServiceWorker cache polyfill.
+
{{domxref("Cache.addAll", "Cache.addAll(żądania)")}}
+
Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do nowego szeregu złożonego z wpisów {{domxref("Cache", "Cache'u")}}, którego kluczami są żądania. Metoda ta jest nadal w trakcie tworzenia (zobacz http://crbug.com/427652). Póki co używaj ServiceWorker cache polyfill.
+
{{domxref("Cache.put", "Cache.put(żądanie, odpowiedź)")}}
+
Dodaje dodatkowe pary klucz/wartość do aktualnego obiektu {{domxref("Cache")}}.
+
{{domxref("Cache.delete", "Cache.delete(żądanie, opcje)")}}
+
Znajduje wpis {{domxref("Cache", "Cache'u")}}, którego klucz jest żądaniem, jeśli znaleziony, usuwa ten wpis, zwracając następnie {{jsxref("Promise")}}, rozwiązywany do true. Jeśli dany wpis {{domxref("Cache", "Cache'u")}} nie został znaleziony, zwraca false.
+
{{domxref("Cache.keys", "Cache.keys(żądanie, opcje)")}}
+
Zwraca {{jsxref("Promise")}}, który rozwiązuje się do szerego złożonego z kluczów {{domxref("Cache", "Cache'u")}}.
+
+ +

+

Specyfikacje

+

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Zgodność z przeglądarką

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{CompatGeckoDesktop("33.0")}}{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Warte uwagi

+ + diff --git a/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html b/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..ca8bc15570 --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,169 @@ +--- +title: Podstawowe użycie elementu canvas +slug: Web/API/Canvas_API/Tutorial/Basic_usage +tags: + - Canvas + - Grafika + - HTML + - Płótno + - Sredniozaawansowany + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
+ +
+

Zacznijmy od przyjrzenia się znacznikowi {{HTMLElement("canvas")}} należącego do zbioru elementów {{Glossary("HTML")}}. W tym rozdziale nauczysz się jak ustanowić dwuwymiarowy kontekst płótna, oraz narysujesz swój pierwszy rysunek.

+
+ +

Element <canvas>

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

Uwaga: W tym tutorialu będziemy używać słowa canvas zamiennie ze słowem płótno.

+
+ +

Na pierwszy rzut oka {{HTMLElement("canvas")}} wygląda jak element {{HTMLElement("img")}}, z tą różnicą, że nie posiada on atrybutów src oraz alt. W swojej specyfice element <canvas> posiada jedynie dwa atrybuty, {{htmlattrxref("width", "canvas")}} oraz {{htmlattrxref("height", "canvas")}}. Nie są one wymagane oraz mogą być ustanowione za pomocą właściwości {{Glossary("DOM")}}. Jeśli wartości atrybutów width oraz height nie zostaną określone, zostaną użyte domyślne: szerokość - 300 pikseli, wysokość - 150 pikseli. Za pomocą {{Glossary("CSS")}} możemy narzucić rozmiar płótna, ale podczas renderowania dokumentu, rysunek zostanie dopasowany do domyślnej wielkości: jeśli wartości określone za pomocą CSS nie będą proporcjonalne z wartościami domyślnymi, rysunek zostanie zniekształcony.

+ +
+

Uwaga: Jeśli rysunek wydaje się zniekształcony, spróbuj określić atrybuty width oraz height bezpośrednio wewnątrz znacznika <canvas>, a nie za pomocą CSS.

+
+ +

id jest globalnym atrybutem HTML i można go stosować z każdym elementem HTML (tak samo jak np. class). Warto go używać, aby w ten sposób mieć dostęp do elementu z poziomy skryptu.

+ +

Element <canvas> można stylizować za pomocą CSS tak, jak każdy obraz ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Z tym, że żadna z reguł CSS nie wpłynie na zawartość płótna. Zobaczymy to w późniejszym rozdziale tego tutorialu. Jeśli nie określimy inaczej, tło płótna będzie w pełni przezroczyste.

+ +
+

Treść zastępcza

+ +

Inaczej niż w przypadku {{HTMLElement("img")}}, w elemencie <canvas> tak samo jak w {{HTMLElement("video")}}, {{HTMLElement("audio")}}, czy {{HTMLElement("picture")}} łatwo jest określić to, co będzie wyświetlane w starszych przeglądarkach albo tych, które jeszcze nie obsługują tego elementu, jak np. Internet Explorer poprzedzający wersję 9 oraz przeglądarki tekstowe.

+ +

Aby zapewnić treść zastępczą wystarczy zagnieździć ją wewnątrz elementu <canvas> ... </canvas>. Przeglądarki nieobsługujące tego elementu, zignorują rysunek i zamiast tego wyświetlą to, co zagnieździliśmy wewnątrz tegoż elementu. Natomiast przeglądarki obsługujące element <canvas> wygenerują jego zawartość ignorując przy tym wszystko, co znajduje się wewnątrz tego elementu.

+ +
+

Uwaga: Gdy mówimy o tym, co znajduje się w znaczniku <canvas>, mamy na myśli jego atrybuty czyli to, co znajduje się pomiędzy znakami < oraz > (np. <canvas class="nazwa-klasy">. Natomiast gdy mówimy o tym, co znajduje się wewnątrz elementu <canvas>, mamy na myśli wszystko, co znajduje się pomiędzy znacznikiem otwierającym <canvas>, a znacznikiem zamykającym </canvas> (np. <canvas><img src="/canvas.jpg"></canvas>). W tym drugim przypadku mówimy o zagnieżdżaniu   jednego elementu w drugim.

+
+ +

Treść zastępczą może stanowić opis, tego co znajduje się na płótnie lub statyczny obraz wygenerowanej zawartości. Oto przykład:

+ +
<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>
+
+ +

Umieszczanie tekstu w stylu: Twoja przeglądarka nie obsługuje elementu canvas, nie pomoże czytelnikowi w zrozumieniu treści. Zapewnienie treści zastępczej uczyni element canvas bardziej dostępnym.

+ +

Wymagany znacznik końca </canvas>

+ +

Z uwagi na sposób w jaki tworzymy treść zastępczą, znacznikowi <canvas> musi towarzyszyć znacznik zamykający </canvas>.  Gdybyśmy go nie wprowadzili, przeglądarka zinterpretowałaby wszystko, co znajduje się po znaczniku otwierającym <canvas> jako treść zastępczą.

+ +

Jeśli nie decydujemy się, aby zapewnić treść zastępczą, w dalszym ciągu musimy użyć znaczników początkowego i końcowego <canvas id="foo" ...></canvas>, z tą różnicą, że nie będziemy umieszczać niczego wewnątrz tego elementu. Jest to prawidłowy zapis dla przeglądarki, która obsługuje element canvas. Przeglądarki, które go nie obsługują, niczego w tym miejscu nie wyświetlą.

+ +

Kontekst renderingu

+ +

Element {{HTMLElement("canvas")}} tworzy powierzchnię rysunkową o stałym rozmiarze zapewniając jeden lub więcej kontekstów renderingu, które są używane do tworzenia i manipulowania wyświetlaną zawartością. W tym tutorialu skupimy się na kontekście dwuwymiarowym (2D). Inne konteksty mogą wykorzystywać odmienne sposoby renderowania, np WebGL wykorzystuje kontekst trójwymiarowy (3D) bazujący na OpenGL ES.

+ +

Początkowo płótno jest puste, pozbawione tła. Aby coś na nim wyświetlić, skrypt musi posiadać dostęp do kontekstu renderowania a następnie musi coś w nim narysować. Element {{HTMLElement("canvas")}} posiada metodę {{domxref("HTMLCanvasElement.getContext", "getContext()")}} niezbędną, aby uzyskać dostęp do nowego kontekstu renderowania oraz jego funcji rysujących. Metoda getContext() wymaga podania jednego argumentu, który określa typ kontekstu. Dla rysunków dwuwymiarowych, o których mowa w tym tutorialu, argument metody {{domxref("CanvasRenderingContext2D")}} wymaga podania wartości tekstowej "2d".

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

W pierwszej lini program uzyskuje dostęp do węzła DOM reprezentującego element {{HTMLElement("canvas")}} za pomocą metody {{domxref("document.getElementById()")}}. Posiadając dostęp do węzła DOM, możemy następnie uzyskać dostęp do kontekstu renderowania rysunku za pomocą metody getContext().

+ +
+

Test zgodności

+ +

Treść zastępcza jest wyświetlana w przeglądarce, która nie obsługuje elementu {{HTMLElement("canvas")}}. Również z poziomu skryptu możemy sprawdzić czy przeglądarka wspiera znacznik canvas. W tym celu posługujemy się metodą getContext(). Oto przykład:

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

Przeglądarka, która nie wspiera znacznika canvas, nie rozpoznaje również metody getContext(). W takim wypadku wyrażenie canvas.getContext zwróci logiczną wartość false.

+
+
+ +

 Szkielet szablonu

+ +

Poniżej znajduje się szablon dokumentu HTML, którego będziemy używać jako podstawy w kolejnych przykładach ilustrujących canvas.

+ +
+

Uwaga: podczas produkcji stron internetowych warto umieszczać skrypty oraz arkusze stylów w osobnych plikach dla lepszej organizacji kodu. W tym tutorialu przykładowe skrypty będziemy jednak osadzać wewnątrz kodu HTML, tak aby cały przykład był zwięzły oraz w pełni funcjonalny.

+
+ +
<!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>
+
+ +

Skrypt zawiera funckcję draw(), która jest wykonywana po załadowaniu strony; uczyniliśmy to za pomocą obserwatora zdarzenia {{event("load")}} dokumentu HTML. Funkcja taka może być również wywołana za pomocą metody {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}} lub jeszcze innej, która obsługuje zdarzenia, po tym jak strona zostanie załadowana.

+ +

Oto jak szablon wygląda w akcji. Jak widać, początkowo jest on pusty.

+ +

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

+ +

Prosty przykład

+ +

Na razie spójrzmy na poniższy przykład, zawierający rysunek dwóch przecinających się kwadratów, z których jeden jest przezroczysty. Szczegóły działania poszczególnych elementów kodu poznamy w dalszej części tego tutorialu.

+ +
<!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>
+
+ +

Przykład wygląda następująco:

+ +

{{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/pl/web/api/canvas_api/tutorial/index.html b/files/pl/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..a8b41b4ca9 --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,60 @@ +--- +title: Rysowanie grafiki z elementem canvas +slug: Web/API/Canvas_API/Tutorial +tags: + - Grafika + - HTML + - HTML5 + - Internet + - Kanwa + - Poradnik + - instrukcja +translation_of: Web/API/Canvas_API/Tutorial +--- +
{{CanvasSidebar}}
+ +
+ +
+

<canvas> jest elementem HTML, który może być użyty do rysowania grafik używając skryptów (często JavaScript'u). To może zostać użyte do  na przykład rysowania wykresów, tworzenia kompozycji zdjęcia lub prostych (i i nie prostych) animacji. Obrazy na tej strone pokazują przykłady implementacji <canvas>, które będą stworzone w tym poradniku.

+
+ +

Ten poradnik opisuje jak używać elementu <canvas> do rysowania grafik 2D, rozpoczynając od podstaw. Zawarte przykłady powinny dać Ci kilka czystych pomysłów co możesz zrobić z kanwą i zapewnią przykłady kodu, które mogą ci pomóc w budowaniu własnej zawartości.

+ +

Wprowadzono ją jako pierwszą w WebKit przez Apple dla OS X Dashboard, <canvas> od tego momentu została wprowadzona do przeglądarek. Dziś wszystkie poważne przeglądarki wspierają kanwę.

+ +

Zanim zaczniesz

+ +

Używanie elementu <canvas> nie jest trudne, ale potrzebujesz podstawowego zrozumienia HTML i JavaScript. Element <canvas> nie jest wspierany w kilku starszych przeglądarkach, ale ma wsparcie ze strony nowych wersji poważnych przeglądarek. Domyślnym rozmiarem kanwy jest 300 px × 150 px (szerokość × wysokość). Ale własne rozmiary mogą zostać zdefiniowane za pomocą własności HTML height i width. W celu narysowania grafik na kanwie używamy obiektu kontekstu w JavaScript, który tworzy grafiki w locie.

+ +

W tym poradniku

+ + + +

Zobacz także

+ + + +

Notka dla współtwórców

+ +

Z powodu niefortunnego błędu technicznego, który miał miejsce 17 Czerwca 2013, straciliśmy historię tego poradnika, wliczając w to także atrybucje do wszystkich współtwórców do zawartości tego. Przepraszamy za to i mamy nadzieję, że wybaczycie nam tą niefortunną wpadkę.

+ +
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
diff --git a/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html b/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html new file mode 100644 index 0000000000..68efe0225f --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html @@ -0,0 +1,119 @@ +--- +title: Optymalizacja elementu canvas +slug: Web/API/Canvas_API/Tutorial/Optymalizacja_canvas +tags: + - Canvas + - Grafika + - HTML + - HTML5 + - Poradnik + - Tutorial + - zaawansowany +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
+ +
+

{{HTMLElement("canvas")}}  to jeden z najczęściej używanych standardów do renderowania grafiki 2D w przeglądarce. Zazwyczaj stosuje się go do tworzenia gier i skomplikowanych wizualizacji, które nierzadko starają się wycinąć z „płótna" maksimum jego możliwości. Niestety, równie często prowadzi to do spadków wydajności. W tym artykule przygotowaliśmy dla was kilka wskazówek jak zoptymalizować element canvas, aby poprawić działanie waszych stron i aplikacji.

+
+ +

Wskazówki dot. wydajności

+ +

Poniżej znajdziecie kilka rozwiązań, które poprawią wydajność elementu canvas:

+ +

Pre-renderuj proste lub powtażające się obiekty na dodatkowym canvasie poza ekranem

+ +

Jeśli w każdej klatce rysujesz wiele podobnych obiektów, stwórz niewyświetlany, roboczy canvas, narysuj na nim swój element raz (lub za każdym razem gdy ulega zmianom), a następnie wykorzystaj render w głównym canvasie.

+ +
obiekt.canvasRoboczy = document.createElement('canvas');
+obiekt.canvasRoboczy.width = obiekt.width;
+obiekt.canvasRoboczy.height = obiekt.height;
+obiekt.canvasRoboczy = obiekt.canvasRoboczy.getContext('2d');
+
+obiekt.render(obiekt.offscreenContext);
+
+ +

Staraj się używać liczb całkowitch do koordynatów

+ +

Renderowanie między pikselami zachodzi, gdy rysujesz obiekt używając niepełnych wartości.

+ +
ctx.drawImage(myImage, 0.3, 0.5);
+
+ +

Ta praktyka zmusza przeglądarkę do wykonania dodatkowych obliczeń, by wytworzyć efekt anty-aliasingu. Żeby temu zapobiec, zaokrąglij koordynaty, na przykład przy użyciu {{jsxref("Math.floor()")}}.

+ +

Nie skaluj obrazów za pomocą drawImage

+ +

Posłuż się canvasem poza ekranem, renderując swój obrazek w kilku różnych rozmiarach podczas ładowania, zamiast renderować go w każdej klatce.

+ +

Używaj wielu warstw w skomplikowanych scenach

+ +

Tak jak niektóre elementy nieustannie są w ruchu, inne (jak np. UI) nigdy nie zmieniają położenia. Dobrym sposobem na optymalizację w tej sytuacji jest zastosowanie warstw przy użyciu kilku canvasów roboczych.

+ +

Przykładowo, możesz stworzyć warstwę dla interfejsu rysowaną nad innymi, która aktualizuje się tylko w momentach, gdy jest używana. Oprócz tego, możesz przenaczyć jedną warstwę na pierwszy plan, gdzie umieścisz wszystkie elementy, które odnawiane są często oraz jedną warstwę na tło, na której obiekty aktualizowane są bardzo rzadko.

+ +
<div id="scena">
+  <canvas id="warstwaUi" width="480" height="320"></canvas>
+  <canvas id="warstwaGry" width="480" height="320"></canvas>
+  <canvas id="warstwaTla" width="480" height="320"></canvas>
+</div>
+
+<style>
+  #scena {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black
+  }
+  canvas { position: absolute; }
+  #warstwaUI { z-index: 3 }
+  #warstwaGry { z-index: 2 }
+  #warstwaTla { z-index: 1 }
+</style>
+
+ +

Użyj CSS dla dużych obrazów w tle

+ +

Jeśli twoja gra, jak większość, posiada statyczne tło, stwórz element {{HTMLElement("div")}} z własnością CSS {{cssxref("background")}} , który umieścisz pod canvasem. Dzięki temu unikniesz rysowania dużego obrazu w każdej klatce z osobna.

+ +

Skaluj canvas za pomocą CSS

+ +

Transformacje CSS są szybsze dzięki wykorzystaniu karty graficznej. Powiększanie canvasu działa szybciej niż jego pomniejszanie. Dla Firefox OS ustaw 480 x 320 px.

+ +
var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+
+ +

Wyłącz przezroczystość

+ +

Jeśli twoja gra korzysta z canvasu i nie ma potrzeby, by był on przezroczysty, ustaw wartość alpha na false podczas tworzenia kontekstu: HTMLCanvasElement.getContext(). To powinno poprawić wydajność.

+ +
var ctx = canvas.getContext('2d', { alpha: false });
+ +

Pozostałe wskazówki

+ + + +

Zobacz również:

+ + + +

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

diff --git a/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html b/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html new file mode 100644 index 0000000000..08c589844b --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html @@ -0,0 +1,571 @@ +--- +title: Rysowanie kształtów w canvas +slug: Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow +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")}}
+ +
+

Ok, stworzyliśmy nasze środowisko canvas i teraz możemy poznać tajniki tworzenia grafiki za pomocą canvas. W tym rozdziale nauczysz się rysować prostokąty, trójkąty, linie, łuki oraz krzywe - czyli podstawowe kształty.

+
+ +

Siatka

+ +

Nim zaczniemy rysować, poznajmy najpierw siatkę czyli układ współrzędnych canvas. Szablon dokumentu z poprzedniego rozdziału zawiera element canvas o rozmiarach 150 na 150 (pikseli). Ilustracja po prawej ukazuje standardową siatkę naszego płótna. Domyślnie jedna jednostka odległości na siatce odpowiada wielkości jednego piksela na płótnie. Wartości siatki liczone są od lewego górnego rogu układu współrzędnych (x,y). W dalszej części dowiesz się, jak zamienić pozycję, tak by początek układu współrzędnych znajdował się gdzie indziej, jak go obrócić a nawet przeskalować. Na razie jednak użyjemy ustawień domyślnych. 

+ +

Rysowanie prostokątów

+ +

W przeciwieństwie do {{Glossary("SVG")}}, {{HTMLElement("canvas")}} na razie wspiera jedynie tworzenie prostokątów. Pozostałe figury geometryczne musimy stworzyć za pomocą ścieżek. Na szczęście mamy do dyspozycji zestaw funkcji za pomocą których jesteśmy w stanie stworzyć figury o dowolnej złożoności.

+ +

Najpierw przyjrzyjmy się prostokątowi. Istnieją trzy funkcje rysujące prostokąt:

+ +
+
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
+
Rysuje pole prostokąta.
+
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
+
Rysuje obwód prostokąta.
+
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
+
Wymazuje prostokątny obszar, w wyniku czego staje się on całkiem przezroczysty. Działą to jak gumka w formie prostokąta.
+
+ +

Każda z tych funkcji posiada jednakowe parametry. x i y to współrzędne na siatce - wyznaczają one pozycje lewego górnego rogu prostokąta. A width oraz height określają jego rozmiar.

+ +

Poniżej znajduje się funkcjadraw() z poprzedniej strony, tutaj wzbogacona o trzy metody tworzenia prostokątów.

+ +

Rectangular shape example

+ + + +
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);
+  }
+}
+ +

Oto wynik działania tego skryptu:

+ +

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

+ +

Funkcja fillRect() rysuje czarny kwadrat o boku 100 pikseli. Funkcja clearRect() wymazuje kwadratowy obszar o boku 60 pikseli pośrodku czarnego prostokąta, a następnie wywołanie funkcji strokeRect() tworzy obrys kratdatu o boku 50 pikseli również w centrum poprzedniej figury.

+ +

W kolejnych rozdziałąch poznasz dwie inne *metody dla clearReact(), oraz zobaczysz jak zmienić kolor oraz styl obrysu renderowanych kształtów.

+ +

W przeciwieńśtwie do funkcji tworzących ścieżki o czym przekonasz się później, wszystkie trzy funkcje tworzące prostokąt rysują kształ natychmiast po ich wywołaniu.

+ +

Rysowanie ścieżek

+ +

Drugim zarazem ostatnim podstawowym kształetem jest cieżka. Ścieżka złożona jest z punktów połączonych liniami prostymi lub krzywymi, o różnej grubości i o różnym kolorze. Ścieżka, a nawet jej fragment może być zamknięta. Aby utworzyć kształt za pomocą ścieżki wykonaj następujące kroki:

+ +
    +
  1. utwórz ścieżkę,
    2. +
  2. użyj komend rysujących aby rysować ścieżkę,
    3. +
  3. zamknij ścieżkę.
    4. +
  4. Po utworzeniu ścieżki możesz ją obrysować lub wypełnić, i dopiero wtedy ukaże się ona w canvasie.
    5. +
+ +

Oto funkcje potrzebne do wykonania tego zadania:

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
+
Tworzy nową ścieżkę. Po jej utworzeniu, wszelkie kolejne funkcce rysujące będą się do niej odwoływały oraz kontynuowały jej rysunek.
+
Path methods
+
Metoda do ustalania innych ścieżek dla obiektów.
+
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
+
Zamyka ścieżkę aby przyszłe polecenia rysowania, były kierowane ponownie do kontekstu(ctx).
+
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
+
Rysuje kształ poprzez odrysowanie konturu.
+
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
+
Rysuje kształ poprzez wypełnienie ścieżek wyznaczonego obszaru kontekstowego.
+
+ +

The first step to create a path is to call the beginPath(). Internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. Every time this method is called, the list is reset and we can start drawing new shapes.

+ +
Note: When the current path is empty, such as immediately after calling beginPath(), or on a newly created canvas, the first path construction command is always treated as a moveTo(), regardless of what it actually is. For that reason, you will almost always want to specifically set your starting position after resetting a path.
+ +

The second step is calling the methods that actually specify the paths to be drawn. We'll see these shortly.

+ +

The third, and an optional step, is to call closePath(). This method tries to close the shape by drawing a straight line from the current point to the start. If the shape has already been closed or there's only one point in the list, this function does nothing.

+ +
Note: When you call fill(), any open shapes are closed automatically, so you don't have to call closePath(). This is not the case when you call stroke().
+ +

Drawing a triangle

+ +

For example, the code for drawing a triangle would look something like this:

+ + + +
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();
+  }
+}
+
+ +

The result looks like this:

+ +

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

+ +

Moving the pen

+ +

One very useful function, which doesn't actually draw anything but becomes part of the path list described above, is the moveTo() function. You can probably best think of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the next.

+ +
+
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
+
Moves the pen to the coordinates specified by x and y.
+
+ +

When the canvas is initialized or beginPath() is called, you typically will want to use the moveTo() function to place the starting point somewhere else. We could also use moveTo() to draw unconnected paths. Take a look at the smiley face below.

+ +

To try this for yourself, you can use the code snippet below. Just paste it into the draw() function we saw earlier.

+ + + +
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();
+  }
+}
+
+ +

The result looks like this:

+ +

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

+ +

If you'd like to see the connecting lines, you can remove the lines that call moveTo().

+ +
+

Note: To learn more about the arc() function, see the {{anch("Arcs")}} below.

+
+ +

Lines

+ +

For drawing straight lines, use the lineTo() method.

+ +
+
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
+
Draws a line from the current drawing position to the position specified by x and y.
+
+ +

This method takes two arguments, x and y, which are the coordinates of the line's end point. The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting point for the following, etc. The starting point can also be changed by using the moveTo() method.

+ +

The example below draws two triangles, one filled and one outlined.

+ + + +
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();
+  }
+}
+
+ +

This starts by calling beginPath() to start a new shape path. We then use the moveTo() method to move the starting point to the desired position. Below this, two lines are drawn which make up two sides of the triangle.

+ +

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

+ +

You'll notice the difference between the filled and stroked triangle. This is, as mentioned above, because shapes are automatically closed when a path is filled, but not when they are stroked. If we left out the closePath() for the stroked triangle, only two lines would have been drawn, not a complete triangle.

+ +

Arcs

+ +

To draw arcs or circles, we use the arc() or arcTo() methods.

+ +
+
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
+
Draws an arc which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction indicated by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
+
Draws an arc with the given control points and radius, connected to the previous point by a straight line.
+
+ +

Let's have a more detailed look at the arc method, which takes six parameters: x and y are the coordinates of the center of the circle on which the arc should be drawn. radius is self-explanatory. The startAngle and endAngle parameters define the start and end points of the arc in radians, along the curve of the circle. These are measured from the x axis. The anticlockwise parameter is a Boolean value which, when true, draws the arc anticlockwise; otherwise, the arc is drawn clockwise.

+ +
+

Note: Angles in the arc function are measured in radians, not degrees. To convert degrees to radians you can use the following JavaScript expression: radians = (Math.PI/180)*degrees.

+
+ +

The following example is a little more complex than the ones we've seen above. It draws 12 different arcs all with different angles and fills.

+ +

The two for loops are for looping through the rows and columns of arcs. For each arc, we start a new path by calling beginPath(). In the code, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily do that in real life.

+ +

The x and y coordinates should be clear enough. radius and startAngle are fixed. The endAngle starts at 180 degrees (half a circle) in the first column and is increased by steps of 90 degrees, culminating in a complete circle in the last column.

+ +

The statement for the clockwise parameter results in the first and third row being drawn as clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the if statement makes the top half stroked arcs and the bottom half filled arcs.

+ +
+

Note: This example requires a slightly larger canvas than the others on this page: 150 x 200 pixels.

+
+ + + +
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 ? false : true; // 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")}}

+ +

Bezier and quadratic curves

+ +

The next type of paths available are Bézier curves, available in both cubic and quadratic varieties. These are generally used to draw complex organic shapes.

+ +
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
+
Draws a quadratic Bézier curve from the current pen position to the end point specified by x and y, using the control point specified by cp1x and cp1y.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
+
Draws a cubic Bézier curve from the current pen position to the end point specified by x and y, using the control points specified by (cp1x, cp1y) and (cp2x, cp2y).
+
+ +

The difference between these can best be described using the image on the right. A quadratic Bézier curve has a start and an end point (blue dots) and just one control point (indicated by the red dot) while a cubic Bézier curve uses two control points.

+ +

The x and y parameters in both of these methods are the coordinates of the end point. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the second control point.

+ +

Using quadratic and cubic Bézier curves can be quite challenging, because unlike vector drawing software like Adobe Illustrator, we don't have direct visual feedback as to what we're doing. This makes it pretty hard to draw complex shapes. In the following example, we'll be drawing some simple organic shapes, but if you have the time and, most of all, the patience, much more complex shapes can be created.

+ +

There's nothing very difficult in these examples. In both cases we see a succession of curves being drawn which finally result in a complete shape.

+ +

Quadratic Bezier curves

+ +

This example uses multiple quadratic Bézier curves to render a speech balloon.

+ + + +
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")}}

+ +

Cubic Bezier curves

+ +

This example draws a heart using cubic Bézier curves.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric 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

+ +

In addition to the three methods we saw in {{anch("Drawing rectangles")}}, which draw rectangular shapes directly to the canvas, there's also the rect() method, which adds a rectangular path to a currently open path.

+ +
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "rect(x, y, width, height)")}}
+
Draws a rectangle whose top-left corner is specified by (x, y) with the specified width and height.
+
+ +

When this method is executed, the moveTo() method is automatically called with the parameters (0,0). In other words, the current pen position is automatically reset to the default coordinates.

+ +

Making combinations

+ +

So far, each example on this page has used only one type of path function per shape. However, there's no limitation to the number or types of paths you can use to create a shape. So in this final example, let's combine all of the path functions to make a set of very famous game characters.

+ + + +
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();
+}
+
+ +

The resulting image looks like this:

+ +

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

+ +

We won't go over this in detail, since it's actually surprisingly simple. The most important things to note are the use of the fillStyle property on the drawing context, and the use of a utility function (in this case roundedRect()). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code you need, as well as its complexity.

+ +

We'll take another look at fillStyle, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill color for paths from the default color of black to white, and then back again.

+ +

Path2D objects

+ +

As we have seen in the last example, there can be a series of paths and drawing commands to draw objects onto your canvas. To simplify the code and to improve performance, the {{domxref("Path2D")}} object, available in recent versions of browsers, lets you cache or record these drawing commands. You are able to play back your paths quickly.
+ Lets see how we can construct a Path2D object:

+ +
+
{{domxref("Path2D.Path2D", "Path2D()")}}
+
The Path2D() constructor returns a newly instantiated Path2D object, optionally with another path as an argument (creates a copy), or optionally with a string consisting of SVG path data.
+
+ +
new Path2D();     // empty path object
+new Path2D(path); // copy from another Path2D object
+new Path2D(d);    // path from SVG path data
+ +

All path methods like moveTo, rect, arc or quadraticCurveTo, etc., which we got to know above, are available on Path2D objects.

+ +

The Path2D API also adds a way to combine paths using the addPath method. This can be useful when you want to build objects from several components, for example.

+ +
+
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
+
Adds a path to the current path with an optional transformation matrix.
+
+ +

Path2D example

+ +

In this example, we are creating a rectangle and a circle. Both are stored as a Path2D object, so that they are available for later usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to use instead of the current path. Here, stroke and fill are used with a path argument to draw both objects onto the canvas, for example.

+ + + +
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")}}

+ +

Using SVG paths

+ +

Another powerful feature of the new canvas Path2D API is using SVG path data to initialize paths on your canvas. This might allow you to pass around path data and re-use them in both, SVG and canvas.

+ +

The path will move to point (M10 10) and then move horizontally 80 points to the right (h 80), then 80 points down (v 80), then 80 points to the left (h -80), and then back to the start (z). You can see this example on the Path2D constructor page.

+ +
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/pl/web/api/childnode/index.html b/files/pl/web/api/childnode/index.html new file mode 100644 index 0000000000..f10d177d3c --- /dev/null +++ b/files/pl/web/api/childnode/index.html @@ -0,0 +1,190 @@ +--- +title: ChildNode +slug: Web/API/ChildNode +tags: + - API + - DOM + - Experimental + - Interface + - NeedsTranslation + - Node + - TopicStub +translation_of: Web/API/ChildNode +--- +
{{APIRef("DOM")}}
+ +

The childNodes interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.

+ +

childNodes is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("DocumentType")}}, and {{domxref("CharacterData")}} objects.

+ +

Properties

+ +

There are neither inherited, nor specific properties.

+ +

Methods

+ +

There are no inherited methods.

+ +
+
{{domxref("childNodes.remove()")}} {{experimental_inline}}
+
Removes this childNodes from the children list of its parent.
+
{{domxref("childNodes.before()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this childNodes's parent, just before this childNodes. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("childNodes.after()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this childNodes's parent, just after this childNodes. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("childNodes.replaceWith()")}} {{experimental_inline}}
+
Replaces this childNodes in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-childnode', 'childNodes')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface in {{domxref("ParentNode")}} and childNodes. previousElementSibling and nextElementSibling are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the remove(), before(), after() and replaceWith() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Polyfill

+ +

External on github: childNode.js

+ +

Browser compatibility

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}}){{CompatChrome(1.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(23)}}9.010.04.0
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}{{CompatChrome(23.0)}}{{CompatNo}}{{CompatGeckoDesktop(23)}}{{CompatNo}}16.0{{CompatNo}}
remove(){{experimental_inline}}{{CompatChrome(29.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(23)}}{{CompatNo}}16.0{{CompatNo}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatChrome(54.0)}}{{CompatNo}}{{CompatGeckoDesktop(49)}}{{CompatNo}}{{CompatOpera(39)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support (on {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoMobile(23)}}{{CompatNo}}16.0{{CompatNo}}{{CompatVersionUnknown}}
remove(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatNo}}16.0{{CompatNo}}{{CompatVersionUnknown}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatNo}}{{CompatChrome(54.0)}}{{CompatNo}}{{CompatGeckoMobile(49)}}{{CompatNo}}{{CompatOperaMobile(39)}}{{CompatNo}}{{CompatChrome(54.0)}}
+
+ +

See also

+ + diff --git a/files/pl/web/api/childnode/remove/index.html b/files/pl/web/api/childnode/remove/index.html new file mode 100644 index 0000000000..377e529db2 --- /dev/null +++ b/files/pl/web/api/childnode/remove/index.html @@ -0,0 +1,91 @@ +--- +title: ChildNode.remove() +slug: Web/API/ChildNode/remove +translation_of: Web/API/ChildNode/remove +--- +
{{APIRef("DOM")}}
+ +

Metoda ChildNode.remove() usuwa obiekt z drzewa, do którego należy.

+ +

Składnia

+ +
node.remove();
+
+ +

Przykład

+ +

Użycie remove()

+ +
<div id="div-01">To jest div-01</div>
+<div id="div-02">To jest div-02</div>
+<div id="div-03">To jest div-03</div>
+
+ +
var el = document.getElementById('div-02');
+el.remove(); // Usuwa div z ID 'div-02'
+
+ +

ChildNode.remove() jest poza zakresem

+ +

Metoda remove() nie wchodzi w zakres wyrażenia with. Zobacz  {{jsxref("Symbol.unscopables")}}, aby uzyskać więcej informacji.

+ +
with(node) {
+  remove();
+}
+// ReferenceError: remove is not defined
+ +

Polyfill

+ +

Można utworzyć polyfill metody remove() w Internet Explorer 9 (lub wyższej wersji) za pomocą następującego kodu: 

+ +
// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('remove')) {
+      return;
+    }
+    Object.defineProperty(item, 'remove', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function remove() {
+        this.parentNode.removeChild(this);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM WHATWG')}}Initial definition.
{{SpecName('DOM4', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM4')}} 
+ +

Kompatybilność z przeglądarkami

+ +
{{Compat("api.ChildNode.remove")}}
+ +

Zobacz również

+ + diff --git a/files/pl/web/api/console/index.html b/files/pl/web/api/console/index.html new file mode 100644 index 0000000000..0e2b03ab60 --- /dev/null +++ b/files/pl/web/api/console/index.html @@ -0,0 +1,232 @@ +--- +title: Console +slug: Web/API/Console +translation_of: Web/API/Console +--- +
{{APIRef}}{{Non-standard_header}}
+ +

The console object provides access to the browser's debugging console (e.g. the Web Console in Firefox). The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided.

+ +

The console can be accessed from any global object, {{domxref("Window")}} on browsing scopes, {{domxref("WorkerGlobalScope")}} and its specific variants in workers.

+ +

This page documents the {{anch("Methods")}} available on the console object and gives a few {{anch("Usage")}} examples.

+ +

Methods

+ +
+
{{domxref("Console.assert()")}}
+
Log a message and stack trace to console if first argument is false.
+
{{domxref("Console.count()")}}
+
Log the number of times this line has been called with the given label.
+
{{domxref("Console.debug()")}} {{deprecated_inline}}
+
An alias for log(); this was added to improve compatibility with existing sites already using debug(). However, you should use {{domxref("console.log()")}} instead.
+
{{domxref("Console.dir()")}}
+
Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.
+
{{domxref("Console.error()")}}
+
Outputs an error message. You may use string substitution and additional arguments with this method.
+
{{domxref("Console._exception()")}}
+
An alias for error();
+
{{domxref("Console.group()")}}
+
Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().
+
{{domxref("Console.groupCollapsed()")}}
+
Creates a new inline group, indenting all following output by another level; unlike group(), this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call groupEnd().
+
{{domxref("Console.groupEnd()")}}
+
Exits the current inline group.
+
{{domxref("Console.info()")}}
+
Informative logging information. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.log()")}}
+
For general output of logging information. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.profile()")}}
+
Starts the JavaScript profiler. You can specify an optional label for the profile.
+
{{domxref("Console.profileEnd()")}}
+
Stops the profiler. You can see the resulting profile in the JavaScript profiler.
+
{{domxref("Console.table()")}}
+
Displays tabular data as a table.
+
{{domxref("Console.time()")}}
+
Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
+
{{domxref("Console.timeEnd()")}}
+
Stops the specified timer and logs the elapsed time in seconds since its start.
+
{{domxref("Console.trace()")}}
+
Outputs a stack trace.
+
{{domxref("Console.warn()")}}
+
Outputs a warning message. You may use string substitution and additional arguments with this method.
+
+ + +

Usage

+ +

Outputting text to the console

+ +

The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods. Each of these results in output that's styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.

+ +

There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of the objects with which to replace them.

+ +

Outputting a single object

+ +

The simplest way to use the logging methods is to output a single object:

+ +
var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+
+ +

The output looks something like this:

+ +
[09:27:13.475] ({str:"Some text", id:5})
+ +

Outputting multiple objects

+ +

You can also output multiple objects by simply listing them when calling the logging method, like this:

+ +
var car = "Dodge Charger";
+var someObject = {str:"Some text", id:5};
+console.info("My first car was a", car, ". The object is: ", someObject);
+ +

This output will look like this:

+ +
[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
+
+ +

Using string substitutions

+ +

Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Substitution stringDescription
%oOutputs a hyperlink to a JavaScript object. Clicking the link opens an inspector.
%d or %iOutputs an integer. Formatting is not yet supported.
%sOutputs a string.
%fOutputs a floating-point value. Formatting is not yet supported.
+ +

Each of these pulls the next argument after the format string off the parameter list. For example:

+ +
for (var i=0; i<5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+
+ +

The output looks like this:

+ +
[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+
+ +

Styling console output

+ +

You can use the "%c" directive to apply a CSS style to console output:

+ +
console.log("%cMy stylish message", "color: red; font-style: italic");
+ +
+ +
{{h3_gecko_minversion("Using groups in the console", "9.0")}}
+ +

You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call console.group(). The console.groupCollapsed() method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.

+ +
Note: Collapsed groups are not supported yet in Gecko; the groupCollapsed() method is the same as group() at this time.
+ +

To exit the current group, simply call console.groupEnd().

+ +

For example, given this code:

+ +
console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+
+ +

The output looks like this:

+ +

nesting.png

+ +
{{h3_gecko_minversion("Timers", "10.0")}}
+ +

In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the console object. To start a timer, call the console.time() method, giving it a name as only parameter. To stop the timer, and to get the elapsed time in miliseconds, just call the console.timeEnd() method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.

+ +

For example, given this code:

+ +
console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+
+ +

will log the time needed by the user to discard the alert box:

+ +

timerresult.png

+ +

Notice that the timer's name is displayed both when the timer is started and when it's stopped.

+ +
Note: It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.
+ +

Stack traces

+ +

The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:

+ +
foo();
+
+function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+ +

The output in the console looks something like this:

+ +

+ +

Notes

+ + + +

See also

+ + + +

Other implementations

+ +

 

+ + diff --git a/files/pl/web/api/console/log/index.html b/files/pl/web/api/console/log/index.html new file mode 100644 index 0000000000..0f18916b5a --- /dev/null +++ b/files/pl/web/api/console/log/index.html @@ -0,0 +1,69 @@ +--- +title: Console.log() +slug: Web/API/Console/log +translation_of: Web/API/Console/log +--- +
{{APIRef("Console API")}}{{Non-standard_header}}
+ +

Wyświetla tekst w konsoli.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
console.log(obj1 [, obj2, ..., objN]);
+console.log(msg [, subst1, ..., substN]);
+
+ +

Parameters

+ +
+
obj1 ... objN
+
Lista obiektów JavaScript do wyświelenia. Podane obiekty są kolejno dołączane i przekazywane na wyjście.
+
msg
+
String JavaScript zawierający zero lub więcej stringów podmieniających.
+
subst1 ... substN
+
Obiekt JavaScript w którym zastępowane są stringi podmieniające z msg.  Daje Ci to dodatkową kontrolę nad formatem.
+
+ +

Zobacz również Outputting text to the console w dokumentacji {{domxref("console")}}.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName("Console API", "#consolelogobject--object-", "console.log()")}}{{Spec2("Console API")}}Początkowa definicja
+ +

Browser compatibility

+ +

 

+ + + +

{{Compat("api.Console.log")}}

+ +

 

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/cssnumericvalue/div/index.html b/files/pl/web/api/cssnumericvalue/div/index.html new file mode 100644 index 0000000000..cd74042e3e --- /dev/null +++ b/files/pl/web/api/cssnumericvalue/div/index.html @@ -0,0 +1,59 @@ +--- +title: CSSNumericValue.div() +slug: Web/API/CSSNumericValue/div +translation_of: Web/API/CSSNumericValue/div +--- +
{{draft}}{{APIRef("CSS Typed OM")}}{{SeeCompatTable}}
+ +

The div() method of the {{domxref("CSSNumericValue")}} interface divides the CSSNumericValue by the supplied value.

+ +

Syntax

+ +
var cssNumericValue = CSSNumericValue.div(number);
+ +

Parameters

+ +
+
number
+
Either a {{jsxref('Number')}} or a {{domxref('CSSNumericValue')}}.
+
+ +

Return value

+ +

A {{domxref('CSSMathProduct')}}.

+ +

Exceptions

+ +
+
TypeError
+
Indicates that an invalid type was passed to the method.
+
+ +

Examples

+ +
let mathProduct = CSS.px("24").div(CSS.percent("4"));
+// Prints "calc(24px / 4%)"
+mathProduct.toString();
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Typed OM','#dom-cssnumericvalue-div','div')}}{{Spec2('CSS Typed OM')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.CSSNumericValue.div")}}

diff --git a/files/pl/web/api/cssnumericvalue/index.html b/files/pl/web/api/cssnumericvalue/index.html new file mode 100644 index 0000000000..eace9532a3 --- /dev/null +++ b/files/pl/web/api/cssnumericvalue/index.html @@ -0,0 +1,113 @@ +--- +title: CSSNumericValue +slug: Web/API/CSSNumericValue +tags: + - API + - CSS Typed Object Model API + - CSSNumericValue + - Experimental + - Houdini + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CSSNumericValue +--- +
{{draft}}{{APIRef("CSS Typed OM")}}{{SeeCompatTable}}
+ +

The CSSNumericValue interface of the CSS Typed Object Model API represents operations that all numeric values can perform.

+ +

Interfaces based on CSSNumericValue

+ +

Below is a list of interfaces based on the CSSNumericValue interface.

+ +
+ +
+ +

Properties

+ +

None.

+ +

Event handlers

+ +

No

+ +

Methods

+ +
+
{{domxref('CSSNumericValue.add')}}
+
Adds a supplied number to the CSSNumericValue.
+
{{domxref('CSSNumericValue.sub')}}
+
Subtracts a supplied number from the CSSNumericValue.
+
{{domxref('CSSNumericValue.mul')}}
+
Multiplies the CSSNumericValue by the supplied value.
+
{{domxref('CSSNumericValue.div')}}
+
Divides the CSSNumericValue by the supplied value.
+
{{domxref('CSSNumericValue.min')}}
+
Returns the minimum value passed
+
{{domxref('CSSNumericValue.max')}}
+
Returns the maximum value passed
+
{{domxref('CSSNumericValue.equals')}}
+
True if all the values are the exact same type and value, in the same order. Otherwise, false.
+
{{domxref('CSSNumericValue.to')}}
+
Converts value into another one with the specified unit.
+
{{domxref('CSSNumericValue.toSum')}}
+
TBD
+
{{domxref('CSSNumericValue.type')}}
+
TBD
+
{{domxref('CSSNumericValue.parse')}}
+
Allows a CSSNumericValue to be constructed directly from a string containing CSS. 
+
+ + + +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Typed OM','#numeric-value','CSSNumericValue')}}{{Spec2('CSS Typed OM')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.CSSNumericValue")}}

+ +

See Also

+ + diff --git a/files/pl/web/api/cssrule/index.html b/files/pl/web/api/cssrule/index.html new file mode 100644 index 0000000000..e8893fe44c --- /dev/null +++ b/files/pl/web/api/cssrule/index.html @@ -0,0 +1,97 @@ +--- +title: cssRule +slug: Web/API/CSSRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSRule +--- +

{{ ApiRef() }}

+

Obiekt CSSRule reprezentuje pojedynczy arkusz stylu CSS. To może być pojedyncza reguła arkusza stylów CSS. Może być częścią listy stylesheet cssRules.

+

Jest tu kilka rodzajów reguł. Wszystkie one dzielą kilka wspólnych własności interfejsu {{ Anch("CSSRule") }} i większość posiada pewne specyficzne własności oraz typy reguł.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypInterfejs związany z regułąOpis
CSSRule.STYLE_RULE{{ Anch("CSSStyleRule") }} 
CSSRule.MEDIA_RULE{{ Anch("CSSMediaRule") }} 
CSSRule.FONT_FACE_RULE{{ Anch("CSSFontFaceRule") }} 
CSSRule.PAGE_RULE{{ Anch("CSSPageRule") }} 
CSSRule.IMPORT_RULE{{ Anch("CSSImportRule") }} 
CSSRule.CHARSET_RULE{{ Anch("CSSCharsetRule") }} 
CSSRule.UNKNOWN_RULE{{ Anch("CSSUnknownRule") }} 
+

CSSRule

+
+
+ cssText
+
+ Zwraca tekstową reprezentację reguły, np. "h1,h2 { font-size: 16pt }".
+
+ parentRule
+
+ Zwraca regule zawarta w treści jeśli takowa istnieje, np. regułę stylu znajdującą sie wewnątrz bloku @media.
+
+ parentStyleSheet
+
+ Zwraca obiekt stylesheet, którego reguła jest częścią.
+
+ type
+
+ Zwraca typ reguły, np. CSSRule.CHARSET_RULE lub CSSRule.IMPORT_RULE.
+
+

CSSStyleRule

+
+
+ selectorText
+
+ Pobiera/ustawia tekstową reprezentację selektora dla reguły, np.: "h1,h2".
+
+ style
+
+ Zwraca obiekt CSSStyleDeclaration dla reguły deklaracji bloku.
+
+

CSSStyleRule

+

CSSMediaRule

+

CSSFontFaceRule

+

CSSPageRule

+

CSSImportRule

+

CSSCharsetRule

+

CSSUnknownRule

+

Specyfikacja

+

DOM Level 2 CSS: CSSRule

+

{{ languages( { "en": "en/DOM/cssRule" } ) }}

diff --git a/files/pl/web/api/document/activeelement/index.html b/files/pl/web/api/document/activeelement/index.html new file mode 100644 index 0000000000..bd8527e319 --- /dev/null +++ b/files/pl/web/api/document/activeelement/index.html @@ -0,0 +1,26 @@ +--- +title: document.activeElement +slug: Web/API/Document/activeElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/DocumentOrShadowRoot/activeElement +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca element, na którym ustawiony jest fokus.

+

{{ Note("Ten atrybut jest częścią specyfikacji HTML 5, która jest wciąż opracowywana.") }}

+

Składnia

+
var curElement = document.activeElement;
+
+

Przykład

+

Specyfikacja

+

Zarządzanie fokusem

+

 

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/document.activeElement", "es": "es/DOM/element.activeElement", "fr": "fr/DOM/document.activeElement", "ja": "ja/DOM/document.activeElement" } ) }}

diff --git a/files/pl/web/api/document/alinkcolor/index.html b/files/pl/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..82e8dda6cd --- /dev/null +++ b/files/pl/web/api/document/alinkcolor/index.html @@ -0,0 +1,24 @@ +--- +title: document.alinkColor +slug: Web/API/Document/alinkColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/alinkColor +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca bądź ustawia kolor aktywnych odnośników w ciele dokumentu.

+

Składnia

+
kolor = HTMLBodyElement.aLinkColor
+HTMLBodyElement.aLinkColor =kolor
+
+

Parametry

+ +

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

+

{{ languages( { "en": "en/DOM/document.alinkColor", "es": "es/DOM/document.alinkColor" } ) }}

diff --git a/files/pl/web/api/document/anchors/index.html b/files/pl/web/api/document/anchors/index.html new file mode 100644 index 0000000000..e1681f5372 --- /dev/null +++ b/files/pl/web/api/document/anchors/index.html @@ -0,0 +1,38 @@ +--- +title: document.anchors +slug: Web/API/Document/anchors +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/anchors +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

anchors zwraca listę wszystkich kotwic w dokumencie.

+ +

Składnia

+ +
listaWęzłów = document.anchors
+
+ +

Przykład

+ +
if ( document.anchors.length >= 5 ) {
+    dump("dump found too many anchors");
+    window.location = "http://www.google.com";
+}
+
+ +

Uwagi

+ +

Ze względu na zgodność wsteczną, zwracany zestaw kotwic zawiera tylko kotwice posiadające atrybut name, bez tych które posiadają jedynie atrybut id.

+ +

Specyfikacja

+ +

DOM Level 2 HTML: anchors

+ +

{{ languages( { "en": "en/DOM/document.anchors", "es": "es/DOM/document.anchors", "ja": "ja/DOM/document.anchors" } ) }}

diff --git a/files/pl/web/api/document/applets/index.html b/files/pl/web/api/document/applets/index.html new file mode 100644 index 0000000000..719c43b33b --- /dev/null +++ b/files/pl/web/api/document/applets/index.html @@ -0,0 +1,26 @@ +--- +title: document.applets +slug: Web/API/Document/applets +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/applets +--- +

{{ ApiRef() }}

+

Podsumowanie

+

applets zwraca uporządkowaną listę apletów umieszczonych w dokumencie.

+

Składnia

+
listaWęzłów = document.applets
+
+

Przykład

+
// (Kiedy wiesz, że drugi aplet jest tym,
+// którego szukasz)
+my_java_app = document.applets[1];
+
+

Specyfikacja

+

applets

+
+  
+

{{ languages( { "en": "en/DOM/document.applets", "es": "es/DOM/document.applets" } ) }}

diff --git a/files/pl/web/api/document/bgcolor/index.html b/files/pl/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..cdc5731cbf --- /dev/null +++ b/files/pl/web/api/document/bgcolor/index.html @@ -0,0 +1,33 @@ +--- +title: document.bgColor +slug: Web/API/Document/bgColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/bgColor +--- +

{{ ApiRef() }}

+

Podsumowanie

+

{{ Deprecated_header() }} Własność + + bgColor + pobiera/zwraca kolor tła dokumentu.

+

Składnia

+
kolor = document.bgColor
+document.bgColor =kolor
+
+

Parametry

+ +

Przykład

+
document.bgColor = "darkblue";
+
+

Notes

+

Domyślną wartością tej własności w Mozilli Firefox jest kolor biały (#ffffff w systemie szesnastkowym).

+

Własność document.bgColor jest wycofywana DOM Level 2 HTML. Zalecanym rozwiązaniem alternatywnym jest użycie stylu CSS background-color, gdy możemy uzyskać dostęp bezpośrednio przez DOM za pomocą własnościdocument.body.style.backgroundColor. Innym alternatywnym rozwiązaniem jest document.body.bgColor, chociaż to rozwiązanie jest także wycofywane w HTML 4.01 na rzecz rozwiązania wykorzystującego CSS .

+

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

+

{{ languages( { "en": "en/DOM/document.bgColor", "es": "es/DOM/document.bgColor" } ) }}

diff --git a/files/pl/web/api/document/body/index.html b/files/pl/web/api/document/body/index.html new file mode 100644 index 0000000000..1ae1aa480e --- /dev/null +++ b/files/pl/web/api/document/body/index.html @@ -0,0 +1,31 @@ +--- +title: document.body +slug: Web/API/Document/body +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/body +--- +

{{ ApiRef() }}

+

Podsumowanie

+

body zwraca węzeł <body> lub <frameset> z bieżącego dokumentu.

+

Składnia

+
objRef = document.body
+document.body =objRef
+
+

Przykład

+
// HTML: <body id="oldBodyElement"></body>
+alert(document.body.id); // "oldBodyElement"
+var aNewBodyElement = document.createElement("body");
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+
+

Uwagi

+

document.body to element zawierający treść dokumentu. W dokumentach z elementem <body> własność zwraca tenże element, w dokumentach z definicją ramek zwracany jest najbardziej zewnętrzny element <frameset>.

+

Mimo, że body można samemu ustawić, jego zmiana spowoduje skuteczne usunięcie wszystkich potomków istniejącego elementu <body>.

+

Specyfikacja

+

body

+

{{ languages( { "en": "en/DOM/document.body", "es": "es/DOM/document.body" } ) }}

diff --git a/files/pl/web/api/document/characterset/index.html b/files/pl/web/api/document/characterset/index.html new file mode 100644 index 0000000000..4d7fa83359 --- /dev/null +++ b/files/pl/web/api/document/characterset/index.html @@ -0,0 +1,26 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/characterSet +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca kodowanie znaków dokumentu.

+

Składnia

+
ciąg = document.characterSet
+
+

Przykład

+
<button onclick="alert(document.characterSet);">Pokaż kodowanie znaków</button>
+// zwraca kodowanie znaków dokumentu, takie jak "ISO-8859-1 lub UTF-8"
+
+

Uwagi

+

Jest to zestaw znaków użyty przy renderowaniu strony, niekoniecznie taki, jak zadeklarowany w kodzie strony (użytkownik może narzucić własne kodowanie).

+

Kompletną listę dostępnych zestawów znaków znajdziesz tu: http://www.iana.org/assignments/character-sets.

+

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

+

{{ languages( { "en": "en/DOM/document.characterSet", "es": "es/DOM/document.characterSet" } ) }}

diff --git a/files/pl/web/api/document/clear/index.html b/files/pl/web/api/document/clear/index.html new file mode 100644 index 0000000000..fdeaf2e52e --- /dev/null +++ b/files/pl/web/api/document/clear/index.html @@ -0,0 +1,19 @@ +--- +title: document.clear +slug: Web/API/Document/clear +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/clear +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda clear czyści dokument, usuwając całą jego zawartość.

+

Składnia

+
document.clear()
+
+

Przykład

+
<button label="empty" onclick="document.clear();" />
+
+

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

diff --git a/files/pl/web/api/document/close/index.html b/files/pl/web/api/document/close/index.html new file mode 100644 index 0000000000..b325beb8cc --- /dev/null +++ b/files/pl/web/api/document/close/index.html @@ -0,0 +1,26 @@ +--- +title: document.close +slug: Web/API/Document/close +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/close +--- +
+ {{APIRef}}
+
+  
+

Podsumowanie

+

Metoda document.close() kończy zapis do otwartego dokumentu.

+

Składnia

+
document.close()
+
+

Przykład

+
// otwieramy dokument do zapisu
+// i kończymy zamknięciem poprzez close()
+document.open();
+document.write("<P>The only content</P>.");
+document.close();
+
+

Specyfikacja

+

close

diff --git a/files/pl/web/api/document/compatmode/index.html b/files/pl/web/api/document/compatmode/index.html new file mode 100644 index 0000000000..a2750f2ad8 --- /dev/null +++ b/files/pl/web/api/document/compatmode/index.html @@ -0,0 +1,32 @@ +--- +title: document.compatMode +slug: Web/API/Document/compatMode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/compatMode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, czy dokument renderowany jest w trybie zgodności wstecznej (ang. + + quirks mode + ), czy też w trybie standardów (ang. + + strict mode + ).

+

Składnia

+
tryb = document.compatMode
+
+

Parametry

+ +

Przykład

+
if ( document.compatMode == "BackCompat" ){
+  //wykonaj coś dla trybu zgodności
+}
+
+

{{ languages( { "en": "en/DOM/document.compatMode" } ) }}

diff --git a/files/pl/web/api/document/cookie/index.html b/files/pl/web/api/document/cookie/index.html new file mode 100644 index 0000000000..a711e9c1d2 --- /dev/null +++ b/files/pl/web/api/document/cookie/index.html @@ -0,0 +1,49 @@ +--- +title: document.cookie +slug: Web/API/Document/cookie +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/cookie +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Pobiera/ustawia listę ciasteczek powiązanych z dokumentem.

+ +

Składnia

+ +
listaCiasteczek = document.cookie
+document.cookie = listaCiasteczek
+
+ +

Parametry

+ + + +

Przykład

+ +
// ta funkcja ustawia dwa ciasteczka
+// a następnie wyświetla je w ostrzeżeniu
+function sgCookie() {
+  document.cookie = "name=oeschger";
+  document.cookie = "favorite_food=tripe";
+  alert(document.cookie);
+}
+// wyświetli: name=oeschger;favorite_food=tripe
+
+ +

Uwagi

+ +

Jeżeli nie ma ciasteczek powiązanych z tym dokumentem, funkcja zwraca pusty ciąg. Zauważ również, że nie możesz użyć tej własności, bu ustawić więcej niż jedno ciasteczko za jednym razem.

+ +

Specyfikacja

+ +

cookie

+ +

{{ languages( { "en": "en/DOM/document.cookie", "es": "es/DOM/document.cookie" } ) }}

diff --git a/files/pl/web/api/document/createattribute/index.html b/files/pl/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..ad996d5161 --- /dev/null +++ b/files/pl/web/api/document/createattribute/index.html @@ -0,0 +1,29 @@ +--- +title: document.createAttribute +slug: Web/API/Document/createAttribute +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/createAttribute +--- +

{{ ApiRef() }}

+

Podsumowanie

+

createAttribute tworzy nowy atrybut w bieżącym elemencie.

+

Składnia

+
atrybut = element.createAttribute(nazwa)
+
+

Parametry

+ +

Przykład

+
d = document.getElementById("div1");
+p = d.createAttribute("proportion");
+p.value = "100";
+
+

Uwagi

+

Zwracany jest węzeł typu Attribute. Kiedy masz już ten węzeł, tak jak w powyzszym przykładzie, możesz ustawić jego wartość za pomocą własności value. DOM nie wymusza typu atrybutów, jakie mogą zostać dodane w ten sposób do konkretnych elementów.

+

Specyfikacja

+

createAttribute

+

{{ languages( { "en": "en/DOM/document.createAttribute", "fr": "fr/DOM/document.createAttribute" } ) }}

diff --git a/files/pl/web/api/document/createdocumentfragment/index.html b/files/pl/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..e6bf6e6da3 --- /dev/null +++ b/files/pl/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,43 @@ +--- +title: document.createDocumentFragment +slug: Web/API/Document/createDocumentFragment +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createDocumentFragment +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Tworzy pusty fragment dokumentu.

+ +

Składnia

+ +
var fragmentDokumentu = document.createDocumentFragment();
+
+ +

fragmentDokumentu jest odniesieniem do pustego obiektu DocumentFragment.

+ +

Przykład

+ +
var frag = document.createDocumentFragment();
+frag.appendChild(document.createTextNode('Ipsum Lorem'));
+document.body.appendChild(frag);
+
+ +

Uwagi

+ +

DocumentFragment jest minimalnym obiektem dokumentu, który nie posiada rodzica. Obsługuje on następujące metody DOM 2: appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild.

+ +

Obsługuje on również następujące własności DOM 2: attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.

+ +

Różne inne metody potrafią pobrać fragment dokumentu jako argument (na przykład metody interfejsu Node takie jak appendChild i insertBefore), w przypadku których dodawane lub wstawiane są dzieci fragmentu, nie zaś same fragmenty.

+ +

Specyfikacja

+ +

createDocumentFragment

+ +

{{ languages( { "en": "en/DOM/document.createDocumentFragment" } ) }}

diff --git a/files/pl/web/api/document/createelement/index.html b/files/pl/web/api/document/createelement/index.html new file mode 100644 index 0000000000..bf657b4103 --- /dev/null +++ b/files/pl/web/api/document/createelement/index.html @@ -0,0 +1,74 @@ +--- +title: document.createElement +slug: Web/API/Document/createElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createElement +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Tworzy element podanego typu. Zauważ, że zwracana instancja implementuje interfejs Element, zatem można manipulować atrybutami bezpośrednio na zwróconym obiekcie.

+ +

Składnia

+ +
''element'' = document.createElement(''typ'')
+
+ +

Parametry

+ + + +

Przykład

+ +
<html>
+<head>
+<title>||Praca z elementami||</title>
+</head>
+
+<script type="text/javascript">
+var my_div = null;
+var newDiv = null;
+
+function addElement()
+{
+  // tworzy nowy element div
+  // i daje jego zawartość
+  newDiv = document.createElement("div");
+  newDiv.innerHTML = "<h1>Hi there and greetings!</h1>";
+
+  // add the newly created element and it's content into the DOM
+  my_div = document.getElementById("org_div1");
+  document.body.insertBefore(newDiv, my_div);
+}
+
+</script>
+
+<body onload="addElement()">
+    <div id='org_div1'> The text above has been created dynamically.</div>
+</body>
+</html>
+
+ +

Uwagi

+ +

Jeżeli znane są atrybuty o domyślnych wartościach, zostaną automatycznie utworzone i przypisane do elementu węzły tychże atrybutów.

+ +

Aby utworzyć element o uściślonej nazwie i URI przestrzeni nazw, użyj metody createElementNS.

+ +

Specyfikacja

+ +

createElement

+ + + +
+ +

{{ languages( { "en": "en/DOM/document.createElement", "fr": "fr/DOM/document.createElement", "it": "it/DOM/document.createElement", "ja": "ja/DOM/document.createElement", "ko": "ko/DOM/document.createElement" } ) }}

diff --git a/files/pl/web/api/document/createevent/index.html b/files/pl/web/api/document/createevent/index.html new file mode 100644 index 0000000000..1064131504 --- /dev/null +++ b/files/pl/web/api/document/createevent/index.html @@ -0,0 +1,134 @@ +--- +title: document.createEvent +slug: Web/API/Document/createEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createEvent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Tworzy obiekt obsługi zdarzenia o określonym typie. Utworzony obiekt powinien zostać najpierw zainicjalizowany, a następnie przekazany do metody dispatchEvent elementu.

+

Składnia

+
var zdarzenie =document.createEvent(typ);
+
+ +

Przykład

+

dispatchEvent - przykład [pl]

+

Uwagi

+

Nazwy typów zdarzeń, które można przekazać do createEvent określane są przez + + moduły zdarzeń + . Niektóre moduły zdarzeń zdefiniowane są w specyfikacjach DOM Events, niektóre moduły w innych specyfikacjach (jak np. SVG), a pewne typy zdarzeń są specyficzne dla Gecko.

+

Szczegóły znajdziesz w poniższej tabeli.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Moduł zdarzeńTyp do przekazania w createEventMetoda używana do inicjalizacji zdarzenia
DOM Level 2 Events
Moduł zdarzeń interfejsu użytkownika"UIEvents"event.initUIEvent
Moduł zdarzeń myszy"MouseEvents"event.initMouseEvent
Moduł zdarzeń mutacji"MutationEvents"event.initMutationEvent
Moduł zdarzeń HTML"HTMLEvents"event.initEvent
DOM Level 3 Events
Moduł zdarzeń interfejsu użytkownika"UIEvent", "UIEvents"event.initUIEvent
Moduł zdarzeń myszy"MouseEvent", "MouseEvents"event.initMouseEvent
Moduł zdarzeń mutacji"MutationEvent", "MutationEvents"event.initMutationEvent
Moduł zdarzeń mutacji nazw (nie zaimplementowany przez Gecko - czerwiec 2006)"MutationNameEvent"event.initMutationNameEvent
Moduł zdarzeń tekstowych"TextEvent" (Gecko obsługuje też "TextEvents")event.initTextEvent
Moduł zdarzeń klawiatury"KeyboardEvent" (Gecko obsługuje też "KeyEvents")event.initKeyboardEvent
Moduł podstawowych zdarzeń"Event" (Gecko obsługuje też "Events")event.initEvent
SVG 1.1 Scripting
SVG"SVGEvents" (Gecko obsługuje też "SVGEvent")event.initEvent
"SVGZoomEvents" (Gecko obsługuje też "SVGZoomEvent")event.initUIEvent
Inne typy zdarzeń obsługiwane przez Gecko Gecko-related information is taken from nsEventDispatcher::CreateEvent code - see lxr.m.o
-"MouseScrollEvents", "PopupEvents"event.initMouseEvent
"PopupBlockedEvents"event.initPopupBlockedEvent
"XULCommandEvent", "XULCommandEvents"event.initCommandEvent
+

Niektóre zdarzenia mogą być tworzone przy użyciu dwóch nazw typów, ponieważ w specyfikacji DOM Level 3 Events zmieniono nazwy z liczby mnogiej na pojedynczą, pozostawiając nazwy w liczbie mnogiej dla zgodności wstecznej.

+

Specyfikacja

+

DOM Level 2 Events: createEvent

+

DOM Level 3 Events: createEvent

+

 

+
+  
+

{{ languages( { "en": "en/DOM/document.createEvent", "es": "es/DOM/document.createEvent", "ja": "ja/DOM/document.createEvent" } ) }}

diff --git a/files/pl/web/api/document/createrange/index.html b/files/pl/web/api/document/createrange/index.html new file mode 100644 index 0000000000..75dbacfe83 --- /dev/null +++ b/files/pl/web/api/document/createrange/index.html @@ -0,0 +1,29 @@ +--- +title: document.createRange +slug: Web/API/Document/createRange +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createRange +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca nowy objekt Range.

+

Składnia

+
range = document.createRange();
+
+

range jest utworzonym objektem range.

+

Przykład

+
var range = document.createRange();
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+
+

Uwagi

+

Gdy tylko Range jest utworzony, musisz określić jego punkty graniczne zanim będziesz mógł użyć większości jego metod.

+

Specyfikacja

+

DOM Level 2 Range: DocumentRange.createRange

+
+  
+

{{ languages( { "en": "en/DOM/document.createRange", "es": "es/DOM/document.createRange" } ) }}

diff --git a/files/pl/web/api/document/createtextnode/index.html b/files/pl/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..1fe0f9bd27 --- /dev/null +++ b/files/pl/web/api/document/createtextnode/index.html @@ -0,0 +1,62 @@ +--- +title: document.createTextNode +slug: Web/API/Document/createTextNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createTextNode +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Tworzy nowy węzeł tekstowy.

+ +

Składnia

+ +
var tekst = document.createTextNode(tresc)
+
+ +

Parametry

+ + + +

Przykład

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>createTextNode - przyklad</title>
+<script>
+function dodajWezelTekstowy(tekst) {
+  var nowytekst = document.createTextNode(tekst),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(nowytekst);
+}
+</script>
+</head>
+
+<body>
+  <button onclick="dodajWezelTekstowy('TAK! ');">TAK!</button>
+  <button onclick="dodajWezelTekstowy('NIE! ');">NIE!</button>
+  <button onclick="dodajWezelTekstowy('JASNE! ');">JASNE!</button>
+
+  <hr />
+
+  <p id="p1">Pierwsza linia paragrafu.</p>
+</body>
+</html>
+ +

Specyfikacja

+ +

createTextNode

+ +
 
+ +

{{ languages( { "en": "en/DOM/document.createTextNode", "fr": "fr/DOM/document.createTextNode", "ko": "ko/DOM/document.createTextNode" } ) }}

diff --git a/files/pl/web/api/document/defaultview/index.html b/files/pl/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..905a966998 --- /dev/null +++ b/files/pl/web/api/document/defaultview/index.html @@ -0,0 +1,24 @@ +--- +title: document.defaultView +slug: Web/API/Document/defaultView +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/defaultView +--- +

{{ ApiRef() }}

+

 

+

Podsumowanie

+

document.defaultView zwraca odnośnik do domyślnego AbstractView dokumentu, lub null jeśli żadny nie jest dostępne

+

Składnia

+
var docDView = document.defaultView;
+
+

Własność tylko do odczytu.

+

Uwagi

+

document.defaultView jest częścią interfejsu DOM poziomu 2 DocumentView.

+

document.defaultView jest głównie odnośnikiem do okna obiektu dla dokumentu, jednakże nie jest to zdefiniowane w specyfikacji i nie można się na tym opierać we wszystkich środowiskach zwłaszcza, że nie wszystkie przeglądarki to implementują. it would probably be useful to provide concrete examples here

+

Specyfikacja

+

DOM Level 2 Views: defaultView

+

{{ languages( { "en": "en/DOM/document.defaultView" } ) }}

diff --git a/files/pl/web/api/document/designmode/index.html b/files/pl/web/api/document/designmode/index.html new file mode 100644 index 0000000000..3956fa8d9e --- /dev/null +++ b/files/pl/web/api/document/designmode/index.html @@ -0,0 +1,53 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +translation_of: Web/API/Document/designMode +--- +
{{ApiRef()}}
+ +

document.designMode kontroluje czy dokument może być edytowany. Dopuszczalne wartości to "on" (włączona edycja) oraz "off" (wyłączona edycja). Zgodnie ze specyfikacją, wartość domyślna to "off". Firefox stosuje ten standard. Dla wcześniejszych wersji Chrome oraz IE domyślną wartością było "inherit". Od wersji Chrome 43, standardem jest wartość "off", a "inherit" nie jest wspierane. W IE 6-10, wartość jest używana naprzemiennie.

+ +

Składnia

+ +
var mode = document.designMode;
+document.designMode = "on" || "off";
+ +

Przykład

+ +

Spraw aby element {{HTMLElement("iframe")}} był edytowalny:

+ +
iframeNode.contentDocument.designMode = "on";
+
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}{{Spec2('HTML WHATWG')}}Definicja
+ +

Kompatybilność przeglądarek

+ + + +

{{Compat("api.Document.designMode")}}

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/document/doctype/index.html b/files/pl/web/api/document/doctype/index.html new file mode 100644 index 0000000000..4894005b15 --- /dev/null +++ b/files/pl/web/api/document/doctype/index.html @@ -0,0 +1,21 @@ +--- +title: document.doctype +slug: Web/API/Document/doctype +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/doctype +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca definicję typu bieżącego dokumentu (DTD).

+

Składnia

+
ciąg = document.doctype
+
+

Uwagi

+

Atrybut doctype jest tylko do odczytu. Jeżeli nie ma DTD w dokumencie, zwrócone zostaje NULL.

+

Specyfikacja

+

docType

+

{{ languages( { "en": "en/DOM/document.doctype" } ) }}

diff --git a/files/pl/web/api/document/documentelement/index.html b/files/pl/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..bc729c829f --- /dev/null +++ b/files/pl/web/api/document/documentelement/index.html @@ -0,0 +1,60 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/documentElement +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Tylko do odczytu

+ +

Zwraca Element będący bezpośrednim dzieckiem document (na przykład dla dokumentów HTML jest to element <html>).

+ +

Składnia

+ +
varelement = document.documentElement;
+
+ +

Przykład

+ +
actual_doc = document.documentElement;
+first_tier = actual_doc.childNodes;
+//first_tier to bezpośrednie dzieci HTML
+for (var i = 0; i < first_tier.length; i++) {
+   //zrób cos z każdym dzieckiem HTML
+   //poprzez first_tier[i]
+}
+
+ +
var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+// firstTier jest NodeList bezpośredniego dziecka elementu głównego
+for (var i = 0; i < firstTier.length; i++) {
+   // zrób coś z każdym dzieckiem HTML głównego elementu
+   // as firstTier[i]
+}
+
+ +

Uwagi

+ +

Ta własność tylko do odczytu jest udogodnieniem w przechwytywaniu elementu HTML, powiązanego z każdym prawidłowym dokumentem HTML.

+ +

Powyżej typowy przykład: potrzebujesz w rzeczywistości elementu HTML, aby mieć dostęp do wszystkich jego dzieci, więc używasz tej własności obiektu document, aby go przejąć.

+ +

Zauważ też, że zazwyczaj document zawiera jeden węzeł-dziecko - HTML - który sam zawiera wszystkie elementy faktycznego dokumentu jako listę węzłów-dzieci (nodeList).

+ +

Specyfikacja

+ +

DOM Level 2 Core: Document.documentElement

+ + + +
+ +

{{ languages( { "en": "en/DOM/document.documentElement", "es": "es/DOM/document.documentElement", "fr": "fr/DOM/document.documentElement", "ja": "ja/DOM/document.documentElement" } ) }}

diff --git a/files/pl/web/api/document/domain/index.html b/files/pl/web/api/document/domain/index.html new file mode 100644 index 0000000000..e64ad2e641 --- /dev/null +++ b/files/pl/web/api/document/domain/index.html @@ -0,0 +1,30 @@ +--- +title: document.domain +slug: Web/API/Document/domain +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/domain +--- +

{{ ApiRef() }}

+

Podsumowanie

+

domain pobiera/ustawia domenę bieżącego dokumentu.

+

Składnia

+
ciąg = document.domain
+document.domain =ciąg
+
+

Przykład

+
bad_domain = "www.love.com";
+if ( document.domain == bad_domain ) {
+   window.close();
+}
+// jeśli dokument to www.love.com/good.html,
+// to skrypt zamknie okno
+
+

Uwagi

+

Właściwość zwraca NULL jezeli nie można zidentyfikować serwera. W specyfikacji DOM własność tą oznaczono jako tylko do oczytu, jednak Mozilla pozwala na jej modyfikację.

+

Specyfikacja

+

domain

+

{{ languages( { "en": "en/DOM/document.domain" } ) }}

diff --git a/files/pl/web/api/document/drag_event/index.html b/files/pl/web/api/document/drag_event/index.html new file mode 100644 index 0000000000..ccc5d55cbb --- /dev/null +++ b/files/pl/web/api/document/drag_event/index.html @@ -0,0 +1,333 @@ +--- +title: drag +slug: Web/API/Document/drag_event +tags: + - DOM + - Zdarzenie + - przeciągnij i upuść +translation_of: Web/API/Document/drag_event +--- +
{{APIRef}}
+ +

Zdarzenie przeciągania uruchamiane jest po przeciągnięciu elementu lub tekstu (co kilkaset milisekund).

+ +

Ogólne informacje

+ + + + + + + + + + + + + + + + + + + + + + + + +
BąbelkowanieTak
CancelableTak
Obiekt docelowy{{domxref("Document")}}, {{domxref("Element")}}
Interfejs{{domxref("DragEvent")}}
Domyślna akcjaKontynuuje operacje przeciągania i upuszczania
+ +

Właściwości

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Przykład

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* events fired on the draggable target */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // store a ref. on the dragged elem
+      dragged = event.target;
+      // make it half transparent
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset the transparency
+      event.target.style.opacity = "";
+  }, false);
+
+  /* events fired on the drop targets */
+  document.addEventListener("dragover", function( event ) {
+      // prevent default to allow drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // highlight potential drop target when the draggable element enters it
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset background of potential drop target when the draggable element leaves it
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // prevent default action (open as link for some elements)
+      event.preventDefault();
+      // move dragged elem to the selected drop target
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}{{Spec2("HTML5.1")}}Initial definition
+ +

Obsługiwane przeglądarki

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}10123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

Zobacz również

+ + diff --git a/files/pl/web/api/document/embeds/index.html b/files/pl/web/api/document/embeds/index.html new file mode 100644 index 0000000000..ca0ab4ff2f --- /dev/null +++ b/files/pl/web/api/document/embeds/index.html @@ -0,0 +1,22 @@ +--- +title: document.embeds +slug: Web/API/Document/embeds +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/embeds +--- +

{{ ApiRef() }}

+

Podsumowanie

+

embeds zwraca listę obiektów OBJECT zagnieżdżonych w bieżącym dokumencie.

+

Składnia

+
listaWęzłów = document.embeds
+
+

Specyfikacja

+

{{ DOM0() }}

+


+ MSDN: embeds collection

+

{{ languages( { "en": "en/DOM/document.embeds" } ) }}

diff --git a/files/pl/web/api/document/execcommand/index.html b/files/pl/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..0718107051 --- /dev/null +++ b/files/pl/web/api/document/execcommand/index.html @@ -0,0 +1,280 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - Method + - NeedsBrowserCompatibility + - NeedsExample + - Reference + - edytor +translation_of: Web/API/Document/execCommand +--- +
+ +
Kiedy dokument HTML jest przełączony w tryb designMode, obiekt dokumentu udostępnia metodę execCommand, która pozwala uruchomić komendy manipulujące edytowalnym obszarem. Większość poleceń wpływa na zaznaczony obszar (pogrubienie, kursywa itd.), podczas gdy inne wstawiają nowe elementy (dodawanie linku) lub wpływają na całą linię (wcięcia). Przy użyciu contentEditable, wywołanie execCommand() wpływa na aktywny edytowalny element.
+ +

Składnia

+ +
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
+
+ +

Zwracane wartości

+ +

Obiekt {{jsxref('Boolean')}}, który zwraca false, jeśli polecenie jest niewspierane lub włączone. Uwaga: Zwraca prawdę tylko jeśli jest częścią UI, to znaczy - nie jest używana do sprawdzania wsparcia przeglądarki przed renderowaniem elementu, który wywołuje polecenie. 

+ +

Parametry

+ +
+
aCommandName
+
Typu {{domxref("DOMString")}} - określanazwę polecenia do wykonania. Zobacz {{anch("Commands")}}, aby wyświetlić listę poleceń.
+
aShowDefaultUI
+
Typu {jsxref("Boolean")}} - wskazuje czy domyślny interfejs użytkownika powinien być pokazany. Nie jest implementowane przez Mozillę.
+
aValueArgument
+
W przypadku komend wymagających wprowadzenia argumentu (takiego jak insertImage, gdzie jest to URL do grafiki do wstawienia), jest to {{domxref("DOMString")}} przekazujący te informacje. Podaj null, jeśli niewymagany.
+
+ +

Polecenia

+ +
+
backColor
+
Zmienia kolor tła. W trybie styleWithCss zmieia kolor jedynie zawierającego elementu. Wymaga podania ciągu znaków{{cssxref("<color>")}} jako wartości argumentu. Zwróć uwagę na to, że Internet Explorer używa tego do zmiany koloru tła tekstu.
+
bold
+
Włącza/wyłącza pogrubienie w zaznaczeniu lub miejscu wstawiania. IE używa znacznika {{HTMLElement("strong")}} zamiast {{HTMLElement("b")}}.
+
contentReadOnly
+
Sprawia, że dokument jest zawartość jest tylko do odczytu lub edytowalna. Wymaga prawdy/fałszu jako wartości argumentu. (Nie wspierany przez IE).
+
copy
+
Kopiuje zaznaczenie do schowkka. Warunki włączenia tego zachowania różnią się między przeglądarkami i zmieniają się w czasie. Sprawdź tabelę zgodności, aby określić, czy możesz użyć w swoim przypadku.
+
createLink
+
Wstawia link z zaznaczenia (wymaga zaznaczenia). HREF URI musi być podany jako wartość argumentu. URI musi zawierać co najmniej jeden zak, może być białym znakiem (IE utworzy link z wartością null).
+
cut
+
Usuwa zaznaczenie kopiując do schowka. Warunki włączenia tego zachowania różnią się między przeglądarkami i zmieniają się w czasie. Sprawdź tabelę zgodności, aby określić, czy możesz użyć w swoim przypadku.
+
decreaseFontSize
+
Wstawia znacznik {{HTMLElement("small")}} wokół zaznaczenia lub w miejscu wstawienia. (Nie wspierane przez IE.)
+
defaultParagraphSeparator
+
Zmienia separator akapitu używany podczas tworzenia nowych akapitów w edytowalnych regionach tekstowych.  Zobacz Differences in markup generation po więcej szczegółów.
+
delete
+
Usuwa zaznaczenie.
+
enableInlineTableEditing
+
Włącza lub wyłącza wstawianie wierszy i kolumn oraz elementy sterujące usuwaniem. (Nie obsługiwane przez Internet Explorer.)
+
enableObjectResizing
+
Umożliwia lub uniemożliwia zmianę rozmiaru uchwytów na obrakach lub innych skalowalnych obiektów.  (Nie wspierane przez IE)
+
fontName
+
Zmienia nazwę czcionki dla zaznaczenia lub w punkcie wstawiania. Wymaga ciągu znaków (np. "Arial") jako wartości argumentu.
+
fontSize
+
Zmienia rozmiar czcionki dla zaznaczenia lub w punkcie wstawiania. Wymaga rozmiaru czcionki HTML (1-7) jako wartości argumentu.
+
foreColor
+
Zmienia kolor czcionki dla zaznaczenia lub w punkcie wstawiania. Wymaga wartości koloru (w postaci ciągu znaków) jako wartości argumentu.
+
formatBlock
+
Wstawia tag stylu blokowego dla linii w zaznaczeniu, zastępując blokowy element zawierający linię, jeśli taki istnieje (w Firefoxie, BLOCKQUOTE jest wyjątkiem - zawinie blokowy element zawierający).  Wymaga ciągu znaków oznaczającego znacznik jako wartość argumentu. Można użyć praktycznie wszystkich (np. "H1", "P", "DL", "BLOCKQUOTE). (IE wspiera jedynie H1-H6, "ADDRESS", PRE, które jeszcze muszą zawierać nawiasy znaczników <>, tak jak "<h1">).
+
forwardDelete
+
Usuwa znak przed pozycją kursora.  Działa jak wciśnięcie klawisza Delete.
+
heading
+
Wstawia tag nagłówka naokoło zaznaczenia lub w miejscu wstawiania. Wymaga ciągu znaków oznaczającego nazwę tagu jako wartości argumentu (np. "H1", "H6"). (Nie wspierane przez IE ani Safari).
+
hiliteColor
+
Zmienia kolor tła dla zaznaczenia lub w miejscu wstawiania. Wymaga ciągu znaków w postaci wartości kolorów jako wartości argumentu. Do użycia tej funkcji jest wymagane użycie CSS. (Nie wspierane przez IE).
+
increaseFontSize
+
Wstawia tag BIG naokoło zaznaczenia lub w miejscu wstawiania. (Nie wspierane przez IE).
+
indent
+
Wcina wiersz zawierający zaznaczenie lub punkt wstawiania. W Firefixie, jeśli zaznaczenie obejmuje wiele linii na różnych poziomach wcięcia, jedynie ostatnie wcięte linie zostaną wcięte.
+
insertBrOnReturn
+
Kontroluje, czy klawisz Enter wstawia tag BR, czy dzieli elemet blokowy na dwa (Nie wspierane przez IE)
+
insertHorizontalRule
+
Wstawia poziomą linię w miejscu wstawiania (usuwa zaznaczenie).
+
insertHTML
+
Wstawia ciąg znaków w postaci kodu HTML (usuwa zaznaczenie). Wymaga poprawnego kodu jako wartość argumentu. (Nie wspierane prze
+
insertImage
+
Wstawia grafikę w punkcie wstawiania (usuwa zaznaczenie). Wymaga ciągu znaków w postaci SRC URI jako wartości argumentu. URI musi zawierać co najmniej jeden znak (może być to biały znak). (Nie wspierane przez IE).
+
insertOrderedList
+
Wstawia numerowaną listę dla zaznaczenia lub w punkcie wstawiania.
+
insertUnorderedList
+
Wstawia punktowaną listę dla zaznaczenia lub w punkcie wstawiania.
+
insertParagraph
+
Wstawia akapit naokoło zaznaczenia lub w danej linii. (IE wstawia akapit w miejscu wstaawiania i usuwa zaznaczenie).
+
insertText
+
Wstawia dany tekst w miejsce wstawiania (usuwa zaznaczenie).
+
italic
+
Włącza/wyłącza pochylenie dla zaznaczenia lub w miejscu wstawiania (IE używa tagu EM zamiast I).
+
justifyCenter
+
Wyśrodkowuje zaznaczenie lub miejsce wstawiania.
+
justifyFull
+
Justuje zaznaczenie lub miejsce wstawiania.
+
justifyLeft
+
Wyrównuje do lewej zaznaczenie lub miejsce wstawiania.
+
justifyRight
+
Wyrównuje do prawej zaznaczenie lub miejsce wstawiaia.
+
outdent
+
Wysuwa linię zawierającą zaznaczenie lub punkt wstawiania.
+
paste
+
Wstawia zawartość schowka w miejscu wstawiania (zastępuje zaznaczenie). Nie działa dla zawartości z internetu. Zobacz [1]
+
redo
+
Ponawia ostatnio cofniętą komendę.
+
removeFormat
+
Usuwa całe formatowanie z zaznaczenia.
+
selectAll
+
Zaznacza całą zawartość z edytowalnego obszaru.
+
strikeThrough
+
Włącza/wyłącza przekreślenie dla zaznaczenia lub w punkcie wstawiania.
+
subscript
+
Włącza/wyłącza indeks dolny dla zaznaczenia lub w punkcie wstawiania.
+
superscript
+
Włącza/wyłącza indeks górny dla zaznaczenia lub w punkcie wstawiania.
+
underline
+
Włącza/wyłącza podkreślenie dla zaznaczenia lub w punkcie wstawiania.
+
undo
+
Cofa ostatnio wykonaną komendę.
+
unlink
+
Usuwa tag kotwicy z zaznaczonego linku.
+
useCSS {{Deprecated_inline}}
+
Przełącza użycie HTML/CSS dla generowanego kodu. Wymaga prawdy/fałszu jako wartości argumentu. UWAGA: dla CSS wymaga fałszu, dla HTML - prawdy. (Nie jest wspierane przez IE). Deprecjonowana właściwość. Użyj styleWithCSS
+
styleWithCSS
+
Zastępuje useCSS; działa normalnie - dla CSS wymaga prawdy, fałsz generuje HTML.
+
+ +

Example

+ +

Zobacz how to use w CodePen.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML Editing', '#execcommand()', 'execCommand')}}{{Spec2('HTML Editing')}}Initial definition
+ +

Kompatybilność przeglądarek

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
insertBrOnReturn{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
copy/cut{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(41)}}92910
defaultParagraphSeparator{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(55)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
insertBrOnReturn{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
copy/cut{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(41)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
defaultParagraphSeparator{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(55)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +

[1] Przed przeglądarką Firefox 41 w pliku preferencji user.js trzeba było włączyć obsługę schowka. Aby uzyskać więcej informacji, zobacz Krótki przewodnik po preferencjach Mozilli. Jeśli polecenie nie było obsługiwane lub włączone, execCommand rzucał wyjątek zamiast zwracać false. W Firefoxie 41 i nowszych, schowek może zostać zapisany w dowolnym programie obsługi zdarzeń read the clipboard. WebExtensions can interact with the clipboard.

+ +

Przed przeglądarką Firefox 41 w pliku preferencji user.js trzeba było włączyć obsługę schowka. Aby uzyskać więcej informacji, zobacz Krótki przewodnik po preferencjach Mozilli. Jeśli polecenie nie było obsługiwane lub włączone, execCommand podnosił wyjątek zamiast zwracać fałsz. W przeglądarce Firefox 41 i nowszych schowek może zostać zapisany w dowolnej obsłudze zdarzeń, która może spowodować wyskoczenie okna (częściowo zaufane skrypty), ale żadna treść internetowa nie może odczytać schowka. WebExtensions mogą wchodzić w interakcje ze schowkiem.

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/document/fgcolor/index.html b/files/pl/web/api/document/fgcolor/index.html new file mode 100644 index 0000000000..a9f0287372 --- /dev/null +++ b/files/pl/web/api/document/fgcolor/index.html @@ -0,0 +1,28 @@ +--- +title: document.fgColor +slug: Web/API/Document/fgColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/fgColor +--- +

{{ ApiRef() }}

+

Podsumowanie

+

fgColor pobiera/ustawia kolor pierwszoplanowy (kolor tekstu) bieżącego dokumentu.

+

Składnia

+
kolor = document.fgColor
+document.fgColor =kolor
+
+

Parametry

+ +

Przykład

+
document.fgColor = "white";
+document.bgColor = "darkblue";
+
+

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

+

{{ languages( { "en": "en/DOM/document.fgColor" } ) }}

diff --git a/files/pl/web/api/document/firstchild/index.html b/files/pl/web/api/document/firstchild/index.html new file mode 100644 index 0000000000..c2bc145b41 --- /dev/null +++ b/files/pl/web/api/document/firstchild/index.html @@ -0,0 +1,36 @@ +--- +title: document.firstChild +slug: Web/API/Document/firstChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/firstChild +--- +

{{ ApiRef() }}

+

Podsumowanie

+

document.firstChild zwraca pierwszy węzeł z listy bezpośrednich dzieci dokumentu.

+

Składnia

+
dziecko = document.firstChild
+
+

Parametry

+ +

Przykład

+
function fChild() {
+  f = document.firstChild;
+  alert(f.tagName);
+}
+// wyświetli: HTML
+
+

Uwagi

+

Zauważ, że możesz powrócić do drzewa DOM z tą własnością, by przejąć te węzły potomne, których potrzebujesz, ponieważ prawie zawsze firstChild zwraca element HTML.

+

Specyfikacja

+

firstChild

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/document.firstChild", "es": "es/DOM/document.firstChild", "fr": "fr/DOM/document.firstChild", "ja": "ja/DOM/document.firstChild" } ) }}

diff --git a/files/pl/web/api/document/forms/index.html b/files/pl/web/api/document/forms/index.html new file mode 100644 index 0000000000..dcba1e18e0 --- /dev/null +++ b/files/pl/web/api/document/forms/index.html @@ -0,0 +1,45 @@ +--- +title: document.forms +slug: Web/API/Document/forms +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/forms +--- +

{{ ApiRef() }}

+

Podsumowanie

+

forms zwraca listę elementów FORM z bieżącego dokumentu.

+

Składnia

+
listaWęzłów = document.forms
+
+

Przykład

+
<html>
+
+<head>
+<title> document.forms example</title>
+</head>
+
+<body>
+<form id="robby">
+ <input type="button" onclick="alert(document.forms[0].id);"
+ value="robby's form" />
+</form>
+
+<form id="dave">
+ <input type="button" onclick="alert(document.forms[1].id);"
+ value="dave's form" />
+</form>
+
+<form id="paul">
+ <input type="button" onclick="alert(document.forms[2].id);"
+ value="paul's form" />
+</form>
+
+</body>
+</html>
+
+

Specyfikacja

+

forms

+

{{ languages( { "en": "en/DOM/document.forms", "ja": "ja/DOM/document.forms" } ) }}

diff --git a/files/pl/web/api/document/getelementbyid/index.html b/files/pl/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..51e1bd68c0 --- /dev/null +++ b/files/pl/web/api/document/getelementbyid/index.html @@ -0,0 +1,67 @@ +--- +title: document.getElementById +slug: Web/API/Document/getElementById +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/getElementById +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca element o określonym ID.

+ +

Składnia

+ +
var element = document.getElementById(id);
+
+ +

Parametry

+ + + +

Przykład

+ +
<html>
+<head>
+<title>Przykład getElementById</title>
+
+<script type="text/javascript">
+
+function changeColor(newColor)
+{
+ var elem = document.getElementById("para1");
+ elem.style.color = newColor;
+}
+</script>
+</head>
+
+<body>
+<p id="para1">Jakiś tekst</p>
+<button onclick="changeColor('blue');">niebieski</button>
+<button onclick="changeColor('red');">czerwony</button>
+</body>
+</html>
+
+ +

Uwagi

+ +

getElementById jest absolutną podstawą DOM. Jedną z najważniejszych zasad w programowaniu DOM jest unikalne identyfikowanie elementów, dzięki czemu można je przechwycić i manipulować nimi.

+ +

Jeżeli nie ma elementu o podanym ID, funkcja zwraca NULL. Zauważ też, że implementacja DOM musi wiedzieć, które atrybuty mają typ ID. Atrybuty o nazwie "ID" nie mają typu ID, o ile nie zostanie to tak zdefiniowane. Implementacje, które nie wiedzą, czy atrybuty mają typ ID czy nie, powinny zwracać NULL.

+ +

getElementById wprowadzono w DOM Level 2.

+ +

Specyfikacja

+ + + +

{{ languages( { "en": "en/DOM/document.getElementById", "fr": "fr/DOM/document.getElementById", "ja": "ja/DOM/document.getElementById" } ) }}

diff --git a/files/pl/web/api/document/getelementsbyclassname/index.html b/files/pl/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..a9e2037ac3 --- /dev/null +++ b/files/pl/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,82 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - HTML5 + - Klasy +translation_of: Web/API/Document/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

Zwraca obiekt podobny do tablicy, zawierający wszystkie elementy, które mają przypisaną daną klasę. Kiedy użyjemy tej funkcji w odniesieniu do elementu document, cały dokument jest przeszukiwany - na wszystkich poziomach.

+ +

Możesz również użyć funkcji {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} na dowolnym elemencie; wtedy zwróci jedynie elementy zawierające daną klasę, które zawierają się w obrębie elementu wskazanego przez nas.

+ +

Składnia

+ +
var elements = document.getElementsByClassName(names); // or:
+var elements = rootElement.getElementsByClassName(names);
+ + + +

Przykłady

+ +

Szukamy wszystkich elementów posiadających klasę 'test':

+ +
document.getElementsByClassName('test');
+ +

Szukamy elementów, które posiadają jednocześnie klasę 'red' oraz 'test':

+ +
document.getElementsByClassName('red test');
+ +

Szukamy elementów posiadających klasę 'test', w obrębie elementu o ID 'main':

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

Możemy też użyć metody Array.prototype. W ten sposób znajdziemy wszystkie elementy div posiadające klasę 'test':

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});
+ +

Uwagi

+ +

Należy zwrócić uwagę na różnice w zwracanej wartości w zależności od składni (aby została zwrócona konkretna wartość należy posłużyć się indeksem):

+ +
<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>hello word1</p>
+        <p class="test">hello word2</p>
+        <p >hello word3</p>
+        <p>hello word4</p>
+    </div>
+    <script>
+        var parentDOM = document.getElementById("parent-id");
+
+        var test=parentDOM.getElementsByClassName("test");//test is not target element
+        console.log(test);//HTMLCollection[1]
+
+        var testTarget=parentDOM.getElementsByClassName("test")[0];//here , this element is target
+        console.log(testTarget);//<p class="test">hello word2</p>
+    </script>
+</body>
+</html>
+ +

Specyfikacja

+ + diff --git a/files/pl/web/api/document/getelementsbyname/index.html b/files/pl/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..1cadc785de --- /dev/null +++ b/files/pl/web/api/document/getelementsbyname/index.html @@ -0,0 +1,35 @@ +--- +title: document.getElementsByName +slug: Web/API/Document/getElementsByName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/getElementsByName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca listę elementów w dokumencie o żądanym atrybucie name.

+

Składnia

+
elementy = document.getElementsByName(nazwa)
+
+

Parametry

+ +

Przykład

+
// zwraca niektóre z DIV-ów
+<div name="up">200</div>
+<div name="up">145</div>
+<div name="down">146</div>
+<div name="other">178</div>
+up_divs = document.getElementsByName("up");
+dump(up_divs.item(0).tagName); // zwraca "div"
+
+

Uwagi

+

document.getElementsByName zwraca listę węzłów wszystkich elementów o zadanej wartości atrybutu name. W przeciwieństwie do getElementsByTagName, który analizuje samą nazwę elementu, ta metoda pracuje tylko na elementach, których atrybut name został wyraźnie podany.

+

Specyfikacja

+

getElementsByName

+

{{ languages( { "en": "en/DOM/document.getElementsByName", "fr": "fr/DOM/document.getElementsByName", "ja": "ja/DOM/document.getElementsByName" } ) }}

diff --git a/files/pl/web/api/document/getelementsbytagname/index.html b/files/pl/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..b4db8f428d --- /dev/null +++ b/files/pl/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,108 @@ +--- +title: document.getElementsByTagName +slug: Web/API/Document/getElementsByTagName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Document/getElementsByTagName +--- +

{{ ApiRef("DOM") }}

+ +

Podsumowanie

+ +

Zwraca listę elementów o podanej nazwie znacznika. Przeszukiwany jest cały dokument, łącznie z głównym węzłem.

+ +

Składnia

+ +
elements = document.getElementsByTagName(name)
+
+ + + +

Przykład

+ +

W poniższym przykładzie getElementsByTagName starts from a particular parent element, and searches topdown recursively through the DOM from that parent element, looking for child elements matching the tag name parameter.

+ +

Zauważ, że gdy węzeł, w którym przywołano getElementsByTagName, nie jest węzłem document, to w rzeczywistości użyta jest metoda element.getElementsByTagName.

+ +
<html>
+
+<head>
+<title>Przykład getElementsByTagName</title>
+
+<script type="text/javascript">
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagName("p");
+
+  var num = allParas.length;
+
+  alert("W tym dokumencie jest " + num + " elementów <p>");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagName("p");
+
+  var num = div1Paras.length;
+
+  alert("W elemencie div1 znajduje się " + num + " elementów <p>");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagName("p");
+
+  var num = div2Paras.length;
+
+  alert("W elemencie div2 znajduje się " + num + " elementów <p>");
+}
+
+</script>
+</head>
+
+<body style="border: solid green 3px">
+<p>Trochę zewnętrznego tekstu</p>
+<p>Trochę zewnętrznego tekstu</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Trochę tekstu w div1</p>
+    <p>Trochę tekstu w div1</p>
+    <p>Trochę tekstu w div1</p>
+
+    <div id="div2" style="border: solid red 3px">
+    <p>Trochę tekstu w div2</p>
+    <p>Trochę tekstu w div2</p>
+    </div>
+  </div>
+
+<p>Trochę zewnętrznego tekstu</p>
+<p>Trochę zewnętrznego tekstu</p>
+
+<button onclick="getAllParaElems();">
+ pokaż wszystkie elementy p w dokumencie</button><br />
+
+<button onclick="div1ParaElems();">
+ pokaż wszystkie elementy p w elemencie div1</button><br />
+
+<button onclick="div2ParaElems();">
+ pokaż wszystkie elementy p w elemencie div2</button>
+
+</body>
+</html>
+
+ +

Specyfikacja

+ +

DOM Level 2 Core: Document.getElementsByTagName

diff --git a/files/pl/web/api/document/hasfocus/index.html b/files/pl/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..afaa6079af --- /dev/null +++ b/files/pl/web/api/document/hasfocus/index.html @@ -0,0 +1,25 @@ +--- +title: document.hasFocus +slug: Web/API/Document/hasFocus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/hasFocus +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność hasFocus zwraca wartość true, jeżeli fokus jest zlokalizowany w dowolnym miejscu danego dokumentu. {{ Note("Ten atrybut jest częścią specyfikacji HTML 5, która jest wciąż opracowywana.") }}

+

Składnia

+
focused = document.hasFocus();
+
+

Przykład

+

Specyfikacja

+

Zarządzanie fokusem

+

 

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/document.hasFocus", "es": "es/DOM/element.hasFocus", "fr": "fr/DOM/document.hasFocus", "ja": "ja/DOM/document.hasFocus" } ) }}

diff --git a/files/pl/web/api/document/head/index.html b/files/pl/web/api/document/head/index.html new file mode 100644 index 0000000000..d5436385fa --- /dev/null +++ b/files/pl/web/api/document/head/index.html @@ -0,0 +1,110 @@ +--- +title: Document.head +slug: Web/API/Document/head +translation_of: Web/API/Document/head +--- +

{{APIRef("DOM")}}

+ +

Zwraca element {{HTMLElement("head")}} aktualnego dokumentu. Jeżeli występuje więcej niż jeden element <head>, zwrócony zostanie tylko pierwszy.

+ +

Syntax

+ +
var objRef = document.head;
+
+ +

Przykład

+ +
// in HTML: <head id="my-document-head">
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+
+ +

Uwagi

+ +

document.head jest atrybutem tylko do odczytu. Próby przypisania mu wartości nie spowodują żadnego efektu czy skutku ubocznego (przejdą 'po cichu') lub, jeżeli pracujemy w ECMAScript Strict Mode w przeglądarce Gecko, zostanie rzucony TypeError.

+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML WHATWG')}}Initial definition.
{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5 W3C')}} 
+ +

Kompatybilność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4.0{{CompatGeckoDesktop("2")}}9.011.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("2")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Zobacz także

+ + diff --git a/files/pl/web/api/document/height/index.html b/files/pl/web/api/document/height/index.html new file mode 100644 index 0000000000..1f777a7eb5 --- /dev/null +++ b/files/pl/web/api/document/height/index.html @@ -0,0 +1,34 @@ +--- +title: document.height +slug: Web/API/Document/height +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/height +--- +

{{ ApiRef() }}

+

Podsumowanie

+

height pobiera/ustawia wysokość dokumentu.

+

Składnia

+
wysokość = document.height
+document.height =wysokość
+
+

Parametry

+ +

Przykład

+
// zmniejsz okno po załadowaniu
+function onLoad() {
+    document.height = "200";
+    document.width = "200";
+}
+
+

Uwagi

+

Zobacz także DOM:document.width.

+

Specyfikacja

+

{{ DOM0() }}

+

{{ languages( { "en": "en/DOM/document.height" } ) }}

diff --git a/files/pl/web/api/document/images/index.html b/files/pl/web/api/document/images/index.html new file mode 100644 index 0000000000..e7d21794da --- /dev/null +++ b/files/pl/web/api/document/images/index.html @@ -0,0 +1,31 @@ +--- +title: document.images +slug: Web/API/Document/images +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/images +--- +

{{ ApiRef() }}

+

Podsumowanie

+

document.images zwraca listę obrazków w dokumencie.

+

Składnia

+
listaWęzłów = document.images
+
+

Przykład

+
var ilist = document.images;
+for(var i = 0; i < ilist.length; i++) {
+    if(ilist[i] == "banner.gif") {
+         // found the banner
+    }
+}
+
+

 

+

Uwagi

+

document.images.length – własność, zwraca liczbę obrazków na stronie.

+

document.images jest częścią DOM HTML i działa tylko dla dokumentów HTML.

+

Specyfikacja

+

DOM Level 2 HTML: HTMLDocument.images

+

{{ languages( { "ru": "ru/DOM/document.images", "en": "en/DOM/document.images", "fr": "fr/DOM/document.images" } ) }}

diff --git a/files/pl/web/api/document/implementation/index.html b/files/pl/web/api/document/implementation/index.html new file mode 100644 index 0000000000..3fe4d51af0 --- /dev/null +++ b/files/pl/web/api/document/implementation/index.html @@ -0,0 +1,21 @@ +--- +title: document.implementation +slug: Web/API/Document/implementation +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/implementation +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca obiekt implementacji DOM powiązanej z bieżącym dokumentem.

+

Składnia

+
obiektDOMImplementation = document.DOMImplentation
+
+

Uwagi

+

Obiekt DOMImplementaion, jeżeli jest dostępny, stanowi specjalny obiekt zapewniający możliwość kontrolowania spraw poza pojedynczym dokumentem. Na przykład interfejs DOMImplementation zawiera metodę createDocumentType pozwalającą na tworzenie DTD dla jednego lub więcej dokumentów zarządzanych przez implementację.

+

Specyfikacja

+

implementation (?)

+

{{ languages( { "en": "en/DOM/document.implementation" } ) }}

diff --git a/files/pl/web/api/document/importnode/index.html b/files/pl/web/api/document/importnode/index.html new file mode 100644 index 0000000000..be2cdf6367 --- /dev/null +++ b/files/pl/web/api/document/importnode/index.html @@ -0,0 +1,57 @@ +--- +title: document.importNode +slug: Web/API/Document/importNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Document/importNode +--- +

{{ ApiRef("DOM") }}

+ +

Podsumowanie

+ +

Tworzy kopię węzła z zewnętrznego dokumentu, która może być umieszczona wewnątrz bieżącego dokumentu.

+ +

Składnia

+ +
var node = document.importNode(externalNode,deep);
+
+ +
+
node
+
Zaimportowany węzeł
+ Własność parentNode jest ustawiona na null, ponieważ nie został jeszcze wstawiony do drzewa dokumentu
+
externalNode
+
Węzeł, bądź DocumentFragment przeznaczony do zaimportowania do bieżącego dokumentu.
+
deep
+
Boolean mówiący, czy importować potomki externalNode
+
+ +

Przykład

+ +
var iframe = document.getElementsByTagName("iframe")[0];
+var oldNode = iframe.contentDocument.getElementById("myNode");
+var newNode = document.importNode(oldNode,true);
+document.getElementById("container").appendChild(newNode);
+
+ +

Uwagi

+ +

Pierwotny węzeł nie jest usunięty z oryginalnego dokumentu. Importowany węzeł jest klonem oryginału .

+ + +

Przed włączeniem węzłów pochodzących z zewnętrznych dokumentów do bieżącego dokumentu konieczne jest ich sklonowanie za + pomocą metody document.importNode() (lub zaadaptowanie przy użyciu metody document.adoptNode()). Więcej informacji na temat własności + Node.ownerDocument znajduje się na liście najczęściej zadawanych pytań na temat + DOM w witrynie W3C.

+ +

Aktualnie Firefox nie wymusza tej reguły (robił to przez pewien czas podczas cykli rozwojowych Firefoksa 3, ale zbyt + dużo stron przestawało działać po wymuszeniu tej reguły). Zachęcamy autorów stron do poprawienia ich kodu dla lepszej + kompatybilności w przyszłości.

+ +

Specyfikacja

+ +

DOM Level 2 Core: Document.importNode

diff --git a/files/pl/web/api/document/index.html b/files/pl/web/api/document/index.html new file mode 100644 index 0000000000..a5aa06d6dd --- /dev/null +++ b/files/pl/web/api/document/index.html @@ -0,0 +1,332 @@ +--- +title: document +slug: Web/API/Document +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document +--- +

{{ ApiRef() }}

+ +

Wprowadzenie

+ +

Obiekt document stanowi w DOM ogólny sposób reprezentowania dokumentów HTML, XHTML i XML. Poza ogólnym interfejsem dokumentu, w ponizszej liscie uwzgledniono takze DOM HTMLDocument, bedacy bardziej wyspecjalizowanym interfejsem, przeznaczonym do pracy z dokumentami HTML (np. wlasnosci takie jak document.cookie, document.alinkColor). Czesci tego bardziej wyspecjalizowanego interfejsu zostaly oznaczone gwiazdka (*).

+ +

document zawarty jest w obiekcie window i moze zawierac dowolna liczbe elementów.

+ +

Tak jak widac na ponizszej liscie, interfejsy document odpowiadaja za rzeczy takie jak typ dokumentu, jego cechy, jak kolory czy formatowanie, wtyczki i aplety przedstawiane uzytkownikowi, ale sa tu tez metody do tworzenia węzłów potomnych dokumentu, a takze elementy znajdujace sie zwykle w reprezentacji dokumentu, jak <BODY>.

+ +

Wlasnosci

+ +
+
document.alinkColor* {{ Deprecated_inline() }}
+
Zwraca lub ustawia kolor aktywnych odnośników w dokumencie.
+
+ +
+
document.anchors*
+
Zwraca listę wszystkich kotwic w dokumencie.
+
+ +
+
document.applets*
+
Zwraca uporządkowaną listę apletów w dokumencie.
+
+ +
+
document.bgColor* {{ Deprecated_inline() }}
+
Pobiera/ustawia kolor tła dokumentu.
+
+ +
+
document.body*
+
Zwraca węzeł elementu BODY w dokumencie.
+
+ +
+
document.characterSet
+
Zwraca nazwę zestawu znaków uzytego w dokumencie.
+
+ +
+
document.compatMode*
+
Wskazuje, czy dokument jest renderowany w trybie zgodności wstecznej czy w trybie standardów.
+
+ +
+
document.contentType
+
Zwraca Content-Type z nagłówka MIME bieżącego dokumentu.
+
+ +
+
document.cookie*
+
Zwraca rozdzielona średnikami listę ciasteczek dokumentu bądź zapisuje pojedyncze ciasteczko.
+
+ +
+
document.defaultView
+
Zwraca referencje do obiektu window.
+
+ +
+
document.designMode*
+
Pobiera/ustawia możliwość edytowania w trybie WYSIWYG za pomocą edytora Midas. Może zostać użyty wyłącznie w dokumentach HTML.
+
+ +
+
document.doctype
+
Zwraca definicje typu dokumentu (DTD).
+
+ +
+
document.documentElement
+
Zwraca element będący bezpośrednim dzieckiem dokumentu.W dokumentach <HTML> jest to zazwyczaj element.
+
+ +
+
document.documentURIObject {{ Fx_minversion_inline(3) }}
+
Zwraca obiekt nsIURI reprezentujący URI dokumentu. Własność ta jest wspomagana wyłącznie z kodu JavaScriptu.
+
+ +
+
document.domain*
+
Zwraca domenę bieżącego dokumentu.
+
+ +
+
document.embeds*
+
Zwraca listę obiektów (OBJECT) zagnieżdżonych w dokumencie.
+
+ +
+
document.fgColor* {{ Deprecated_inline() }}
+
Pobiera/ustawia kolor pierwszoplanowy (kolor tekstu) w dokumencie.
+
+ +
+
document.firstChild
+
Zwraca pierwszy węzeł spośród bezpośrednich dzieci dokumentu (zob. własność elementów firstChild).
+
+ +
+
document.forms*
+
Zwraca listę elementów FORM w dokumencie.
+
+ +
+
document.height*
+
Pobiera/ustawia wysokość dokumentu.
+
+ +
+
document.images*
+
Zwraca listę obrazków w dokumencie.
+
+ +
+
document.implementation*
+
Zwraca obiekt implementacji DOM powiązany z bieżącym dokumentem.
+
+ +
+
document.lastModified*
+
Zwraca datę ostatniej modyfikacji dokumentu.
+
+ +
+
document.linkColor* {{ Deprecated_inline() }}
+
Pobiera/ustawia kolor odnośników w dokumencie.
+
+ +
+
document.links*
+
Zwraca listę wszystkich odnośników w dokumencie.
+
+ +
+
document.location*
+
Zwraca URI bieżącego dokumentu.
+
+ +
+
document.namespaceURI
+
Zwraca przestrzeń nazw XML dokumentu.
+
+ +
+
document.plugins*
+
Zwraca listę dostępnych wtyczek.
+
+ +
+
document.popupNode
+
Zwraca węzeł, do którego odwoływał sie {{ XULElem("popup") }} (wyłącznie dokumenty XUL).
+
+ +
+
document.referrer*
+
Zwraca URI strony, która przekierowała do bieżącej strony.
+
+ +
+
document.styleSheets*
+
Zwraca listę obiektów typu stylesheet w bieżącym dokumencie.
+
+ +
+
document.title*
+
Zwraca tytuł bieżącego dokumentu.
+
+ +
+
document.tooltipNode
+
Zwraca węzeł, który jest bieżącym celem {{ XULElem("tooltip") }}.
+
+ +
+
document.URL
+
Zwraca ciąg znaków zawierający adres URL bieżącego dokumentu.
+
+ +
+
document.vlinkColor* {{ Deprecated_inline() }}
+
Pobiera/ustawia kolor odwiedzonych odnośników.
+
+ +
+
document.width*
+
Zwraca szerokość bieżącego dokumentu.
+
+ +

Metody

+ +
+
document.clear* {{ Deprecated_inline() }}
+
W wiekszosci nowoczesnych przegladarek wlacznie z Firefoksem oraz Internet Explorerem metoda ta nie robi nic.
+
+ +
+
document.close*
+
Konczy dopisywanie do strumienia dokumentu.
+
+ +
+
document.createAttribute
+
Tworzy i zwraca nowy wezel atrybutu.
+
+ +
+
document.createDocumentFragment
+
Tworzy nowy fragment dokumentu.
+
+ +
+
document.createElement
+
Tworzy nowy element o podanej nazwie.
+
+ +
+
document.createElementNS
+
Tworzy nowy element o podanej nazwie i URI przestrzeni nazw.
+
+ +
+
document.createNSResolver
+
Tworzy XPathNSResolver.
+
+ +
+
document.createTextNode
+
Tworzy nowy wezel tekstowy.
+
+ +
+
document.createTreeWalker
+
Tworzy obiekt TreeWalker.
+
+ +
+
document.createEvent
+
Tworzy obiekt zdarzenia.
+
+ +
+
document.createRange
+
Tworzy obiekt Range.
+
+ +
+
document.execCommand
+
Wykonuje komende dla edytora Midas.
+
+ +
+
document.evaluate
+
Wykonuje wyrazenie XPath.
+
+ +
+
document.getElementById
+
Zwraca referencje do elementu o podanym ID.
+
+ +
+
document.getElementsByName
+
Zwraca liste elementów o podanej nazwie.
+
+ +
+
document.getElementsByTagName
+
Zwraca liste elementów o danej nazwie znacznika.
+
+ +
+
document.importNode
+
Zwraca kopie wezla z zewnetrznego dokumentu.
+
+ +
+
document.loadOverlay
+
{{ Fx_minversion_inline(1.5) }} Laduje nakladke XUL. Dziala to tylko w dokumentach XUL.
+
+ +
+
document.open*
+
Otwiera strumien dokumentu do zapisu.
+
+ +
+
document.queryCommandEnabled*
+
Zwraca prawde, jesli komenda edytora Midas moze byc wykonana na biezacym zakresie.
+
+ +
+
document.queryCommandIndeterm*
+
Zwraca prawde, jesli komenda edytora Midas jest w stanie nieokreslonym dla biezacego zakresu.
+
+ +
+
document.queryCommandState*
+
Zwraca prawde, jesli komenda edytora Midas zostala wykonana na biezacym zakresie.
+
+ +
+
document.queryCommandValue*
+
Zwraca wartosc biezacego zakresu dla komendy edytora Midas.Wraz z Firefoksem 2.0.0.2 queryCommandValue zwróci pusty ciag jesli wartosc nie zostala ustawiona.
+
+ +
+
document.write*
+
Zapisuje tekst w dokumencie.
+
+ +
+
document.writeln*
+
Zapisuje linie tekstu w dokumencie.
+
+ +

 

+ +

{{ languages( { "en": "en/DOM/document", "es": "es/DOM/document", "fr": "fr/DOM/document", "ja": "ja/DOM/document", "zh-cn": "cn/DOM/document", "de" : "de/DOM/document" } ) }}

diff --git a/files/pl/web/api/document/lastmodified/index.html b/files/pl/web/api/document/lastmodified/index.html new file mode 100644 index 0000000000..a79e097ab8 --- /dev/null +++ b/files/pl/web/api/document/lastmodified/index.html @@ -0,0 +1,25 @@ +--- +title: document.lastModified +slug: Web/API/Document/lastModified +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/lastModified +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca datę i czas ostatniej modyfikacji dokumentu.

+

Składnia

+
ciąg = document.lastModified
+
+

Przykład

+
dump(document.lastModified);
+// zwróci np.: Tuesday, July 10, 2001 10:19:42
+
+

Uwagi

+

Zauważ, że lastModified będąc ciągiem nie może zostać łatwo użyte do porównywania dat modyfikacji między dokumentami.

+

Specyfikacja

+

(DOM Level 0 - brak w specyfikacji (?))

+

{{ languages( { "en": "en/DOM/document.lastModified" } ) }}

diff --git a/files/pl/web/api/document/linkcolor/index.html b/files/pl/web/api/document/linkcolor/index.html new file mode 100644 index 0000000000..ef025b4bfa --- /dev/null +++ b/files/pl/web/api/document/linkcolor/index.html @@ -0,0 +1,33 @@ +--- +title: document.linkColor +slug: Web/API/Document/linkColor +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/linkColor +--- +

{{ ApiRef() }}

+

Podsumowanie

+

{{ Deprecated_header() }} linkColor pobiera/ustawia kolor odnośników w dokumencie.

+

Składnia

+
kolor = document.linkColor
+document.linkColor =kolor
+
+

Parametry

+ +

Uwagi

+

document.linkColor jest przestarzałe w DOM Level 2 HTML.

+

Rekomendowaną alternatywą jest pobranie/ustawienie własności CSS {{ Cssxref("color") }} na elemencie HTML anchor (<a>) links (np: a {color:red;}).

+

Kolejną alternatywą document.body.link mimo, że jest przestarzałe w HTML 4.01 szczególnie przy użyciu alternatywnego CSS.

+

Przykład

+
document.linkColor = "blue";
+
+

Specyfikacja

+

{{ DOM0() }}

+

MSDN: Własność linkColor

+

{{ languages( { "en": "en/DOM/document.linkColor" } ) }}

diff --git a/files/pl/web/api/document/links/index.html b/files/pl/web/api/document/links/index.html new file mode 100644 index 0000000000..d4ed79c435 --- /dev/null +++ b/files/pl/web/api/document/links/index.html @@ -0,0 +1,30 @@ +--- +title: document.links +slug: Web/API/Document/links +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/links +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność links zwraca zestaw wszystkich elementów AREA i A z ustawioną wartością atrybutu href.

+

Składnia

+
listaWęzłów = document.links
+
+

Przykład

+
var links = document.links;
+for(var i = 0; i < links.length; i++) {
+  var linkHref = document.createTextNode(links[i].href);
+  var lineBreak = document.createElement("br");
+  document.body.appendChild(linkHref);
+  document.body.appendChild(lineBreak);
+}
+
+

Specyfikacja

+

links

+
+  
+

{{ languages( { "en": "en/DOM/document.links", "it": "it/DOM/document.links", "ja": "ja/DOM/document.links" } ) }}

diff --git a/files/pl/web/api/document/location/index.html b/files/pl/web/api/document/location/index.html new file mode 100644 index 0000000000..6a754d5c0d --- /dev/null +++ b/files/pl/web/api/document/location/index.html @@ -0,0 +1,37 @@ +--- +title: document.location +slug: Web/API/Document/location +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/location +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Pobiera URL bieżącego dokumentu.

+ +

Składnia

+ +
ciąg = document.location
+
+ +

Przykład

+ +
dump(document.location);
+// zwraca ciąg taki jak np.:
+// http://www.peoplemagazine.com/juicybits.html
+
+ +

Uwagi

+ +

document.location działa tak samo jak document.URL. Obydwie te własności są tylko do odczytu, w przeciwieństwie do window.location, które można ustawiać. Ponieważ document reprezentuje jeden dokument lub URL, nie można zmieniać jego lokalizacji.

+ +

Specyfikacja

+ +

DOM Level 0 - brak w specyfikacji.

+ +

{{ languages( { "en": "/en/DOM/document.location" } ) }}

diff --git a/files/pl/web/api/document/namespaceuri/index.html b/files/pl/web/api/document/namespaceuri/index.html new file mode 100644 index 0000000000..d6f9e8ac44 --- /dev/null +++ b/files/pl/web/api/document/namespaceuri/index.html @@ -0,0 +1,25 @@ +--- +title: document.namespaceURI +slug: Web/API/Document/namespaceURI +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/namespaceURI +--- +

{{ ApiRef() }}

+

Podsumowanie

+

namespaceURI zwraca przestrzeń nazw XML dokumentu.

+

Składnia

+
NSURI = document.namespaceURI
+
+

Parametry

+ +

Uwagi

+

DOM jako takie nie obsługuje ani nie wymaga walidacji przestrzeni nazw. Przeprowadzenie walidacji, jeśli jest taka potrzeba, zależy od aplikacji obsługującej DOM. Zauważ też, że prefiks przestrzeni nazw nie może zostać zmieniony, kiedy już raz zostanie przypisany węzłowi.

+

Specyfikacja

+

namespaceURI

+

{{ languages( { "en": "en/DOM/document.namespaceURI", "fr": "fr/DOM/document.namespaceURI" } ) }}

diff --git a/files/pl/web/api/document/open/index.html b/files/pl/web/api/document/open/index.html new file mode 100644 index 0000000000..2a7b0347b7 --- /dev/null +++ b/files/pl/web/api/document/open/index.html @@ -0,0 +1,40 @@ +--- +title: document.open +slug: Web/API/Document/open +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/open +--- +

{{APIRef("DOM")}}

+ +

Podsumowanie

+ +

Metoda document.open otwiera strumień dokumentu do zapisu.

+ +

Składnia

+ +
document.open()
+
+ +

Przykład

+ +
//W tym przykładzie zawartość dokumentu jest
+//usuwana przy reinicjalizacji poprzez open()
+
+document.write("<html><p>wyczyść to</p></html>");
+document.open();
+//dokument jest pusty
+
+ +

Uwagi

+ +

Jeżeli dokument docelowy istnieje, metoda ta wyczyści go (zob. powyzszy przykład). document.open jest wywoływane również wtedy, gdy zostanie użyte document.write po załadowaniu dokumentu.

+ +

Specyfikacja

+ +

open

+ +
 
+ +

{{ languages( { "en": "en/DOM/document.open", "fr": "fr/DOM/document.open", "ja": "ja/DOM/document.open" } ) }}

diff --git a/files/pl/web/api/document/plugins/index.html b/files/pl/web/api/document/plugins/index.html new file mode 100644 index 0000000000..fb946ff710 --- /dev/null +++ b/files/pl/web/api/document/plugins/index.html @@ -0,0 +1,40 @@ +--- +title: document.plugins +slug: Web/API/Document/plugins +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/plugins +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca listę aktualnie zainstalowanych wtyczek.

+

Składnia

+
obiektPluginArray = document.plugins
+
+

Przykład

+

Poniższy przykład wyświetla informację o zainstalowanych wtyczkach dla dokumentu wysokiego poziomu. Zwróć uwagę na właściwości obiektu Plugin: length (dla tablicy wtyczek), name, filename i description.

+
 <script TYPE="text/javascript">
+  <!--
+   var L = navigator.plugins.length
+   document.write( L );
+   document.write("Plugins".bold());
+   document.write("<BR>");
+   document.write("Name | Filename | description".bold());
+   document.write("<BR>");
+   for(i=0; i<L; i++){
+     document.write(navigator.plugins[i].name);
+     document.write(" | ".bold());
+     document.write(navigator.plugins[i].filename);
+     document.write(" | ".bold());
+     document.write(navigator.plugins[i].description);
+     document.write("<BR>");
+   }
+  //-->
+ </script>
+
+

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

+

{{ languages( { "en": "en/DOM/document.plugins" } ) }}

diff --git a/files/pl/web/api/document/queryselector/index.html b/files/pl/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..cecd7c4f14 --- /dev/null +++ b/files/pl/web/api/document/queryselector/index.html @@ -0,0 +1,159 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - DOM + - Metodă + - Referencje + - Selektory +translation_of: Web/API/Document/querySelector +--- +
{{ ApiRef("DOM") }}
+ +

Funkcja zwraca pierwszy element wewnątrz dokumentu, który pasuje do podanego selektora lub grupy selektorów.

+ +

Składnia

+ +
element = document.querySelector(selectors);
+
+ +

gdzie

+ + + +

Przykład

+ +

W tym przykladzie zostaje zwrócony pierwszy element w dokumencie o klasie "myclass":

+ +
var el = document.querySelector(".myclass");
+
+ +

Przykład: Powerful

+ +

Selectory mogą być naprawdę potężne, jak pokazano na poniższym przykładzie. Pierwszy element <input name="login"/> wewnątrz <div class="user-panel main"> w dokumencie zostaje zwrócony:

+ +
var el = document.querySelector("div.user-panel.main input[name='login']");
+
+ +

Uwagi

+ +

Jeśli nie znaleziono dopasowań - zwraca null. W przeciwnym wypadku zwraca pierwszy pasujący element.

+ +

Jeśli selektor zawiera ID i to ID zostaje wielokrotnie błędnie użyte w dokumencie, zwracany jest pierwszy pasujący element.

+ +

Gdy podana grupa selektorów jest nieprawidłowa, zwrócony zostaje wyjątek SYNTAX_ERR.

+ +

querySelector() został wprowadzony w API Selektorów.

+ +

Przekazany do funkcji querySelector łańcuch znaków (string) musi być zgodny ze składnią CSS.

+ +

Zgodnie z API Selektorów pseudoklasy CSS nigdy nie zwrócą żadnego elementu.

+ +

Aby użyć ID lub selektorów niezgodnych ze składnią CSS (np. ze względu na niewłaściwe użycie dwukropka czy spacji) należy poprzedzić niezgodny znak ukośnikiem wstecznym (backslash). Z racji, że w JavaScript backslash jest używany jako znak ucieczki chcąc użyć go w stringu należy wpisać go podwójnie(jeden dla stringa JavaScriptu i drugi raz dla querySelector):

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar')               // "#fooar"
+  document.querySelector('#foo\bar')    // Nie pasuje do żadnego elementu
+
+  console.log('#foo\\bar')              // "#foo\bar"
+  console.log('#foo\\\\bar')            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar') // Odnosi się do pierwszego diva
+
+  document.querySelector('#foo:bar')    // Nie pasuje do żadnego elementu
+  document.querySelector('#foo\\:bar')  // Odnosi się do drugiego diva
+</script>
+
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}}
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definicja wstępna
+ +

Zgodność z przeglądarkami

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CechaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Wsparcie podstawowe13.5 (1.9.1)
+ {{bug(416317)}}		8103.2 (525.3)
+ {{Webkitbug("16587")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CechaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Wsparcie podstawowe2.1yes910.03.2
+
+ + + +

Zobacz także

+ + + + diff --git a/files/pl/web/api/document/referrer/index.html b/files/pl/web/api/document/referrer/index.html new file mode 100644 index 0000000000..0667be8e4c --- /dev/null +++ b/files/pl/web/api/document/referrer/index.html @@ -0,0 +1,22 @@ +--- +title: document.referrer +slug: Web/API/Document/referrer +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/referrer +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca URI strony, która przekierowała na bieżącą stronę.

+

Składnia

+
ciąg = document.referrer
+
+

Uwagi

+

Jeżeli użytkownik otworzył stronę bezpośrednio (nie poprzez odnośnik, ale np. za pomocą zakładki), wartością tej właściwości jest pusty ciąg.

+

Zauważ też, że właściwość ta zwraca tylko ciąg tekstowy, nie daje dostępu do DOM strony odsyłającej.

+

Specyfikacja

+

referrer

+

{{ languages( { "en": "en/DOM/document.referrer" } ) }}

diff --git a/files/pl/web/api/document/releasecapture/index.html b/files/pl/web/api/document/releasecapture/index.html new file mode 100644 index 0000000000..7585229fe5 --- /dev/null +++ b/files/pl/web/api/document/releasecapture/index.html @@ -0,0 +1,31 @@ +--- +title: Document.releaseCapture() +slug: Web/API/Document/releaseCapture +translation_of: Web/API/Document/releaseCapture +--- +
{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}}
+ +
 
+ +

Zwalnia śledzenie myszy, jeśli śledzenie jest ustawione na jakimś elemencie wewnątrz dokumentu. Możesz włączyć śledzenie wywołując {{domxref("element.setCapture()")}}.

+ +

Składnia

+ +
document.releaseCapture()
+
+ +

Po zwolnieniu śledzenia, zdarzenia myszy nie będą przekierowywane do elementu dla którego śledzenie było włączone.

+ +

Przykład

+ +

Zobacz przykład przykład dla {{domxref("element.setCapture()")}}.

+ +

Specyfikacja

+ +

Oparta na implementacji Internet Explorera.

+ +

Zobacz także

+ + diff --git a/files/pl/web/api/document/stylesheets/index.html b/files/pl/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..4c8312b281 --- /dev/null +++ b/files/pl/web/api/document/stylesheets/index.html @@ -0,0 +1,19 @@ +--- +title: document.styleSheets +slug: Web/API/Document/styleSheets +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność styleSheets zwraca listę obiektów stylesheet w bieżącym dokumencie.

+

Składnia

+
listaWęzłów = document.styleSheets
+
+

Specyfikacja

+

DOM Level 2.

+

{{ languages( { "en": "en/DOM/document.styleSheets", "ja": "ja/DOM/document.styleSheets" } ) }}

diff --git a/files/pl/web/api/document/title/index.html b/files/pl/web/api/document/title/index.html new file mode 100644 index 0000000000..0a379426e5 --- /dev/null +++ b/files/pl/web/api/document/title/index.html @@ -0,0 +1,45 @@ +--- +title: document.title +slug: Web/API/Document/title +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/title +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Pobiera lub ustawia tytuł dokumentu.

+

Składnia

+
tytul =document.title;
+
+ +
document.title =nowyTytul;
+
+ +

Przykład

+
<html>
+<head>
+ <title>Hello World!</title>
+</head>
+<body>
+ <script>
+ alert(document.title); // wyswietla "Hello World!"
+ document.title = "Goodbye World!";
+ alert(document.title); // wyswietla "Goodbye World!"
+ </script>
+</body>
+</html>
+
+

Uwagi

+

Własność ta ma zastosowanie w HTML, SVG, XUL i innych dokumentach w Gecko.

+

Dla dokumentów HTML początkową wartością document.title jest zawartość tekstowa elementu <title>. Dla XUL-a jest to wartość atrybutu {{ XULAttr("title") }} elementu {{ XULElem("window") }} lub innego elementu XUL najwyższego poziomu.

+

W XUL-u próba dostępu do document.title zanim jeszcze dokument zostanie w pełni załadowany może skutkować niepożądanym zachowaniem (document.title może zwrócić pusty łańcuch znaków, a ustawienie document.title może nie mieć żadnego efektu).

+

Specyfikacja

+

DOM Level 2 HTML: document.title

+

{{ languages( { "en": "en/DOM/document.title" } ) }}

diff --git a/files/pl/web/api/document/url/index.html b/files/pl/web/api/document/url/index.html new file mode 100644 index 0000000000..90bb037e8b --- /dev/null +++ b/files/pl/web/api/document/url/index.html @@ -0,0 +1,25 @@ +--- +title: document.URL +slug: Web/API/Document/URL +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/URL +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca URL bieżącego dokumentu.

+

Składnia

+
ciąg = document.URL
+
+

Przykład

+
var currentURL = document.URL;
+alert(currentURL);
+
+

Uwagi

+

URL ma zastąpić używaną w DOM Level 0 własność document.location.href. Jednakże, w przeciwieństwie do niej, document.URL nie można ustawiać.

+

Specyfikacja

+

DOM Level 2 HTML: URL

+

{{ languages( { "en": "en/DOM/document.URL", "es": "es/DOM/document.URL", "ja": "ja/DOM/document.URL" } ) }}

diff --git a/files/pl/web/api/document/vlinkcolor/index.html b/files/pl/web/api/document/vlinkcolor/index.html new file mode 100644 index 0000000000..b33a53c482 --- /dev/null +++ b/files/pl/web/api/document/vlinkcolor/index.html @@ -0,0 +1,29 @@ +--- +title: document.vlinkColor +slug: Web/API/Document/vlinkColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/vlinkColor +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca/ustawia kolor odwiedzonych linków w dokumencie.

+

Składnia

+
kolor = document.vlinkColor
+document.vlinkColor =kolor
+
+

Parametry

+ +

Uwagi

+

Domyślną wartością tej własności jest + + purple + .

+

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

+

{{ languages( { "en": "en/DOM/document.vlinkColor" } ) }}

diff --git a/files/pl/web/api/document/width/index.html b/files/pl/web/api/document/width/index.html new file mode 100644 index 0000000000..af36011079 --- /dev/null +++ b/files/pl/web/api/document/width/index.html @@ -0,0 +1,28 @@ +--- +title: document.width +slug: Web/API/Document/width +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/width +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca szerokość bieżącego dokumentu w pikselach.

+

Nie obsługiwana przez IE.

+

Składnia

+
piksele = document.width
+
+

Przykład

+
function init() {
+  alert("Szerokość dokumentu wynosi " + document.width + " pikseli.");
+}
+
+

Uwagi

+

Zobacz także DOM:document.height.

+

Specyfikacja

+

{{ DOM0() }}

+

{{ languages( { "en": "en/DOM/document.width" } ) }}

diff --git a/files/pl/web/api/document/write/index.html b/files/pl/web/api/document/write/index.html new file mode 100644 index 0000000000..24daccf070 --- /dev/null +++ b/files/pl/web/api/document/write/index.html @@ -0,0 +1,38 @@ +--- +title: document.write +slug: Web/API/Document/write +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/write +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zapisuje ciąg tekstu w strumieniu dokumentu otwartym przez document.open.

+

Składnia

+
document.write(tekst)
+
+

Parametry

+ +

Przykład

+
document.open();
+document.write("<h1>witam!</h1>");
+document.close();
+
+

Uwagi

+

Zapis do dokumentu, który już się załadował, bez wywoływania document.open spowoduje automatyczne przeprowadzenie document.open. Zaleca się wywołanie document.close po skończeniu zapisu, aby poinformować przeglądarkę, by zakończyła ładowanie strony. Tekst, który zapisujesz, jest parsowany i trafia do modelu struktury dokumentu. W poniższym przykładzie element H1 staje się węzłem. Jeżeli wywołanie document.write() zostało zagnieżdżone bezpośrednio w kodzie HTML, nie spowoduje ono uruchomienia document.open. Np.:

+
 <div>
+  <script type="text/javascript">
+    document.write("<h1>Main title</h1>")
+  </script>
+ </div>
+
+

Specyfikacja

+

write

+
+  
+

{{ languages( { "en": "en/DOM/document.write", "fr": "fr/DOM/document.write", "ja": "ja/DOM/document.write" } ) }}

diff --git a/files/pl/web/api/document/writeln/index.html b/files/pl/web/api/document/writeln/index.html new file mode 100644 index 0000000000..f70d4f72a4 --- /dev/null +++ b/files/pl/web/api/document/writeln/index.html @@ -0,0 +1,41 @@ +--- +title: document.writeln +slug: Web/API/Document/writeln +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/writeln +--- +

{{APIRef("DOM")}}

+ +

Podsumowanie

+ +

Zapisuje w dokumencie ciąg tekstu, a po nim znak nowej linii.

+ +

Składnia

+ +
document.writeln(linia)
+
+ +

Parametry

+ + + +

Przykład

+ +
document.writeln("<p>podaj hasło:</p>");
+
+ +

Uwagi

+ +

document.writeln nie różni się niczym od document.write, poza tym, że dodaje na końcu znak nowego wiersza.

+ +

Specyfikacja

+ +

writeln

+ +
 
+ +

{{ languages( { "en": "en/DOM/document.writeln", "ja": "ja/DOM/document.writeln" } ) }}

diff --git a/files/pl/web/api/domapplicationsmanager/getall/index.html b/files/pl/web/api/domapplicationsmanager/getall/index.html new file mode 100644 index 0000000000..272c82b938 --- /dev/null +++ b/files/pl/web/api/domapplicationsmanager/getall/index.html @@ -0,0 +1,47 @@ +--- +title: DOMApplicationsManager.getAll() +slug: Web/API/DomApplicationsManager/getAll +translation_of: Archive/Marketplace/API/DOMApplicationsManager/getAll +--- +

  

+ +
{{ ApiRef("Apps") }}
+ +

{{ non-standard_header() }}

+ +

Summary

+ +

Lists all installed apps in the user's repository.

+ +

Syntax

+ +
window.navigator.mozApps.mgmt.getAll()
+
+ +

Return value

+ +

getAll() returns a pendingGetAll object. Callers are expected to set the onsuccess and onerror callback properties of the returned object.

+ +

pendingGetAll.result will be an array of App objects that contains all the apps installed in the current browser. pendingGetAll.result will be the empty list if no apps are installed. onerror will be called if a serious problem occurs while checking this.

+ +

This is a privileged call. navigator.mozApps.mgmt will be null if you do not have the privilege to query apps.

+ +

Errors

+ +

The following error can be returned in DOMRequest.error.

+ +
+
+ +
+
DENIED
+
Permission denied.
+
+ + + + + +

  

diff --git a/files/pl/web/api/domapplicationsmanager/index.html b/files/pl/web/api/domapplicationsmanager/index.html new file mode 100644 index 0000000000..e19495d68e --- /dev/null +++ b/files/pl/web/api/domapplicationsmanager/index.html @@ -0,0 +1,86 @@ +--- +title: DOMApplicationsManager +slug: Web/API/DOMApplicationsManager +tags: + - API + - Apps + - Apps API + - NeedsTranslation + - TopicStub +translation_of: Archive/Marketplace/API/DOMApplicationsManager +--- +

{{ ApiRef("Apps") }}

+ +

{{ non-standard_header() }}

+ +

Provides support for managing, and Open Web apps in a browser. A manager can be accessed via {{domxref("DOMApplicationsRegistry.mgmt", "Navigator.mozApps.mgmt")}}

+ +

Property

+ +
+
{{domxref("DOMApplicationsManager.oninstall")}}
+
Is an {{domxref("EventManager")}} call when install event is received.
+
{{domxref("DOMApplicationsManager.onuninstall")}}
+
Is an {{domxref("EventManager")}} call when uninstall event is received.
+
{{domxref("DOMApplicationsManager.onenablestatechange")}}
+
Is an {{domxref("EventManager")}} call when enablestatechange event is received.
+
+ +

Methods

+ +
+
{{ domxref("DOMApplicationsManager.getAll()") }}
+
Returns all applications.
+
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatUnknown() }}16.0{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}16.0{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/pl/web/api/element/addeventlistener/index.html b/files/pl/web/api/element/addeventlistener/index.html new file mode 100644 index 0000000000..781ec7f3b6 --- /dev/null +++ b/files/pl/web/api/element/addeventlistener/index.html @@ -0,0 +1,109 @@ +--- +title: element.addEventListener +slug: Web/API/Element/addEventListener +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/EventTarget/addEventListener +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda addEventListener pozwala zarejestrować obserwatora zdarzeń dla określonego typu zdarzenia na elemencie.

+

Składnia

+
target.addEventListener(type, listener, useCapture);
+
+
+
+ type 
+
+ Łańcuch przedstawiający typ zdarzenia do nasłuchu.Need a link here
+
+ listener 
+
+ Obiekt, który otrzymuje zawiadomienie, gdy nastąpi zdarzenie określonego typu. Musi być zaimplementowanym obiektem interfejsu EventListener lub pojedynczą funkcją JavaScript.
+
+ useCapture 
+
+ Jeśli zostanie ustawione na true, useCapture wskazuje, że użytkownik chce przechwytywać zdarzenia. Po rozpoczęciu przechwytywania, wszystkie zdarzenia typu type będą przekazywane do naszego listener'a zanim zostaną wysłane do innych obiektów nasłuchujących (EventTarget) znajdujących się poniżej w drzewie DOM. Zdarzenia, które propagują w górę drzewa nie uruchamiają systemu nasłuchującego (listener) ustawionego na przechwytywanie.
+
+

Dla uzyskania szczegółowego objaśnienia zobacz DOM Level 3 Events.

+

Przykład

+
 <html>
+ <head>
+   <title>Przykład zdarzenia DOM</title>
+   <style type="text/css">
+     #t { border: 1px solid red }
+     #t1 { background-color: pink; }
+   </style>
+   <script type="text/javascript">
+
+   // Funkcja zmieniająca zawartość komórki tabeli t2
+   function modifyText() {
+     var t2 = document.getElementById("t2");
+     t2.firstChild.nodeValue = "Trzy";
+   }
+
+   // Funkcja dodająca obserwatora zdarzeń dla tabeli t
+   function load() {
+     var el = document.getElementById("t");
+     el.addEventListener("click", modifyText, false);
+   }
+
+   </script>
+ </head>
+ <body onload="load();">
+ <table id="t">
+   <tr><td id="t1">Jeden</td></tr>
+   <tr><td id="t2">Dwa</td></tr>
+ </table>
+ </body>
+ </html>
+
+

W powyższym przykładzie, funkcja modifyText() została zarejestrowana za pomocą addEventListener() do obsługi zdarzenia typu click na tabeli t. Kliknięcie w dowolnym miejscu tej tabeli rozpocznie propagowanie zdarzenia i wywoła funkcję modifyText().

+

Uwagi

+

Po co używać addEventListener?

+

addEventListener daje możliwość zarejestrowania obsługi zdarzenia według specyfikacji W3C DOM. Korzyści są następujące:

+ +

Alternatywne, starsze sposoby rejestracji zdarzeń są opisane poniżej.

+

Dodawanie nasłuchu podczas obsługi zdarzenia

+

Jeśli podczas obsługi zdarzenia zostanie dodany nowy obiekt nasłuchujący to zdarzenie, nie zostanie on uruchomiony dla tego zdarzenia. Może zostać wywołany podczas dalszego etapu przepływu zdarzeń(Event flow), np. w fazie propagowania zdarzenia w górę drzewa DOM.

+

Identyczne obiekty nasłuchujące

+

Jeśli kilka identycznych obiektów nasłuchujących zostanie zarejestrowanych dla tego samego zdarzenia (EventTarget) z tymi samymi parametrami to duplikaty są ignorowane. Obiekt nasłuchujący nie będzie wywołany więcej niż jeden raz. Powielone powiązania nie muszą być usuwane ręcznie za pomocą funkcji removeEventListener, ponieważ są one usuwane automatycznie.

+

Wartość this

+

Doczepianie akcji używając addEventListener() zmienia wartość this—zauważ, że wartość this ijest przekazywana funkcji przez zdarzenie.

+

W powyższym przykładzie, wartość this wewnątrz modifyText() gdy zostanie wywołana ze zdarzenia onclick event jest odwołaniem do tabeli 't'. Jeśli obsługa zdarzenia onclick jest dodana w źródle HTML:

+
<table id="t" onclick="modifyText();">
+  ...
+</table>
+
+

to wartość this wewnątrz funkcji modifyText() wywołanej z poziomu zdarzenia onclick będzie odwołaniem od obiektu globalnego(window).

+

Internet Explorer

+

W IE 8 i niższych należy użyć attachEvent zamiast standardowego addEventListener. By wspierać IE, powyższy przykład może zostać zmodyfikowany do:

+
if (el.addEventListener){
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent){
+  el.attachEvent('onclick', modifyText);
+}
+
+

Starsze sposoby dołączania zdarzeń

+

addEventListener() zostało wprowadzone wraz ze specyfikacją DOM 2 Events. Wcześniej, zdarzenia były dołączone jak pokazano poniżej:

+
// Using a function reference—note lack of '()'
+el.onclick = modifyText;
+
+// Używając deklaracji funkcji
+element.onclick = function(){
+                    // ... logika funkcji ...
+                  };
+
+

Ta metoda zastępuje istniejącą obsługę zdarzenia onclick na elemencie jeśli jest jakakolwiek. Podobnie do innych zdarzeń 'on' takich jak onblur, onkeypress, i tak dalej.

+

Ponieważ była to istotna część DOM 0, ta metoda jest bardzo szeroko wspierana i nie wymaga specjalnych kodów do różnych przeglądarek; stąd też jest to normalnie używana do dynamicznego zaczepienia obsługi zdarzenia jeśli nie potrzeba dodatkowych możliwości  addEventListener().

+

Specyfikacja

+

DOM Level 2 Events: addEventListener

+

{{ languages( { "en": "en/DOM/element.addEventListener", "fr": "fr/DOM/element.addEventListener", "ja": "ja/DOM/element.addEventListener" } ) }}

diff --git a/files/pl/web/api/element/appendchild/index.html b/files/pl/web/api/element/appendchild/index.html new file mode 100644 index 0000000000..ae2b141231 --- /dev/null +++ b/files/pl/web/api/element/appendchild/index.html @@ -0,0 +1,52 @@ +--- +title: element.appendChild +slug: Web/API/Element/appendChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/appendChild +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Metoda Node.appendChild() wstawia określony węzeł na koniec listy dzieci określonego rodzica. Jeśli węzeł ma już rodzica, jest on najpierw od niego oddzielany.

+ +

Składnia

+ +
var dziecko = element.appendChild(dziecko)
+
+ + + +

Opis

+ +

Metoda appendChild zwraca referencję do dodanego węzła. 

+ +

Przykład

+ +
// Tworzy nowy element paragrafu
+var p = document.createElement("p");
+
+// Wstawia go na koniec ciała dokumentu
+document.body.appendChild(p);
+
+ +

 

+ +

Uwagi

+ +

appendChild jest jedną z fundamentalnych metod w programowaniu z użyciem DOM. Metoda ta wstawia nowy węzeł do struktury DOM dokumentu HTML. Jest to druga część procesu stwórz-i-wstaw, podstawowego przy programowym budowaniu strony. Inne związane z tym metody to insertBefore, replaceChild i removeChild.

+ +

Jeśli dziecko jest referencją do węzła, który istnieje już w dokumencie, appendChild przenosi go z dotychczasowej pozycji w nowe miejsce (tj. nie ma potrzeby odzielać węzeł od jego rodzica przed wstawieniem go do innego węzła).

+ +

Specyfikacja

+ +

DOM Level 2 Core: appendChild

+ +

{{ languages( { "en": "en/DOM/element.appendChild", "fr": "fr/DOM/element.appendChild", "ja": "ja/DOM/element.appendChild" } ) }}

diff --git a/files/pl/web/api/element/attributes/index.html b/files/pl/web/api/element/attributes/index.html new file mode 100644 index 0000000000..5ae9839a79 --- /dev/null +++ b/files/pl/web/api/element/attributes/index.html @@ -0,0 +1,82 @@ +--- +title: element.attributes +slug: Web/API/Element/attributes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/attributes +--- +

{{ ApiRef() }}

+

Podsumowanie

+

attributes zwraca kolekcję atrybutów określonych dla danego elementu.

+

Składnia i wartości

+
var kolekcjaAtrybutów = elementNodeReference.attributes;
+
+

Typem zwracanego obiektu kolekcji jest NamedNodeMap. Jeśli element nie ma określonych żadnych atrybutów, zwrócony obiekt ma zerową długość. Właściwość attributes jest tylko do odczytu.

+

kolekcjaAtrybutów to referencja do kolekcji atrybutów.

+

Przykład

+
// weź pierwszy element <p> z dokumentu
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+
+

Uwagi

+

Zwracany obiekt ma typ NamedNodeMap, nazywany także kolekcją, będący listą węzłów, a nie ciągów znakowych. Właściwości obiektów atrybutów dostępne są poprzez indeks, tak jak w poniższym przykładzie, który pobiera parę nazwa/wartość pierwszego atrybutu akapitu "p1":

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+  <title>Attributes example</title>
+  <script type="text/javascript">
+   function showFirstAttr()
+   {
+    var FirstParg = document.getElementById("p1");
+    var outputText = document.getElementById("result");
+
+    if (FirstParg.hasAttributes())
+    // sprawdźmy, czy FirstParg ma atrybuty
+     {
+      outputText.value = FirstParg.attributes[0].name + "->"
+                       + FirstParg.attributes[0].value;
+     }
+    else
+     {
+      outputText.value = "Brak atrybutów do wyświetlenia"
+     };
+   }
+  </script>
+ </head>
+
+<body>
+ <p id="p1" style="color: green;">Przykładowy akapit</p>
+ <form action="">
+  <p><input type="button" value="Pokaż nazwę i wartość pierwszego atrybutu"
+      onclick="showFirstAttr();">
+  <input id="result" type="text" value=""></p>
+ </form>
+</body>
+</html>
+
+

Obiekt z atrybutami jest kolekcją, która podobna jest do tablicy, ponieważ ma właściwość length, a do atrybutów można odnosić się poprzez indeks liczbowy, ale kolekcja nie posiada specjalnych metod, jakie mają tablice, jak join, split, itd.

+

Kolejność w kolekcji atrybutów nie jest wiarygodna - dwie przeglądarki po otrzymaniu takiego samego kodu znaczników mogą zwracać różnie uporządkowane obiekty attributes.

+

By uzyskać dostęp do konkretnego atrybutu, użyj metody getAttribute lub zapisu z użyciem kropki:

+
 // pokaż id elementu, jeśli element go posiada
+ if(element.id)
+  {
+   alert("id elementu to " + element.id);
+  }
+ else
+  {
+   alert("element nie ma id");
+  };
+
+

Specyfikacja

+ +

{{ languages( { "en": "en/DOM/element.attributes", "fr": "fr/DOM/element.attributes", "ja": "ja/DOM/element.attributes", "zh-cn": "cn/DOM/element.attributes" } ) }}

diff --git a/files/pl/web/api/element/blur/index.html b/files/pl/web/api/element/blur/index.html new file mode 100644 index 0000000000..1febd21617 --- /dev/null +++ b/files/pl/web/api/element/blur/index.html @@ -0,0 +1,21 @@ +--- +title: element.blur +slug: Web/API/Element/blur +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/blur +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda blur dezaktywuje bieżący element (usuwa focus).

+

Składnia

+
element.blur()
+
+

Specyfikacja

+

blur

+
+  
+

{{ languages( { "en": "en/DOM/element.blur", "fr": "fr/DOM/element.blur" } ) }}

diff --git a/files/pl/web/api/element/childnodes/index.html b/files/pl/web/api/element/childnodes/index.html new file mode 100644 index 0000000000..2f15d119e2 --- /dev/null +++ b/files/pl/web/api/element/childnodes/index.html @@ -0,0 +1,49 @@ +--- +title: element.childNodes +slug: Web/API/Element/childNodes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/childNodes +--- +

{{ ApiRef() }}

+

Podsumowanie

+

childNodes zwraca kolekcję węzłów-dzieci elementu.

+

Składnia i wartości

+
var listaWęzłów = referencjaDoWęzłaElementu.childNodes;
+
+

listaWęzłów to uporządkowana kolekcja obiektów węzłów, będącymi dziećmi bieżącego elementu. Jeśli element nie ma dzieci, listaWęzłów jest pusta.

+

listaWęzłów to zmienna przechowująca listę węzłów. Lista taka ma typ NodeList. Właściwość childNodes jest tylko do odczytu.

+

Przykład

+
// parg to referencja do obiektu elementu <p>
+if (parg.hasChildNodes())
+// sprawdzamy czy obiekt nie jest pusty - czy ma dzieci
+ {
+   var children = parg.childNodes;
+   for (var i = 0; i < children.length; i++)
+   {
+   // zrob cos z kazdym dzieckiem jako children[i]
+   // uwaga: lista "żyje", dodawanie bądź usuwanie dzieci ją zmieni
+   };
+ };
+
+
// sposób na usunięcie wszystkich dzieci węzła
+// box to referencja do obiektu elementu, który ma dzieci
+while (box.firstChild)
+ {
+    //lista jest "żywa", więc będzie przeindeksowana po każdym wywołaniu
+    box.removeChild(box.firstChild);
+ };
+
+

Uwagi

+

Elementy kolekcji węzłów są obiektami, a nie łańcuchami. By pobrać dane z tych obiektów, musisz użyć ich atrybutów (np. referencjaDoWęzłaElementu.childNodes{{ mediawiki.external(1) }}.nodeName by pobrać nazwę).

+

Obiekt document ma dwoje dzieci: deklarację DOCTYPE i element HTML.

+

Specyfikacja

+ +

{{ languages( { "en": "en/DOM/element.childNodes", "fr": "fr/DOM/element.childNodes", "ja": "ja/DOM/element.childNodes", "zh-cn": "cn/DOM/element.childNodes" } ) }}

diff --git a/files/pl/web/api/element/classlist/index.html b/files/pl/web/api/element/classlist/index.html new file mode 100644 index 0000000000..5e7112b8d5 --- /dev/null +++ b/files/pl/web/api/element/classlist/index.html @@ -0,0 +1,264 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

Element.classList jest właściwością tylko do odczytu, która zwraca zbiór live {{domxref("DOMTokenList")}} atrybutów klasy danego elementu.

+ +

Używanie classList stanowi wygodną alternatywę uzyskiwania dostępu do listy klas danego elementu w formie skompresowanego stringa poprzez {{domxref("element.className")}}.

+ +

Składnia

+ +
const elementClasses = elementNodeReference.classList;
+
+ +

elementClasses to DOMTokenList reprezentujący atrybuty klasy elementNodeReference. Jeśli atrybut klasy nie został określony lub jest pusty, elementClasses.length zwraca 0. Sam w sobie element.classList jest tylko do odczytu, ale można go mimo to modyfikować poprzez stosowanie metod add() i remove().

+ +

Metody

+ +
+
add( String [, String] )
+
Nadaje określone wartości klasy. Jeśli wartości te już istnieją w atrybucie elementu, wówczas zostają zignorowane.
+
remove( String [,String] )
+
Usuwa określone wartości klasy.
+
item ( Number )
+
Zwraca wartosć klasy wg indeksu w zbiorze.
+
toggle ( String [, force] )
+
Jeśli występuje tylko jeden argument: Przełącza wartość klasy, tzn. jeśli klasa istnieje, wówczas zostaje usunięta i zwraca false, jeśli nie, wówczas dodaje ją i zwraca true.
+ Jeśli występuje również drugi argument: Jeśli drugi argument uznawany jest za true, dodaje określoną wartość klasy, natomiast jeśli zostaje uznany za false, wówczas zostaje usunięty.
+
contains( String )
+
Sprawdza, czy określona wartość klasy istnieje w atrybucie klasy danego elementu.
+
+ +

Przykłady

+ +
// div jest obiektem odwołującym się do elementu <div> o klasie ="foo bar"
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// jeśli ustawiona jest widoczność usuwa ją, w przeciwnym wypadku dodaje
+div.classList.toggle("visible");
+
+// dodaj/usuń (add/remove) jest widoczne, w zależności od warunku testowego, i mniejsze od 10
+div.classList.toggle("visible", i < 10 );
+
+alert(div.classList.contains("foo"));
+
+// dodaj lub usuń złożone klasy
+div.classList.add("foo", "bar");
+div.classList.remove("foo", "bar");
+ +
+

Wersje Firefoxa wcześniejsze niż 26 nie implementują użycia niektórych argumentów metod dodaj/usuń/przełącz (add/remove/toggle). Zobacz https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +

Polyfill

+ +
// Źródło: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
+;(function() {
+    // pomocnicy
+    var regExp = function(name) {
+        return new RegExp('(^| )'+ name +'( |$)');
+    };
+    var forEach = function(list, fn, scope) {
+        for (var i = 0; i < list.length; i++) {
+            fn.call(scope, list[i]);
+        }
+    };
+
+    // obiekt listy klasy z podstawowymi metodami
+    function ClassList(element) {
+        this.element = element;
+    }
+
+    ClassList.prototype = {
+        add: function() {
+            forEach(arguments, function(name) {
+                if (!this.contains(name)) {
+                    this.element.className += this.element.className.length > 0 ? ' ' + name : name;
+                }
+            }, this);
+        },
+        remove: function() {
+            forEach(arguments, function(name) {
+                this.element.className =
+                    this.element.className.replace(regExp(name), '');
+            }, this);
+        },
+        toggle: function(name) {
+            return this.contains(name)
+                ? (this.remove(name), false) : (this.add(name), true);
+        },
+        contains: function(name) {
+            return regExp(name).test(this.element.className);
+        },
+        // bonus..
+        replace: function(oldName, newName) {
+            this.remove(oldName), this.add(newName);
+        }
+    };
+
+    // IE8/9, Safari
+    if (!('classList' in Element.prototype)) {
+        Object.defineProperty(Element.prototype, 'classList', {
+            get: function() {
+                return new ClassList(this);
+            }
+        });
+    }
+
+    // replace() wspierane przez pozostałe przeglądarki
+    if (window.DOMTokenList && DOMTokenList.prototype.replace == null) {
+        DOMTokenList.prototype.replace = ClassList.prototype.replace;
+    }
+})();
+
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecifikacjaStatusKomentarz
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Initial definition
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}} 
+ +

Zgodność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Zgodność podstawowa812{{CompatGeckoDesktop(1.9.2)}}10[1]11.505.1
toggle() method's second argument2412{{CompatGeckoDesktop(24)}}{{CompatNo}}[2]157
Multiple arguments for add() & remove()2812{{CompatGeckoDesktop(26)}}{{CompatNo}}157
replace(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Wsparcie podstawowe3.012{{CompatGeckoMobile(1.9.2)}}10[1]11.105.0
toggle method's second argument4.412{{CompatGeckoMobile(24)}}{{CompatNo}}[2]{{CompatUnknown}}7.0
multiple arguments for add() & remove()4.412{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}7.0
replace(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Brak wsparcia dla elementów SVG. Zobacz raport w tej kwestii na stronie Microsoftu.
+ [2] Internet Explorer nigdy tego nie zimplementował. Zobacz raport w tej kwestii na stronie Microsoftu.

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/element/classname/index.html b/files/pl/web/api/element/classname/index.html new file mode 100644 index 0000000000..31f21befb2 --- /dev/null +++ b/files/pl/web/api/element/classname/index.html @@ -0,0 +1,37 @@ +--- +title: element.className +slug: Web/API/Element/className +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/className +--- +
+ {{APIRef}}
+
+  
+
+ Podsumowanie
+

className pobiera/ustawia wartość atrybutu class bieżącego elementu.

+

Składnia i wartości

+
var nazwaKlasy = referencjaDoWęzłaElementu.className;
+referencjaDoWęzłaElementu.className = nazwaKlasy;
+
+ +

Przykład

+
var elementNodeReference = document.getElementById("div1");
+
+if (elementNodeReference.className == "fixed") {
+  // pomiń elementy określonej klasy
+  goNextElement();
+};
+

Uwagi

+

Dla tej właściwości użyto nazwy className, a nie class, ponieważ "class" jest w wielu językach korzystających z DOM słowem kluczowym.

+

Specyfikacja

+ diff --git a/files/pl/web/api/element/click/index.html b/files/pl/web/api/element/click/index.html new file mode 100644 index 0000000000..5c0fe512d5 --- /dev/null +++ b/files/pl/web/api/element/click/index.html @@ -0,0 +1,23 @@ +--- +title: element.click +slug: Web/API/Element/click +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/click +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda click wywołuje kliknięcie na bieżącym elemencie.

+

Składnia

+
element.click()
+
+

Notatki

+

Metoda click symuluje zdarzenie kliknięcia na bieżącym elemencie. Zwykle używa się tego by wywołać obsługę zdarzenia przypisaną do elementu bieżącego bądź leżącego wyżej w "łańcuchu zdarzeń".

+

Specyfikacja

+

click

+
+  
+

{{ languages( { "en": "en/DOM/element.click", "fr": "fr/DOM/element.click" } ) }}

diff --git a/files/pl/web/api/element/clientheight/index.html b/files/pl/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..7014fd35f5 --- /dev/null +++ b/files/pl/web/api/element/clientheight/index.html @@ -0,0 +1,47 @@ +--- +title: element.clientHeight +slug: Web/API/Element/clientHeight +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/clientHeight +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca wewnętrzną wysokość elementu w pikselach, włączając marginesy wewnętrzne ( + + padding + ), ale bez poziomego paska przewijania, obramowań i marginesów zewnętrznych ( + + margin + ).

+

clientHeight można wyliczyć jako (właśność height CSS) + (padding w CSS) - (wysokość poziomego paska przewijania (jeśli jest)).

+

Składnia i wartości

+
var h = element.clientHeight;
+
+

h to liczba całkowita reprezentująca clientHeight elementu w pikselach.

+

clientHeight jest tylko do odczytu.

+

Przykład

+
+
+

padding-top

+

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+

Cat image and text coming from http://www.best-cat-art.com/

+

padding-bottom

+
+ LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom
+

Grafika:clientHeight.png

+

Specyfikacja

+

Nie należy do żadnej ze specyfikacji W3C.

+

Uwagi

+

clientHeight jest niestandardową właściwością, wprowadzoną w modelu obiektowym przeglądarki Internet Explorer.

+

Dokumentacja

+ +

{{ languages( { "en": "en/DOM/element.clientHeight", "fr": "fr/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}

diff --git a/files/pl/web/api/element/clientnode/index.html b/files/pl/web/api/element/clientnode/index.html new file mode 100644 index 0000000000..eb0550678b --- /dev/null +++ b/files/pl/web/api/element/clientnode/index.html @@ -0,0 +1,32 @@ +--- +title: element.cloneNode +slug: Web/API/Element/clientNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/cloneNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda cloneNode zwraca kopię bieżącego węzła.

+

Składnia

+
kopiaWęzła = element.cloneNode(głębokość)
+
+

Parametry

+ +

Przykład

+
p = document.getElementById("para1");
+p_prime = p.cloneNode(true);
+
+

Uwagi

+

Kopia węzła zwrócona przez cloneNode() nie ma rodzica. Podczas klonowania węzła skopiowane zostają wszystkie jego atrybuty i ich wartości, ale nie zostaje skopiowana treść zawarta w węźle, ponieważ treść ta przechowywana jest w węźle potomnym typu Text.

+

Głębokie klonowanie kopiuje i zwraca węzeł wraz z całym drzewem pod nim się znajdującym (w tym treścią z potomnych węzłów Text) .

+

Specyfikacja

+

DOM Level 2 Core: cloneNode

+
+  
+

{{ languages( { "en": "en/DOM/element.cloneNode", "fr": "fr/DOM/element.cloneNode", "ja": "ja/DOM/element.cloneNode", "pt": "pt/DOM/element.cloneNode", "zh-cn": "cn/DOM/element.cloneNode" } ) }}

diff --git a/files/pl/web/api/element/clientwidth/index.html b/files/pl/web/api/element/clientwidth/index.html new file mode 100644 index 0000000000..5cf48d16ad --- /dev/null +++ b/files/pl/web/api/element/clientwidth/index.html @@ -0,0 +1,47 @@ +--- +title: element.clientWidth +slug: Web/API/Element/clientWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/clientWidth +--- +

{{ ApiRef() }}

+

Podsumowanie

+

clientWidth to wewnętrzna szerokość elementu w pikselach. Zawiera margines wewnętrzny ( + + padding + ), ale pomija pionowy pasek przewijania (jeśli jest obecny lub renderowany), obramowania i margines zewnętrzny ( + + margin + ).

+

Składnia i wartości

+
var w = element.clientWidth;
+
+

w to liczba całkowita odpowiadająca clientWidth elementu w pikselach. clientWidth jest tylko do odczytu.

+

Przykład

+
+
+

padding-top

+

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+

Cat image and text coming from www.best-cat-art.com

+

padding-bottom

+
+ LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+

Image:clientWidth.png

+

Specyfikacja

+

Nie należy do żadnej ze specyfikacji W3C.

+

Uwagi

+

clientWidth został wprowadzony w modelu obiektowym DHTML przeglądarki Internet Explorer.

+

Dokumentacja

+ +
+  
+

{{ languages( { "en": "en/DOM/element.clientWidth", "fr": "fr/DOM/element.clientWidth" } ) }}

diff --git a/files/pl/web/api/element/dir/index.html b/files/pl/web/api/element/dir/index.html new file mode 100644 index 0000000000..5e20e1e6ad --- /dev/null +++ b/files/pl/web/api/element/dir/index.html @@ -0,0 +1,34 @@ +--- +title: element.dir +slug: Web/API/Element/dir +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/dir +--- +
+ {{ApiRef}}
+

Podsumowanie

+

Atrybut dir ustawia lub pobiera kierunek pisania tekstu dla zawartości bieżącego elementu.

+

Składnia i wartości

+
var bieżącyKierunekPisania = elementNodeReference.dir;
+elementNodeReference.dir = nowyKierunekPisania;
+
+

bieżącyKierunekPisania jest łańcuchem reprezentującym kierunek pisania tekstu bieżącego elementu. nowyKierunekPisania to zmienna łańcuchowa, której wartość reprezentuje kierunek pisania tekstu.

+

Możliwe wartości dir to ltr dla "od lewej do prawej" i rtl dla "od prawej do lewej".

+

Przykład

+
var parg = document.getElementById("para1");
+
+parg.dir = "rtl";
+// zmienia kierunek tekstu w paragrafie "para1"
+
+

Uwagi

+

Kierunek pisania tekstu elementu oznacza kierunek, w którym idzie tekst (do obsługi różnych języków). Języki arabski i hebrajski to typowe przykłady użycia kierunku rtl.

+

Obrazek może mieć atrybut dir ustawiony na rtl. W takim wypadku atrybuty title i alt będą sformatowane i wyświetlona jako rtl.

+

Jeśli tabela ma kierunek rtl, kolumny porządkowane są od prawej do lewej.

+

Specyfikacja

+ diff --git a/files/pl/web/api/element/dispatchevent/index.html b/files/pl/web/api/element/dispatchevent/index.html new file mode 100644 index 0000000000..266c570cfe --- /dev/null +++ b/files/pl/web/api/element/dispatchevent/index.html @@ -0,0 +1,43 @@ +--- +title: element.dispatchEvent +slug: Web/API/Element/dispatchEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/EventTarget/dispatchEvent +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Wywołuje zdarzenie w bieżącym elemencie.

+ +

Składnia

+ +
bool = element.dispatchEvent(event)
+
+ + + +

Uwagi

+ +

Jak pokazuje powyższy przykład, dispatchEvent to ostatni krok w procesie utwórz-zainicjuj-wywołaj, którego używa się by ręcznie wywołać zdarzenia w modelu zdarzeń implementacji.

+ +

Zdarzenie może zostać utworzone przy użyciu metody document.createEvent i zainicjowane za pomocą initEvent lub innej, bardziej wyspecjalizowanej metody, jak initMouseEvent albo initUIEvent.

+ +

Zobacz też dokumentację obiektu event.

+ +

Specyfikacja

+ +

DOM Level 2 Events: dispatchEvent

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.dispatchEvent", "es": "es/DOM/element.dispatchEvent", "fr": "fr/DOM/element.dispatchEvent", "ja": "ja/DOM/element.dispatchEvent" } ) }}

diff --git a/files/pl/web/api/element/firstchild/index.html b/files/pl/web/api/element/firstchild/index.html new file mode 100644 index 0000000000..20189ce803 --- /dev/null +++ b/files/pl/web/api/element/firstchild/index.html @@ -0,0 +1,101 @@ +--- +title: element.firstChild +slug: Web/API/Element/firstChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/firstChild +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

firstChild jest właściwością tylko do odczytu, która zwraca pierwszego potomka węzła lub wartość null, jeżeli węzeł nie ma potomków. Jeżeli węzeł jest elementem Document, wtedy zwraca pierwszy węzeł z listy swoich bezpośrednich dzieci.

+ +

Składnia i wartości

+ +
var elt = element.firstChild;
+
+ +

elt to referencja do pierwszego dziecka elementu, jeśli jest takie - w przeciwnym razie jest to null.

+ +

Przykład

+ +

Przeglądarki oparte o Gecko wstawiają do dokumentu węzły tekstowe reprezentujące białe znaki w kodzie. Dlatego pierwsze dziecko elementu może odnosić się do wstawionego węzła tekstowego, a nie elementu określonego przez następny znacznik w źródle strony.

+ +
<p id="para-01">
+  <span>Pierwszy span</span>
+</p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+
+ +

W powyższym przykładzie alert wyświetli '#text', ponieważ wstawiony jest węzeł tekstowy oznaczający przerwę między otwierającymi znacznikami <p> i <span> . Dowolny biały znak spowoduje wstawienie węzła tekstowego - zarówno pojedyncza spacja, jak i dowolna ilość spacji, nowych linii, znaków tabulacji itd.

+ +

Kolejny węzeł #text jest wstawiany między zamykającymi znacznikami </span> i </p>

+ +

Jeśli usunie się białe znaki ze źródła, nie zostaną wstawione węzły tekstowe, a element span stanie się pierwszym dzieckiem paragrafu.

+ +
<p id="para-01"><span>Pierwszy span</span></p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+
+ +

Teraz alert wyświetli 'SPAN'.

+ +

Uwagi

+ +

Więcej o problemach z węzłami-zjawami znajdziesz w {{ Bug(26179) }} (nie komentuj tego błędu!). Oto jeden ze sposobów na ominięcie problemu:

+ +
<!-- konwencjonalne formatowanie prowadzi do
+     zaśmiecenia drzewa dokumentu w Gecko
+ -->
+<div>
+ <ul>
+  <li>Pozycja 1</li>
+  <li>Pozycja 2</li>
+  <li>Pozycja 3</li>
+ </ul>
+</div>
+
+<!-- Formatowanie ustawione, by ominąć
+     problem węzłów-zjaw
+ -->
+<div
+ ><ul
+  ><li>Pozycja 1</li
+  ><li>Pozycja 2</li
+  ><li>Pozycja 3</li
+ ></ul
+></div>
+
+ +

Węzły bezdzietne

+ +

Własność zwraca null, jeśli bieżący węzeł jest bezdzietny.

+ +

Białe znaki i węzły dzieci

+ +

Węzły #text mogą być wstawione jako dzieci elementów takich jak TR pomimo że specyfikacja HTML pozwala tylko na TD jako ich dzieci. Z uwagi na XML białe znaki muszą zostać zachowane i gdzieś wstawione.

+ +

Ponieważ węzły #text nie są elementami HTML, białe znaki są tam wstawiane.

+ +

W3C DOM 3 FAQ: Why are some Text nodes empty?

+ +

Specyfikacja

+ +

DOM Level 1 Core: firstChild

+ +

DOM Level 2 Core: firstChild

+ +
+ +

{{ languages( { "en": "en/DOM/element.firstChild", "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "zh-cn": "cn/DOM/element.firstChild" } ) }}

diff --git a/files/pl/web/api/element/focus/index.html b/files/pl/web/api/element/focus/index.html new file mode 100644 index 0000000000..7f3eef32fa --- /dev/null +++ b/files/pl/web/api/element/focus/index.html @@ -0,0 +1,23 @@ +--- +title: element.focus +slug: Web/API/Element/focus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/focus +--- +

{{ ApiRef() }}

+

Podsumowanie

+

focus aktywuje bieżący element (ustawia focus).

+

Składnia

+
element.focus()
+
+

Uwagi

+

Wywołanie metody focus() jest równoważne z zaznaczeniem elementu przez użytkownika.

+

Specyfikacja

+

focus

+
+  
+

{{ languages( { "en": "en/DOM/element.focus", "fr": "fr/DOM/element.focus" } ) }}

diff --git a/files/pl/web/api/element/getattribute/index.html b/files/pl/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..da509fb349 --- /dev/null +++ b/files/pl/web/api/element/getattribute/index.html @@ -0,0 +1,43 @@ +--- +title: element.getAttribute +slug: Web/API/Element/getAttribute +translation_of: Web/API/Element/getAttribute +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

getAttribute zwraca wartość atrybutu o podanej nazwie.

+ +

Składnia

+ +
atrybut = element.getAttribute(nazwaAtrybutu)
+
+ + + +

Przykład

+ +
var div1 = document.getElementById("div1");
+var a = div1.getAttribute("align");
+alert(a); // pokaże wartość atrybutu "align" dla elementu o id="div1"
+
+ +

Uwagi

+ +

W zasadzie wszystkie przeglądarki (Firefox, Internet Explorer, nowsze wersje Opery, Safari, Konqueror oraz iCab) zwracają null, jeśli bieżący element nie posiada atrybutu o podanej nazwie. Specyfikacja DOM mówi, że w takiej sytuacji powinien być zwracany pusty ciąg znaków i niektórze implementacje DOM tak się zachowują. Zatem jeśli jest możliwe, że element nie posiada żądanego atrybutu, powinieneś użyć metody hasAttribute aby sprawdzić istnienie atrybutu zanim wywołasz getAttribute.

+ +

nazwaAtrybutu jest zazwyczaj zależna od wielkości liter, jednak nie w przypadku elementów HTML - wtedy wielkość liter nie ma znaczenia.

+ +

{{ DOMAttributeMethods() }}

+ +

Specyfikacja

+ +

DOM Level 2 Core: getAttribute (wprowadzono w DOM Level 1 Core)

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.getAttribute", "fr": "fr/DOM/element.getAttribute", "ja": "ja/DOM/element.getAttribute" } ) }}

diff --git a/files/pl/web/api/element/getattributenode/index.html b/files/pl/web/api/element/getattributenode/index.html new file mode 100644 index 0000000000..0bdf977063 --- /dev/null +++ b/files/pl/web/api/element/getattributenode/index.html @@ -0,0 +1,36 @@ +--- +title: element.getAttributeNode +slug: Web/API/Element/getAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca określony atrybut elementu jako węzeł typu Attr.

+

Składnia

+
węzełAtrybutu = element.getAttributeNode(nazwaAtrybutu)
+
+ +

Przykład

+
// html: <div id="top" />
+t = document.getElementById("top");
+iNode = t.getAttributeNode("id");
+// iNode.value = "top"
+
+

Uwagi

+

Interfejs węzła Attr dziedziczy ze wspólnego interfejsu węzłów Node, ale węzły atrybutów nie stanowią części drzewa dokumentu. Wpólne atrybuty wszystkich węzłów, takie jak parentNode, previousSibling i nextSibling mają w przypadku węzłów Attr wartość null.

+

Do elementu, do którego należy atrybut, możesz odnosić się wykorzystując właściwość ownerElement.

+

Do pobrania wartości atrybutu używa się raczej metody getAttribute niż getAttributeNode.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

getAttributeNode

+
+  
+

{{ languages( { "en": "en/DOM/element.getAttributeNode", "fr": "fr/DOM/element.getAttributeNode", "ja": "ja/DOM/element.getAttributeNode" } ) }}

diff --git a/files/pl/web/api/element/getattributenodens/index.html b/files/pl/web/api/element/getattributenodens/index.html new file mode 100644 index 0000000000..b1ec0f2281 --- /dev/null +++ b/files/pl/web/api/element/getattributenodens/index.html @@ -0,0 +1,39 @@ +--- +title: element.getAttributeNodeNS +slug: Web/API/Element/getAttributeNodeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNodeNS +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca węzeł Attr dla atrybutu z daną przestrzenią nazw i nazwą.

+ +

Składnia

+ +
attributeNode = element.getAttributeNodeNS(namespace,nodeName)
+
+ + + +

== Przykład == TBD The example needs to be fixed pre> // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "http://www.mozilla.org/ns/specialspace", "id"); // iNode.value = "full-top" </pre

+ +

Uwagi

+ +

getAttributeNodeNS is more specific than getAttributeNode in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is setAttributeNodeNS.

+ +

{{ DOMAttributeMethods() }}

+ +

Specyfikacja

+ +

DOM Level 2 Core: getAttributeNodeNS

diff --git a/files/pl/web/api/element/getattributens/index.html b/files/pl/web/api/element/getattributens/index.html new file mode 100644 index 0000000000..1ece5594ec --- /dev/null +++ b/files/pl/web/api/element/getattributens/index.html @@ -0,0 +1,47 @@ +--- +title: element.getAttributeNS +slug: Web/API/Element/getAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

getAttributeNS zwraca ciąg z wartością atrybutu o podanej nazwie i przestrzeni nazw. Jeśli nie ma atrybutu o takiego atrybutu, zwrócone zostanie null bądź "" (pust ciąg) - zob. {{ Anch("Uwagi") }}.

+

Składnia

+
wartośćAtr =element.getAttributeNS(przestrzeńNazw,nazwa)
+
+

Parametry

+ +

Przykład

+
var div1 = document.getElementById("div1");
+var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/",
+                            "special-align");
+alert(a); // wyświetli zawartość special-align elementu div
+
+

Uwagi

+

getAttributeNS różni się od getAttribute tym, że pozwala Ci określić do jakiej przestrzeni nazw należy atrybut, tak jak w powyższym przykładzie, gdzie atrybut należał do fikcyjnej przestrzeni "specialspace".

+

W zasadzie wszystkie przeglądarki (Firefox, Internet Explorer, nowsze wersje Opery, Safari, Konqueror oraz iCab) zwracają null, jeśli bieżący element nie posiada atrybutu o podanej nazwie. Specyfikacja DOM mówi, że w takiej sytuacji powinien być zwracany pusty ciąg znaków i niektórze implementacje DOM tak się zachowują. Zatem jeśli jest możliwe, że element nie posiada żądanego atrybutu, powinieneś użyć metody hasAttributeNS aby sprawdzić istnienie atrybutu zanim wywołasz getAttributeNS.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: getAttributeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.getAttributeNS", "fr": "fr/DOM/element.getAttributeNS", "ja": "ja/DOM/element.getAttributeNS" } ) }}

diff --git a/files/pl/web/api/element/getboundingclientrect/index.html b/files/pl/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..dc189b37af --- /dev/null +++ b/files/pl/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,146 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - Metoda(2) + - Pudełko + - Widok CSSOM +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{APIRef("DOM")}}
+ +

Metoda Element.getBoundingClientRect() zwraca rozmiar  oraz  położenie elementu względem okna widoku (viewport).

+ +

Składnia

+ +
rectObject = object.getBoundingClientRect();
+
+ +

Wynik

+ +

Zwrócony  jest obiekt DOMRect,  wyznaczony z tablicy prostokątów zwróconych przez  metodę getClientRects(), zastosowaną do danego elementu, czyli wyznaczony ze wszystkich pudełek  CSS związanych z danym elementem.

+ +

Zwrócony obiekt  DOMRect posiada następujące (tylko do odczytu) właściwości: left, top, right and bottom,  opisujące parametry otaczającego element pudełka w  pikselach. Właściwości top and left  oznaczają odległość od górnego-lewego rogu aktualnego okna widoku.

+ +
+

Uwaga: {{Gecko("1.9.1")}} dodało właściwości width and height do obiektu DOMRect.

+
+ +

Puste pudełka są całkowicie ignorowane. Jeśli wszystkie elementy pudełka są puste, to zwrócony prostokąt ma wysokość i szerokość równą zero zaś własności top oraz left dotyczą pierwszego pudełka CSS (w porządku kontekstowym) który zawiera dany element.

+ +

Efekt przewijania (scrolling) okna widoku  (lub dowolnego innego przewijalnego elementu) jest uwzględniany podczas wyznaczania otaczającego pudełka. Zatem, właściwości top oraz left zmieniają się natychmiast po dowolnym przewinięciu (są więc względne w stosunku do widoku, a więc nie są absolutne). W celu wyznaczenia absolutnego położenie elementu  należy do właściwości top oraz left dodać aktualne pozycje przesuwania (scrolling position)  (można je uzyskać za  pomocą window.scrollX and window.scrollY).

+ +

Skrypty wymagające  zgodności z różnymi przeglądarkami mogą korzystać z metod  window.pageXOffset oraz window.pageYOffset zamiast window.scrollX oraz window.scrollY. Skrypty które nie mają dostępu do  window.pageXOffset, window.pageYOffset, window.scrollX ani window.scrollY mogą stosować następujący kod :

+ +
// Zamiast scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
+// Zamiast scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
+
+ +

Przykład

+ +
// rect jest obiektem DOMRect z sześcioma własnościami: left, top, right, bottom, width, height
+var rect = obj.getBoundingClientRect();
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName("CSSOM View", "#the-getclientrects()-and-getboundingclientrect()-methods", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}definicja początkowa
+ +

Uwagi

+ +

Metoda getBoundingClientRect() została wprowadzona po raz pierwszy w  modelu MS IE DHTML.

+ +

Wynik metody getBoundingClientRect() jest  obiektem zamrożonym.

+ +

Zgodność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
WłaściwośćChromeFirefox (Gecko)Internet ExplorerOperaSafari
Postawowe wsparcie1.0[1]{{CompatGeckoDesktop(1.9)}}4.0[2]{{CompatVersionUnknown}}4.0
width/height{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9.1)}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
WłaściwośćAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Postawowe wsparcie2.01.0{{CompatGeckoMobile(1.9)}}6.0{{CompatVersionUnknown}}4.0
+
+ +

[1] specyfikacja CSS dla elementu 'use'  wskazującego na element  'symbol' wymaga aby domyślne wartości atrybutów  width oraz height elementu 'use' ustawione były na 100%. Również,  specyfikacja CSS dla atrybutów width oraz height elementu 'svg' wymaga 100%  jako wartości domyślne. Google Chrome nie przestrzega tych wymagań dla elementów  'use'. Chrome nie uwzględnia również  'stroke-width'. Zatem metoda   getBoundingClientRect() może zwrócić inny prostokąt w  Chrome  niż w Firefox.

+ +

[2] W IE8, oraz we wcześniejszych wersjach, obiekt  DOMRect zwrócony przez getBoundingClientRect() nie zawiera właściwości height ani width. Żadne dodatkowe właściwości (w tym height oraz width) nie mogą być dodane do tych obiektów DOMRect.

+ +

Począwszy od Gecko 12.0 {{geckoRelease("12.0")}}, efekt  transformacji CSS jest uwzględniany w algorytmie wyznaczania otaczającego pudełka (bounding rectangle).

+ +

Patrz również

+ + diff --git a/files/pl/web/api/element/getelementsbytagnamens/index.html b/files/pl/web/api/element/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..81b82173d2 --- /dev/null +++ b/files/pl/web/api/element/getelementsbytagnamens/index.html @@ -0,0 +1,49 @@ +--- +title: element.getElementsByTagNameNS +slug: Web/API/Element/getElementsByTagNameNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Element/getElementsByTagNameNS +--- +

{{ ApiRef("DOM") }}

+ +

Podsumowanie

+ +

Zwraca listę elementów o danej nazwie znacznika należącej do danej przestrzeni nazw.

+ +

Składnia

+ +
elements =element.getElementsByTagNameNS(namespace,localName)
+
+ + + +

Przykład

+ +
// check the alignment on a number of cells in a table.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagNameNS("www.mozilla.org/ns/specialspace/", "td");
+for (var i = 0; i < cells.length; i++) {
+    status = cells[i].getAttribute("status");
+    if ( status == "open") {
+        // grab the data
+    }
+}
+
+ +

Uwagi

+ +

element.getElementsByTagNameNS is similar to document.getElementsByTagNameNS, except that its search is restricted to those elements which are descendants of the specified element.

+ +

Specyfikacja

+ +

DOM Level 2 Core: Element.getElementsByTagNameNS

diff --git a/files/pl/web/api/element/hasattribute/index.html b/files/pl/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..e06d1f1fa2 --- /dev/null +++ b/files/pl/web/api/element/hasattribute/index.html @@ -0,0 +1,34 @@ +--- +title: element.hasAttribute +slug: Web/API/Element/hasAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttribute +--- +

{{ ApiRef() }}

+

Podsumowanie

+

hasAttribute zwraca wartość logiczną oznaczającą, czy element posiada określony atrybut czy nie.

+

Składnia

+
wynik = element.hasAttribute(nazwaAtrybutu)
+
+ +

Przykład

+
// przed ustawieniem wartości sprawdź, czy atrybut istnieje
+d = document.getElementById("div1");
+if(d.hasAttribute("align")){
+  d.setAttribute("align", "center");
+}
+
+

Uwagi

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: hasAttribute

+
+  
+

{{ languages( { "en": "en/DOM/element.hasAttribute", "fr": "fr/DOM/element.hasAttribute", "ja": "ja/DOM/element.hasAttribute" } ) }}

diff --git a/files/pl/web/api/element/hasattributens/index.html b/files/pl/web/api/element/hasattributens/index.html new file mode 100644 index 0000000000..13cc715dac --- /dev/null +++ b/files/pl/web/api/element/hasattributens/index.html @@ -0,0 +1,39 @@ +--- +title: element.hasAttributeNS +slug: Web/API/Element/hasAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttributeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

hasAttributeNS zwraca wartość logiczną oznaczającą, czy bieżący element ma określony atrybut.

+

Składnia

+
wynik =element.hasAttributeNS(przestrzeńNazw,nazwaLokalna)
+
+ +

Przykład

+
// sprawdza czy jest taki atrybut
+// przed nadaniem mu wartości
+var d = document.getElementById("div1");
+if (d.hasAttributeNS(
+        "http://www.mozilla.org/ns/specialspace/",
+        "special-align")) {
+   d.setAttribute("align", "center");
+}
+
+

Uwagi

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: hasAttributeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.hasAttributeNS", "fr": "fr/DOM/element.hasAttributeNS", "ja": "ja/DOM/element.hasAttributeNS" } ) }}

diff --git a/files/pl/web/api/element/hasattributes/index.html b/files/pl/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..2e1c7aea73 --- /dev/null +++ b/files/pl/web/api/element/hasattributes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasAttributes +slug: Web/API/Element/hasAttributes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttributes +--- +

{{ ApiRef() }}

+

Podsumowanie

+

hasAttributes zwraca wartość logiczną zależnie od tego, czy element posiada jakiekolwiek atrybuty.

+

Składnia

+
[ true | false ] = element.hasAttributes
+
+

Przykład

+
t1 = document.getElementById("table-data");
+if ( t1.hasAttributes ) {
+    // zrób coś z
+    // t1.attributes
+}
+
+

Specyfikacja

+

hasAttributes

+
+  
+

{{ languages( { "en": "en/DOM/element.hasAttributes", "fr": "fr/DOM/element.hasAttributes", "it": "it/DOM/element.hasAttributes" } ) }}

diff --git a/files/pl/web/api/element/haschildnodes/index.html b/files/pl/web/api/element/haschildnodes/index.html new file mode 100644 index 0000000000..e21f22dedf --- /dev/null +++ b/files/pl/web/api/element/haschildnodes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasChildNodes +slug: Web/API/Element/hasChildNodes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/hasChildNodes +--- +

{{ ApiRef() }}

+

Podsumowanie

+

hasChildNodes zwraca wartość logiczną określającą, czy element posiada dzieci czy nie.

+

Składnia

+
[ true | false ] = element.hasChildNodes()
+
+

Przykład

+
t1 = document.getElementById("table-data");
+if ( t1.hasChildNodes() ) {
+    // tabela ma dzieci }
+
+

Uwagi

+

Zauważ, że składnia element.hasChildNodes - bez nawiasów () - jest nieprawidłowa. Takie użycie zawsze zwraca true, oznaczające, że metoda o tej nazwie jest dostępna w obiekcie. Nie daj się nabrać.

+

Specyfikacja

+

hasChildNodes

+
+  
+

{{ languages( { "en": "en/DOM/element.hasChildNodes", "fr": "fr/DOM/element.hasChildNodes", "ja": "ja/DOM/element.hasChildNodes" } ) }}

diff --git a/files/pl/web/api/element/id/index.html b/files/pl/web/api/element/id/index.html new file mode 100644 index 0000000000..53ba49d3b0 --- /dev/null +++ b/files/pl/web/api/element/id/index.html @@ -0,0 +1,38 @@ +--- +title: element.id +slug: Web/API/Element/id +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/id +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność id jednoznacznie identyfikuje bieżący element.

+

Składnia i wartości

+
id_str = element.id
+element.id =id_str
+
+ +

Przykład

+
if (element.id != "main_loop")
+     goBack();
+
+

Uwagi

+

Nie ma ważniejszej własności w dziedzinie konstruowania stron niż + + id + . ID elementu jest tym, czego najczęściej używa się by go wydobyć (np. za pomocą getElementById) i pozwala ono manipulować węzłami niezależnie od innych węzłów. W HTML-u i w XUL-u id definiowane jest jako atrybut tak:

+
<td id="table-cell2" />
+
+

Jeśli zamierzasz używać DOM na swoich stronach dobrze jest przypisać tyle atrybutów id ile tylko będzie potrzebne. Zauważ też, że + + id + używa się również by powiązać reguły stylów CSS z poszczególnymi elementami.

+

Specyfikacja

+

id

+

{{ languages( { "en": "en/DOM/element.id", "fr": "fr/DOM/element.id", "ja": "ja/DOM/element.id", "zh-cn": "cn/DOM/element.id" } ) }}

diff --git a/files/pl/web/api/element/index.html b/files/pl/web/api/element/index.html new file mode 100644 index 0000000000..5a7c6be166 --- /dev/null +++ b/files/pl/web/api/element/index.html @@ -0,0 +1,677 @@ +--- +title: Element +slug: Web/API/Element +tags: + - DOM + - Gecko +translation_of: Web/API/Element +--- +

{{ ApiRef}}

+ +

Ten rozdział dostarcza zwięzłych informacji dla wszystkich metod, własności i zdarzeń dostępnych dla większości elementów HTML i XML w Gecko DOM.

+ +

Różne specyfikacje W3C mają zastosowanie do elementów:

+ + + +

Niniejsze interfejsy DOM łączą różne specyfikacje, jednak staramy się skoncentrować na rekomendacji DOM Level 2 HTML. Każda podstrona zawiera odnośnik do odpowiedniego fragmentu specyfikacji W3C DOM.

+ +

W tym miejscu "elementy" oznaczają ten interfejs, jaki mają wszystkie elementy HTML i XML. Istnieją również bardziej specjalizowane interfejsy dla poszczególnych elementów - np. BODY posiada dodatkowe funkcje i własności, podobnie tabele. W tym rozdziale omówiony jest tylko ten interfejs, jak współdzielą wszystkie elementy.

+ +

Własności

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NazwaOpisTypDostępność
attributesZwraca tablicę atrybutów elementu.NamedNodeMapWszystkie
childNodesZwraca tablicę węzłów potomnych elementu.NodeListWszystkie
classNamePobiera/ustawia klasę elementu.StringHTML, XUL
clientHeightZwraca wewnętrzną wysokość elementu.NumberHTML
clientWidthZwraca wewnętrzną szerokość elementu.NumberHTML
dirUstawia lub pobiera kierunek elementu.StringHTML, XUL
firstChildZwraca pierwsze dziecko bieżącego węzła lub null, jeśli ten element nie posiada węzła potomnego.NodeWszystkie
idPobiera/ustawia id elementu.StringHTML, XUL
innerHTMLPobiera/ustawia znacznik zawartości elementu.StringHTML
langOkreśla język bazowy dla wartość atrybutów i tekstowej zawartości elementu.StringHTML
lastChildZwraca ostatnie dziecko bieżącego węzła elementu lub null jeśli ten element nie posiada węzłów potomnych.NodeWszystkie
localNameZwraca lokalną część uściślonej nazwy węzła.StringWszystkie
NazwaOpisTypDostępność
namePobiera lub ustawia atrybut name - dostępne nie dla wszystkich elementów.StringHTML
namespaceURIURI przestrzeni nazw węzła lub null, jeśli jest bliżej nieokreślony.StringWszystkie
nextSiblingWęzeł bezpośrednio następny w drzewie dokumentu lub null jeżeli takiego nie ma.NodeWszystkie
nodeNameNazwa węzła.StringWszystkie
nodeTypeCyfra reprezentująca typ węzła. 1 oznacza element DOM.NumberWszystkie
nodeValueWartość węzła atrybutu, zawartość węzła tekstowego lub null dla elementu DOM.StringWszystkie
offsetHeightWysokość elementu, odnosząca się do układu strony.NumberHTML
offsetLeftOdległość pomiędzy lewą krawędzią elementu, a jego offsetParent lewej krawędzi.NumberHTML
offsetParentElement, od którego obliczane są wszystkie przesunięcia.ElementHTML
offsetTopOdległość pomiędzy górną krawędzią elementu, a jego offsetParent górnej krawędzi.NumberHTML
offsetWidthSzerokość elementu, odnosząca się do układu strony.NumberHTML
ownerDocumentDokument, którego węzeł jest w lub null jeśli węzeł nie znajduje się wewnątrz.DocumentWszystkie
NazwaOpisTypDostępność
parentNodeElement nadrzędny bieżącego węzła lub null jeżeli węzeł nie znajduje się wewnątrz dokumentu DOM.NodeWszystkie
prefixPrefiks przestrzeni nazw węzła lub null jeżeli nie określono prefiksa.StringWszystkie
previousSiblingWęzeł bezpośrednio poprzedni w drzewie dokumentu lub null jeżeli takiego nie ma.NodeWszystkie
scrollHeightThe scroll view height of an element.NumberHTML
scrollLeftPobiera/Ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu.NumberHTML
scrollTopPobiera/Ustawia liczbę pikseli, o którą ma zostać przewinięta w górę zawartość elementu.NumberHTML
scrollWidthZwraca szerokość zawartości elementu w pikselach lub szerokość samego elementu.NumberHTML
styleObiekt reprezentujący deklaracje stylów elementu.CSSStyleHTML, XUL
tabIndexPobiera lub ustawia pozycję elementu w kolejności przechodzenia tabulatorem.NumberHTML
tagNameNazwa znacznika HTML danego elementu.StringWszystkie
textContentPobiera bądź ustawia tekstową treść elementu i jego potomków.StringWszystkie
+ +

 

+ +
+
attributes
+
Zwraca tablicę atrybutów elementu.
+
+ +
+
childNodes
+
Zwraca tablicę węzłów potomnych elementu
+
+ +
+
className
+
Pobiera/ustawia klasę elementu.
+
+ +
+
clientHeight
+
Własność DHTML-a, reprezentuje wewnętrzną wysokość elementu.
+
+ +
+
clientLeft
+
Długość od lewego obramowania elementu wyrażona w pikselach. Aktualnie nie obsługiwana.
+
+ +
+
clientTop
+
Długość od górnego obramowania elementu wyrażona w pikselach. Aktualnie nie obsługiwana.
+
+ +
+
clientWidth
+
Własność DHTML-a, reprezentuje wewnętrzną szerokość elementu.
+
+ +
+
dir
+
Pobiera/ustawia kierunkowość (ang. directionality) elementu.
+
+ +
+
firstChild
+
Zwraca pierwsze dziecko bieżącego węzła.
+
+ +
+
id
+
Pobiera/ustawia id elementu.
+
+ +
+
innerHTML
+
innerHTML zwraca całą zawartość elementu wraz ze znacznikami.
+
+ +
+
lang
+
Określa język bazowy dla wartość atrybutów i tekstowej zawartości elementu.
+
+ +
+
lastChild
+
Zwraca ostatnie dziecko bieżącego węzła.
+
+ +
+
length
+
Zwraca ilość elementów listy (np. childNodes).
+
+ +
+
localName
+
Zwraca lokalną część uściślonej nazwy węzła.
+
+ +
+
name
+
Pobiera lub ustawia atrybut name - dostępne nie dla wszystkich elementów.
+
+ +
+
namespaceURI
+
URI przestrzeni nazw węzła lub NULL, jeśli nie określono przestrzeni nazw.
+
+ +
+
nextSibling
+
Zwraca węzeł bezpośrednio następny w drzewie dokumentu.
+
+ +
+
nodeName
+
Zwraca nazwę biężącego węzła.
+
+ +
+
nodeType
+
Zwraca typ bieżącego węzła.
+
+ +
+
nodeValue
+
Zwraca wartość bieżącego węzła.
+
+ +
+
offsetHeight
+
offsetHeight jest własnością DHTML-a, zwracającą wysokość elementu względem układu.
+
+ +
+
offsetLeft
+
offsetLeft pobiera/ustawia ilość pikseli, jaka dzieli element od lewej strony wewnątrz węzła offsetParent.
+
+ +
+
offsetParent
+
offsetParent zwraca referencję do obiektu, w którym obecny element się znajduje (tj. rodzica).
+
+ +
+
offsetTop
+
offsetTop zwraca pozycję obecnego elementu względem góry węzła offsetParent.
+
+ +
+
offsetWidth
+
offsetWidth jest własnością DHTML-a, zwracającą szerokość elementu względem układu.
+
+ +
+
ownerDocument
+
Zwraca dokument, w którym znajduje się bieżący węzeł.
+
+ +
+
parentNode
+
Zwraca rodzica bieżącego węzła.
+
+ +
+
prefix
+
Zwraca prefiks przestrzeni nazw obecnego węzła bądź NULL, jeśli nie określono przestrzeni nazw.
+
+ +
+
previousSibling
+
Zwraca węzeł bezpośrednio poprzedni w drzewie dokumentu.
+
+ +
+
scrollHeight
+
Własność DHTML-a, zwraca wysokość zawartości elementu z paskiem przewijania.
+
+ +
+
scrollLeft
+
pobiera bądź ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu. Kierunek przewijania odbywa się w lewo.
+
+ +
+
scrollTop
+
Własność DHTML-a, która ustawia bądź pobiera odległość między górą elementu a najwyższym punktem zawartości elementu z paskiem przewijania.
+
+ +
+
scrollWidth
+
Zwraca the width of the scroll view of an element.
+
+ +
+
style
+
Zwraca blok reguł stylów dla elementu.
+
+ +
+
tabIndex
+
Pobiera/ustawia pozycję elementu w porządku tabulacji.
+
+ +
+
tagName
+
Zwraca nazwę elementu.
+
+ +
+
textContent
+
Pobiera/ustawia zawartość tekstu elementu włączając jego potomków.
+
+ +

Metody

+ +
+
addEventListener
+
Pozwala zarejestrować obserwatora zdarzeń dla celu zdarzenia.
+
+ +
+
appendChild
+
Wstawia określony węzeł do listy węzłów dokumentu.
+
+ +
+
blur
+
Dezaktywuje bieżący element.
+
+ +
+
click
+
Wywołuje kliknięcie na elemencie.
+
+ +
+
cloneNode
+
Zwraca kopię bieżącego węzła.
+
+ +
+
dispatchEvent
+
Pozwala przekazać wywołania zdarzeń do modelu zdarzeń w implementacji DOM.
+
+ +
+
focus
+
Aktywuje bieżący element.
+
+ +
+
getAttribute
+
Zwraca wartość atrybutu o podanej nazwie.
+
+ +
+
getAttributeNS
+
Zwraca wartość atrybutu o podanej nazwie i przestrzeni nazw.
+
+ +
+
getAttributeNode
+
Zwraca atrybut elementu jako osobny węzeł.
+
+ +
+
getElementsByTagName
+
Zwraca elementy o podanej nazwie będące potomkami bieżącego elementu.
+
+ +
+
hasAttribute
+
Zwraca wartość logiczną zależnie od tego, czy element posiada atrybut o podanej nazwie.
+
+ +
+
hasAttributeNS
+
Zwraca wartość logiczną zależnie od tego, czy element posiada atrybut o podanej nazwie i przestrzeni nazw.
+
+ +
+
hasAttributes
+
Zwraca wartość logiczną zależnie od tego, czy element posiada jakiekolwiek atrybuty.
+
+ +
+
hasChildNodes
+
Zwraca wartość logiczną zależnie od tego, czy element posiada dzieci.
+
+ +
+
insertBefore
+
Metoda pozwala wstawić węzeł przed bieżącym elementem w DOM.
+
+ +
+
item
+
Zwraca węzeł z drzewa wg podanego indeksu.
+
+ +
+
normalize
+
Metoda zapisuje bieżący węzeł i całe drzewo znajdujące się wewnątrz w "znormalizowanej" formie.
+
+ +
+
removeAttribute
+
Usuwa atrybut elementu.
+
+ +
+
removeAttributeNode
+
Usuwa określony atrybut elementu.
+
+ +
+
removeChild
+
Usuwa węzeł potomny bieżącego elementu.
+
+ +
+
removeEventListener
+
Pozwala usunąć obserwatora zdarzeń z celu zdarzenia.
+
+ +
+
replaceChild
+
Metoda replaceChild() zastępuje węzeł potomny bieżącego elementu innym węzłem.
+
+ +
+
setAttribute
+
Dodaje nowy atrybut bądź zmienia wartość atrybutu bieżącego elementu.
+
+ +
+
setAttributeNS
+
Dodaje nowy atrybut bądź zmienia wartość atrybutu bieżącego elementu, wg podanej nazwy i przestrzeni nazw.
+
+ +
+
setAttributeNode
+
Dodaje nowy węzeł atrybutu do bieżącego elementu.
+
+ +
+
setAttributeNodeNS
+
Dodaje nowy węzeł atrybutu do bieżącego elementu wg podanej nazwy i przestrzeni nazw.
+
+ +
+
supports
+
Sprawdza, czy implementacja DOM pozwala na wykorzystanie konkretnej możliwości.
+
+ +

Uchwyty zdarzeń

+ +

Poniższe właściwości nie mogą być przypisane, tak jak uchwyty zdarzeń obiektów document czy window. Wszystkie poniższe własności służą tylko do odczytu - zwracają kod obsługi zdarzeń, jeżeli został on nadany elementowi w samym HTML-u bądź XML-u.

+ +

Są to właściwości odnoszące się do HTML dla atrybutów zdarzeń 'on'.

+ +

W przeciwieństwie do odpowiadających atrybutów, wartości tych właściwość są funkcjami lub jakimkolwiek innym obiektem implementowanym przez EventListener interfejs. Przypisanie atrybutu zdarzenia w HTML powoduje utworzenie funkcji opakowującej funkcji dla określonego kodu. Np. podając następujący HTML:

+ +
<div onclick="foo();">click me!</div>
+
+ +

Jeżeli element jest referencją do <div>, wartość element.onclick wynosi faktycznie:

+ +
function onclick(event) {
+   foo();
+}
+
+ +

Note how the event object is passed as parameter event to this wrapper function.

+ +
+
onblur
+
Zwraca kod obsługi zdarzenia blur.
+
+ +
+
onclick
+
Zwraca kod obsługi zdarzenia onclick.
+
+ +
+
ondblclick
+
Zwraca kod obsługi zdarzenia dblclick.
+
+ +
+
onfocus
+
Zwraca kod obsługi zdarzenia focus.
+
+ +
+
onkeydown
+
Zwraca kod obsługi zdarzenia keydown.
+
+ +
+
onkeypress
+
Zwraca kod obsługi zdarzenia keypress.
+
+ +
+
onkeyup
+
Zwraca kod obsługi zdarzenia keyup.
+
+ +
+
onmousedown
+
Zwraca kod obsługi zdarzenia mousedown.
+
+ +
+
onmousemove
+
Zwraca kod obsługi zdarzenia mousemove.
+
+ +
+
onmouseout
+
Zwraca kod obsługi zdarzenia mouseout.
+
+ +
+
onmouseover
+
Zwraca kod obsługi zdarzenia mouseover.
+
+ +
+
onmouseup
+
Zwraca kod obsługi zdarzenia mouseup.
+
+ +
+
onresize
+
Zwraca kod obsługi zdarzenia resize.
+
diff --git a/files/pl/web/api/element/innerhtml/index.html b/files/pl/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..dafe31adf1 --- /dev/null +++ b/files/pl/web/api/element/innerhtml/index.html @@ -0,0 +1,67 @@ +--- +title: element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/innerHTML +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

innerHTML ustawia lub pobiera zbiór zawartych w danym elemencie znaczników razem z ich treścią.

+ +

Składnia

+ +
var markup = element.innerHTML;
+element.innerHTML = markup;
+
+ + + +

Przykład

+ +
// HTML:
+// <div id="d"><p>Treść</p>
+// <p>Bardziej skomplikowane</p>
+// </div>
+
+d = document.getElementById("d");
+dump(d.innerHTML);
+
+// ciąg "<p>Treść</p><p>Bardziej skomplikowane</p>"
+// zostanie wyświetlony w oknie konsoli
+
+ +

Uwagi

+ +

Własność ta, nie będąca częścią specyfikacji W3C DOM, zapewnia możliwość łatwego zastąpienia całej zawartości elementu. Na przykład można wyczyścić wszystko co jest w body:

+ +
document.body.innerHTML = "";  // Zawartość body zostaje zastąpiona pustym ciągiem
+
+ +

Własność innerHTML różnych elementów, w tym BODY i HTML może zostać pobrana czy zastąpiona. Można jej użyć, by wyświetlić źródło zmodyfikowanej dynamicznie strony:

+ +
// Skopiuj jako pojedynczą linię i wklej do paska adresu
+javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x;
+
+ +

Ponieważ nie ma publicznej specyfikacji dla tej własności, jej implementacje różnią się. Na przykład po wprowadzeniu tekstu do pola tekstowego, IE zmieni zawartość atrybutu value elementu INPUT w innerHTML, a przeglądarki oparte o Gecko - nie.

+ +

Własności tej nigdy nie powinno się używać do zapisu części tabeli - zamiast niej należy skorzystać z metod W3C DOM. innerHTML można jednak użyć, by zapisać całą tabelę lub zmodyfikować zawartość pojedynczych komórek.

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +

Zobacz także

+ +

MSDN innerHTML

+ +

{{ languages( { "en": "en/DOM/element.innerHTML", "fr": "fr/DOM/element.innerHTML", "ja": "ja/DOM/element.innerHTML" } ) }}

diff --git a/files/pl/web/api/element/insertadjacenthtml/index.html b/files/pl/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..c3332ed337 --- /dev/null +++ b/files/pl/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,91 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

insertAdjacentHTML() metoda z {{domxref("Element")}} interfejsu analizuje specyficzny tekst jak HTML albo XML, wstawia wynik w drzewo DOM w określonej pozycji. to nie naprawia elementu jest użyty na a zatem nie jest zepsuty istniejący element w środku elementu. To unika ekstra kroków z serializacją, zrobienie tego jest wiele szybsze niż bezpośredni {{domxref("Element.innerHTML", "innerHTML")}} manipulation.

+ +

Syntax

+ +
element.insertAdjacentHTML(position, text);
+ +

Parametry

+ +
+
position
+
A {{domxref("DOMString")}} reprezentuje pozycję relatywną element-u musi być must be jeden z następujących ciągów: +
    +
  • 'beforebegin': przed element -em.
    • +
  • 'afterbegin': W środku element-u przed jego pierwszym dzieckiem.
    • +
  • 'beforeend': W środku elementu po jego ostatnim dziecku.
    • +
  • 'afterend': Po element-cie 
    • +
+
+
text
+
string analizuje HTML albo XML i włącza w drzewo.
+
+ +

Visualization of position names

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Note: beforebegin i afterend pozycja działa tylko jeśli node jest w drzewie DOM i ma rodzica elementu.
+ +

Przykład:

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// At this point, the new structure is:
+// <div id="one">one</div><div id="two">two</div>
+ +

Notes

+ +

Security considerations

+ +

When inserting HTML into a page by using insertAdjacentHTML(), be careful not to use user input that hasn't been escaped.

+ +

It is not recommended you use insertAdjacentHTML() when inserting plain text; instead, use the {{domxref("Node.textContent")}} property or the {{domxref("Element.insertAdjacentText()")}} method. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.

+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }} 
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

See also

+ + diff --git a/files/pl/web/api/element/insertbefore/index.html b/files/pl/web/api/element/insertbefore/index.html new file mode 100644 index 0000000000..27c40ad945 --- /dev/null +++ b/files/pl/web/api/element/insertbefore/index.html @@ -0,0 +1,86 @@ +--- +title: element.insertBefore +slug: Web/API/Element/insertBefore +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/insertBefore +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Wstawia określony węzeł przed danym elementem jako dziecko aktualnego węzła.

+ +

Składnia

+ +
var wstawionyElement =elementRodzic.insertBefore(nowyElement,danyElement)
+
+ +

Jeżeli danyElement ma wartość null, nowyElement jest wstawiany na końcu listy węzłów potomnych.

+ + + +

Przykład

+ +
 <html>
+
+ <head>
+ <title>Gecko DOM insertBefore test</title>
+ </head>
+
+ <body>
+ <div>
+   <span id="childSpan">foo bar</span>
+ </div>
+
+ <script type="text/javascript">
+ // tworzy pusty węzeł elementu
+ // bez ID, jakichkolwiek atrybutów lub jakiejkolwiek zawartości
+ var sp1 = document.createElement("span");
+
+ // daje to atrybut id nazwany 'newSpan'
+ sp1.setAttribute("id", "newSpan");
+
+ // tworzy jakąś zawartość dla nowo powstałego elementu.
+ var sp1_content = document.createTextNode("Jest to nowy element span. ");
+
+ // zwraca się, która treść ma być do nowego elementu.
+ sp1.appendChild(sp1_content);
+
+ var sp2 = document.getElementById("childSpan");
+ var parentDiv = sp2.parentNode;
+
+ // wstawia nowy element do DOM przed sp2
+ parentDiv.insertBefore(sp1, sp2);
+ </script>
+
+ </body>
+ </html>
+
+ +

Nie istnieje metoda insertAfter, jednak można ją emulować poprzez kombinację insertBefore oraz nextSibling.

+ +

W powyższym przykładzie, sp1 może zostać wstawiona za sp2 przy użyciu:

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling);
+
+ +

Jeżeli sp2 nie posiada następnego rodzeństwa i musi być ostatnim potomnym —sp2.nextSibling to zwróci null więc sp1 będzie wstawione na końcu listy węzłów potomnych (np. natychmiast po sp2).

+ +

Specyfikacja

+ +

insertBefore

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.insertBefore", "fr": "fr/DOM/element.insertBefore", "ja": "ja/DOM/element.insertBefore", "pt": "pt/DOM/element.insertBefore" } ) }}

diff --git a/files/pl/web/api/element/lang/index.html b/files/pl/web/api/element/lang/index.html new file mode 100644 index 0000000000..446c0817b9 --- /dev/null +++ b/files/pl/web/api/element/lang/index.html @@ -0,0 +1,40 @@ +--- +title: element.lang +slug: Web/API/Element/lang +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/lang +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność ta pozwala pobrać lub ustawić język bazowy wartości atrybutów i treści elementu.

+

Składnia i wartości

+
var languageUsed = elementNodeReference.lang;
+elementNodeReference.lang = NewLanguage;
+
+ +

Przykład

+
// poniższy fragment kodu porównuje język bazowy i odsyła
+// do innych URL na podstawie odczytanego kodu języka
+if (document.documentElement.lang == "en")
+   {
+    window.location.href = "Some_document.html.en";
+   }
+else if(document.documentElement.lang == "ru")
+   {
+    window.location.href = "Some_document.html.ru";
+   };
+
+

Uwagi

+

Kod języka zwracany przez w/w właściwość zgodny jest z kodami zdefiniowanymi w dokumencie RFC 1766. Przykładowo: "en" dla języka angielskiego, "ja" dla japońskiego, "es" dla hiszpańskiego itd. Domyślna wartość atrybutu to unknown. Wartość tego atrybutu ustawiana jest zwykle dla podstawowego (najwyższego) elementu dokumentu.

+

Specyfikacja

+

W3C DOM Level 2 HTML: lang

+
+  
+

{{ languages( { "en": "en/DOM/element.lang", "fr": "fr/DOM/element.lang", "ja": "ja/DOM/element.lang" } ) }}

diff --git a/files/pl/web/api/element/lastchild/index.html b/files/pl/web/api/element/lastchild/index.html new file mode 100644 index 0000000000..34475c02d7 --- /dev/null +++ b/files/pl/web/api/element/lastchild/index.html @@ -0,0 +1,28 @@ +--- +title: element.lastChild +slug: Web/API/Element/lastChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/lastChild +--- +

{{ ApiRef() }}

+

Podsumowanie

+

lastChild zwraca ostatnie dziecko węzła.

+

Składnia i wartości

+
ostatnieDziecko = element.lastChild
+
+

ostatnieDziecko to węzeł. Jeśli jego rodzicem jest element, dzieckiem jest na ogół węzeł elementu, komentarza lub węzeł tekstowy.

+

Przykład

+
tr = document.getElementById("row1");
+td_róg = tr.lastChild;
+
+

Uwagi

+

Jeżeli nie ma węzłów potomnych, zwracane jest null.

+

Specyfikacja

+

lastChild

+
+  
+

{{ languages( { "en": "en/DOM/element.lastChild", "fr": "fr/DOM/element.lastChild", "ja": "ja/DOM/element.lastChild" } ) }}

diff --git a/files/pl/web/api/element/length/index.html b/files/pl/web/api/element/length/index.html new file mode 100644 index 0000000000..ce5e1345ef --- /dev/null +++ b/files/pl/web/api/element/length/index.html @@ -0,0 +1,37 @@ +--- +title: element.length +slug: Web/API/Element/length +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NodeList/length +--- +

{{ ApiRef() }}

+

Podsumowanie

+

length zwraca liczbę elementów listy.

+

Składnia

+
liczbaElementów = nodeList.length
+
+

Parametry

+ +

Przykład

+
// wszystkie paragrafy z dokumentu
+items = document.getElementsByTagName("p");
+// są jakieś?
+if ( items.length ) {
+     // dodaj HTML z każdego elemntu listy
+     for (var i = 0; i < items.length; i++) {
+         gross += items[0].innerHTML;
+         // gross zawiera teraz cały HTML z paragrafów
+     }
+}
+
+

Uwagi

+

Właściwość length jest bardzo częsta w programowaniu z użyciem DOM. Używa się jej by sprawdzić, czy lista zawiera elementy oraz w pętli for, jak w powyższym przykładzie.

+

Specyfikacja

+

length

+

{{ languages( { "en": "en/DOM/element.length", "ja": "ja/DOM/element.length" } ) }}

diff --git a/files/pl/web/api/element/localname/index.html b/files/pl/web/api/element/localname/index.html new file mode 100644 index 0000000000..55b5649e31 --- /dev/null +++ b/files/pl/web/api/element/localname/index.html @@ -0,0 +1,64 @@ +--- +title: element.localName +slug: Web/API/Element/localName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/localName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

localName zwraca lokalną część uściślonej nazwy węzła.

+

Składnia

+
nazwa = element.localName
+
+

Parametry

+ +

Przykład

+

(Musi obsługiwać treść XML typu, jak <tt>text/xml</tt> lub <tt>application/xhtml+xml</tt>.)

+
<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <script><![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "<svg:circle> has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]></script>
+</head>
+<body onload="test()">
+  <textarea id="text" rows="4" cols="55"/>
+  <svg:svg version="1.1"
+    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:0;"
+    viewBox="0 0 100 100">
+    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
+  </svg:svg>
+</body>
+</html>
+
+

Uwagi

+

Dla węzłów typu innego niż ELEMENT_NODE i ATTRIBUTE_NODE oraz dla węzłów utworzonych za pomocą metod DOM Level 1, jak na przykład document.createElement, własność ta ma zawsze wartość NULL.

+

localname węzła to ta część uściślonej nazwy węzła, która znajduje się po dwukropku. Uściślone nazwy są zwykle używane w XML jako część przestrzeni nazw w poszczególnych dokumentach XML. Na przykład w uściślonej nazwie "ecomm:partners" nazwa lokalna to "partners", a "ecomm" to prefiks.

+
<ecomm:business id="soda_shop" type="brick_n_mortar">
+  <ecomm:partners>
+    <ecomm:partner id="1001">Tony's Syrup Warehouse
+    </ecomm:partner>
+  </ecomm:partner>
+</ecomm:business>
+
+

Prefiks - w tym wypadku "ecomm" - określa przestrzeń nazw, w której można użyć nazwy lokalnej.

+

Zobacz także

+

element.namespaceURI

+

Specyfikacja

+

localName

+
+  
+

{{ languages( { "en": "en/DOM/element.localName", "fr": "fr/DOM/element.localName", "ja": "ja/DOM/element.localName" } ) }}

diff --git a/files/pl/web/api/element/name/index.html b/files/pl/web/api/element/name/index.html new file mode 100644 index 0000000000..e1a9fa7f41 --- /dev/null +++ b/files/pl/web/api/element/name/index.html @@ -0,0 +1,60 @@ +--- +title: element.name +slug: Web/API/Element/name +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API +--- +

{{ ApiRef() }}

+

Podsumowanie

+

name pobiera lub ustawia atrybut name obiektu DOM. Ma zastosowanie tylko dla poniższych elementów: anchor, applet, form, frame, iframe, image, input, map, meta, object, option, param, select i textarea.

+

name można wykorzystać w metodzie getElementsByName, w obiekcie form i w kolekcji elements. Jeśli zostanie użyta dla formularza lub kolekcji elementów, właściwość tak może zwrócić jeden element lub ich kolekcję.

+

Składnia

+
HTMLElement.name = string;
+var elName = HTMLElement.name;
+
+var kontrolka = HTMLFormElement.nazwaElementu;
+var kolekcjaKontrolek = HTMLFormElement.elements.nazwaElementu;
+
+

Przykład

+
<form action="" name="formA">
+  <input type="text" value="foo">
+</form>
+
+<script type="text/javascript">
+
+  // pobierz referncję do pierwszego elementu formularza
+  var formElement = document.forms['formA'].elements[0];
+
+  // nadaj mu nazwę
+  formElement.name = 'inputA';
+
+  // i wyświetl jego wartość
+  alert(document.forms['formA'].elements['inputA'].value);
+
+</script>
+
+

uwagi

+

W przeglądarce Internet Explorer (IE) nie można modyfikować właściwości name obiektów DOM utworzonych za pomocą createElement.

+

Specyfikacja

+

Specyfikacja W3C DOM 2 HTML:

+ +

{{ languages( { "en": "en/DOM/element.name", "ja": "ja/DOM/element.name", "fr": "fr/DOM/element.name" } ) }}

diff --git a/files/pl/web/api/element/namespaceuri/index.html b/files/pl/web/api/element/namespaceuri/index.html new file mode 100644 index 0000000000..9f252ba570 --- /dev/null +++ b/files/pl/web/api/element/namespaceuri/index.html @@ -0,0 +1,39 @@ +--- +title: element.namespaceURI +slug: Web/API/Element/namespaceURI +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/namespaceURI +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca URI przestrzeni nazw tego węzła lub NULL, jeśli jej nie określono.

+

Składnia

+
przestrzeńNazw = element.namespaceURI
+
+

Parametry

+ +

Przykład

+

W poniższym wycinku kodu sprawdzane są localName i namespaceURI węzła. Jeśli namespaceURI jest zgodny ze zmienną zawierającą przestrzeń nazw dla XUL, węzeł jest uznawany za widget <browser /> w języku XUL.

+
if (node.localName == "browser"
+    && node.namespaceURI == kXULNSURI) {
+// xul browser
+this.viewee = node.webNavigation.document;
+//...
+}
+
+

Uwagi

+

Nie jest to wyznaczona wartość, będąca rezultatem przeszukiwania w oparciu o deklaracje przestrzeni nazw w zakresie, w jakim znajduje się element. Jest to jedynie URI takiej przestrzeni nazw, jaką nadano w momencie tworzenia elementu.

+

Dla węzłow typów innych niż ELEMENT_NODE i ATTRIBUTE_NODE oraz węzłów utworzonych metodami DOM Level 1, jak document.createElement, wartość tej właściwości to zawsze NULL.

+

Zgodnie ze specyfikacją Namespaces in XML atrybut nie dziedziczy przestrzeni nazw po elemencie, do którego jest przypisany. Jeśli atrybut nie ma bezpośrednio nadanej przestrzeni nazw, po prostu nie należy do żadnej przestrzeni.

+

Specyfikacja

+

namespaceURI

+

Przestrzenie nazw XML

+
+  
+

{{ languages( { "en": "en/DOM/element.namespaceURI", "fr": "fr/DOM/element.namespaceURI", "ja": "ja/DOM/element.namespaceURI" } ) }}

diff --git a/files/pl/web/api/element/nextsibling/index.html b/files/pl/web/api/element/nextsibling/index.html new file mode 100644 index 0000000000..17f1822a56 --- /dev/null +++ b/files/pl/web/api/element/nextsibling/index.html @@ -0,0 +1,63 @@ +--- +title: element.nextSibling +slug: Web/API/Element/nextSibling +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nextSibling +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca węzeł znajdujący się w drzewie bezpośrednio za węzłem bieżącym.

+

Składnia i wartości

+
następnyElement = element.nextSibling
+
+

następnyElement to węzeł bezpośrednio następny w liście rodzeństwa (np. liście dzieci węzła parentNode). Następnym węzłem jest na ogół węzeł elementu, komentarza lub węzeł tekstowy.

+

Przykład

+
<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+
+<script type="text/javascript">
+  var el = document.getElementById('div-01').nextSibling;
+  document.write('<p>Rodzeństwo div-01</p><ol>');
+  while (el) {
+    document.write('<li>' + el.nodeName + '</li>');
+    el = el.nextSibling;
+  }
+  document.write('</ol>');
+</script>
+
+/**************************************************
+  Po załadowaniu zostanie dopisane do strony:
+
+     Rodzeństwo div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+      5. P
+      6. OL
+**************************************************/
+
+

Węzły tekstowe - #text - są w powyższym przykładzie wstawiane do modelu dokumentu w miejsce białych znaków między elementami (np. po znaczniku zamykającym jeden element, ale przed znacznikiem otwierającym następny element). Białe znaki nie są wstawiane przy wywołaniu document.write.

+

Poniższy przykład pokazuje, jak białe znaki wpływają na sąsiednie węzły komórek tabeli:

+
<table>
+  <tr>
+    <td id="cell1">cell1</td>
+    <td id="cell2">cell2</td>
+  </tr>
+  <tr>
+    <td id="cell3">cell3</td><td id="cell4">cell4</td></tr>
+</table>
+
+

nextSibling cell1 to węzeł tekstowy. Między komórkami drugiego rzędu tabeli nie ma białych znaków, dlatego rodzeństwo cell3 to tylko cell4. Podczas przechodzenia przez model dokumentu za pomocą nextSibling należy liczyć się z możliwością wystąpienia węzłów tekstowych.

+

Uwagi

+

Zwraca null, kiedy nie ma już więcej węzłów.

+

Specyfikacja

+

nextSibling

+
+  
+

{{ languages( { "en": "en/DOM/element.nextSibling", "fr": "fr/DOM/element.nextSibling", "ja": "ja/DOM/element.nextSibling" } ) }}

diff --git a/files/pl/web/api/element/nodename/index.html b/files/pl/web/api/element/nodename/index.html new file mode 100644 index 0000000000..93a54424a6 --- /dev/null +++ b/files/pl/web/api/element/nodename/index.html @@ -0,0 +1,98 @@ +--- +title: element.nodeName +slug: Web/API/Element/nodeName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca nazwę węzła jako ciąg znaków.

+

Składnia

+
nazwa = element.nodeName
+
+

+ + nazwa + to ciąg znaków reprezentujący nazwę bieżącego elementu. nodeName to atrybut tylko do odczytu.

+

Uwagi

+

Poniżej przedstawione są wartości zwracane dla różnych typów węzłów:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InterfejsnodeName
Attrtak samo jak Attr.name
CDATASection"#cdata-section"
Comment"#comment"
Document"#document"
DocumentFragment"#document-fragment"
DocumentTypetak samo jak DocumentType.name
Elementtak samo jak Element.tagName
Entitynazwa encji
EntityReferencenazwa refernecji do encji
Notationnazwa notacji
ProcessingInstructiontak samo jak ProcessingInstruction.target
Text"#text"
+

Przykład

+

Dane są poniższe znaczniki

+
<div id="d1">hello world</div>
+<input type="text" id="t"/>
+
+

i taki skrypt:

+
var div1 = document.getElementById("d1");
+var poleTekstowe = document.getElementById("t");
+poleTekstowe.value = div1.nodeName;
+
+

W XHTML-u (lub innym formacie XML) wartość pola tekstowego to "div". W HTML wartość ta to "DIV".

+

Zauważ, że można było użyć właściwości tagName, ponieważ dla elementów nodeName ma taką samą wartość jak tagName.

+

Specyfikacja

+

W3C DOM Level 2 Core: nodeName

+

W3C DOM Level 3 Core: nodeName

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.nodeName", "es": "es/DOM/element.nodeName", "fr": "fr/DOM/element.nodeName", "it": "it/DOM/element.nodeName", "ja": "ja/DOM/element.nodeName" } ) }}

diff --git a/files/pl/web/api/element/nodetype/index.html b/files/pl/web/api/element/nodetype/index.html new file mode 100644 index 0000000000..8f3825ea86 --- /dev/null +++ b/files/pl/web/api/element/nodetype/index.html @@ -0,0 +1,44 @@ +--- +title: element.nodeType +slug: Web/API/Element/nodeType +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeType +--- +
+ {{ApiRef}}
+

Podsumowanie

+

Zwraca kod reprezentujący typ węzła.

+

Składnia

+
typ = document.nodeType
+
+

typ jest zmienną liczbową typu unsigned short o jednej z poniższych wartości:

+ +

Przykład

+

Ten przykład sprawdza czy pierwszy węzeł wewnątrz elementu document jest comment node, i jeśli nie jest, wyświetli wiadomość.

+
var node = document.documentElement.firstChild;
+
+if(node.nodeType != Node.COMMENT_NODE)
+  alert("You should comment your code well!");
+
+

Specyfikacja

+ diff --git a/files/pl/web/api/element/nodevalue/index.html b/files/pl/web/api/element/nodevalue/index.html new file mode 100644 index 0000000000..205871bba3 --- /dev/null +++ b/files/pl/web/api/element/nodevalue/index.html @@ -0,0 +1,85 @@ +--- +title: Node.nodeValue +slug: Web/API/Element/nodeValue +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeValue +--- +
+ {{APIRef}}
+
+  
+
+ Podsumowanie
+

Zwraca wartość bieżącego węzła.

+

Składnia

+
wartość = document.nodeValue
+
+

wartość to ciąg znaków reprezentujący wartość elementu, jeśli taka istnieje.

+

Uwagi

+

Dla dokumentu nodeValue zwraca null. Dla węzłów tekstowych, komentarzy i CDATA nodeValue zwraca zawartość węzła. Dla węzłów atrybutów, zwracana jest wartość atrybutu.

+

Poniższa tabela przedstawia wartości zwracane dla różnych interfejsów:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InterfejsnodeValue
Attrwartość atrybutu
CDATASectiontreść sekcji CDATA
Commenttreść komentarza
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructioncała treść, wyłączając cel
Texttreść węzła tekstowego
+

Jeśli nodeValue z definicji ma wartość null, ustawianie tej właściwości nie będzie mieć efektu.

+

Specyfikacja

+ diff --git a/files/pl/web/api/element/normalize/index.html b/files/pl/web/api/element/normalize/index.html new file mode 100644 index 0000000000..4dac3822cc --- /dev/null +++ b/files/pl/web/api/element/normalize/index.html @@ -0,0 +1,22 @@ +--- +title: element.normalize +slug: Web/API/Element/normalize +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/normalize +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda zapisuje określony węzeł i całe jego poddrzewo w "znormalizowanej" formie. W znormalizowanym poddrzewie żaden węzeł tekstowy nie jest pusty, nie ma również sąsiednich węzłów tekstowych.

+

Składnia

+
element.normalize()
+
+

Uwagi

+

Specyfikacja

+

DOM Level 2 Core: Node.normalize

+
+  
+

{{ languages( { "en": "en/DOM/element.normalize", "fr": "fr/DOM/element.normalize" } ) }}

diff --git a/files/pl/web/api/element/offsetheight/index.html b/files/pl/web/api/element/offsetheight/index.html new file mode 100644 index 0000000000..ce5fc2254e --- /dev/null +++ b/files/pl/web/api/element/offsetheight/index.html @@ -0,0 +1,61 @@ +--- +title: element.offsetHeight +slug: Web/API/Element/offsetHeight +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetHeight +--- +

{{ ApiRef() }}

+ +

offsetHeight

+ +

Własność DHTML (Dynamic HyperText Markup Language), która daje wysokość relatywnego elementu do układu strony.

+ +

Składnia i wartości

+ +
varintElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;
+
+ +

intElemOffsetHeightis a variable storing an integer corresponding to the offsetHeight pixel value of the element. offsetHeight is a read-only property.

+ +

Opis

+ +

Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

+ +

Przykład

+ +
+
+

padding-top

+ +

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+ +

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+ +

Cat image and text coming from www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+ +

grafika:offsetHeight.png

+ +

Specyfikacja

+ +

offsetHeight is part of the MSIE's DHTML object model. offsetHeight is not part of any W3C specification or technical recommendation.

+ +

Uwagi

+ +

offsetHeight is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred as an element physical/graphical dimensions or an element's box height.

+ +

Dokumentacja

+ + diff --git a/files/pl/web/api/element/offsetleft/index.html b/files/pl/web/api/element/offsetleft/index.html new file mode 100644 index 0000000000..b0252f3363 --- /dev/null +++ b/files/pl/web/api/element/offsetleft/index.html @@ -0,0 +1,73 @@ +--- +title: element.offsetLeft +slug: Web/API/Element/offsetLeft +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetLeft +--- +

{{ ApiRef("HTML DOM") }}

+ +

Podsumowanie

+ +

Zwraca ilość pikseli, jaką dzieligórny lewy róg bieżącego elementu od lewej strony wewnątrz węzła offsetParent.

+ +

Składnia

+ +
left =element.offsetLeft;
+
+ +

left jest liczbą całkowitą reprezentująca przesunięcie od lewej strony podane w pikselach.

+ +

Uwaga

+ +

offsetLeft returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for inline elements (such as span) in flowed text that wraps from one line to the next. The span may start in the middle of the line and wrap around to the beginning of the next line. The offsetLeft will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text. (And, I can't figure out how to find the leftmost edge of such a span, sigh.)

+ +

Przykład

+ +
var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft > 5) {
+  // duże lewe przesunięcie: zrób coś tutaj
+}
+
+ +

Przykład

+ +

Per the note above, this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.

+ +

Image:offsetLeft.jpg

+ +

Note: This is an image of the example, not a live rendering in the browser. This was done because script elements can't be included in the wiki page.

+ +
<div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;">
+  <span>Short span. </span>
+  <span id="long">Long span that wraps withing this div.</span>
+</div>
+
+<div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10">
+</div>
+
+<script>
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft;
+  box.style.top = long.offsetTop + document.body.scrollTop;
+  box.style.width = long.offsetWidth;
+  box.style.height = long.offsetHeight;
+</script>
+
+ +

Zobacz także

+ +

offsetParent, offsetTop, offsetWidth, offsetHeight

+ +

Specyfikacja

+ +

Niestandardowa własność.

diff --git a/files/pl/web/api/element/offsetparent/index.html b/files/pl/web/api/element/offsetparent/index.html new file mode 100644 index 0000000000..c33d32b38c --- /dev/null +++ b/files/pl/web/api/element/offsetparent/index.html @@ -0,0 +1,28 @@ +--- +title: element.offsetParent +slug: Web/API/Element/offsetParent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetParent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

offsetParent zwraca referencję do obiektu, który jest najbliższym (w hierarchii zawierania się elementów) pozycjonowanym elementem. Jeżeli element nie jest pozycjonowany, offsetParent jest wówczas korzeń dokumentu (html w trybie zgodności ze standardami; body w trybie przybliżonym).

+

Składnia

+
parentObj = element.offsetParent
+
+

Parametry

+ +

Specyfikacja

+

DOM Level 0. + + Nie jest częścią specyfikacji. +

+
+  
+

{{ languages( { "en": "en/DOM/element.offsetParent", "fr": "fr/DOM/element.offsetParent" } ) }}

diff --git a/files/pl/web/api/element/offsetwidth/index.html b/files/pl/web/api/element/offsetwidth/index.html new file mode 100644 index 0000000000..b78d7b4136 --- /dev/null +++ b/files/pl/web/api/element/offsetwidth/index.html @@ -0,0 +1,70 @@ +--- +title: element.offsetWidth +slug: Web/API/Element/offsetWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetWidth +--- +

{{ APIRef("HTML DOM") }}

+ +

offsetWidth

+ +

właściwość DHTML, która podaje szerokość elementu, odnosząca się do układu strony.

+ +

Składnia i wartości

+ +
var intElemOffsetWidth = document.getElementById(id_attribute_value).offsetWidth;
+
+ +

intElemOffsetWidth jest zmienną przechowującą liczbę całkowitą odpowiadającą wartości offsetWidth elementu i wyrażoną w pikselach. offsetWidth jest właściwością tylko do odczytu.

+ +

Opis

+ +

Zazwyczaj offsetWidth elementu obejmuje jego obramowanie, wewnętrzny margines (padding), pionowy pasek przewijania (jeśli jest obecny lub renderowany) i szerokość CSS elementu.

+ +

Przykład

+ +
+
+

padding-top

+ +

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+ +

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+ +

Cat image and text coming from www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+ +

Image:offsetWidth.png

+ +

Specyfikacja

+ +

offsetWidth jest częścią modelu obiektowego MSIE DHTML. offsetWidth nie jest częścią żadnej specyfikacji W3C ani rekomendacji technicznej.

+ +

Uwagi

+ +

offsetWidth jest własnością modelu obiektowego DHTML, który został wprowadzony przez MSIE. Czasem określany jest jako fizyczny/graficzny wymiar elementu lub jako szerokość pudełka elementu.

+ +

Dokumentacja

+ + + +
+

Zobacz również

+
+ + diff --git a/files/pl/web/api/element/onclick/index.html b/files/pl/web/api/element/onclick/index.html new file mode 100644 index 0000000000..b6215b4c00 --- /dev/null +++ b/files/pl/web/api/element/onclick/index.html @@ -0,0 +1,66 @@ +--- +title: element.onclick +slug: Web/API/Element/onclick +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onclick +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Właściwość onclick zwraca kod obsługi zdarzenia onClick w bieżącym elemencie.

+

Składnia

+
element.onclick = refDoFunkcji;
+
+

gdzie refDoFunkcji to nazwa funkcji zadeklarowanej gdzie indziej bądź wyrażenie funkcyjne. Zob. Funkcje. - tego rodzialu jeszcze nie ma, a pod nazwa Funkcje jest cos innego

+

Przykład

+
<html>
+
+<head>
+<title>przykład zdarzenia onclick</title>
+
+<script type="text/javascript">
+
+function initElement()
+ {
+ var p = document.getElementById("foo");
+
+ // Uwaga: ani showAlert();, ani showAlert(param); tu NIE zadziałają
+ // potrzebna jest referencja do funkcji, a nie wywołanie funkcji
+ p.onclick = showAlert;
+ };
+
+function showAlert()
+ {
+ alert("wykryto zdarzenie onclick!")
+ }
+</script>
+
+<style type="text/css">
+<!--
+#foo {
+border: solid blue 2px;
+}
+-->
+</style>
+</head>
+
+<body onload="initElement()";>
+<span id="foo">Mój Element</span>
+<p>Kliknij na powyższy element.</p>
+</body>
+</html>
+
+

Można również użyć funkcji bezimiennej jak poniżej:

+
p.onclick = function() { alert("moot!"); };
+
+

Not going to confuse poor readers with this. You could also use a the Function constructor: <pre> p.onclick = Function( "alert('moot!')" ); </pre>

+

Uwagi

+

Zdarzenie click jest wywoływane, kiedy użytkownik kliknie na element. Zdarzenie to występuje po mousedown i mouseup.

+

Tylko jedna funkcja obsługi zdarzenia może zostać przypisana za jednym razem za pomocą tej właściwości. Możesz zamiast niej użyć metody addEventListener - jest bardziej elastyczna i stanowi część specyfikacji DOM Events.

+

Specyfikacja

+

{{ DOM0() }}

+

{{ languages( { "en": "en/DOM/element.onclick", "fr": "fr/DOM/element.onclick" } ) }}

diff --git a/files/pl/web/api/element/onkeypress/index.html b/files/pl/web/api/element/onkeypress/index.html new file mode 100644 index 0000000000..eb57c1936c --- /dev/null +++ b/files/pl/web/api/element/onkeypress/index.html @@ -0,0 +1,21 @@ +--- +title: element.onkeypress +slug: Web/API/Element/onkeypress +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onkeypress +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Właściwość onkeypress zawiera kod obsługi zdarzenia onKeyPress dla bieżącego elementu.

+

Składnia

+
element.onkeypress = kod obsługi zdarzenia
+
+

Uwagi

+

Zdarzenie keydown wywoływane jest, gdy użytkownik naciska klawisz na klawiaturze.

+

Specyfikacja

+

{{ DOM0() }}

diff --git a/files/pl/web/api/element/onkeyup/index.html b/files/pl/web/api/element/onkeyup/index.html new file mode 100644 index 0000000000..ad411b0e1a --- /dev/null +++ b/files/pl/web/api/element/onkeyup/index.html @@ -0,0 +1,24 @@ +--- +title: element.onkeyup +slug: Web/API/Element/onkeyup +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onkeyup +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Właściwość onkeyup zawiera kod obsługi zdarzenia keyup dla bieżącego elementu.

+

Składnia

+
kod obsługi zdarzenia = element.onkeyup
+
+

Uwagi

+

Zdarzenie keyup wywoływane jest, gdy użytkownik zwalnia naciśnięty klawisz na klawiaturze.

+

Specyfikacja

+

{{ DOM0() }}

+
+  
+

{{ languages( { "en": "en/DOM/element.onkeyup", "fr": "fr/DOM/element.onkeyup" } ) }}

diff --git a/files/pl/web/api/element/onmousedown/index.html b/files/pl/web/api/element/onmousedown/index.html new file mode 100644 index 0000000000..e616906126 --- /dev/null +++ b/files/pl/web/api/element/onmousedown/index.html @@ -0,0 +1,23 @@ +--- +title: element.onmousedown +slug: Web/API/Element/onmousedown +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onmousedown +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność onmousedown zwraca kod obsługi zdarzenia onMouseDown w bieżącym elemencie.

+

Składnia

+
event handling code = element.onMouseDown
+
+

Uwagi

+

Zdarzenie mousedown jest wywołane kiedy użytkownik naciśnie lewy przycisk.

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/element.onmousedown", "fr": "fr/DOM/element.onmousedown" } ) }}

diff --git a/files/pl/web/api/element/onmousemove/index.html b/files/pl/web/api/element/onmousemove/index.html new file mode 100644 index 0000000000..f54256c9f7 --- /dev/null +++ b/files/pl/web/api/element/onmousemove/index.html @@ -0,0 +1,29 @@ +--- +title: element.onmousemove +slug: Web/API/Element/onmousemove +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onmousemove +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Właściwość onmousemove zwraca kod obsługi zdarzenia mousemove w bieżącym elemencie.

+ +

Składnia

+ +
event handling code = element.onMouseMove
+
+ +

Uwagi

+ +

Zdarzenie mousemove jest wywoływane, kiedy użytkownik przesunie kursor myszy.

+ +

Specyfikacja

+ +

DOM Level 0. Nie jest częścią specyfikacji.

diff --git a/files/pl/web/api/element/ownerdocument/index.html b/files/pl/web/api/element/ownerdocument/index.html new file mode 100644 index 0000000000..0ecbed4869 --- /dev/null +++ b/files/pl/web/api/element/ownerdocument/index.html @@ -0,0 +1,30 @@ +--- +title: element.ownerDocument +slug: Web/API/Element/ownerDocument +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/ownerDocument +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność ownerDocument zwraca obiekt najwyższego poziomu - dokument, w którym znajduje się bieżący węzeł.

+

Składnia

+
dokument = element.ownerDocument
+
+

dokument to obiekt document, będący rodzicem bieżącego elementu.

+

Przykład

+
// dla danego elementu "p" znajdź element HTML najwyższego poziomu
+d = p.ownerDocument;
+html = d.documentElement;
+
+

Uwagi

+

Obiekt document zwracany przez tę własność jest głównym obiektem, w którym tworzone są wszystkie węzły-dzieci właściwego dokumentu HTML. Własność ta użyta na węźle, który sam jest dokumentem, zwraca NULL

+

Specyfikacja

+

ownerDocument

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.ownerDocument", "fr": "fr/DOM/element.ownerDocument", "ja": "ja/DOM/element.ownerDocument" } ) }}

diff --git a/files/pl/web/api/element/parentnode/index.html b/files/pl/web/api/element/parentnode/index.html new file mode 100644 index 0000000000..ec9bbceda0 --- /dev/null +++ b/files/pl/web/api/element/parentnode/index.html @@ -0,0 +1,34 @@ +--- +title: element.parentNode +slug: Web/API/Element/parentNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/parentNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność parentNode zwraca rodzica bieżącego elementu.

+

Składnia i wartości

+
rodzic = element.parentNode
+
+

rodzic jest rodzicem bieżącego węzła. Rodzicem elementu jest węzeł typu Element, Document lub DocumentFragment.

+

Przykład

+
text_field = document.getElementById("t");
+if ( div1.parentNode == document ){
+    text_field.setAttribute("value", "top-level");
+    // pole tekstowe wyświetli tekst "top-level" }
+
+

Uwagi

+

parentNode zwraca null dla poniższych typów węzłów: Attr, Document, DocumentFragment, Entity i Notation.

+

null zwracane jest także, gdy węzeł został utworzony, ale nie przypisano go jeszcze do drzewa.

+

Zobacz także

+

{{ Domxref("element.firstChild") }}, {{ Domxref("element.lastChild") }}, {{ Domxref("element.childNodes") }}, {{ Domxref("element.nextSibling") }}, {{ Domxref("element.previousSibling") }}.

+

Specyfikacja

+

DOM Level 2 Core: Node.parentNode

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.parentNode", "fr": "fr/DOM/element.parentNode", "it": "it/DOM/element.parentNode", "ja": "ja/DOM/element.parentNode" } ) }}

diff --git a/files/pl/web/api/element/prefix/index.html b/files/pl/web/api/element/prefix/index.html new file mode 100644 index 0000000000..c5ecdac392 --- /dev/null +++ b/files/pl/web/api/element/prefix/index.html @@ -0,0 +1,28 @@ +--- +title: element.prefix +slug: Web/API/Element/prefix +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/prefix +--- +

{{ ApiRef() }}

+

Podsumowanie

+

prefix zwraca prefiks przestrzeni nazw węzła lub null, jeśli nie określono prefiksu.

+

Składnia

+
string = element.prefix
+element.prefix =string
+
+

Przykłady

+
<x:div onclick="alert(this.prefix)"/>
+
+

Wyświetlone zostanie "x".

+

Uwagi

+

Własność ta działa tylko wtedy, gdy używany jest parser przetwarzający przestrzenie nazw, tj. gdy dokument serwowany jest z typem MIME XML. Własność nie działa dla dokumentów HTML.

+

Specyfikacja

+

Node.prefix (wprowadzona w DOM2)

+
+  
+

{{ languages( { "en": "en/DOM/element.prefix", "fr": "fr/DOM/element.prefix", "it": "it/DOM/element.prefix", "ja": "ja/DOM/element.prefix" } ) }}

diff --git a/files/pl/web/api/element/previoussibling/index.html b/files/pl/web/api/element/previoussibling/index.html new file mode 100644 index 0000000000..0199cfb1a7 --- /dev/null +++ b/files/pl/web/api/element/previoussibling/index.html @@ -0,0 +1,28 @@ +--- +title: element.previousSibling +slug: Web/API/Element/previousSibling +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/previousSibling +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca węzeł bezpośrednio poprzedzający bieżący węzeł w drzewie.

+

Składnia i wartości

+
pNode = elementNode.previousSibling
+
+

pNode to węzeł przed bieżącym na liście rodzeństwa (czyli liście dzieci rodzica). Węzeł poprzedzający element jest zwykle węzłem elementu, komentarza lub tekstowym.

+

Przykład

+
var n1 = n2.previousSibling;
+
+

Uwagi

+

Zwraca null, jeśli nie ma poprzedzających węzłów.

+

Specyfikacja

+

DOM Level 1 Core: previousSibling

+

DOM Level 2 Core: previousSibling

+
+  
+

{{ languages( { "en": "en/DOM/element.previousSibling", "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling" } ) }}

diff --git a/files/pl/web/api/element/queryselector/index.html b/files/pl/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..62c6fe2561 --- /dev/null +++ b/files/pl/web/api/element/queryselector/index.html @@ -0,0 +1,180 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef("DOM")}}
+ +

Returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.

+ +

Syntax

+ +
element = baseElement.querySelector(selectors);
+
+ +

Parameters

+ +
+
selectors
+
A group of selectors to match the descendant elements of the {{domxref("Element")}} baseElement against; this must be valid CSS syntax, or a SyntaxError exception will occur. The first element found which matches this group of selectors is returned.
+
+ +

Return value

+ +

The first descendant element of baseElement which matches the specified group of selectors. The entire hierarchy of elements is considered when matching, including those outside the set of elements including baseElement and its descendants; in other words, selectors is first applied to the whole document, not the baseElement, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of baseElement. The first match of those remaining elements is returned by the querySelector() method.

+ +

If no matches are found, the returned value is null.

+ +

Exceptions

+ +
+
SyntaxError
+
The specified selectors are invalid.
+
+ +

Examples

+ +

Let's consider a few examples.

+ +

Find a specific element with specific values of an attribute

+ +

In this first example, the first {{HTMLElement("style")}} element which either has no type or has type "text/css" in the HTML document body is returned:

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

The entire hierarchy counts

+ +

The next example, below, demonstrates that the hierarchy of the entire document is considered when applying selectors, so that levels which are outside the specified baseElement are still considered when locating matches.

+ +

HTML

+ +
<div>
+  <h5>Original content</h5>
+  <p>
+    inside paragraph
+    <span>inside span</span>
+    inside paragraph
+  </p>
+</div>
+<div>
+  <h5>Output</h5>
+  <div id="output"></div>
+</div>
+ +

JavaScript

+ +
var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+         (baseElement.querySelector("div span").innerHTML);
+ +

Result

+ +

The result looks like this:

+ +

{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}

+ +

Notice how the "div span" selector still matches the {{HTMLElement("span")}} element, even though the baseElement excludes the {{domxref("div")}} element which is part of the specified selector.

+ +

The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement.

+ +

More examples

+ +

See {{domxref("Document.querySelector()")}} for additional examples of the proper format for the selectors.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}{{Spec2('DOM4')}} 
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}} 
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}} 
+ +

Browser compatibility

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}12{{CompatGeckoDesktop(1.9.1)}}9[1][2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] querySelector() is supported in IE8, but only for CSS 2.1 selectors.
+ [2] in IE8 and iE9 document must be in HTML5 mode (HTML5 doctype declaration present)

+ +

See also

+ + diff --git a/files/pl/web/api/element/removeattribute/index.html b/files/pl/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..9f3c2c4892 --- /dev/null +++ b/files/pl/web/api/element/removeattribute/index.html @@ -0,0 +1,36 @@ +--- +title: element.removeAttribute +slug: Web/API/Element/removeAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttribute +--- +

{{ ApiRef() }}

+

Podsumowanie

+

removeAttribute usuwa atrybut bieżącego elementu.

+

Składnia

+
element.removeAttribute(nazwaAtrybutu)
+
+ +

Przykład

+
// <div align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// teraz: <div width="200px">
+
+

Uwagi

+

Aby usunąć atrybut, powinieneś używać metody removeAttribute, a nie ustawiać wartość atrybutu na null za pomocą setAttribute.

+

Próba usunięcia nieistniejącego atrybutu elementu nie wyrzuca wyjątku.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: removeAttribute (wprowadzono w DOM Level 1 Core)

+
+  
+

{{ languages( { "en": "en/DOM/element.removeAttribute", "fr": "fr/DOM/element.removeAttribute", "ja": "ja/DOM/element.removeAttribute" } ) }}

diff --git a/files/pl/web/api/element/removeattributenode/index.html b/files/pl/web/api/element/removeattributenode/index.html new file mode 100644 index 0000000000..82872fa822 --- /dev/null +++ b/files/pl/web/api/element/removeattributenode/index.html @@ -0,0 +1,37 @@ +--- +title: element.removeAttributeNode +slug: Web/API/Element/removeAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttributeNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

removeAttributeNode usuwa określony atrybut z bieżącego elementu.

+

Składnia

+
usuniętyAtr =element.removeAttributeNode(węzełAtrybutu)
+
+ +

Przykład

+
// <div id="top" align="center" />
+var d = document.getElementById("top");
+var d_align = d.getAttributeNode("align");
+d.removeAttributeNode(d_align);
+// align ma wartość domyślną - center,
+// więc usunięty atrybut jest od razu zastępowany:
+// <div id="top" align="center" />
+
+

Uwagi

+

Jeśli usuwany atrybut ma wartość domyślną, od razu zostanie nią zastąpiony. Zastępujący atrybut ma - jeśli mają tu one zastosowanie - taki sam URI przestrzeni nazw, nazwę lokalną oraz prefiks jak oryginalny węzeł.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: removeAttributeNode (wprowadzono w DOM Level 1 Core)

+
+  
+

{{ languages( { "en": "en/DOM/element.removeAttributeNode", "fr": "fr/DOM/element.removeAttributeNode", "ja": "ja/DOM/element.removeAttributeNode" } ) }}

diff --git a/files/pl/web/api/element/removeattributens/index.html b/files/pl/web/api/element/removeattributens/index.html new file mode 100644 index 0000000000..88df27e6ca --- /dev/null +++ b/files/pl/web/api/element/removeattributens/index.html @@ -0,0 +1,35 @@ +--- +title: element.removeAttributeNS +slug: Web/API/Element/removeAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttributeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

removeAttributeNS usuwa określony atrybut elementu.

+

Składnia

+
element.removeAttributeNS(przestrzeńNazw,nazwaAtrybutu);
+
+ +

Przykład

+
// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
+//      special:specialAlign="utterleft" width="200px" />
+d = document.getElementById("div1");
+d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
+// teraz: <div id="div1" width="200px" />
+
+

Uwagi

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: removeAttributeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.removeAttributeNS", "fr": "fr/DOM/element.removeAttributeNS", "ja": "ja/DOM/element.removeAttributeNS" } ) }}

diff --git a/files/pl/web/api/element/removechild/index.html b/files/pl/web/api/element/removechild/index.html new file mode 100644 index 0000000000..c07c36ab3b --- /dev/null +++ b/files/pl/web/api/element/removechild/index.html @@ -0,0 +1,36 @@ +--- +title: element.removeChild +slug: Web/API/Element/removeChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/removeChild +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda removeChild usuwa węzeł potomny elementu.

+

Składnia

+
stareDziecko =element.removeChild(dziecko)
+
+

Parametry

+ +

Przykład

+
// <div id="nadrzedny" align="center">
+//   <div id="zagniezdzony"></div>
+// </div>
+d = document.getElementById("nadrzedny");
+d_zagniezdzony = document.getElementById("zagniezdzony");
+usuwany_wezel = d.removeChild(d_zagniezdzony);
+
+

 

+

Specyfikacja

+

removeChild

+
+  
+

{{ languages( { "en": "en/DOM/element.removeChild", "fr": "fr/DOM/element.removeChild", "ja": "ja/DOM/element.removeChild" } ) }}

diff --git a/files/pl/web/api/element/replacechild/index.html b/files/pl/web/api/element/replacechild/index.html new file mode 100644 index 0000000000..dcb5686d44 --- /dev/null +++ b/files/pl/web/api/element/replacechild/index.html @@ -0,0 +1,53 @@ +--- +title: element.replaceChild +slug: Web/API/Element/replaceChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/replaceChild +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zastępuje dziecko węzła innym węzłem.

+

Składnia

+
węzełZastąpiony =węzełRodzic.replaceChild(noweDziecko,stareDziecko);
+
+ +

Przykład

+
// <div>
+//  <span id="childSpan">foo bar</span>
+// </div>
+
+// utwórz węzeł pustego elementu
+// bez ID, atrybutów i zawartości
+var sp1 = document.createElement("span");
+
+// nadaj mu ID 'newSpan'
+sp1.setAttribute("id", "newSpan");
+
+// utwórz jakąś zawartość dla nowego elementu
+var sp1_content = document.createTextNode("Nowy element span.");
+
+// wstaw tę zawartość
+sp1.appendChild(sp1_content);
+
+// stwórz referencję do istniejącego węzła, który ma zostać zastąpiony
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// zastąp istniejący węzeł sp2 elementem span sp1
+parentDiv.replaceChild(sp1, sp2);
+
+
+

Specyfikacja

+

DOM Level 1 Core: replaceChild

+

DOM Level 2 Core: replaceChild

+
+  
+

{{ languages( { "en": "en/DOM/element.replaceChild", "fr": "fr/DOM/element.replaceChild", "ja": "ja/DOM/element.replaceChild" } ) }}

diff --git a/files/pl/web/api/element/scrollleft/index.html b/files/pl/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..e6c526c23b --- /dev/null +++ b/files/pl/web/api/element/scrollleft/index.html @@ -0,0 +1,58 @@ +--- +title: element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/scrollLeft +--- +

{{ ApiRef() }}

+

Podsumowanie

+

scrollLeft pobiera bądź ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu. Kierunek przewijania odbywa się w lewo.

+

Składnia i wartości

+
// Pobierz wartość przewinięcia w pikselach
+var sLeft = element.scrollLeft;
+
+

sLeft jest wartością liczbową reprezentującą ilość pikseli, o które element został przewinięty w lewo.

+
// Ustaw wartość przewinięcia w pikselach
+element.scrollLeft = 10;
+
+

scrollLeft może przyjąć dowolną wartość liczbową, jednakże:

+ +

Przykład

+
<script type="text/javascript">
+
+function doScrollLeft(el, p)
+{
+  el.scrollLeft = p;
+}
+
+</script>
+
+<div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+>
+<script type="text/javascript">
+for (var i=0; i<100; ++i){
+  document.write(i + '-FooBar-FooBar-FooBar<br>');
+}
+</script>
+</div>
+<br>
+<input type="button" value="Scroll left 50"
+       onclick="doScrollLeft(document.getElementById('aDiv'), 50);"
+>
+
+

Specyfikacja

+

To nie jest żadna część specyfikacji W3C.

+

Powiązania

+

MSDN scrollLeft

+
+  
+

{{ languages( { "en": "en/DOM/element.scrollLeft", "fr": "fr/DOM/element.scrollLeft" } ) }}

diff --git a/files/pl/web/api/element/scrolltop/index.html b/files/pl/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..a79c23d9ff --- /dev/null +++ b/files/pl/web/api/element/scrolltop/index.html @@ -0,0 +1,70 @@ +--- +title: element.scrollTop +slug: Web/API/Element/scrollTop +translation_of: Web/API/Element/scrollTop +--- +

{{APIRef}}

+ +

scrollTop pobiera bądź ustawia liczbę pikseli, o którą ma zostać przewinięta w górę zawartość elementu.

+ +

Składnia i wartości

+ +
// Pobierz wartość przewinięcia w pikselach
+var  intElemScrollTop = element.scrollTop;
+
+ +

intElemScrollTop jest liczbą całkowitą reprezentującą ilość pikseli, o które element został przewinięty w górę.

+ +
// Ustaw wartość przewinięcia w pikselach
+element.scrollTop = intValue;
+
+ +

scrollTop może przyjąć dowolną wartość liczbową, jednakże:

+ + + +

Opis

+ +

Element scrollTop jest miarą odległości od góry elementu do najwyższej krawędzi jego widzialnej zawartości.

+ +

Kiedy zawartość elementu nie powoduje powstania pionowego paska przewijania, wartość scrollTop jest domyślnie ustawiona na 0.

+ +

Przykład

+ +
+
+

padding-top

+ +

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+ +

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+ +

Cat image and text coming from www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+ +

Image:scrollTop.png

+ +

Nie mamy interaktywnej demonstracji jak ma to miejsce w dokumentacji Gecko DOM.

+ +

Specyfikacja

+ +

scrollTop jest częścią obiektowego modelu MSIE. scrollTop nie jest częścią żadnej specyfikacji W3C lub rekomendacji technicznej.

+ +

Uwagi

+ +

scrollTop jest własnością obiektowego modelu DHTML (Dynamic HyperText Markup Language), który po raz pierwszy został wprowadzony przez MSIE. Własność ta jest zdefiniowana jako odległość do górnej krawędzi widoku elementu przewijanego.

+ +

Dokumentacja

+ + diff --git a/files/pl/web/api/element/scrollwidth/index.html b/files/pl/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..42cb1a96f1 --- /dev/null +++ b/files/pl/web/api/element/scrollwidth/index.html @@ -0,0 +1,32 @@ +--- +title: element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/scrollWidth +--- +

{{ ApiRef() }}

+

Podsumowanie

+

scrollWidth jest własnością tylko do odczytu, która zwraca szerokość zawartości elementu w pikselach lub szerokość samego elementu - w zależności od tego, która z tych wartości jest większa.

+

Składnia i wartości

+
var xScrollWidth = element.scrollWidth;
+
+

xScrollWidth jest szerokością zawartości elementu element w pikselach.

+

Przykład

+
<div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+>-FooBar-FooBar-FooBar</div>
+<br>
+<input type="button" value="Show scrollWidth"
+       onclick="alert(document.getElementById('aDiv').scrollWidth);">
+
+

Specyfikacja

+

Nie ma specyfikacji W3C dla scrollWidth.

+

Dokumentacja

+

MSDN scrollWidth reference

+
+  
+

{{ languages( { "en": "en/DOM/element.scrollWidth", "fr": "fr/DOM/element.scrollWidth" } ) }}

diff --git a/files/pl/web/api/element/setattribute/index.html b/files/pl/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..79f649526e --- /dev/null +++ b/files/pl/web/api/element/setattribute/index.html @@ -0,0 +1,34 @@ +--- +title: element.setAttribute +slug: Web/API/Element/setAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttribute +--- +

{{ ApiRef() }}

+

Podsumowanie

+

setAttribute dodaje nowy lub zmienia wartość atrybutu w bieżącym elemencie.

+

Składnia

+
element.setAttribute(nazwa,wartość)
+
+

Parametry

+ +

Przykład

+
d = document.getElementById("d1");
+d.setAttribute("align", "center");
+
+

Uwagi

+

Jeśli istnieje już atrybut o danej nazwie, jego wartość zostaje zmieniona na wartość podaną w wywołaniu setAttribute. Jeśli nie istnieje taki atrybut, zostanie on utworzony.

+

Pomimo, że getAttribute zwraca null jeśli atrybut nie istnieje, do usuwania atrybutów powinieneś używać metody removeAttribute, a nie element.setAttribute(attr, null).

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: setAttribute (wprowadzono w DOM Level 1 Core)

+
+  
+

{{ languages( { "en": "en/DOM/element.setAttribute", "fr": "fr/DOM/element.setAttribute", "ja": "ja/DOM/element.setAttribute" } ) }}

diff --git a/files/pl/web/api/element/setattributenode/index.html b/files/pl/web/api/element/setattributenode/index.html new file mode 100644 index 0000000000..dbf836f80c --- /dev/null +++ b/files/pl/web/api/element/setattributenode/index.html @@ -0,0 +1,40 @@ +--- +title: element.setAttributeNode +slug: Web/API/Element/setAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

setAttributeNode dodaje do elementu nowy węzeł typu Attr.

+

Składnia

+
zastąpionyAtr = element.setAttributeNode(atrybut)
+
+

Parametry

+ +

Przykład

+
// <div id="raz" align="left">raz</div>
+// <div id="dwa">dwa</div>
+d1 = document.getElementById("raz");
+d2 = document.getElementById("dwa");
+a = d1.getAttributeNode("align");
+d2.setAttributeNode(a);
+alert(d2.attributes[1].value)
+// wypisze: "left"
+
+

Uwagi

+

Jeżeli istnieje już atrybut o danej nazwie, zostanie on zastąpiony nowym atrybutem i zwrócony jako wynik funkcji.

+

Tej metody używa się rzadko - do zmiany atrybutów elementu zwykle wykorzystywana jest metoda setAttribute.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: setAttributeNode (wprowadzono w DOM Level 1 Core

+
+  
+

{{ languages( { "en": "en/DOM/element.setAttributeNode", "fr": "fr/DOM/element.setAttributeNode", "ja": "ja/DOM/element.setAttributeNode" } ) }}

diff --git a/files/pl/web/api/element/setattributenodens/index.html b/files/pl/web/api/element/setattributenodens/index.html new file mode 100644 index 0000000000..5633d0367e --- /dev/null +++ b/files/pl/web/api/element/setattributenodens/index.html @@ -0,0 +1,41 @@ +--- +title: element.setAttributeNodeNS +slug: Web/API/Element/setAttributeNodeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNodeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

setAttributeNodeNS dodaje nowy węzeł atrybutu z określoną nazwą i przestrzenią nazw.

+

Składnia

+
replacedAttr = element.setAttributeNodeNS(namespace,attributeNode)
+
+ +

Przykład

+
// <div id="one" special-align="utterleft">one</div>
+// <div id="two">two</div>
+
+var myns = "http://www.mozilla.org/ns/specialspace";
+var d1 = document.getElementById("one");
+var d2 = document.getElementById("two");
+var a = d1.getAttributeNodeNS(myns, "special-align");
+var d2.setAttributeNodeNS(myns, a);
+
+alert(d2.attributes[1].value) // zwraca: `utterleft'
+
+

Uwagi

+

Jeśli określony atrybut istnieje dla elementu, to jest on zastępowany nowym i zwracany.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: setAttributeNodeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.setAttributeNodeNS", "fr": "fr/DOM/element.setAttributeNodeNS", "ja": "ja/DOM/element.setAttributeNodeNS" } ) }}

diff --git a/files/pl/web/api/element/setattributens/index.html b/files/pl/web/api/element/setattributens/index.html new file mode 100644 index 0000000000..c721111e36 --- /dev/null +++ b/files/pl/web/api/element/setattributens/index.html @@ -0,0 +1,33 @@ +--- +title: element.setAttributeNS +slug: Web/API/Element/setAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

setAttributeNS dodaje nowy lub zmienia wartość istniejącego atrybutu o podanej nazwie i przestrzeni nazw.

+

Składnia

+
element.setAttributeNS(przestrzeńNazw,nazwa,wartość)
+
+ +

Przykład

+
var d = document.getElementById("d1");
+d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
+
+

Uwagi

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: setAttributeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.setAttributeNS", "fr": "fr/DOM/element.setAttributeNS", "ja": "ja/DOM/element.setAttributeNS" } ) }}

diff --git a/files/pl/web/api/element/style/index.html b/files/pl/web/api/element/style/index.html new file mode 100644 index 0000000000..4736774e83 --- /dev/null +++ b/files/pl/web/api/element/style/index.html @@ -0,0 +1,52 @@ +--- +title: element.style +slug: Web/API/Element/style +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/ElementCSSInlineStyle/style +--- +

{{ ApiRef("DOM") }}

+ +

Podsumowanie

+ +

Zwraca obiekt reprezentujący atrybut style elementu.

+ +

Przykład

+ +
var div = document.getElementById("div1");
+div.style.marginTop = ".25in";
+
+ +

Uwagi

+ +

Ponieważ własność style reprezentuje atrybut style, który ma najwyższy priorytet w kaskadzie CSS, własność ta jest użyteczna by ustawić styl określonego elementu. Nie przyda się jednak do sprawdzania stylu elementu, ponieważ zależy ona tylko od atrybutu style, a nie od reguł stylów określonych gdziekolwiek indziej. Możesz użyć window.getComputedStyle, by sprawdzić styl elementu.

+ +

Zobacz listę własności CSS dostępnych w DOM, gdzie znajdziesz też dodatkowe uwagi o zastosowaniu własności style.

+ +

Ogólnie rzecz biorąc, lepiej jest użyć własność style zamiast elt.setAttribute('style', '...'), ponieważ użycie style nie nadpisze innych własności CSS, które mogły być wcześniej określone atrybutem style.

+ +

Styli nie można ustawiać poprzez przekazywania łańcucha znaków do atrybutu style (tylko odczyt), np. elt.style = "color: blue;". Jest to niemożliwe ponieważ atrybut stylu zwraca obiekt CSSStyleDeclaration . Zamiast tego, możesz ustawić poszczególne własności atrybutu style w ten sposób:

+ +
elt.style.color = "blue";  // Directly
+
+var st = elt.style;
+st.color = "blue";  // Indirectly
+
+ +

Poniższy kod wyświetli nazwy wszystkich własności stylu, wartości ustawione dla elementu elt oraz dziedziczone 'przeliczone'' wartości:

+ +
var elt = document.getElementById("elementIdHere");
+var out = "";
+var st = elt.style;
+var cs = window.getComputedStyle(z, null);
+for (x in st)
+  out += "  " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";
+
+ +

Specyfikacja

+ +

DOM Level 2 Style: ElementCSSInlineStyle.style

diff --git a/files/pl/web/api/element/tabindex/index.html b/files/pl/web/api/element/tabindex/index.html new file mode 100644 index 0000000000..d8fdd6ce7d --- /dev/null +++ b/files/pl/web/api/element/tabindex/index.html @@ -0,0 +1,31 @@ +--- +title: element.tabIndex +slug: Web/API/Element/tabIndex +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/tabIndex +--- +
+ {{APIRef}}
+
+  
+
+ Podsumowanie
+

Pobiera/ustawia kolejność tabulacji dla bieżącego elementu.

+

Składnia

+
element.tabIndex = indeks
+
+ +

Przykład

+
var b1 = document.getElementById("button1");
+
+b1.tabIndex = 1;
+

Specyfikacja

+ diff --git a/files/pl/web/api/element/tagname/index.html b/files/pl/web/api/element/tagname/index.html new file mode 100644 index 0000000000..61972df98c --- /dev/null +++ b/files/pl/web/api/element/tagname/index.html @@ -0,0 +1,37 @@ +--- +title: element.tagName +slug: Web/API/Element/tagName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/tagName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

tagName zwraca nazwę elementu.

+

Składnia

+
nazwaElementu = element.tagName
+
+ +

Przykład

+

Dane są takie znaczniki:

+
<span id="born">Kiedy przyszedłem na świat...</span>
+
+

i taki skrypt:

+
var span = document.getElementById("born");
+alert(span.tagName);
+
+

W XHTML-u (lub innym formacie XML) wyświetlone zostanie "span", a w HTML - "SPAN".

+

Uwagi

+

W XML-u tagName zachowuje wielkość liter. W HTML-u tagName zwraca nazwę elementu w formie kanonicznej - wielkimi literami. Wartość tagName jest taka sama jak wartość nodeName.

+

Specyfikacja

+

tagName

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.tagName", "es": "es/DOM/element.tagName", "fr": "fr/DOM/element.tagName", "ja": "ja/DOM/element.tagName" } ) }}

diff --git a/files/pl/web/api/element/textcontent/index.html b/files/pl/web/api/element/textcontent/index.html new file mode 100644 index 0000000000..f667ea2889 --- /dev/null +++ b/files/pl/web/api/element/textcontent/index.html @@ -0,0 +1,41 @@ +--- +title: element.textContent +slug: Web/API/Element/textContent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/textContent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Pobiera lub ustawia zawartość tekstową węzła i jego potomków.

+

Składnia

+
tekst = element.textContent
+element.textContent = "przykładowy tekst"
+
+

Przykład

+
// Dany jest taki fragment w HTML:
+//   <div id="divA">To jest <span>jakiś</span> tekst</div>
+
+// Pobierz zawartość tekstową:
+var tekst = document.getElementById("divA").textContent;
+// |tekst| zawiera: "To jest jakiś tekst".
+
+// Ustaw zawartość:
+document.getElementById("divA").textContent = "To jest jakiś tekst";
+// teraz HTML elementu divA to <div id="divA">To jest jakiś tekst</div>
+
+

Uwagi

+ +

Specyfikacja

+

textContent

+
+  
+

{{ languages( { "en": "en/DOM/element.textContent", "fr": "fr/DOM/element.textContent", "it": "it/DOM/element.textContent" } ) }}

diff --git a/files/pl/web/api/event/altkey/index.html b/files/pl/web/api/event/altkey/index.html new file mode 100644 index 0000000000..2c8c2f6d9f --- /dev/null +++ b/files/pl/web/api/event/altkey/index.html @@ -0,0 +1,31 @@ +--- +title: event.altKey +slug: Web/API/Event/altKey +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/altKey +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, czy klawisz <alt> był wciśnięty przy wywołaniu zdarzenia.

+

Składnia

+
bool = event.altKey
+
+

Przykład

+
 function goInput(e) {
+ // sprawdza przycisk <alt>
+   if e.altKey {
+      // przekazuje zdarzenie dalej
+      superSizeOutput(e);
+   }
+   else {
+     doOutput(e);
+   }
+ }
+
+
+  
+

{{ languages( { "en": "en/DOM/event.altKey", "ja": "ja/DOM/event.altKey" } ) }}

diff --git a/files/pl/web/api/event/bubbles/index.html b/files/pl/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..2372296028 --- /dev/null +++ b/files/pl/web/api/event/bubbles/index.html @@ -0,0 +1,31 @@ +--- +title: event.bubbles +slug: Web/API/Event/bubbles +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/bubbles +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, czy zdarzenie bąbelkuje przez model dokumentu czy nie.

+

Składnia

+
bool = event.bubbles
+
+

Przykład

+
 function goInput(e) {
+  // sprawdza czy zdarzenie bąbelkuje
+  if not e.bubbles {
+     // i jeśli nie - przekazuje je dalej
+     passItOn(e);
+  }
+  // jeśli bąbelkuje:
+  doOutput(e)
+}
+
+

 

+
+  
+

{{ languages( { "en": "en/DOM/event.bubbles", "es": "es/DOM/event.bubbles", "ja": "ja/DOM/event.bubbles" } ) }}

diff --git a/files/pl/web/api/event/button/index.html b/files/pl/web/api/event/button/index.html new file mode 100644 index 0000000000..5f796093fb --- /dev/null +++ b/files/pl/web/api/event/button/index.html @@ -0,0 +1,66 @@ +--- +title: event.button +slug: Web/API/Event/button +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/button +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, który przycisk myszy wywołał zdarzenie.

+

Składnia

+
var kodPrzycisku = event.button;
+
+

Zwraca całkowitą wartość liczbową oznaczającą przycisk, który zmienił stan:

+ +

Faktyczna kolejność przycisków może być różna, zależnie od konfiguracji urządzenia wskazującego.

+

Przykład

+
<script type="text/javascript">
+
+function whichButton(e)
+{
+  // obsłuż różne modele obsługi zdarzeń
+  var e = e || window.event;
+  var btnCode;
+
+  if ('object' == typeof e){
+    btnCode = e.button;
+
+    switch (btnCode){
+      case 0  : alert('Kliknięto lewym przyciskiem');
+                break;
+      case 1  : alert('Kliknięto środkowym przyciskiem');
+                break;
+      case 2  : alert('Kliknięto prawym przyciskiem');
+                break;
+      default : alert('Nieoczekiwany kod: ' + btnCode);
+    }
+  }
+}
+
+</script>
+
+<p onclick="whichButton(event);">Kliknij tu myszą...</p>
+
+
+

Uwagi

+

Ponieważ kliknięcia myszy są często przechwytywane przez interfejs uzytkownika, w niektórych okolicznościach może być trudno wykryć przyciski inne niż ten dla standardowego kliknięcia (tj. zazwyczaj lewy).

+

Użytkownicy mogą zmienić konfigurację przycisków swoich urządzeń wskazujących, tak że nawet jeśli własność + + button + wynosi zero, niekoniecznie musiał być naciśnięty przycisk znajdujący się fizycznie po lewej stronie. Jednak zachowanie w takiej sytuacji powinno być takie, jak gdyby kliknięto lewy przycisk w standardowym układzie.

+

Specyfikacja

+

DOM Level 2 Events: button

+
+  
+

{{ languages( { "en": "en/DOM/event.button", "ja": "ja/DOM/event.button" } ) }}

diff --git a/files/pl/web/api/event/cancelable/index.html b/files/pl/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..4a6ed741bb --- /dev/null +++ b/files/pl/web/api/event/cancelable/index.html @@ -0,0 +1,34 @@ +--- +title: event.cancelable +slug: Web/API/Event/cancelable +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/cancelable +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Wskazuje, czy zdarzenie można anulować.

+ +

Składnia

+ +
bool = event.cancelable
+
+ +

Uwagi

+ +

To, czy zdarzenie może być anulowane czy nie jest określane w momencie, kiedy zdarzenie jest tworzone. Aby anulować zdarzenie, użyj metody preventDefault na tym zdarzeniu, dzięki czemu nie zostanie wykonana akcja - domyślny rezultat tego zdarzenia.

+ +

Specyfikacja

+ +

cancelable

+ + + +
+ +

{{ languages( { "en": "en/DOM/event.cancelable", "es": "es/DOM/event.cancelable", "ja": "ja/DOM/event.cancelable" } ) }}

diff --git a/files/pl/web/api/event/cancelbubble/index.html b/files/pl/web/api/event/cancelbubble/index.html new file mode 100644 index 0000000000..64b0a32f88 --- /dev/null +++ b/files/pl/web/api/event/cancelbubble/index.html @@ -0,0 +1,15 @@ +--- +title: event.cancelBubble +slug: Web/API/Event/cancelBubble +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/cancelBubble +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, czy zostało anulowane bąbelkowanie tego zdarzenia.

+

Składnia

+
bool = event.cancelBubble
+
+

{{ languages( { "en": "en/DOM/event.cancelBubble" } ) }}

diff --git a/files/pl/web/api/event/charcode/index.html b/files/pl/web/api/event/charcode/index.html new file mode 100644 index 0000000000..6600e6c1dd --- /dev/null +++ b/files/pl/web/api/event/charcode/index.html @@ -0,0 +1,27 @@ +--- +title: event.charCode +slug: Web/API/Event/charCode +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/KeyboardEvent/charCode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca kod Unicode dla klawisza znaku, który został wciśnięty, w zdarzeniu keypress.

+

Składnia

+
znak = event.charCode
+
+

Parametry

+ +

Uwagi

+

W zdarzeniu keypress kod Unicode wciśniętego klawisza jest przechowywany albo we własności keyCode albo w charCode, nigdy w obydwu. Jeśli wciśnięcie klawisza skutkowałoby wprowadzeniem znaku (np. 'a'), charCode ustawiany jest dla kodu tego znaku, z uwzględnieniem wielkości (małe lub duże litery) znaku (np. bierze pod uwagę, czy wciśnięto klawisz shift). W przeciwnym przypadku, naciśnięty klawisz przechowywany jest w keyCode.

+

charCode nigdy nie jest ustawiany w zdarzeniach keydown i keyup. W tych przypadkach ustawiany jest keyCode.

+

Aby pobrać kod klawisza niezależnie, czy jest przechowywany w keyCode czy w charCode, sprawdź właściwość which.

+

Znaki wprowadzane poprzez IME nie są rejestrowane poprzez keyCode ani charCode. (IME - program pozwalający wprowadzać skomplikowane znaki, np. japońskie bądź chińskie - przyp. tłum.)

+

Listę wartości charCode związanych z poszczególnymi klawiszami możesz znaleźć uruchamiając Przykład 7: Wyświetlanie stałych obiektu event.

+

Specyfikacja

+

Nie należy do specyfikacji. Zobacz nsIDOMKeyEvent.

+

{{ languages( { "en": "en/DOM/event.charCode" } ) }}

diff --git a/files/pl/web/api/event/clientx/index.html b/files/pl/web/api/event/clientx/index.html new file mode 100644 index 0000000000..dd0dcb3e09 --- /dev/null +++ b/files/pl/web/api/event/clientx/index.html @@ -0,0 +1,25 @@ +--- +title: event.clientX +slug: Web/API/Event/clientX +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/clientX +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca poziomą współrzędną zdarzenia w obszarze klienta.

+

Przykład

+
 function checkClientClickMap(e) {
+   if e.clientX < 50 {
+     doRedButton(); }
+   if 50 <= e.clientX < 100 {
+     doYellowButton(); }
+   if e.clientX >= 100 {
+     doRedButton(); } }
+
+

Uwagi

+

Zobacz też clientY.

+

Specyfikacja

+

clientX

+

{{ languages( { "en": "en/DOM/event.clientX" } ) }}

diff --git a/files/pl/web/api/event/clienty/index.html b/files/pl/web/api/event/clienty/index.html new file mode 100644 index 0000000000..1ad6315f89 --- /dev/null +++ b/files/pl/web/api/event/clienty/index.html @@ -0,0 +1,16 @@ +--- +title: event.clientY +slug: Web/API/Event/clientY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/clientY +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca pionową współrzędną zdarzenia w obszarze klienta.

+

Uwagi

+

Zobacz też clientX, wraz z przykładem wykorzystania.

+

Specyfikacja

+

clientY

+

{{ languages( { "en": "en/DOM/event.clientY" } ) }}

diff --git a/files/pl/web/api/event/ctrlkey/index.html b/files/pl/web/api/event/ctrlkey/index.html new file mode 100644 index 0000000000..53bda61a1e --- /dev/null +++ b/files/pl/web/api/event/ctrlkey/index.html @@ -0,0 +1,26 @@ +--- +title: event.ctrlKey +slug: Web/API/Event/ctrlKey +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/ctrlKey +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, czy klawisz <ctrl> był wciśnięty podczas wywołania zdarzenia.

+

Składnia

+
bool = event.ctrlKey
+
+

Przykład

+
 function goInput(e) {
+ // sprawdza ctrlKey
+   if e.ctrlKey
+        // i przekazuje zdarzenie dalej
+     superSizeOutput(e);
+   else
+     doOutput(e)
+
+

Specyfikacja

+

ctrlKey

+

{{ languages( { "en": "en/DOM/event.ctrlKey" } ) }}

diff --git a/files/pl/web/api/event/currenttarget/index.html b/files/pl/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..f6c5c3c752 --- /dev/null +++ b/files/pl/web/api/event/currenttarget/index.html @@ -0,0 +1,25 @@ +--- +title: event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/currentTarget +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Pozwala zidentyfikować obecnie zarejestrowany element docelowy zdarzenia.

+

Składnia

+
referencjaDoWęzła = event.currentTarget
+
+

Parametry

+ +

Przykład

+
 if e.currentTarget != t_el
+    resetEventEngine();
+
+

Specyfikacja

+

currentTarget

+

{{ languages( { "en": "en/DOM/event.currentTarget" } ) }}

diff --git a/files/pl/web/api/event/eventphase/index.html b/files/pl/web/api/event/eventphase/index.html new file mode 100644 index 0000000000..c7f0deb5fb --- /dev/null +++ b/files/pl/web/api/event/eventphase/index.html @@ -0,0 +1,40 @@ +--- +title: event.eventPhase +slug: Web/API/Event/eventPhase +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/eventPhase +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje która faza przepływu zdarzenia jest aktualnie przetwarzana.

+

Składnia

+
faza = event.eventPhase
+
+

Parametry

+ + + + + + + + + + + + + + + + + + + +
1CAPTURING_PHASEfaza przechwytywania
2AT_TARGETzdarzenie przy elemencie docelowym
3BUBBLING_PHASEfaza bąbelkowania
+

Specyfikacja

+

eventPhase

+

{{ languages( { "en": "en/DOM/event.eventPhase" } ) }}

diff --git a/files/pl/web/api/event/index.html b/files/pl/web/api/event/index.html new file mode 100644 index 0000000000..8b5dd22105 --- /dev/null +++ b/files/pl/web/api/event/index.html @@ -0,0 +1,179 @@ +--- +title: Event +slug: Web/API/Event +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event +--- +

{{ ApiRef() }}

+ +

Wprowadzenie

+ +

W tym rozdziale opiszemy model zdarzeń DOM Level 2 jaki implementuje Gecko. Opisany zostanie obiekt event, a także interfejsy do rejestrowania zdarzeń dla węzłów DOM, uchwyty i obserwatorzy zdarzeń; przedstawione zostanie też kilka dłuższych przykładów pokazujących relacje między różnymi interfejsami.

+ +

Dostępny jest też doskonały diagram, który jasno przedstawia trzy fazy przepływu zdarzeń w DOM.

+ +

Interfejs DOM event

+ +

Interfejs DOM event reprezentowany jest przez obiekty event przekazywane do uchwytów zdarzeń różnych elementów DOM. Poniższy, prosty przykład pokazuje, jak przekazać i manipulować obiektem event w funkcji obsługi zdarzenia.

+ +
function foo(e) {
+  //funkcje obsługi zdarzeń - takie jak ta
+  //otrzymują referencję do zdarzenia, jakie
+  //obsługują (w tym przypadku "e")
+  alert(e);
+}
+table_el.onclick = foo;
+
+ +

Powyższy przykład jest skrajnie prosty, przedstawia jednak ważną cechę obsługi zdarzeń w Gecko DOM - obiekty event wykorzystywane są zwykle w funkcjach obsługi zdarzeń. Kiedy masz już referencję do obiektu event, możesz korzystać z wszystkich metod i własności opisanych w tym rozdziale.

+ +

Zob. także Przykład 5: Propagowanie zdarzeń w rozdziale Przykłady użycia DOM, by zobaczyć bardziej szczegółowo, jak zdarzenia przechodzą przez DOM.

+ +

Uchwyty zdarzeń

+ +

Oprócz opisanego tutaj obiektu event, Gecko DOM dostarcza również metod do rejestrowania obserwatorów zdarzeń (ang.event listener ) na węzłach DOM, usuwania zdarzeń z obserwatorów oraz wywoływania zdarzeń z poziomu DOM. Te trzy metody opisano w rozdziale Elementy w DOM. Razem z uchwytami zdarzeń elementów HTML i XML stanowią one główny punkt wyjścia dla zdarzeń w DOM.

+ +

Możesz także przekazać do funkcji obsługi zdarzenia referencję do obiektu event poprzez predefiniowany parametr o nazwie event. Jest to bardzo podobne do sposobu, w jaki działa this, ale tyczy się obiektów zdarzeń, a nie elementów.

+ +
<html>
+<head>
+<title>Przykład użycia parametru z obiektem event</title>
+
+<script type="text/javascript">
+
+function showCoords(evt){
+  alert(
+    "clientX value: " + evt.clientX + "\n"
+    + "clientY value: " + evt.clientY + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="showCoords(event)">
+<p>Kliknij gdziekolwiek na tej stronie, aby wyświetlić współrzędne położenia myszy.</p>
+</body>
+</html>
+
+ +

Używanie predefiniowanego parametru event pozostawia dalej możliwość przekazywania innych parametrów do funkcji obsługującej zdarzenie, jeśli jest taka potrzeba.

+ +
<html>
+<head>
+<title>Przykład użycia parametru z obiektem event wraz z dodatkowymi parametrami</title>
+
+<script type="text/javascript">
+
+var par2 = 'hello';
+var par3 = 'world!';
+
+function showCoords(evt, p2, p3){
+  alert(
+    "clientX value: " + evt.clientX + "\n"
+    + "clientY value: " + evt.clientY + "\n"
+    + "p2: " + p2 + "\n"
+    + "p3: " + p3 + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="showCoords(event, par2, par3)">
+<p>Kliknij gdziekolwiek na tej stronie, aby wyświetlić współrzędne położenia myszy.</p>
+</body>
+</html>
+
+ +

Własności

+ +
+
event.altKey
+
Zwraca wartość logiczną wskazującą, czy klawisz <alt> był wciśnięty podczas zdarzenia.
+
event.bubbles
+
Zwraca wartość logiczną wskazującą, czy zdarzenie bąbelkuje przez model dokumentu czy nie.
+
event.button
+
Zwraca przycisk myszy.
+
event.cancelBubble
+
{{ Deprecated_inline() }} Zwraca wartość logiczną wskazującą, czy bąbelkowanie zdarzenia zostało anulowane czy nie.
+
event.cancelable
+
Zwraca wartość logiczną wskazującą, czy zdarzenie można anulować.
+
event.charCode
+
Zwraca kod Unicode klawisza znaku, który został wciśnięty podczas zdarzenia keypress.
+
event.clientX
+
Zwraca poziomą pozycję zdarzenia w obszarze klienta.
+
event.clientY
+
Zwraca pionową pozycję zdarzenia w obszarze klienta.
+
event.ctrlKey
+
Zwraca wartość logiczną wskazującą, czy klawisz <ctrl> był wciśnięty podczas zdarzenia.
+
event.currentTarget
+
Zwraca referencję do obecnie zarejestrowanego celu zdarzenia.
+
event.detail
+
Zwraca szczegółową informację o zdarzeniu zależnie od jego typu.
+
event.eventPhase
+
Wskazuje która faza przepływu zdarzenia jest aktualnie przetwarzana.
+
event.isChar
+
Zwraca wartość logiczną oznaczającą, czy w zdarzeniu pojawił się klawisz znaku czy nie.
+
event.keyCode
+
Zwraca kod Unicode dla klawisza nie będącego znakiem w zdarzeniu keypress lub dowolnego klawisza w każdym innym zdarzeniu związanym z klawiaturą.
+
event.layerX
+
Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.
+
event.layerY
+
Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.
+
event.metaKey
+
Zwraca wartość logiczną wskazującą, czy klawisz meta był wciśnięty podczas zdarzenia.
+
event.pageX
+
Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.
+
event.pageY
+
Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.
+
event.relatedTarget
+
Wskazuje na drugi cel zdarzenia.
+
event.screenX
+
Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem ekranu.
+
event.screenY
+
Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.
+
event.shiftKey
+
Zwraca wartość logiczną wskazującą, czy klawisz <shift> był wciśnięty podczas zdarzenia.
+
event.target
+
Zwraca referencję do elementu, do którego zdarzenie zostało pierwotnie wysłane.
+
event.timeStamp
+
Zwraca czas, kiedy o którym zdarzenie zostało utworzone.
+
event.type
+
Zwraca nazwę zdarzenia.
+
event.view
+
Wskazuje widok (AbstractView), w którym wygenerowane zostało zdarzenie.
+
event.which
+
Zwraca kod Unicode klawisza w zdarzeniu związanym z klawiaturą, niezależnie od tego, czy klawisz jest znakiem.
+
+ +

Metody

+ +
+
event.initEvent
+
Metoda używana do zainicjalizowania wartości dla zdarzenia utworzonego przez interfejs DocumentEvent.
+
event.initKeyEvent
+
Inicjalizuje zdarzenie klawiatury. Gecko-specific.
+
event.initMouseEvent
+
Inicjalizuje zdarzenie myszy po jego utworzeniu.
+
event.initUIEvent
+
Inicjalizuje zdarzenie interfejsu użytkownika po jego utworzeniu.
+
event.preventBubble
+
{{ Obsolete_inline() }} Zabezpiecza zdarzenie przed bąbelkowaniem. Ta metoda jest przestarzała ze względu na standard stopPropagation i jest usunięta w Gecko 1.9.
+
event.preventCapture
+
{{ Obsolete_inline() }} Ta metoda jest przestarzała ze względu na standard stopPropagation i jest usunięta w Gecko 1.9.
+
event.preventDefault
+
Anuluje zdarzenie (jeśli można je anulować).
+
event.stopPropagation
+
Zatrzymuje dalsze propagowanie bieżącego zdarzenia w DOM.
+
+ + + +
+ +

{{ languages( { "en": "en/DOM/event", "es": "es/DOM/event", "fr": "fr/DOM/event", "ja": "ja/DOM/event" } ) }}

diff --git a/files/pl/web/api/event/initevent/index.html b/files/pl/web/api/event/initevent/index.html new file mode 100644 index 0000000000..47af034ed8 --- /dev/null +++ b/files/pl/web/api/event/initevent/index.html @@ -0,0 +1,45 @@ +--- +title: event.initEvent +slug: Web/API/Event/initEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/initEvent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda służy do zainicjalizowania zdarzenia utworzonego za pomocą interfejsu DocumentEvent

+

Składnia

+
event.initKeyEvent(type,bubbles,cancelable)
+
+

Parametry

+
+
+ type
+
+ Typ zdarzenia.
+
+ bubbles
+
+ Wartość logiczna wskazująca, czy zdarzenie ma bąbelkować czy nie (zob. bubbles).
+
+ cancelable
+
+ Wartość logiczna wskazująca, czy zdarzenie może zostać anulowane (zob. cancelable).
+
+

Przykład

+
// utwórz zdarzenie kliknięcia, które bąbelkuje
+// i nie może być anulowane
+event.initEvent("click", true, false);
+
+

Uwagi

+

Zdarzenia inicjalizowane w ten sposób muszą zostać utworzone za pomocą metody createEvent interfejsu DocumentEvent. Metoda initEvent musi być wywołana by ustawić zdarzenie przed jego wywołaniem (za pomocą dispatchEvent).

+

Specyfikacja

+

initEvent

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/event.initEvent", "es": "es/DOM/event.initEvent", "fr": "fr/DOM/event.initEvent", "ja": "ja/DOM/event.initEvent" } ) }}

diff --git a/files/pl/web/api/event/initmouseevent/index.html b/files/pl/web/api/event/initmouseevent/index.html new file mode 100644 index 0000000000..e9de804697 --- /dev/null +++ b/files/pl/web/api/event/initmouseevent/index.html @@ -0,0 +1,86 @@ +--- +title: event.initMouseEvent +slug: Web/API/Event/initMouseEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/initMouseEvent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Inicjuje zdarzenie myszy po jego utworzeniu (za pomocą metody createEvent interfejsu DocumentEvent).

+

Składnia

+
event.initMouseEvent(type,canBubble,cancelable,view,detail,screenX,screenY,clientX,clientY,ctrlKey,altKey,shiftKey,metaKey,button,relatedTarget);
+
+
+
+ type
+
+ łańcuch znaków do ustawienia typu zdarzeń. Możliwe typy dla zdarzeń myszy: click, mousedown, mouseup, mouseover, mousemove, mouseout.
+
+ canBubble
+
+ czy zdarzenie bąbelkuje. Ustawia wartość event.bubbles.
+
+ cancelable
+
+ czy domyślna akcja zdarzenia może być anulowana. Ustawia Ustawia wartość event.cancelable.
+
+ view
+
+ AbstractView zdarzenia. You should pass the window object here. Ustawia wartość event.view.
+
+ detail
+
+ wartość licznika kliknięć myszą. Ustawia wartość event.detail.
+
+ screenX
+
+ współrzędna x względem ekranu. Ustawia wartość event.screenX.
+
+ screenY
+
+ współrzędna y względem ekranu. Ustawia wartość event.screenY.
+
+ clientX
+
+ współrzędna x w obszarze klienta. Ustawia wartość event.clientX.
+
+ clientY
+
+ współrzędna y w obszarze klienta. Ustawia wartość event.clientY.
+
+ ctrlKey
+
+ czy klawisz control był wciśnięty podczas zdarzenia. Ustawia wartość event.ctrlKey.
+
+ altKey
+
+ czy klawisz alt był wciśnięty podczas zdarzenia. Ustawia wartość event.altKey.
+
+ shiftKey
+
+ czy klawisz shift był wciśnięty podczas zdarzenia. Ustawia wartość event.shiftKey.
+
+ metaKey
+
+ czy klawisz meta był wciśnięty podczas zdarzenia. Ustawia wartość event.metaKey.
+
+ button
+
+ zdarzenie myszy event.button.
+
+ relatedTarget
+
+ zdarzenie related EventTarget. Stosowane tylko z kilkoma typami zdarzeń (np. mouseover i mouseout). W innych przypadkach, zwraca null.
+
+

Przykład

+

 

+

Specyfikacja

+

DOM Level 2 Events: initMouseEvent

+

 

+
+  
+

{{ languages( { "en": "en/DOM/event.initMouseEvent", "es": "es/DOM/event.initMouseEvent" } ) }}

diff --git a/files/pl/web/api/event/inituievent/index.html b/files/pl/web/api/event/inituievent/index.html new file mode 100644 index 0000000000..3a20fef39d --- /dev/null +++ b/files/pl/web/api/event/inituievent/index.html @@ -0,0 +1,49 @@ +--- +title: event.initUIEvent +slug: Web/API/Event/initUIEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/initUIEvent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Inicjalizuje utworzone wcześniej zdarzenie interfejsu użytkownika.

+

Składnia

+
event.initUIEvent(type,canBubble,cancelable,view,detail)
+
+

Parametry

+
+
+ type
+
+ typ zdarzenia
+
+ canBubble
+
+ Wartość logiczna wskazująca, czy zdarzenie ma bąbelkować czy nie (zob. bubbles).
+
+ cancelable
+
+ Wartość logiczna wskazująca, czy zdarzenie może zostać anulowane (zob. cancelable).
+
+ view
+
+ widok (AbstractView) powiązany z tym zdarzeniem
+
+ detail
+
+ liczba określająca szczegółową informację dla tego zdarzenia; dla zdarzeń myszy jest to liczba kliknięć w danym miejscu ekranu (zwykle 1).
+
+

Przykład

+
e = document.createEvent("UIEvents");
+// tworzy zdarzenie kliknięcia, które bąbelkuje, może być
+// anulowane i którego widok i szczegółowa informacja
+// to odpowiednio window i 1
+e.initUIEvent("click", true, true, window, 1);
+
+

Specyfikacja

+

initUIEvent

+

{{ languages( { "en": "en/DOM/event.initUIEvent" } ) }}

diff --git a/files/pl/web/api/event/ischar/index.html b/files/pl/web/api/event/ischar/index.html new file mode 100644 index 0000000000..fc7a7dfec9 --- /dev/null +++ b/files/pl/web/api/event/ischar/index.html @@ -0,0 +1,24 @@ +--- +title: event.isChar +slug: Web/API/Event/isChar +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/isChar +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca wartość logiczną oznaczającą, czy w zdarzeniu pojawił się klawisz znaku czy nie.

+

Składnia

+
bool = event.isChar
+
+

Example

+
 if e.isChar
+   echoInput(e.type);
+ }
+
+

Notes

+

Niektórze kombinacje klawiszy mogą wywyoływać zdarzenia bez wystąpienia znaku (np. ctrl + alt). Wtedy isChar zwraca fałsz. isChar może być użyty, kiedy funkcje obsługujące zdarzenie potrzebują np. wyświetlić wprowadzony znak na ekranie.

+

Specyfikacja

+

Nie należy do specyfikacji.

+

{{ languages( { "en": "en/DOM/event.isChar" } ) }}

diff --git a/files/pl/web/api/event/keycode/index.html b/files/pl/web/api/event/keycode/index.html new file mode 100644 index 0000000000..a11c37d4b0 --- /dev/null +++ b/files/pl/web/api/event/keycode/index.html @@ -0,0 +1,23 @@ +--- +title: event.keyCode +slug: Web/API/Event/keyCode +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/KeyboardEvent/keyCode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca kod Unicode dla klawisza nie będącego znakiem w zdarzeniu keypress lub dowolnego klawisza w każdym innym zdarzeniu związanym z klawiaturą.

+

Składnia

+
klawisz = event.keyCode
+
+

Parametry

+ +

Uwagi

+

Zobacz opis właściwości charCode.

+

Specyfikacja

+

Nie należy do specyfikacji. Zobacz nsIDOMKeyEvent.

+

{{ languages( { "en": "en/DOM/event.keyCode" } ) }}

diff --git a/files/pl/web/api/event/layerx/index.html b/files/pl/web/api/event/layerx/index.html new file mode 100644 index 0000000000..5a69b4c864 --- /dev/null +++ b/files/pl/web/api/event/layerx/index.html @@ -0,0 +1,15 @@ +--- +title: event.layerX +slug: Web/API/Event/layerX +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/layerX +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.

+

Składnia

+
liczba = event.layerX
+
+

{{ languages( { "en": "en/DOM/event.layerX" } ) }}

diff --git a/files/pl/web/api/event/layery/index.html b/files/pl/web/api/event/layery/index.html new file mode 100644 index 0000000000..f610d08357 --- /dev/null +++ b/files/pl/web/api/event/layery/index.html @@ -0,0 +1,17 @@ +--- +title: event.layerY +slug: Web/API/Event/layerY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/layerY +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.

+

Składnia

+
liczba = event.layerY
+
+

Specyfikacja

+

Nie należy do specyfikacji.

+

{{ languages( { "en": "en/DOM/event.layerY" } ) }}

diff --git a/files/pl/web/api/event/metakey/index.html b/files/pl/web/api/event/metakey/index.html new file mode 100644 index 0000000000..a2c2758fb3 --- /dev/null +++ b/files/pl/web/api/event/metakey/index.html @@ -0,0 +1,30 @@ +--- +title: event.metaKey +slug: Web/API/Event/metaKey +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/metaKey +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca wartość logiczną wskazującą, czy klawisz <meta> był wciśnięty podczas wywołania zdarzenia.

+

Przykład

+
 function goInput(e) {
+ // sprawdza metaKey
+   if (e.metaKey) {
+        // i przekazuje zdarzenie dalej
+     superSizeOutput(e);
+
+    } else {
+     doOutput(e);
+    }
+ }
+
+

Uwagi

+

Na niekótrych platformach metaKey może obsługiwać klawisz o innej nazwie.

+

Specyfikacja

+

metaKey

+

{{ languages( { "en": "en/DOM/event.metaKey" } ) }}

diff --git a/files/pl/web/api/event/pagex/index.html b/files/pl/web/api/event/pagex/index.html new file mode 100644 index 0000000000..98c3c3e1ed --- /dev/null +++ b/files/pl/web/api/event/pagex/index.html @@ -0,0 +1,17 @@ +--- +title: event.pageX +slug: Web/API/Event/pageX +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/pageX +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.

+

Składnia

+
liczba = event.pageX
+
+

{{ languages( { "en": "en/DOM/event.pageX", "es": "es/DOM/event.pageX" } ) }}

diff --git a/files/pl/web/api/event/pagey/index.html b/files/pl/web/api/event/pagey/index.html new file mode 100644 index 0000000000..d82e2237df --- /dev/null +++ b/files/pl/web/api/event/pagey/index.html @@ -0,0 +1,15 @@ +--- +title: event.pageY +slug: Web/API/Event/pageY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/pageY +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.

+

Składnia

+
liczba = event.pageY
+
+

{{ languages( { "en": "en/DOM/event.pageY" } ) }}

diff --git a/files/pl/web/api/event/relatedtarget/index.html b/files/pl/web/api/event/relatedtarget/index.html new file mode 100644 index 0000000000..c67389532a --- /dev/null +++ b/files/pl/web/api/event/relatedtarget/index.html @@ -0,0 +1,56 @@ +--- +title: event.relatedTarget +slug: Web/API/Event/relatedTarget +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/relatedTarget +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje na drugi cel zdarzenia.

+

Składnia

+
eventTarget = event.relatedTarget
+
+

Parametry

+ +

Przykład

+
var rel = event.relatedTarget;
+// dump("LEAVING " + (rel ? rel.localName : "null") + "\n");
+// relatedTarget is null when the titletip is first shown:
+// a mouseout event fires because the mouse is exiting
+// the main window and entering the titletip "window".
+// relatedTarget is also null when the mouse exits the main
+// window completely, so count how many times relatedTarget
+// was null after titletip is first shown and hide popup
+// the 2nd time
+if (!rel) {
+  ++this._mouseOutCount;
+  if (this._mouseOutCount > 1)
+    this.hidePopup();
+  return;
+}
+// find out if the node we are entering is one of our
+// anonymous children
+while (rel) {
+  if (rel == this)
+    break;
+  rel.parentNode;
+}
+// if the entered node is not a descendant of ours, hide
+// the tooltip
+if (rel != this && this._isMouseOver) {
+  this.hidePopup();
+}
+
+

Uwagi

+

Za specyfikacją W3C: "Obecnie ten atrybuty używany jest przy zdarzeniu mouseover, gdzie kieruje do EventTarget, jaki opuściło urządzenie wskazujące oraz przy zdarzeniu mouseout, gdzie kieruje do EventTarget, w który weszło urządzenie wskazujące."

+

Powyzszy przykład jest typowy - właściwość relatedTarget używana jest by znaleźć, jeśli jest związany z tym zdarzeniem, kolejny element. Zdarzenia takie jak najechanie myszą ( + + mouseover + ) są powiązane z konkretnym elementem docelowym, ale mogą też angażować drugi cel, jak np. element opuszczany przez mysz w momencie, gdy najechania na główny cel.

+

Specyfikacja

+

relatedTarget

+

{{ languages( { "en": "en/DOM/event.relatedTarget" } ) }}

diff --git a/files/pl/web/api/event/screenx/index.html b/files/pl/web/api/event/screenx/index.html new file mode 100644 index 0000000000..5bafc490da --- /dev/null +++ b/files/pl/web/api/event/screenx/index.html @@ -0,0 +1,33 @@ +--- +title: event.screenX +slug: Web/API/Event/screenX +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/screenX +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.

+

Składnia

+
liczbaPikseli = event.screenX
+
+

Parametry

+ +

Przykład

+
 function checkClickMap(e) {
+   if e.screenX < 50
+     doRedButton();
+   if 50 <= e.screenX < 100
+     doYellowButton();
+   if e.screenX >= 100
+     doRedButton();
+ }
+
+

Uwagi

+

Kiedy złapiesz zdarzenie w oknie, dokumencie czy innym obszernym elemencie możesz pobrać współrzędne tego zdarzenia (np. kliknięcia) i obsłużyć je prawidłowo, tak jak pokazuje powyższy przykład.

+

Specyfikacja

+

screenX

+

{{ languages( { "en": "en/DOM/event.screenX" } ) }}

diff --git a/files/pl/web/api/event/screeny/index.html b/files/pl/web/api/event/screeny/index.html new file mode 100644 index 0000000000..8b59c5a5e6 --- /dev/null +++ b/files/pl/web/api/event/screeny/index.html @@ -0,0 +1,23 @@ +--- +title: event.screenY +slug: Web/API/Event/screenY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/screenY +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.

+

Składnia

+
liczbaPikseli = event.screenY
+
+

Parametry

+ +

Uwagi

+

Kiedy złapiesz zdarzenie w oknie, dokumencie czy innym obszernym elemencie możesz pobrać współrzędne tego zdarzenia (np. kliknięcia) i obsłużyć je prawidłowo. Zobacz przykład do screenX.

+

Specyfikacja

+

screenY

+

{{ languages( { "en": "en/DOM/event.screenY" } ) }}

diff --git a/files/pl/web/api/event/shiftkey/index.html b/files/pl/web/api/event/shiftkey/index.html new file mode 100644 index 0000000000..1c09a012ce --- /dev/null +++ b/files/pl/web/api/event/shiftkey/index.html @@ -0,0 +1,26 @@ +--- +title: event.shiftKey +slug: Web/API/Event/shiftKey +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/shiftKey +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, czy klawisz <shift> był wciśnięty przy wywołaniu zdarzenia.

+

Składnia

+
bool = event.shiftKey
+
+

Przykład

+
 function goInput(e) {
+ // sprawdza shiftKey
+   if e.shiftKey
+       // i przekazuje zdarzenie dalej
+     superSizeOutput(e);
+   else
+     doOutput(e)
+
+

Specyfikacja

+

shiftKey

+

{{ languages( { "en": "en/DOM/event.shiftKey" } ) }}

diff --git a/files/pl/web/api/event/stoppropagation/index.html b/files/pl/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..3026d761b3 --- /dev/null +++ b/files/pl/web/api/event/stoppropagation/index.html @@ -0,0 +1,26 @@ +--- +title: event.stopPropagation +slug: Web/API/Event/stopPropagation +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/stopPropagation +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przerywa dalsze propagowanie bieżącego zdarzenia.

+

Składnia

+
event.stopPropagation()
+
+

Przykład

+
e.stopPropagation();
+
+

Uwagi

+

Przykład 5: Propagowanie zdarzeń w rozdziale Przykłady użycia DOM dokładniej obrazuje użycie tej metody i propagowanie zdarzeń w DOM.

+

Specyfikacja

+

DOM Level 2 Events: stopPropagation

+
+  
+

{{ languages( { "en": "en/DOM/event.stopPropagation", "ja": "ja/DOM/event.stopPropagation" } ) }}

diff --git a/files/pl/web/api/event/target/index.html b/files/pl/web/api/event/target/index.html new file mode 100644 index 0000000000..b9df9f7b4f --- /dev/null +++ b/files/pl/web/api/event/target/index.html @@ -0,0 +1,27 @@ +--- +title: event.target +slug: Web/API/Event/target +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/target +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca referencję do elementu, do którego zdarzenie zostało pierwotnie wysłane.

+

Składnia

+
referencjaDoEventTarget = event.target
+
+

Parametry

+ +

Przykład

+
 d = document.getElementById("d1");
+ if e.target != d
+    resetGame();
+ // nie nasze zdarzenie
+
+

Specyfikacja

+

target

+

{{ languages( { "en": "en/DOM/event.target" } ) }}

diff --git a/files/pl/web/api/event/timestamp/index.html b/files/pl/web/api/event/timestamp/index.html new file mode 100644 index 0000000000..daead28251 --- /dev/null +++ b/files/pl/web/api/event/timestamp/index.html @@ -0,0 +1,47 @@ +--- +title: event.timeStamp +slug: Web/API/Event/timeStamp +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/timeStamp +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca czas (w milisekundach od momentu Epoch), kiedy zdarzenie zostało utworzone.

+

Składnia

+
number = event.timeStamp
+
+

Przykład

+
<html>
+<head>
+
+<title>Przykład timeStamp</title>
+
+<script type="text/javascript">
+var curr_time = null;
+
+function getTime(evt) {
+  curr_time = evt.timeStamp;
+  document.getElementById("time").firstChild.nodeValue = curr_time;
+}
+</script>
+</head>
+
+<body onkeypress="getTime(event)">
+
+<p>Naciśnij jakikolwiek klawisz, aby pobrać aktualny timestamp
+dla zdarzenia onkeypress.</p>
+<p>timeStamp: <span id="time">-</span></p>
+
+</body>
+</html>
+
+

 

+

Uwagi

+

Ta własność działa tylko wtedy, gdy system obsługuje ją dla danego zdarzenia.

+

Specyfikacja

+

timestamp

+

{{ languages( { "en": "en/DOM/event.timeStamp" } ) }}

diff --git a/files/pl/web/api/event/type/index.html b/files/pl/web/api/event/type/index.html new file mode 100644 index 0000000000..dfc2875af1 --- /dev/null +++ b/files/pl/web/api/event/type/index.html @@ -0,0 +1,19 @@ +--- +title: event.type +slug: Web/API/Event/type +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/type +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca nazwę zdarzenia (niewrażliwe na wielkość znaków).

+

Składnia

+
string = event.type
+
+

Uwagi

+

type jest nazwą XML-ową.

+

Specyfikacja

+

type

+

{{ languages( { "en": "en/DOM/event.type" } ) }}

diff --git a/files/pl/web/api/event/view/index.html b/files/pl/web/api/event/view/index.html new file mode 100644 index 0000000000..57af70a587 --- /dev/null +++ b/files/pl/web/api/event/view/index.html @@ -0,0 +1,23 @@ +--- +title: event.view +slug: Web/API/Event/view +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/view +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Atrybut view identyfikuje widok (interfejs AbstractView), w którym wygenerowane zostało zdarzenie.

+

Składnia

+
referencjaDoAbstractView = event.view
+
+

Parametry

+ +

Specyfikacja

+

view

+

{{ languages( { "en": "en/DOM/event.view" } ) }}

diff --git a/files/pl/web/api/file/file/index.html b/files/pl/web/api/file/file/index.html new file mode 100644 index 0000000000..0a1525bdc8 --- /dev/null +++ b/files/pl/web/api/file/file/index.html @@ -0,0 +1,68 @@ +--- +title: File.File() +slug: Web/API/File/File +tags: + - API +translation_of: Web/API/File/File +--- +

{{APIRef("File")}}

+ +

Konstruktor File() tworzy nową instancję obiektu {{domxref("File")}}.

+ +

Składnia

+ +
File(bity, nazwa [, opcje]);
+ +

Parameters

+ +
+
bity
+
{{jsxref("Array")}} (Tablica) obiektów {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}} lub {{domxref("DOMString")}} — albo miks takich obiektów. Zawartość pliku jest zakodowana w UTF-8.
+
nazwa
+
Obiekt {domxref("USVString")}} reprezentujący nazwę pliku albo ścieżkę do niego.
+
opcje {{optional_inline}}
+
Obiekt opcji, który zawiera opcjonalne atrybuty pliku. Dostępne są następujące możliwości: +
    +
  • type: (typ) - Obiekt {{domxref("DOMString")}} reprezentujący typ MIME zawartości pliku. Domyślnie "".
    • +
  • lastModified: (ostatnio modyfikowany) Liczba reprezentująca liczbę milisekund pomiędzy Unix time epoch i datą ostatniej modyfikacji pliku. Domyślnie - wartość {{jsxref("Date.now()")}}.
    • +
+
+
+ +

Przykład

+ +
var plik = new File(["foo"], "foo.txt", {
+  type: "text/plain",
+});
+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecificationStatusKomentarz
{{SpecName('File API')}}{{Spec2('File API')}}Podstawowa definicja
+ +

Kompatybilność między przeglądarkami

+ +
+ + +

{{Compat("api.File.File")}}

+
+ +

Zobacz także

+ + diff --git a/files/pl/web/api/file/index.html b/files/pl/web/api/file/index.html new file mode 100644 index 0000000000..50caf5366b --- /dev/null +++ b/files/pl/web/api/file/index.html @@ -0,0 +1,112 @@ +--- +title: File +slug: Web/API/File +tags: + - API + - File API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/API/File +--- +
{{APIRef}}
+ +

The File interface provides information about files and allows JavaScript in a web page to access their content.

+ +

File objects are generally retrieved from a {{domxref("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{domxref("DataTransfer")}} object, or from the mozGetAsFile() API on an {{domxref("HTMLCanvasElement")}}. In Gecko, privileged code can create File objects representing any local file without user interaction (see {{anch("Implementation notes")}} for more information.)

+ +

A File object is a specific kind of a {{domxref("Blob")}}, and can be used in any context that a Blob can. In particular, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, and {{domxref("XMLHttpRequest", "", "send()")}} accept both Blobs and Files.

+ +

See Using files from web applications for more information and examples.

+ +

{{InheritanceDiagram}}

+ +

Constructor

+ +
+
{{domxref("File.File", "File()")}}
+
Returns a newly constructed File.
+
+ +

Properties

+ +
+
{{domxref("File.lastModified")}} {{readonlyinline}}
+
Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).
+
{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}
+
Returns the last modified Date of the file referenced by the File object.
+
{{domxref("File.name")}} {{readonlyinline}}
+
Returns the name of the file referenced by the File object.
+
{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}
+
Returns the path the URL of the {{domxref("File")}} is relative to.
+
+ +

File implements {{domxref("Blob")}}, so it also has the following properties available to it:

+ +
+
{{domxref("File.size")}} {{readonlyinline}}
+
Returns the size of the file in bytes.
+
{{domxref("File.type")}} {{readonlyinline}}
+
Returns the MIME type of the file.
+
+ +

Methods

+ +

The File interface doesn't define any methods, but inherits methods from the {{domxref("Blob")}} interface:

+ +
+
{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
+
Returns a new Blob object containing the data in the specified range of bytes of the source Blob.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API')}}{{Spec2('File API')}}Initial definition
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.File")}}

+
+ +

 

+ +

Implementation notes

+ + + +

See also

+ + diff --git a/files/pl/web/api/geolocation_api/index.html b/files/pl/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..5b53252074 --- /dev/null +++ b/files/pl/web/api/geolocation_api/index.html @@ -0,0 +1,92 @@ +--- +title: Geolocation API +slug: Web/API/Geolocation_API +translation_of: Web/API/Geolocation_API +--- +
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
+ +

Geolokalizacja API umożliwia użytkownikowi zapewnić ich lokalizację do aplikacji internetowych, jeśli zechcą. Ze względów prywatności użytkownik jest proszony o zgodę na zgłoszenie informacji o lokalizacji.

+ +

Rozszerzenia Web, które chcą korzystać z obiektu Geolokalizacja, muszą dodać "geolocation"uprawnienie do swojego manifestu. System operacyjny użytkownika poprosi użytkownika o zezwolenie na dostęp do lokalizacji przy pierwszym żądaniu.

+ +

Pojęcia i użycie

+ +

Często będziesz chciał odzyskać informacje o lokalizacji użytkownika w swojej aplikacji internetowej, na przykład wykreślić jego lokalizację na mapie lub wyświetlić spersonalizowane informacje dotyczące ich lokalizacji.

+ +

The Geolocation API is accessed via a call to {{domxref("Navigator.geolocation", "navigator.geolocation")}}; this will cause the user's browser to ask them for permission to access their location data. If they accept, then the browser will use the best available functionality on the device to access this information (for example, GPS).

+ +

The developer can now access this location information in a couple of different ways:

+ + + +

In both cases, the method call takes up to three arguments:

+ + + +

For further information on Geolocation usage, read Using the Geolocation API.

+ +

Interfaces

+ +
+
{{domxref("Geolocation")}}
+
The main class of this API — contains methods to retrieve the user's current position, watch for changes in their position, and clear a previously-set watch.
+
{{domxref("GeolocationPosition")}}
+
Represents the position of a user. A GeolocationPosition instance is returned by a successful call to one of the methods contained inside {{domxref("Geolocation")}}, inside a success callback, and contains a timestamp plus a {{domxref("GeolocationCoordinates")}} object instance.
+
{{domxref("GeolocationCoordinates")}}
+
Represents the coordinates of a user's position; a GeolocationCoordinates instance contains latitude, longitude, and other important related information.
+
{{domxref("GeolocationPositionError")}}
+
A GeolocationPositionError is returned by an unsuccessful call to one of the methods contained inside {{domxref("Geolocation")}}, inside an error callback, and contains an error code and message.
+
{{domxref("Navigator.geolocation")}}
+
The entry point into the API. Returns a {{domxref("Geolocation")}} object instance, from which all other functionality can be accessed.
+
+ +

Dictionaries

+ +
+
{{domxref("PositionOptions")}}
+
Represents an object containing options to pass in as a parameter of {{domxref("Geolocation.getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()")}}.
+
+ +

Examples

+ +

{{page("/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API","Examples")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Geolocation")}}{{Spec2("Geolocation")}}
+ +

Kompatybilność z przeglądarkami

+ +

{{Compat("api.Geolocation")}}

+ +

Dostępność

+ +

Ponieważ Google często zapewnia lokalizację w oparciu o Wi-Fi, waniliowy interfejs API geolokalizacji może być niedostępny w Chinach. Możesz korzystać z usług lokalnych dostawców zewnętrznych, takich jak Baidu , Autonavi lub Tencent . Usługi te wykorzystują adres IP użytkownika i / lub lokalną aplikację do zapewnienia lepszego pozycjonowania.

+ +

Zobacz też

+ + diff --git a/files/pl/web/api/globaleventhandlers/index.html b/files/pl/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..9238474923 --- /dev/null +++ b/files/pl/web/api/globaleventhandlers/index.html @@ -0,0 +1,714 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - GlobalEventHandlers + - HTML DOM + - Mixin + - NeedsTranslation + - Reference + - TopicStub + - events +translation_of: Web/API/GlobalEventHandlers +--- +
{{ApiRef("HTML DOM")}}
+ +

The GlobalEventHandlers mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}. Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.

+ +
+

Note: GlobalEventHandlers is a mixin and not an interface; you can't actually create an object of type GlobalEventHandlers.

+
+ +

Properties

+ +

This interface doesn't include any properties except for the event handlers listed below.

+ +

Event handlers

+ +

These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, as well as by {{domxref("WorkerGlobalScope")}} for Web Workers.

+ +
+
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running CSS animation has been canceled.
+
{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a CSS animation has stopped playing.
+
{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a CSS animation has begun playing a new iteration of the animation sequence.
+
{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a CSS animation has started playing.
+
{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("auxclick")}} event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncuechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrag")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragexit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrop")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondurationchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onemptied")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.
+
{{domxref("GlobalEventHandlers.onended")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.
+
{{domxref("GlobalEventHandlers.ongotpointercapture")}}
+
+

Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type is raised.

+
+
{{domxref("GlobalEventHandlers.oninput")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninvalid")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadeddata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadend")}} event is raised (when progress has stopped on the loading of a resource.)
+
{{domxref("GlobalEventHandlers.onloadstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)
+
{{domxref("GlobalEventHandlers.onlostpointercapture")}}
+
+

Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type is raised.

+
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousewheel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.
+
{{ domxref("GlobalEventHandlers.onwheel") }}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("wheel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpause")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplaying")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerdown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointermove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointercancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.onprogress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onratechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeked")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeking")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselectstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the user starts to make a new text selection on a web page.
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the text selected on a web page changes.
+
{{domxref("GlobalEventHandlers.onshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onstalled")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsuspend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontimeupdate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.
+
{{domxref("GlobalEventHandlers.onvolumechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchcancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchmove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontransitioncancel")}}
+
An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a CSS transition has been cancelled.
+
{{domxref("GlobalEventHandlers.ontransitionend")}}
+
An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a CSS transition has finished playing.
+
{{domxref("GlobalEventHandlers.onwaiting")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.
+
+
+ +

Methods

+ +

This interface defines no methods.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}{{Spec2('Selection API')}}Adds onselectionchange.
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}{{Spec2('Pointer Lock')}}Adds onpointerlockchange and onpointerlockerror on {{domxref("Document")}}. It is experimentally implemented on GlobalEventHandlers.
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onsort since the {{SpecName("HTML5 W3C")}} snapshot.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of GlobalEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatGeckoDesktop(1.9.1)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsuspend{{CompatGeckoDesktop(1.9.2)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatGeckoDesktop(1.9.1)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmouseenter, onmouseleave{{CompatGeckoDesktop(10)}}{{CompatChrome(30.0)}}{{CompatUnknown}}5.517{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncancel{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onclose{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncuechange{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmousewheel{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsort {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onpointerlockchange, onpointerlockerror{{CompatGeckoDesktop(10)}}[1]{{CompatVersionUnknown}}[2] {{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave{{CompatVersionUnknown}}[3]{{CompatChrome(55.0)}}{{CompatVersionUnknown}}10{{CompatUnknown}}{{CompatUnknown}}
onselectionchange{{CompatGeckoDesktop(43)}}[4]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ontouchend, ontouchcancel, ontouchmove, ontouchstart{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
animationstart, animationend, animationcancel, animationiteration{{CompatGeckoDesktop(51)}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ongotpointercapture, onlostpointercapture{{CompatUnknown}}{{CompatChrome(57.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
onauxclick{{CompatGeckoDesktop(53)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onwheel{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onmouseenter, onmouseleave{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(10)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onsuspend{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
oncancel{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onclose{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
oncuechange{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onmousewheel{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onsort{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)
onpointerlockchange, onpointerlockerror{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(10)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave{{CompatChrome(55.0)}}{{CompatUnknown}}{{CompatVersionUnknown}}[3]{{CompatNo}}10{{CompatNo}}{{CompatNo}}{{CompatChrome(55.0)}}
onselectionchange{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(43)}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
ontouchend, ontouchcancel, ontouchmove, ontouchstart{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
animationstart, animationend, animationcancel, animationiteration{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatUnknown}}{{CompatGeckoMobile(51)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)
ongotpointercapture, onlostpointercapture{{CompatChrome(57.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatChrome(57.0)}}
onauxclick{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoMobile(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
onwheel{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] In Gecko this is implemented as onmozpointerlockchange, onmozpointerlockerror.

+ +

[2] In Blink this is implemented as onwebkitpointerlockchange, onwebkitpointerlockerror.

+ +

[3] This is implemented behind the dom.w3c_pointer_events.enabled preference, defaulting to false.

+ +

[4] This is implemented behind the dom.select_events.enabled preference, that default to false, except on Nightly.

+ +

See also

+ + diff --git a/files/pl/web/api/globaleventhandlers/onblur/index.html b/files/pl/web/api/globaleventhandlers/onblur/index.html new file mode 100644 index 0000000000..1a1779b37f --- /dev/null +++ b/files/pl/web/api/globaleventhandlers/onblur/index.html @@ -0,0 +1,85 @@ +--- +title: GlobalEventHandlers.onblur +slug: Web/API/GlobalEventHandlers/onblur +translation_of: Web/API/GlobalEventHandlers/onblur +--- +
{{ApiRef("HTML DOM")}}
+ +

Właściwość onblur należy do Globalnych Uchwytów Zdarzeń ({{domxref("GlobalEventHandlers")}}) i jest Uchwytem Zdarzenia ({{domxref("EventHandler")}}), który służy do obsługi zdarzenia {{event("blur")}}. Jest on dostępny dla następujących elementów: {{domxref("Element")}}, {{domxref("Document")}}, oraz {{domxref("Window")}}.

+ +

Zdarzenie blur zachodzi, gdy dany element traci "focus" (np. podczas opuszczenia inputa tekstowego).

+ +
+

Notatka: Przeciwieństwem onblur jest {{domxref("GlobalEventHandlers.onfocus", "onfocus")}}.

+
+ +

Składnia

+ +
cel.onblur = jakasFunkcja();
+
+ +

Wartość

+ +

jakasFunkcja jest nazwą funkcji albo wyrażeniem funkcji. Jeżeli nie podano argumentu, celowi zostanie przypisana odpowiednia wartość obiektu {{domxref("FocusEvent")}}.

+ +

Przykład

+ +

Przykład użycia onblur oraz {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} do zmiany tekstu w elemencie {{HtmlElement("input")}}.

+ +

HTML

+ +
<input type="text" value="CLICK HERE">
+
+ +

JavaScript

+ +
let input = document.querySelector('input');
+
+input.onblur = inputBlur;
+input.onfocus = inputFocus;
+
+function inputBlur() {
+  input.value = 'Focus has been lost';
+}
+
+function inputFocus() {
+  input.value = 'Focus is here';
+}
+ +

Rezultat

+ +

Kliknij na pole, a następnie obok niego i obserwuj jak zmienia się jego zawartość.

+ +

{{EmbedLiveSample('Przykład')}}

+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onblur','onblur')}}{{Spec2('HTML WHATWG')}}
+ +

Kompatybilność przeglądarek

+ + + +

{{Compat("api.GlobalEventHandlers.onblur")}}

+ +

W przeciwieństwie do IE, w którym prawie każdy element może otrzymać efekt zdarzenia blur, tylko kilka elementów z tym zdarzeniem, działa na przeglądarkach opartych o silnik Gecko.

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/globaleventhandlers/onfocus/index.html b/files/pl/web/api/globaleventhandlers/onfocus/index.html new file mode 100644 index 0000000000..bd4a30d6b5 --- /dev/null +++ b/files/pl/web/api/globaleventhandlers/onfocus/index.html @@ -0,0 +1,87 @@ +--- +title: GlobalEventHandlers.onfocus +slug: Web/API/GlobalEventHandlers/onfocus +translation_of: Web/API/GlobalEventHandlers/onfocus +--- +
{{ApiRef("HTML DOM")}}
+ +

Właściwość onfocus należy do Globalnych Uchwytów Zdarzeń ({{domxref("GlobalEventHandlers")}}) i jest Uchwytem Zdarzenia ({{domxref("EventHandler")}}), który służy do obsługi zdarzenia {{event("focus")}}.

+ +

Zdarzenie focus zachodzi, gdy użytkownik aktywuje element (np. wejdzie w pole tekstowe {{HtmlElement("input")}}).

+ +

Dla elementów onfocus, które nie są inputem, należy dodać atrybut {{htmlattrxref("tabindex")}} (przeczytaj Tworzenie dostępności klawiatury z powrotem po więcej informacji).

+ +
+

Notatka: Przeciwieństwem onfocus jest {{domxref("GlobalEventHandlers.onblur", "onblur")}}.

+
+ +

Składnia

+ +
cel.onfocus = jakasFunkcja;
+
+ +

Wartość

+ +

jakasFunkcja jest nazwą funkcji lub wyrażeniem funkcji. Jeżeli nie podano argumentu, celowi zostanie przypisana odpowiednia wartość obiektu {{domxref("FocusEvent")}}.

+ +

Przykład

+ +

Przykład użycia {{domxref("GlobalEventHandlers.onblur", "onblur")}} oraz onfocus do zmiany tekstu w elemencie {{HtmlElement("input")}}.

+ +

HTML

+ +
<input type="text" value="CLICK HERE">
+
+ +

JavaScript

+ +
let input = document.querySelector('input');
+
+input.onblur = inputBlur;
+input.onfocus = inputFocus;
+
+function inputBlur() {
+  input.value = 'Focus has been lost';
+}
+
+function inputFocus() {
+  input.value = 'Focus is here';
+}
+ +

Result

+ +

Kliknij na pole, a następnie obok niego i obserwuj jak zmienia się jego zawartość.

+ +

{{EmbedLiveSample('Example')}}

+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onfocus','onfocus')}}{{Spec2('HTML WHATWG')}} 
+ +

Kompatybilność przeglądarek

+ + + +

{{Compat("api.GlobalEventHandlers.onfocus")}}

+ +

W przeciwieństwie do IE, w którym prawie każdy element może otrzymać efekt zdarzenia focus , prawie wszystkie elementy z tym zdarzeniem nie działają na przeglądarkach opartych o silnik Gecko.

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/htmlcanvaselement/capturestream/index.html b/files/pl/web/api/htmlcanvaselement/capturestream/index.html new file mode 100644 index 0000000000..19b796017e --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/capturestream/index.html @@ -0,0 +1,73 @@ +--- +title: HTMLCanvasElement.captureStream() +slug: Web/API/HTMLCanvasElement/captureStream +translation_of: Web/API/HTMLCanvasElement/captureStream +--- +
{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}
+ +
 
+ +
Metoda HTMLCanvasElement.captureStream() zwraca {{domxref("CanvasCaptureMediaStream")}} który jest wideo w czasie rzeczywistym z powierzchni elementu <canvas>.
+ +

Składnia

+ +
MediaStream = canvas.captureStream(frameRate);
+
+ +

Parametry

+ +
+
frameRate {{optional_inline}}
+
Liczba zmiennoprzecinkowa podójnej precyzji wskazuje na częstotliwość przechwytywania każdej klatki. W przypadku braku parametru nowa klatka będzie przechwytywana przy każdej zmianie {{HTMLElement("canvas")}}; jeśli ustawiona na 0, przechwycona zostanie pojedyńcza klatka.
+
+ +

Wartość zwrtona

+ +

Odniesienie do obiektu {{domxref("MediaStream")}}. 

+ +

Przykład

+ +
// Zlokalizuj element canvas do przechwycenia
+var canvasElt = document.querySelector('canvas');
+
+// Rozpocznij stream
+var stream = canvasElt.captureStream(25); // 25 FPS
+
+// Wykonuj na nim czynności
+// Np. Prześlij stream na inny komputer używając RTCPeerConnection
+innyKomputer.addStream(stream);
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}}{{Spec2('Media Capture DOM Elements')}}Definicja początkowa
+ +

Zgodność przeglądarek

+ + + +

{{Compat("api.HTMLCanvasElement.captureStream")}}

+ +

Zobacz też

+ + diff --git a/files/pl/web/api/htmlcanvaselement/getcontext/index.html b/files/pl/web/api/htmlcanvaselement/getcontext/index.html new file mode 100644 index 0000000000..e60fddc51e --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/getcontext/index.html @@ -0,0 +1,129 @@ +--- +title: HTMLCanvasElement.getContext() +slug: Web/API/HTMLCanvasElement/getContext +translation_of: Web/API/HTMLCanvasElement/getContext +--- +
{{APIRef("Canvas API")}}
+ +

Metoda HTMLCanvasElement.getContext() zwraca kontekst pola roboczego {{HTMLElement("canvas")}}, lub {{jsxref("null")}} jeśli  identyfikator kontekstu nie jest wspierany.

+ +

Składnia

+ +
var ctx = canvas.getContext(contextType);
+var ctx = canvas.getContext(contextType, contextAttributes);
+
+ +

Parametry

+ +
+
contextType
+
Jest nim {{domxref("DOMString")}} zawierający identyfikator kontekstu pola roboczego powiązanego z {{HTMLElement("canvas")}}. Możliwe wartości to: +
    +
  • "2d",  tworzy obiekt {{domxref("CanvasRenderingContext2D")}} reprezentujący dwuwymiarowy kontekst renderowania.
    • +
  • "webgl" (lub "experimental-webgl"), tworzy obiekt {{domxref("WebGLRenderingContext")}} reprezentujący trójwymiarowy kontekst renderowania. Ten kontekst dostępny jest tylko w przeglądarkach w których zaimplementowana jest wersja 1 WebGL (OpenGL ES 2.0).
    • +
  • "webgl2" tworzy obiekt {{domxref("WebGL2RenderingContext")}} reprezentujący trójwymiarowy kontekst renderowania. Ten kontekst dostępny jest tylko w przeglądarkach w których zaimplementowana jest wersja 2 WebGL (OpenGL ES 3.0). {{experimental_inline}}
    • +
  • "bitmaprenderer" tworzy {{domxref("ImageBitmapRenderingContext")}}, który zapewnia możliwość zastąpenia treści {{HTMLElement("canvas")}}  na podaną {{domxref("ImageBitmap")}}.
    • +
+ +
+

Nota: Identyfikator "experimental-webgl" jest używany przy nowych wdrożeniach WebGL. Wdrożenia te nie uzyskały zgodności z pakietem testowym lub sterowniki graficzne platformy nie są jeszcze stabilne. Grupa Khronos certyfikuje wdrożenia WebGL zgodnie z regułami zgodności.

+
+
+
contextAttributes
+
+

Można użyć kilku własności kontekstu przy tworzeniu kontekstu renderowania, dla przykładu: 

+ + 
const gl = canvas.getContext('webgl', {
+  antialias: false,
+  depth: false
+});
+
+
Własności kontekstu 2d: +
    +
  • alpha: Boolean wskazujacy czy canvas zawiera kanał alpha. Jeśli ustawione na false, przeglądarka wie, że tło zawsze jest nieprzeźroczyste, co może przyspieszyć rysowanie przeźroczystych treści i obrazków.  
    • +
  • {{non-standard_inline}} (Gecko only) willReadFrequently: Boolean wskazujący czy wiele operacji read-back zostało zaplanowanych. Spowoduje wymuszenie użycia oprogramowania (zamiast przyśpieszenia sprzętowego) 2D canvas i może pomóc w oszczędności pamięci przy częstym wywoływaniu {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Opcja ta jest dostepna tylko jeśli flaga gfx.canvas.willReadFrequently.enable jest ustawiona na true (która, domyślnie, dotyczy tylko B2G/Firefox OS).
    • +
  • {{non-standard_inline}} (Blink only) storage: String wskazujacy jaka pamięć jest używana (domyślnie jest to "stała" ).
    • +
+ Własności kontekstu WebGL: + +
    +
  • alpha: Boolean wskazujacy czy canvas zawiera bufor alpha.
    • +
  • depth: Boolean wskazujący czy bufor rysunku posiada bufor głębi o wartości co przynajmniej 16 bitów.
    • +
  • stencil: Boolean wskazujący czy bufor rysunku posiada bufor matrycy o wartości przynajmniej 8 bitów. 
    • +
  • antialias: Boolean wskazujący czy używany ma być anti-aliasing.
    • +
  • premultipliedAlpha: Boolean wskazujący czy projektant strony założył, że  bufor rysunku zawiera kolory ze wstepnie pomnożoną alfą.
    • +
  • preserveDrawingBuffer: Jeśli ustawiona na true, bufory nie zostaną wyczyszczone i zachowają swoje wartości, dopóki nie zostaną wyczyszczone lub nadpisane przez autora.
    • +
  • failIfMajorPerformanceCaveat: Boolean wskazujący czy kontekst będzie tworzony, jeśli wydajność systemu jest niska.
    • +
+
+
+ +

Wartości zwrotne

+ +

{{domxref("RenderingContext")}} jest też

+ + + +

Jeśli contextType nie może dopasować możliwych kontekstów rysowania, null zostanie zwrócony.

+ +

Przykłady

+ +

Wykorzystując element {{HTMLElement("canvas")}}:

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

Kontekst 2d uzyskać można za pomocą kodu: 

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+console.log(ctx); // CanvasRenderingContext2D { ... }
+
+ +

Tworzy to kontekst renderowania 2D, po którym można rysować.

+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML WHATWG')}}Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5 W3C')}}Snapshot {{SpecName('HTML WHATWG')}} zawiera początkową definicje.
+ +

Zgodność przeglądarek

+ + + +

{{Compat("api.HTMLCanvasElement.getContext")}}

+ +

Zobacz też

+ + diff --git a/files/pl/web/api/htmlcanvaselement/height/index.html b/files/pl/web/api/htmlcanvaselement/height/index.html new file mode 100644 index 0000000000..0ff266ff84 --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/height/index.html @@ -0,0 +1,79 @@ +--- +title: HTMLCanvasElement.height +slug: Web/API/HTMLCanvasElement/height +translation_of: Web/API/HTMLCanvasElement/height +--- +
+
+
{{APIRef("Canvas API")}}
+ +
 
+ +
Własność HTMLCanvasElement.height wyrażana jest w dodatniej liczbie całkowitej odpowiada za atrybut height elemetu HTML <canvas> i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość 150.
+ +
 
+ +
To jedna z dwóch własności kontrolujących wielkość {{HTMLElement("canvas")}}, druga z nich to {{domxref("HTMLCanvasElement.width")}}.
+
+
+ +

Składnia

+ +
var pxl = canvas.height;
+canvas.height = pxl;
+
+ +

Przykłady

+ +

Biorąc pod uwagę element {{HTMLElement("canvas")}}:

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

Można sprawdzić jego wysokość za pomocą kodu:

+ +
var canvas = document.getElementById('canvas');
+console.log(canvas.height); // 300
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML WHATWG')}} +

Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}

+
{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML5 W3C')}}Snapshot {{SpecName('HTML WHATWG')}} zawierający początkową definicje.
+ +

Zgodność przeglądarek

+ + + +

{{Compat("api.HTMLCanvasElement.height")}}

+ +

Zobacz też

+ + diff --git a/files/pl/web/api/htmlcanvaselement/index.html b/files/pl/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..21deee3bf0 --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/index.html @@ -0,0 +1,97 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +translation_of: Web/API/HTMLCanvasElement +--- +
+
{{APIRef("Canvas API")}}
+
+ +

Interfejs HTMLCanvasElement zapewnia własności i metody pozwalające na manipulację wygladem i prezentacją elementów canvas. Dodatkowo HTMLCanvasElement dziedziczy własności i metody interfejsu HTMLElement.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Własności

+ +

Własności dziedziczone są od rodzica, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.height")}}
+
Wyrażany w dodatniej liczbie całkowitej odpowiada za atrybut {{htmlattrxref("height", "canvas")}} elemetu HTML {{HTMLElement("canvas")}} i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość 150.
+
{{domxref("HTMLCanvasElement.width")}}
+
Wyrażany w dodatniej liczbie całkowitej odpowiada za atrybut {{htmlattrxref("width", "canvas")}} elemetu HTML {{HTMLElement("canvas")}} i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość 300.
+
+ +

Metody

+ +

Metody dziedziczone są od rodzica, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+
Zwraca {{domxref("CanvasCaptureMediaStream")}}, który jest wideo w czasie rzeczywistym z powierzchni elementu {{HTMLElement("canvas")}}.
+
{{domxref("HTMLCanvasElement.getContext()")}}
+
Zwraca pole robocze elementu {{HTMLElement("canvas")}}, lub null jeśli kontekst nie jest wspierany. Pole robocze pozwala na rysowanie na {{HTMLElement("canvas")}}. Wywołanie getContext z atrybutem "2d" zwraca obiekt {{domxref("CanvasRenderingContext2D")}}, natomiast wywołanie z "webgl" (lub "experimental-webgl") zwróci obiekt {{domxref("WebGLRenderingContext")}}. Ten kontekst jest dostepny tylko w przeglądarkach obsługujących WebGL.
+
+ +
+
{{domxref("HTMLCanvasElement.toDataURL()")}}
+
Zwraca data-URL reprezentujacy obraz w formacie określonym przez parametr type (domyślnie png). Zwracany obraz jest w rozdzielczości 96dpi.
+
{{domxref("HTMLCanvasElement.toBlob()")}}
+
Tworzy obiekt {{domxref("Blob")}} reprezentujący obraz zawierający się w {{HTMLElement("canvas")}}; ten plik może być buforowany z dysku lub przechowywany w pamięci wedle uznania user agent.
+
{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
+
Przenosi kontrolę do obiektu {{domxref ("OffscreenCanvas")}}, w głównym wątku lub w module roboczym.
+
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Zwraca obiekt {{domxref("File")}} reprezentujący obraz zawarty w {{HTMLElement("canvas")}}; plik oparty jest na pamięci, posiada określoną nazwę. Jeśli typ nie został okreslony, domyslnie jest to image/png.
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}} +

Dodano metodę captureStream().

+
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}} +

Metoda getContext() zwraca teraz {{domxref("RenderingContext")}} zamiast obiektu nieprzeźroczystego

+ +

Dodano metodę transferControlToOffscreen()

+
{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}Definicja początkowa.
+ +

Zgodność przegladarek

+ +
+ + +

{{Compat("api.HTMLCanvasElement")}}

+
+ +

Zobacz też

+ + diff --git a/files/pl/web/api/htmlcanvaselement/width/index.html b/files/pl/web/api/htmlcanvaselement/width/index.html new file mode 100644 index 0000000000..3be0eabbf8 --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/width/index.html @@ -0,0 +1,79 @@ +--- +title: HTMLCanvasElement.width +slug: Web/API/HTMLCanvasElement/width +translation_of: Web/API/HTMLCanvasElement/width +--- +
+
+
{{APIRef("Canvas API")}}
+ +
 
+ +
+

Własność HTMLCanvasElement.width wyrażana jest w dodatniej liczbie całkowitej odpowiada za atrybut {{htmlattrxref("width", "canvas")}} elemetu HTML {{HTMLElement("canvas")}} i jest interpretowana w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość 300.

+ +

To jedna z dwóch własności kontrolujących wielkość {{HTMLElement("canvas")}}, druga z nich to {{domxref("HTMLCanvasElement.height")}}.

+
+
+
+ +

Składnia

+ +
var pxl = canvas.width;
+canvas.width = pxl;
+
+ +

Przykłady

+ +

Wykorzystując element {{HTMLElement("canvas")}}:

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

You can get the width of the canvas with the following code:

+ +

Informacje o szerokości {{HTMLElement("canvas")}} można uzyskać za pomocą kodu:

+ +
var canvas = document.getElementById('canvas');
+console.log(canvas.width); // 300
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-width", "HTMLCanvasElement.width")}}{{Spec2('HTML WHATWG')}}Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}{{Spec2('HTML5 W3C')}}Snapshot {{SpecName('HTML WHATWG')}} zawierający początkową definicje.
+ +

Zgodność przegladarek

+ + + +

{{Compat("api.HTMLCanvasElement.width")}}

+ +

Zobacz też

+ + diff --git a/files/pl/web/api/htmlelement/dataset/index.html b/files/pl/web/api/htmlelement/dataset/index.html new file mode 100644 index 0000000000..fac7ec119f --- /dev/null +++ b/files/pl/web/api/htmlelement/dataset/index.html @@ -0,0 +1,134 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +
{{ APIRef("HTML DOM") }}
+ +

Właściwość dataset interfejsu {{domxref("HTMLElement")}} pozwala na odczyt/zapis niestandardowcyh atrybutów (data-*) elementu. Dostęp ten jest możliwy w HTMLu jak i w DOMie.  It is a map of DOMString, one entry for each custom data attribute. Zauważ że właściwość dataset można odczytać, ale nie zmieniać bezpośrednio. Zamiast tego, wszystkie zapisy muszą być wykonywane na pojedynczych polach dataset, które odpowiadają atrybutom danych. Note also that an HTML data-attribute and its corresponding DOM dataset.property do not share the same name, but they are always similar:

+ + + +

In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article Using data attributes.

+ +

Zmiana nazw

+ +

dash-style to camelCase: A custom data attribute name is transformed to a key for the {{ domxref("DOMStringMap") }} entry with the following rules

+ + + +

camelCase to dash-style: The opposite transformation, that maps a key to an attribute name, uses the following rules:

+ + + +

The restriction in the rules above ensures that the two transformations are the inverse one of the other.

+ +

For example, the attribute named data-abc-def corresponds to the key abcDef.

+ + + +

Dostęp do wartości

+ + + + + +

Ustawianie wartości

+ + + +

Składnia

+ + + +

Przykłady

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
+ +
const el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+// set the data attribute
+el.dataset.dateOfBirth = '1960-10-03';
+// Result: el.dataset.dateOfBirth === 1960-10-03
+
+delete el.dataset.dateOfBirth;
+// Result: el.dataset.dateOfBirth === undefined
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// Result: 'someDataAttr' in el.dataset === true
+
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.dataset")}}

+ +

Zobacz także

+ + diff --git a/files/pl/web/api/htmlelement/index.html b/files/pl/web/api/htmlelement/index.html new file mode 100644 index 0000000000..d27d11fd7b --- /dev/null +++ b/files/pl/web/api/htmlelement/index.html @@ -0,0 +1,409 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API + - HTML DOM + - Interface + - NeedsMobileBrowserCompatibility + - NeedsNewLayout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +
 
+ +

The HTMLElement interface represents any HTML element. Some elements directly implement this interface, others implement it via an interface that inherits it.

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.

+ +
+
{{domxref("HTMLElement.accessKey")}}
+
Is a {{domxref("DOMString")}} representing the access key assigned to the element.
+
{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the element's assigned access key.
+
{{domxref("HTMLElement.contentEditable")}}
+
Is a {{domxref("DOMString")}}, where a value of "true" means the element is editable and a value of "false" means it isn't.
+
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.
+
{{domxref("HTMLElement.contextMenu")}}
+
Is an {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be null
+
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}
+
Returns a {{domxref("DOMStringMap")}} that allows access to read and write the element custom data attributes (data-*) .
+
{{domxref("HTMLElement.dir")}}
+
Is a {{domxref("DOMString")}}, reflecting the dir global attribute, representing the directionality of the element. Possible values are "ltr", "rtl", and "auto".
+
{{domxref("HTMLElement.draggable")}}
+
Is a {{jsxref("Boolean")}} indicating if the element can be dragged.
+
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}
+
Returns a {{domxref("DOMSettableTokenList")}} reflecting the dropzone global attribute and describing the behavior of the element regarding a drop operation.
+
{{domxref("HTMLElement.hidden")}}
+
Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.
+
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}}…
+
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}
+
Is a {{domxref("DOMString")}}…
+
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}
+
Returns an {{jsxref("Object")}}…
+
{{domxref("HTMLElement.lang")}}
+
Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.
+
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a double containing the height of an element, relative to the layout.
+
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double, the distance from this element's left border to its offsetParent's left border.
+
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.
+
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double, the distance from this element's top border to its offsetParent's top border.
+
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double containing the width of an element, relative to the layout.
+
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("HTMLPropertiesCollection")}}…
+
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}
+
Is a {{jsxref("Boolean")}} that controls spell-checking. It is present on all HTML elements, though it hasn't an effect on all of them.
+
{{domxref("HTMLElement.style")}}
+
Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.
+
{{domxref("HTMLElement.tabIndex")}}
+
Is a long representing the position of the element in the tabbing order.
+
{{domxref("HTMLElement.title")}}
+
Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.
+
{{domxref("HTMLElement.translate")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}}
+
+ +

Event handlers

+ +

Most events properties, of the form onXYZ, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implemented by HTMLElement. A few more are specific to HTMLElement.

+ +
+
{{ domxref("HTMLElement.oncopy") }}  {{ non-standard_inline() }}
+
Returns the event handling code for the copy event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.oncut") }}  {{ non-standard_inline() }}
+
Returns the event handling code for the cut event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}
+
Returns the event handling code for the paste event ({{bug("280959")}}).
+
{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchstart")}} event.
+
{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchend")}} event.
+
{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchmove")}} event.
+
{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchenter")}} event.
+
{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchleave")}} event.
+
{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchcancel")}} event.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("Element")}}.

+ +
+
{{domxref("HTMLElement.blur()")}}
+
Removes keyboard focus from the currently focused element.
+
{{domxref("HTMLElement.click()")}}
+
Sends a mouse click event to the element.
+
{{domxref("HTMLElement.focus()")}}
+
Makes the element the current keyboard focus.
+
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}
+
Makes the spell checker runs on the element.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}Added the following properties: offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}Added the following properties: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, and itemValue.
+ Added the following method: forceSpellcheck().
+ Moved the onXYZ attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}Added the following properties: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, and all the onXYZ properties.
+ Moved the id and className properties to the {{domxref("Element")}} interface.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoDesktop("5.0")}}17.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.10)
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoDesktop("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{WebkitBug(72715)}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.24)
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}9.0{{CompatUnknown}}11.105.1
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.contentEditable", "contentEditable")}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}5.59{{CompatVersionUnknown}}
{{domxref("HTMLElement.spellcheck", "spellcheck")}}{{CompatGeckoDesktop("1.8.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.style", "style")}}{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}8.01111.106
{{domxref("HTMLElement.draggable", "draggable")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}12.0{{CompatUnknown}}
{{domxref("HTMLElement.dropzone", "dropzone")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}12.0{{CompatNo}}
{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatNo}}11.60
+ (Removed in Opera 15)		{{CompatNo}}
{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoDesktop("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support +

{{CompatGeckoMobile("1.0")}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoMobile("8.0")}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoMobile("6.0")}}
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoMobile("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/pl/web/api/htmlformelement/acceptcharset/index.html b/files/pl/web/api/htmlformelement/acceptcharset/index.html new file mode 100644 index 0000000000..c71b52269f --- /dev/null +++ b/files/pl/web/api/htmlformelement/acceptcharset/index.html @@ -0,0 +1,33 @@ +--- +title: HTMLFormElement.acceptCharset +slug: Web/API/HTMLFormElement/acceptCharset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/acceptCharset +--- +

 

+ +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

acceptCharset Zwraca listę obsługiwanych przez formularz zestawów znaków dla danego elementu FORM. Lista ta będzie oddzielona przecinkiem lub spacją.

+ +

Składnia

+ +
string = form.acceptCharset;
+
+ +

Przykład

+ +
inputs = document.forms["myform"].acceptCharset
+
+ +

Specyfikacja

+ +

DOM Level 2 HTML: acceptCharset

+ +

{{ languages( { "en": "en/DOM/form.acceptCharset" } ) }}

diff --git a/files/pl/web/api/htmlformelement/action/index.html b/files/pl/web/api/htmlformelement/action/index.html new file mode 100644 index 0000000000..ba03220cd0 --- /dev/null +++ b/files/pl/web/api/htmlformelement/action/index.html @@ -0,0 +1,36 @@ +--- +title: HTMLFormElement.action +slug: Web/API/HTMLFormElement/action +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/action +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

action pobiera/ustawia akcję dla elementu FORM.

+ +

Składnia

+ +
string = form.action
+form.action =
+string
+
+ +

Przykład

+ +

form.action = "/cgi-bin/publish";

+ +

Uwagi

+ +

Akcja w formularzu jest programem, który jest wykonywany na serwerze kiedy formularz zostanie wysłany. Ta własność może być odzyskiwana lub ustawiana.

+ +

Specyfikacja

+ +

DOM Level 2 HTML: action

+ +

{{ languages( { "ja": "ja/DOM/form.action", "en": "en/DOM/form.action" } ) }}

diff --git a/files/pl/web/api/htmlformelement/elements/index.html b/files/pl/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..929f7c7640 --- /dev/null +++ b/files/pl/web/api/htmlformelement/elements/index.html @@ -0,0 +1,36 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/elements +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

elements zwraca kolekcję HTMLCollection wszystkich kontrolek zawartych w elemencie FORM.

+ +

Do konkretnego elementu możesz odnosić się poprzez indeks lub za pomocą nazwy (name) bądź id tego elementu.

+ +

Składnia

+ +
listaWęzłów =
+HTMLFormElement.elements
+
+ +

Przykłady

+ +
var inputs = document.getElementById("form1").elements;
+var inputByIndex = inputs[2];
+var inputByName = inputs["login"];
+
+ +

Specyfikacja

+ +

Specyfikacja W3C DOM 2 HTML: elements

+ +

{{ languages( { "en": "en/DOM/form.elements", "ja": "ja/DOM/form.elements" } ) }}

diff --git a/files/pl/web/api/htmlformelement/encoding/index.html b/files/pl/web/api/htmlformelement/encoding/index.html new file mode 100644 index 0000000000..aabd43e66f --- /dev/null +++ b/files/pl/web/api/htmlformelement/encoding/index.html @@ -0,0 +1,15 @@ +--- +title: HTMLFormElement.encoding +slug: Web/API/HTMLFormElement/encoding +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/encoding +--- +

 

+ +

{{ ApiRef() }} encoding jest alternatywną nazwą dla elementu enctype w obiekcie DOM FormElement.

+ +

{{ languages( { "en": "en/DOM/form.encoding" } ) }}

diff --git a/files/pl/web/api/htmlformelement/enctype/index.html b/files/pl/web/api/htmlformelement/enctype/index.html new file mode 100644 index 0000000000..2a90fe13a9 --- /dev/null +++ b/files/pl/web/api/htmlformelement/enctype/index.html @@ -0,0 +1,39 @@ +--- +title: HTMLFormElement.enctype +slug: Web/API/HTMLFormElement/enctype +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/enctype +--- +

 

+ +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

enctype pobiera/ustawia typ zawartości elementu FORM.

+ +

Składnia

+ +
string = form.enctype
+form.enctype =
+string
+
+ +

Przykład

+ +
form.enctype = "application/x-www-form-urlencoded";
+
+ +

Uwagi

+ +

Typem kodowania jest ogólnie "application/x-www-form-urlencoded".

+ +

Specyfikacja

+ +

DOM Level 2 HTML: enctype

+ +

{{ languages( { "en": "en/DOM/form.enctype" } ) }}

diff --git a/files/pl/web/api/htmlformelement/index.html b/files/pl/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..3c0d1ade95 --- /dev/null +++ b/files/pl/web/api/htmlformelement/index.html @@ -0,0 +1,143 @@ +--- +title: HTMLFormElement +slug: Web/API/HTMLFormElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement +--- +

{{ ApiRef() }}

+ +

Interfejs elementu HTML FORM

+ +

Elementy FORM mają wszystkie właściwości i metody innych elementów HTML, tak jak opisano w rozdziale o elementach. Jednocześnie mają one bardziej wyspecjalizowany interfejs HTMLFormElement.

+ +

Interfejs ten dostarcza metod do tworzenia i modyfikacji elementów FORM przy użyciu DOM. Poniższy przykład przedstawia, jak utworzyć nowy formularz, zmienić jego atrybuty i wysłać go.

+ +
// Utwórz formularz
+var f = document.createElement("form");
+
+// Dodaj do zawartości dokumentu
+document.body.appendChild(f);
+
+// Ustaw atrybuty oznaczające akcję i metodę wysyłania
+f.action = "/cgi-bin/some.cgi";
+f.method = "POST"
+
+// Wyślij formularz
+f.submit();
+
+ +

Z kolei poniższy dokument HTML przedstawia jak wydobyć informacje z formularza i nadać mu pewne atrybuty.

+ +
<title>Przykład formularza</title>
+<script type="text/javascript">
+  function getFormInfo() {
+    var info;
+
+    // Znajdź referencję do formularza poprzez kolekcję forms
+    var f = document.forms["formA"];
+    info = "f.elements: " + f.elements + "\n"
+         + "f.length: " + f.length + "\n"
+         + "f.name: " + f.elements + "\n"
+         + "f.acceptCharset: " + f.acceptCharset + "\n"
+         + "f.action: " + f.action + "\n"
+         + "f.enctype: " + f.enctype + "\n"
+         + "f.encoding: " + f.encoding + "\n"
+         + "f.method: " + f.method + "\n"
+         + "f.target: " + f.target;
+    document.forms["formA"].elements['tex'].value = info;
+  }
+
+  // Referencja do formularza jest przekazywana z atrybutu
+  // onclick przycisku za pomocą 'this.form'
+  function setFormInfo(f) {
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+</script>
+
+<h1>Przykład formularza</h1>
+
+<form name="formA" id="formA"
+ action="/cgi-bin/test" method="POST">
+ <p>Kliknij "info" by zobaczyć informację o formularzu,
+ "zmień" by zmienić ustawienia, a następnie ponownie "info"
+ by zobaczyć efekt zmian.</p>
+ <p>
+  <input type="button" value="info"
+   onclick="getFormInfo();">
+  <input type="button" value="zmień"
+   onclick="setFormInfo(this.form);">
+  <input type="reset" value="zresetuj">
+  <br>
+  <textarea id="tex" style="height:15em; width:20em">
+ </p>
+</form>
+
+ +

Własności

+ +
+
form.elements
+
Zwraca kolekcję wszystkich kontrolek zawartych w elemencie FORM.
+
+ +
+
form.length
+
Zwraca ilość kontrolek w elemencie FORM.
+
+ +
+
form.name
+
Zwraca ciąg z nazwą bieżącego elementu FORM.
+
+ +
+
form.acceptCharset
+
Zwraca listę obsługiwanych przez formularz zestawów znaków.
+
+ +
+
form.action
+
Pobiera/ustawia akcję dla elementu FORM.
+
+ +
+
form.enctype
+
Pobiera/ustawia typ zawartości wysyłanej przez formularz.
+
+ +
+
form.encoding
+
Pobiera/ustawia typ zawartości wysyłanej przez formularz.
+
+ +
+
form.method
+
Pobiera/ustawia metodę HTTP używaną do wysłania formularza.
+
+ +
+
form.target
+
Pobiera/ustawia okno docelowe akcji formularza (np. ramka, w której zostanie wyrenderowana zwrócona strona).
+
+ +

Metody

+ +
+
form.submit
+
Wysyła formularz
+
+ +
+
form.reset
+
Przywraca formularz do jego stanu początkowego
+
+ +
 
+ +

{{ languages( { "en": "en/DOM/form", "es": "es/DOM/form", "fr": "fr/DOM/form", "ja": "ja/DOM/form" } ) }}

diff --git a/files/pl/web/api/htmlformelement/length/index.html b/files/pl/web/api/htmlformelement/length/index.html new file mode 100644 index 0000000000..36c5c63349 --- /dev/null +++ b/files/pl/web/api/htmlformelement/length/index.html @@ -0,0 +1,33 @@ +--- +title: HTMLFormElement.length +slug: Web/API/HTMLFormElement/length +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/length +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

length zwraca liczbę kontrolek w elemencie FORM.

+ +

Składnia

+ +
integer = form.length
+
+ +

Przykład

+ +
if (document.getElementById("form1").length > 1) {
+  // więcej niż jedena kontrolka formularza jest tu
+}
+
+ +

Specyfikacja

+ +

DOM Level 2: length

+ +

{{ languages( { "ja": "ja/DOM/form.length", "en": "en/DOM/form.length" } ) }}

diff --git a/files/pl/web/api/htmlformelement/method/index.html b/files/pl/web/api/htmlformelement/method/index.html new file mode 100644 index 0000000000..d1829b02c6 --- /dev/null +++ b/files/pl/web/api/htmlformelement/method/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLFormElement.method +slug: Web/API/HTMLFormElement/method +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/method +--- +

 

+ +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

method pobiera/ustawia metodę HTTP używaną do wysłania formularza.

+ +

Składnia

+ +
string = form.method
+form.method =
+string
+
+ +

Przykład

+ +
document.forms["myform"].method = "post";
+
+ +

Specyfikacja

+ +

DOM Level 2 HTML: method

+ +

{{ languages( { "ja": "ja/DOM/form.method", "en": "en/DOM/form.method" } ) }}

diff --git a/files/pl/web/api/htmlformelement/name/index.html b/files/pl/web/api/htmlformelement/name/index.html new file mode 100644 index 0000000000..673ab8f847 --- /dev/null +++ b/files/pl/web/api/htmlformelement/name/index.html @@ -0,0 +1,44 @@ +--- +title: HTMLFormElement.name +slug: Web/API/HTMLFormElement/name +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/name +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

name zwraca nazwą bieżącego elementu FORM jako łańcuch znaków.

+ +

Składnia

+ +
string = form.name
+form.name =
+string
+
+ +

Przykład

+ +
form1 = document.getElementById("form1").name;
+if (form1 != document.form.form1) {
+   // przeglądarka nie obsługuje tego odniesienia do formularza
+}
+
+ +

Uwagi

+ +

Uwaga, ta własność jest do odczytu/zapisu, która znaczy, że możemy zmienić lub ustawić nazwę formularza.

+ +

Jeśli Twój FORM zawiera element nazwany "nazwany_element", następnie ten element przesłania własność form.name, więc nie możesz uzyskać do niego dostępu.

+ +

Internet Explorer (IE) nie pozwala nazwie tworzonego elementu używać createElement() będącej ustawieniem lub modyfikacją używającą własność name property.

+ +

Specyfikacja

+ +

DOM Level 2 HTML: name

+ +

{{ languages( { "en": "en/DOM/form.name" } ) }}

diff --git a/files/pl/web/api/htmlformelement/reset/index.html b/files/pl/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..919b982cae --- /dev/null +++ b/files/pl/web/api/htmlformelement/reset/index.html @@ -0,0 +1,37 @@ +--- +title: HTMLFormElement.reset +slug: Web/API/HTMLFormElement/reset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/reset +--- +

{{ APIRef }}

+ +

Podsumowanie

+ +

reset przywraca formularz do jego stanu początkowego.

+ +

Składnia

+ +
HTMLFormElement.reset()
+
+ +

Przykład

+ +
document.forms["myform"].reset();
+
+ +

Uwagi

+ +

Metoda ta robi to samo, co kliknięcie przycisku Wyczyść w formularzu.

+ +

Jeśli kontrolka formularza (jak np. przycisk Wyczyść) posiada nazwę lub id to przycisk Wyczyść będzie krył czyszczenie formularza.

+ +

Specyfikacja

+ +

DOM Level 2 HTML: reset

+ +

{{ languages( { "en": "en/DOM/form.reset" } ) }}

diff --git a/files/pl/web/api/htmlformelement/submit/index.html b/files/pl/web/api/htmlformelement/submit/index.html new file mode 100644 index 0000000000..078d02d4f5 --- /dev/null +++ b/files/pl/web/api/htmlformelement/submit/index.html @@ -0,0 +1,37 @@ +--- +title: HTMLFormElement.submit +slug: Web/API/HTMLFormElement/submit +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/submit +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

submit wysyła formularz.

+ +

Składnia

+ +
HTMLFormElement.submit()
+
+ +

Przykład

+ +
document.forms["myform"].submit()
+
+ +

Uwagi

+ +

Ta metoda działa tak samo jak naciśnięcie przycisku 'Wyślij' w formularzu.

+ +

Jeśli kontrolka formularza (taka jak przycisk Wyślij) posiada nazwę lub id zmiennej submit to będzie ona maskowała metodę submit formularza.

+ +

Specyfikacja

+ +

DOM Level 2 HTML: submit

+ +

{{ languages( { "ja": "ja/DOM/form.submit", "en": "en/DOM/form.submit" } ) }}

diff --git a/files/pl/web/api/htmlformelement/target/index.html b/files/pl/web/api/htmlformelement/target/index.html new file mode 100644 index 0000000000..f52fbe974b --- /dev/null +++ b/files/pl/web/api/htmlformelement/target/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLFormElement.target +slug: Web/API/HTMLFormElement/target +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/target +--- +

 

+ +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

target pobiera/ustawia element docelowy działania (np., w której ramce ma być wczytana zawartość strony).

+ +

Składnia

+ +
string = form.target
+form.target =
+string
+
+ +

Przykład

+ +
myForm.target = document.frames[1].name;
+
+ +

Specyfikacja

+ +

DOM Level 2 HTML: target

+ +

{{ languages( { "en": "en/DOM/form.target" } ) }}

diff --git a/files/pl/web/api/htmliframeelement/index.html b/files/pl/web/api/htmliframeelement/index.html new file mode 100644 index 0000000000..eaf5bb4fcb --- /dev/null +++ b/files/pl/web/api/htmliframeelement/index.html @@ -0,0 +1,288 @@ +--- +title: HTMLIFrameElement +slug: Web/API/HTMLIFrameElement +tags: + - API + - HTML DOM + - Interfejs + - Potrzebny przegląd + - Referencja +translation_of: Web/API/HTMLIFrameElement +--- +
{{APIRef("HTML DOM")}}
+ +

Interfejs HTMLIFrameElement dostarcza specjalne właściwości i metody (oprócz tych dziedziczonych po {{domxref("HTMLElement")}}) do manipulowania rozkładem i prezentacją wewnętrznych elementów ramki.

+ +

Właściwości

+ +

Dziedziczy właściwości od rodzica, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}
+
{{domxref("DOMString")}} określający zawijanie ramki w stosunku do otaczającego kontekstu.
+
{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}
+
{{domxref("Boolean")}} określa, czy ramka ma zostać umieszczona w trybie pełnoekranowym. Zobacz Używanie trybu pełnoekranowego dla szczegółów.
+
{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}
+
Zwraca obiekt {{domxref("Document")}}, reprezentujący aktualny kontekst przeglądania w ramce.
+
{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}
+
Zwraca obiekt {{domxref("WindowProxy")}}, referencję do okna przeglądarki w ramce.
+
{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}
+
{{domxref("DOMString")}} określający, czy tworzyć obramowania między ramkami.
+
{{domxref("HTMLIFrameElement.height")}}
+
{{domxref("DOMString")}} reprezentujący atrybut {{htmlattrxref("height", "iframe")}} oznaczający wysokość ramki.
+
{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}
+
{{domxref("DOMString")}} zawierający URI długiego opisu ramki.
+
{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}
+
{{domxref("DOMString")}} oznaczający wysokość marginesu.
+
{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}
+
{{domxref("DOMString")}} oznaczający szerokość marginesu.
+
{{domxref("HTMLIFrameElement.name")}}
+
{{domxref("DOMString")}} oznaczający atrybut {{htmlattrxref("name", "iframe")}}, zawierający nazwę ramki.
+
{{domxref("HTMLIFrameElement.sandbox")}}
+
{{domxref("DOMSettableTokenList")}} oznaczający atrybut {{htmlattrxref("sandbox", "iframe")}}, oznaczając dodatkowe ograniczenia na zachowanie zagnieżdżonej zawartości.
+
{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}
+
{{domxref("DOMString")}}, od którego zależy, czy przeglądarka ma dostarczyć paski przewijania.
+
{{domxref("HTMLIFrameElement.seamless")}} {{experimental_inline}}
+
{{domxref("Boolean")}}, odzwierciedlający atrybut {{htmlattrxref("seamless", "iframe")}} , oznaczający, że ramkę należy wyświetlać bezszwowo wewnątrz dokumentu rodzica.
+
{{domxref("HTMLIFrameElement.src")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "iframe")}} HTML attribute, containing the address of the content to be embedded.
+
{{domxref("HTMLIFrameElement.srcdoc")}}
+
Is a {{domxref("DOMString")}} that represents the content to display in the frame.
+
{{domxref("HTMLIFrameElement.width")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "iframe")}} HTML attribute, indicating the width of the frame.
+
+ +

Metody

+ +

Dziedziczy właściwości od rodzica, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLIFrameElement.setNfcFocus")}}
+
Część Browser API systemu Firefox OS, ustala, czy element {{htmlelement("iframe")}} może otrzymać zdarzenie NFC.
+
+ +

Historia specyfikacji

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusOpis
{{SpecName('HTML WHATWG', "the-iframe-element.html#the-iframe-element", "HTMLIFrameElement")}}{{Spec2('HTML WHATWG')}}Dodano właściwość allowFullscreen.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}{{Spec2('HTML5 W3C')}}Następujące właściwości uznano za przestarzałe: scrolling, marginWidth, marginHeight, longDesc, frameBorder, and align.
+ Te zostały dodane: srcdoc, sandbox, seamless, and contentWindow.
{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM2 HTML')}}Dodano właściwość contentDocument.
{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM1')}}Początkowa definicja.
+ +

Kompatybliność przeglądarek

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WłaściwośćChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support(Tak)1.0 (1.7 lub wcześniejsza)(Tak)(Tak)(Tak)
srcdoc4{{CompatGeckoDesktop(25)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
sandbox4{{CompatGeckoDesktop(17)}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
seamless {{experimental_inline}}4Nieobsługiwane{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contentDocument(Tak)(Tak)8.0 (dla wcześniejszych wersji używaj HTMLIFrameElement.contentWindow.document)(Tak)(Tak)
contentWindow{{CompatUnknown}}{{CompatUnknown}}(Tak){{CompatUnknown}}{{CompatUnknown}}
allowFullScreen {{experimental_inline}}17 {{property_prefix("-webkit")}}
+ Tylko codzienne wydania testowe		{{compatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}
+ {{compatGeckoDesktop(18.0)}}		NieobsługiwaneNieobsługiwaneNieobsługiwane
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support(Tak){{CompatGeckoMobile(1.0)}}(Tak)(Tak)(Tak)
srcdoc4{{CompatGeckoMobile(25)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
sandbox4{{CompatGeckoMobile(17)}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
seamless {{experimental_inline}}4{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contentDocument(Tak)(Tak){{CompatUnknown}}(Tak)(Tak)
contentWindow{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
allowFullScreen {{experimental_inline}}17 {{property_prefix("-webkit")}}
+ Tylko codzienne wydania testowe		{{compatGeckoMobile(9.0)}} {{property_prefix("-moz")}}
+ {{compatGeckoMobile(18.0)}}		NieobsługiwaneNieobsługiwaneNieobsługiwane
+
+ +

[1] Wcześniej, sandbox był obiektem {{domxref("DOMString")}} a nie {{domxref("DOMSettableTokenList")}}. Naprawiono to w Gecko 29.0 {{geckoRelease(29)}}) ({{bug(845067)}}). Inne przeglądarki mogą wciąż implementować to jako DOMString ponieważ  to późna zmiana w speyfikacji.

+ +

Uwagi do Firefox OS

+ +

Firefox OS rozszerza HTMLIFrameElement o obsługę elementów iframe przeglądarki. Te metody stworzono dla uprzywilejowanych aplikacji które chcą zaimplementować przeglądarkę jak aplikację na urządzenia z Firefox OS.Wtedy HTMLIFrameElement dziedziczy też od interfejsu {{domxref("EventTarget")}}. To learn how to implement such applications, see the Używanie API przeglądarki article.

+ +
+
{{domxref("HTMLIFrameElement.setVisible()","HTMLIFrameElement.setVisible(visible)")}}
+
Pozwala bezpośrednio zmienić widoczność ramek.
+
{{domxref("HTMLIFrameElement.getVisible()","HTMLIFrameElement.getVisible()")}}
+
Zwraca obecny stan widoczności ramki obiektem {{domxref("DOMRequest")}}.
+
{{domxref("HTMLIFrameElement.sendMouseEvent()","HTMLIFrameElement.sendMouseEvent(type, x, y, button, clickCount, modifiers)")}}
+
Wysyła zdarzenie myszy do przeglądarki.
+
{{domxref("HTMLIFrameElement.sendTouchEvent()","HTMLIFrameElement.sendTouchEvent(type, identifiers, touchesX, touchesY,radiisX, radiisY, rotationAngles, forces,count, modifiers)")}}
+
Wysyła zdarzenie dotknięcia do przeglądarki.
+
{{domxref("HTMLIFrameElement.goBack()","HTMLIFrameElement.goBack()")}}
+
Cofa przeglądarkę o 1 stronę w historii.
+
{{domxref("HTMLIFrameElement.goForward()","HTMLIFrameElement.goForward()")}}
+
Przechodzi dalej o 1 stronę w historii.
+
{{domxref("HTMLIFrameElement.reload()","HTMLIFrameElement.reload()")}}
+
Odświeża (ładuje ponownie) stronę internetową w przeglądarce.
+
{{domxref("HTMLIFrameElement.stop()","HTMLIFrameElement.stop()")}}
+
Zatrzymuje ładowanie zawartości ramki.
+
{{domxref("HTMLIFrameElement.purgeHistory()","HTMLIFrameElement.purgeHistory()")}}
+
Pozwala wyczyścić historię przeglądania.
+
{{domxref("HTMLIFrameElement.getScreenshot()","HTMLIFrameElement.getScreenshot(maxWidth, maxHeight)")}}
+
Robi zrzut ekranu, skalując do go rozmiaru maxWidth na maxHeight pikseli. Zwraca obiekt {{domxref("DOMRequest")}}.
+
{{domxref("HTMLIFrameElement.addNextPaintListener()","HTMLIFrameElement.addNextPaintListener()")}}
+
Dodaje odbiorcę zdarzenia powiadomianego, gdy ramka jest gotowa do odmalowania po raz pierwszy (Powiadamia się go, gdy pierwsze zdarzenie {{event("MozAfterPaint")}} jest odbierane z ramki.)
+
{{domxref("HTMLIFrameElement.removeNextPaintListener()","HTMLIFrameElement.removeNextPaintListener()")}}
+
Usuwa odbiorcę dodanego przez poprzednią funkcję.
+
{{domxref("HTMLIFrameElement.getCanGoBack()","HTMLIFrameElement.getCanGoBack()")}}
+
Zwraca obiekt {{domxref("DOMRequest")}} którego składowa result oznacza możliwość powrotu.
+
{{domxref("HTMLIFrameElement.getCanGoForward()","HTMLIFrameElement.getCanGoForward()")}}
+
Zwraca obiekt {{domxref("DOMRequest")}} którego składowa result oznacza możliwość powrotu.
+
+ +

Zobacz też

+ + diff --git a/files/pl/web/api/htmlselectelement/index.html b/files/pl/web/api/htmlselectelement/index.html new file mode 100644 index 0000000000..967409aadc --- /dev/null +++ b/files/pl/web/api/htmlselectelement/index.html @@ -0,0 +1,166 @@ +--- +title: HTMLSelectElement +slug: Web/API/HTMLSelectElement +tags: + - API + - HTML DOM + - HTMLSelectElement + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLSelectElement +--- +
{{APIRef("HTML DOM")}}
+ +

The HTMLSelectElement interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.

+ +
+
{{domxref("HTMLSelectElement.autofocus")}}
+
A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}
+
{{domxref("HTMLSelectElement.disabled")}}
+
A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.
+
{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}
+
An {{domxref("HTMLFormElement")}} referencing the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns null.
+
{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}
+
A {{domxref("NodeList")}} of {{HTMLElement("label")}} elements associated with the element.
+
{{domxref("HTMLSelectElement.length")}}
+
An unsigned long The number of {{HTMLElement("option")}} elements in this select element.
+
{{domxref("HTMLSelectElement.multiple")}}
+
A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.
+
{{domxref("HTMLSelectElement.name")}}
+
A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.
+
{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}
+
An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) elements contained by this element.
+
{{domxref("HTMLSelectElement.required")}}
+
A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}
+
{{domxref("HTMLSelectElement.selectedIndex")}}
+
A long reflecting the index of the first selected {{HTMLElement("option")}} element. The value -1 indicates no element is selected.
+
{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}
+
An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected.
+
{{domxref("HTMLSelectElement.size")}}
+
A long reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless multiple is true, in which case it is 4.
+
{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}
+
A {{domxref("DOMString")}} represeting the form control's type. When multiple is true, it returns "select-multiple"; otherwise, it returns "select-one".
+
{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}
+
A {{domxref("DOMString")}} representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints.
+
{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}
+
A {{domxref("ValidityState")}} reflecting the validity state that this control is in.
+
{{domxref("HTMLSelectElement.value")}}
+
A {{domxref("DOMString")}} reflecting the value of the form control. Returns the value property of the first selected option element if there is one, otherwise the empty string.
+
{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}
+
A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.
+
+ +

Methods

+ +

This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.

+ +
+
{{domxref("HTMLSelectElement.add()")}}
+
Adds an element to the collection of option elements for this select element.
+
{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}
+
Removes input focus from this element. This method is now implemented on {{domxref("HTMLElement")}}.
+
{{domxref("HTMLSelectElement.checkValidity()")}}
+
Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element (and returns false).
+
{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}
+
Gives input focus to this element. This method is now implemented on {{domxref("HTMLElement")}}.
+
{{domxref("HTMLSelectElement.item()")}}
+
Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.
+
{{domxref("HTMLSelectElement.namedItem()")}}
+
Gets the item in the options collection with the specified name. The name string can match either the id or the name attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.
+
{{domxref("HTMLSelectElement.remove()")}}
+
Removes the element at the specified index from the options collection for this select element.
+
{{domxref("HTMLSelectElement.reportValidity()")}}
+
This method reports the problems with the constraints on the element, if any, to the user. If there are problems, it fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element, and returns false; if there are no problems, it returns true.
+
{{domxref("HTMLSelectElement.setCustomValidity()")}}
+
Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.
+
+ +

Events

+ +

Listen to these events using {{domxref("EventTarget/addEventListener", "addEventListener()")}} or by assigning an event listener to the oneventname property of this interface:

+ +
+
{{domxref("HTMLElement/input_event", "input")}} event
+
Fires when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed.
+
+ +

Example

+ +

Get information about the selected option

+ +
/* assuming we have the following HTML
+<select id='s'>
+    <option>First</option>
+    <option selected>Second</option>
+    <option>Third</option>
+</select>
+*/
+
+var select = document.getElementById('s');
+
+// return the index of the selected option
+console.log(select.selectedIndex); // 1
+
+// return the value of the selected option
+console.log(select.options[select.selectedIndex].value) // Second
+
+ +

A better way to track changes to the user's selection is to watch for the {{domxref("HTMLElement/change_event", "change")}} event to occur on the <select>. This will tell you when the value changes, and you can then update anything you need to. See the example provided in the documentation for the change event for details.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML WHATWG')}}Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the autocomplete property and the reportValidity() method.
{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML5 W3C')}}Is a snapshot of {{SpecName("HTML WHATWG")}}.
+ It adds the autofocus, form, required, labels, selectedOptions, willValidate, validity and validationMessage properties.
+ The tabindex property and the blur() and focus() methods have been moved to {{domxref("HTMLElement")}}.
+ The methods item(), namedItem(), checkValidity() and setCustomValidity().
{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM2 HTML')}}options now returns an {{domxref("HTMLOptionsCollection")}}.
+ length now returns an unsigned long.
{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLSelectElement")}}

+ +

See also

+ + diff --git a/files/pl/web/api/htmltableelement/caption/index.html b/files/pl/web/api/htmltableelement/caption/index.html new file mode 100644 index 0000000000..971efe057b --- /dev/null +++ b/files/pl/web/api/htmltableelement/caption/index.html @@ -0,0 +1,39 @@ +--- +title: HTMLTableElement.caption +slug: Web/API/HTMLTableElement/caption +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement/caption +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

caption zwraca podpis tabeli.

+ +

Składnia

+ +
string = table.caption
+
+ +

Przykład

+ +
if (table.caption) {
+  // zrób coś z podpisem
+}
+
+ +

Uwagi

+ +

Własność ta zwraca void dla tabel bez elementu caption.

+ +

Specyfikacja

+ +

caption

+ +

Interface HTMLTableCaptionElement

+ +

{{ languages( { "en": "en/DOM/table.caption", "fr": "fr/DOM/table.caption" } ) }}

diff --git a/files/pl/web/api/htmltableelement/index.html b/files/pl/web/api/htmltableelement/index.html new file mode 100644 index 0000000000..d5d5a838ca --- /dev/null +++ b/files/pl/web/api/htmltableelement/index.html @@ -0,0 +1,72 @@ +--- +title: HTMLTableElement +slug: Web/API/HTMLTableElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement +--- +
{{ ApiRef() }}
+ +

Interfejs elementu HTML Table

+ +

Obiekt table pozwala na dostęp do interfejsu HTMLTableElement, który udostępnia specjalne własności i metody (będące poza zwykłym interfejsem obiektu element; własności i metody elementu dostępne są poprzez dziedziczenie) do ustawiania układu i wyglądu tabel w języku HTML.

+ +

Własności

+ +
+
{{domxref("HTMLTableElement.caption")}}
+
opis tabeli.
+
{{domxref("HTMLTableElement.tHead")}}
+
nagłówek tabeli.
+
{{domxref("HTMLTableElement.tFoot")}}
+
stopka tabeli.
+
{{domxref("HTMLTableElement.rows")}} {{readonlyInline}}
+
rows - liczba wierszy tabeli.
+
{{domxref("HTMLTableElement.tBodies")}} {{readonlyInline}}
+
'ciała' tabeli (tbody).
+
+ +
+
{{domxref("HTMLTableElement.align")}} {{obsolete_inline}}
+
ustawia/pobiera wyrównanie tabeli.
+
{{domxref("HTMLTableElement.bgColor")}} {{obsolete_inline}}
+
ustawia/pobiera kolor tła tabeli.
+
{{domxref("HTMLTableElement.border")}} {{obsolete_inline}}
+
ustawia/pobiera obramowanie tabeli.
+
{{domxref("HTMLTableElement.cellPadding")}} {{obsolete_inline}}
+
ustawia/pobiera dopełnienie komórki.
+
{{domxref("HTMLTableElement.cellSpacing")}} {{obsolete_inline}}
+
ustawia/pobiera odstępy pomiędzy komórkami.
+
{{domxref("HTMLTableElement.frame")}} {{obsolete_inline}}
+
określa które krawędzie tabeli mają obramowanie.
+
{{domxref("HTMLTableElement.rules")}} {{obsolete_inline}}
+
określa które wewnętrzne krawędzie są widoczne.
+
{{domxref("HTMLTableElement.summary")}} {{obsolete_inline}}
+
ustawia/pobiera podsumowanie tabeli.
+
{{domxref("HTMLTableElement.width")}} {{obsolete_inline}}
+
ustawia/pobiera szerokość tabeli.
+
+ +

Metody

+ +
+
{{domxref("HTMLTableElement.createTHead()")}}
+
tworzy nagłówek tabeli.
+
{{domxref("HTMLTableElement.deleteTHead()")}}
+
usuwa nagłówek tabeli.
+
{{domxref("HTMLTableElement.createTFoot()")}}
+
tworzy stopkę tabeli.
+
{{domxref("HTMLTableElement.deleteTFoot()")}}
+
usuwa stopkę tabeli.
+
{{domxref("HTMLTableElement.createCaption()")}}
+
tworzy nowy opis tabeli.
+
{{domxref("HTMLTableElement.deleteCaption()")}}
+
usuwa opis tabeli.
+
{{domxref("HTMLTableElement.insertRow()")}}
+
wstawia nowy wiersz.
+
{{domxref("HTMLTableElement.deleteRow()")}}
+
usuwa wiersz.
+
diff --git a/files/pl/web/api/htmltableelement/tfoot/index.html b/files/pl/web/api/htmltableelement/tfoot/index.html new file mode 100644 index 0000000000..2d7467db81 --- /dev/null +++ b/files/pl/web/api/htmltableelement/tfoot/index.html @@ -0,0 +1,39 @@ +--- +title: HTMLTableElement.tFoot +slug: Web/API/HTMLTableElement/tFoot +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement/tFoot +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

tFoot zwraca element TFOOT tabeli.

+ +

Składnia

+ +
HTMLTableSectionElementObject = table.tFoot
+
+ +

Przykład

+ +
if (table.tFoot == my_foot) {
+ ...
+}
+
+ +

Uwagi

+ +

Ta własność zwraca VOID, jeśli nie istnieje element TFOOT.

+ +

Specyfikacja

+ +

tfoot

+ +

Interface HTMLTableSectionElement

+ +

{{ languages( { "en": "en/DOM/table.tFoot" } ) }}

diff --git a/files/pl/web/api/htmltableelement/thead/index.html b/files/pl/web/api/htmltableelement/thead/index.html new file mode 100644 index 0000000000..413fe6fde1 --- /dev/null +++ b/files/pl/web/api/htmltableelement/thead/index.html @@ -0,0 +1,45 @@ +--- +title: HTMLTableElement.tHead +slug: Web/API/HTMLTableElement/tHead +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement/tHead +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

tHead zwraca THEAD (nagłówek) tabeli.

+ +

Składnia

+ +
th_el = table.tHead
+
+ +

Parametry

+ + + +

Przykład

+ +
if (table.tHead == my_head_el) {
+   ...
+}
+
+ +

Uwagi

+ +

Ta własność zwraca VOID, jeśli nie istnieje element THEAD.

+ +

Specyfikacje

+ +

thead

+ +

Interface HTMLTableSectionElement

+ +

{{ languages( { "en": "en/DOM/table.tHead" } ) }}

diff --git a/files/pl/web/api/index.html b/files/pl/web/api/index.html new file mode 100644 index 0000000000..2a13d2b016 --- /dev/null +++ b/files/pl/web/api/index.html @@ -0,0 +1,11 @@ +--- +title: Lista Web API +slug: Web/API +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/API +--- +

Kiedy piszemy kod w JavaScript dla sieci Web, możemy użyć wielu przydatnych API. Poniżej znajduje się lista dostępnych interfejsów (dokładnie, typów obiektów), które możesz wykorzystać podczas budowy swojej strony czy aplikacji internetowej.

+ +
{{APIListAlpha}}
diff --git a/files/pl/web/api/location/index.html b/files/pl/web/api/location/index.html new file mode 100644 index 0000000000..537d3bc90a --- /dev/null +++ b/files/pl/web/api/location/index.html @@ -0,0 +1,114 @@ +--- +title: Location +slug: Web/API/Location +tags: + - API + - HTML DOM + - Interface + - Location + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Location +--- +

{{APIRef("HTML DOM")}}

+ +

The Location interface represents the location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the {{domxref("Document")}} and {{domxref("Window")}} interface have such a linked Location, accessible via {{domxref("Document.location")}} and {{domxref("Window.location")}} respectively.

+ +

Properties

+ +

The Location interface doesn't inherit any property, but implements those from {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.href")}}
+
Is a {{domxref("DOMString")}} containing the entire URL. If changed, the associated document navigates to the new page. It can be set from a different origin than the associated document.
+
{{domxref("Location.protocol")}}
+
Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final ':'.
+
{{domxref("Location.host")}}
+
Is a {{domxref("DOMString")}} containing the host, that is the hostname, a ':', and the port of the URL.
+
{{domxref("Location.hostname")}}
+
Is a {{domxref("DOMString")}} containing the domain of the URL.
+
{{domxref("Location.port")}}
+
Is a {{domxref("DOMString")}} containing the port number of the URL.
+
{{domxref("Location.pathname")}}
+
Is a {{domxref("DOMString")}} containing an initial '/' followed by the path of the URL.
+
{{domxref("Location.search")}}
+
Is a {{domxref("DOMString")}} containing a '?' followed by the parameters or "querystring" of the URL. Modern browsers provide URLSearchParams and URL.searchParams to make it easy to parse out the parameters from the querystring.
+
{{domxref("Location.hash")}}
+
Is a {{domxref("DOMString")}} containing a '#' followed by the fragment identifier of the URL.
+
{{domxref("Location.username")}}
+
Is a {{domxref("DOMString")}} containing the username specified before the domain name.
+
{{domxref("Location.password")}}
+
Is a {{domxref("DOMString")}} containing the password specified before the domain name.
+
{{domxref("Location.origin")}} {{readOnlyInline}}
+
Returns a {{domxref("DOMString")}} containing the canonical form of the origin of the specific location.
+
+ +

Methods

+ +

The Location interface doesn't inherit any method, but implements those from {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.assign()")}}
+
Loads the resource at the URL provided in parameter.
+
{{domxref("Location.reload()")}}
+
Reloads the resource from the current URL. Its optional unique parameter is a {{domxref("Boolean")}}, which, when it is true, causes the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache.
+
{{domxref("Location.replace()")}}
+
Replaces the current resource with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session {{domxref("History")}}, meaning the user won't be able to use the back button to navigate to it.
+
{{domxref("Location.toString()")}}
+
Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.
+
+ +

Examples

+ +
// Create anchor element and use href property for the purpose of this example
+// A more correct alternative is to browse to the URL and use document.location or window.location
+var url = document.createElement('a');
+url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
+console.log(url.href);      // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
+console.log(url.protocol);  // https:
+console.log(url.host);      // developer.mozilla.org:8080
+console.log(url.hostname);  // developer.mozilla.org
+console.log(url.port);      // 8080
+console.log(url.pathname);  // /en-US/search
+console.log(url.search);    // ?q=URL
+console.log(url.hash);      // #search-results-close-container
+console.log(url.origin);    // https://developer.mozilla.org
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "browsers.html#the-location-interface", "Location")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Location")}}

+ +

See also

+ + diff --git a/files/pl/web/api/location/reload/index.html b/files/pl/web/api/location/reload/index.html new file mode 100644 index 0000000000..fc859dbfd3 --- /dev/null +++ b/files/pl/web/api/location/reload/index.html @@ -0,0 +1,67 @@ +--- +title: Location.reload() +slug: Web/API/Location/reload +tags: + - API + - HTML-DOM + - Location + - Metodă +translation_of: Web/API/Location/reload +--- +

{{ APIRef("HTML DOM") }}

+ +

Metoda Location.reload() ponownie ładuje zasób z bieżącego adresu URL. Jej opcjonalnym i jednocześnie unikalnym parametrem jest parametr {{domxref("Boolean")}}. Jeśli przyjmie on wartość true, powoduje zawsze ponownie ładowanie strony z serwera. Jeśli jego wartość wynosi false lub nie jest zdefiniowana, przeglądarka może ponownie załadować stronę z pamięci podręcznej. Poza domyślnym zachowaniem pamięci cache, flaga forcedReload wpływa również na to, jak niektóre przeglądarki obsługują pozycję przewijania strony: zwykłe przeładowanie próbuje przywrócić pozycję przewijania po ponownym załadowaniu strony, natomiast w trybie wymuszonym (gdy parametr jest ustawiony na wartość true) nowy DOM zostaje wczytany ze scrollTop == 0.

+ +

Jeśli przypisanie nie może się wydarzyć z powodu naruszenia bezpieczeństwa, zostanie zgłoszony wyjątek {{domxref("DOMException")}} typu SECURITY_ERROR. Dzieje się tak, gdy pochodzenie skryptu wywołującego metodę różni się od pochodzenia strony opisanej przez obiekt {{domxref("Location")}} (zazwyczaj kiedy skrypt jest hostowany na innej domenie).

+ +

Składnia

+ +
object.reload(forcedReload);
+
+ +

Parametry

+ +
+
forcedReload {{optional_inline}}
+
Jest flagą {{domxref("Boolean")}}, która przyjmując wartość true, zawsze powoduje przeładowanie strony z serwera. Jeśli jej wartość to false lub nie została ona zdefiniowana, przeglądarka może wczytać stronę z pamięci podręczniej (pamięci cache).
+
+ +

Przykłady

+ +
// Przeładuj bieżącą stronę bez cache
+window.location.reload(true);
+ +

Lista specyfikacji

+ + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}{{Spec2('HTML WHATWG')}}Bez zmian od {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}{{Spec2('HTML5 W3C')}}Początkowa definicja.
+ +

Zgodność przeglądarek

+ + + +

{{Compat("api.Location.reload")}}

+ +

Zobacz także

+ + diff --git a/files/pl/web/api/mediaelementaudiosourcenode/index.html b/files/pl/web/api/mediaelementaudiosourcenode/index.html new file mode 100644 index 0000000000..81bbce3c25 --- /dev/null +++ b/files/pl/web/api/mediaelementaudiosourcenode/index.html @@ -0,0 +1,84 @@ +--- +title: MediaElementAudioSourceNode +slug: Web/API/MediaElementAudioSourceNode +translation_of: Web/API/MediaElementAudioSourceNode +--- +

{{APIRef("Web Audio API")}}

+ +
+

The MediaElementAudioSourceNode interface represents an audio source consisting of an HTML5 {{ htmlelement("audio") }} or {{ htmlelement("video") }} element. It is an {{domxref("AudioNode")}} that acts as an audio source.

+
+ +

A MediaElementSourceNode has no inputs and exactly one output, and is created using the {{domxref("AudioContext.createMediaElementSource")}} method. The amount of channels in the output equals the number of channels of the audio referenced by the {{domxref("HTMLMediaElement")}} used in the creation of the node, or is 1 if the {{domxref("HTMLMediaElement")}} has no audio.

+ + + + + + + + + + + + + + + + +
Number of inputs0
Number of outputs1
Channel countdefined by the media in the {{domxref("HTMLMediaElement")}} passed to the {{domxref("AudioContext.createMediaElementSource")}} method that created it.
+ +

Constructor

+ +
+
{{domxref("MediaElementAudioSourceNode.MediaElementAudioSourceNode", "MediaElementAudioSourceNode()")}}
+
Creates a new MediaElementAudioSourceNode object instance.
+
+ +

Properties

+ +

Inherits properties from its parent, {{domxref("AudioNode")}}.

+ +
+
{{domxref("MediaElementAudioSourceNode.mediaElement", "mediaElement")}} {{ReadOnlyInline}}
+
The {{domxref("HTMLMediaElement")}} used when constructing this MediaStreamAudioSourceNode.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("AudioNode")}}.

+ +

Example

+ +

{{page("/en-US/docs/Web/API/AudioContext.createMediaElementSource","Example")}}

+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#mediaelementaudiosourcenode', 'MediaElementAudioSourceNode')}}{{Spec2('Web Audio API')}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.MediaElementAudioSourceNode")}}

+
+ +

See also

+ + diff --git a/files/pl/web/api/midiaccess/index.html b/files/pl/web/api/midiaccess/index.html new file mode 100644 index 0000000000..6155b26b02 --- /dev/null +++ b/files/pl/web/api/midiaccess/index.html @@ -0,0 +1,70 @@ +--- +title: MIDIAccess +slug: Web/API/MIDIAccess +tags: + - API + - Interfejs +translation_of: Web/API/MIDIAccess +--- +

{{SeeCompatTable}}{{APIRef("Web MIDI API")}} 

+ +

Interfejs MIDIAccess pochodzący z Web MIDI API, dostarcza metod wyliczania urządzeń wejściowych i wyjściowych MIDI oraz dostępu do tych urządzeń.

+ +

Właściwości

+ +
+
{{domxref("MIDIAccess.inputs")}} {{readonlyinline}}
+
Zwraca instancję {{domxref("MIDIInputMap")}} dostarczając metod dostępu do wszystkich dostępnych portów wejśiowych MIDI.
+
{{domxref("MIDIAccess.outputs")}} {{readonlyinline}}
+
Zwraca instancję {{domxref("MIDIOutputMap")}} dostarczając metod dostępu do wszystkich dostępnych portów wyjśiowych MIDI.
+
{{domxref("MIDIAccess.sysexEnabled")}} {{readonlyinline}}
+
Parametr zerojedynkowy, wskazujący na wsparcie system exclusive dla obecnej instancji MIDIAccess.
+
+ +

Procedury obsługi zdarzeń

+ +
+
{{domxref("MIDIAccess.onstatechange")}}
+
Jest wywoływana za każdym razem, gdy nowy port MIDI zostaniedodany lub nastąpi zmiana stanu istniejącego portu.
+
+ +

Przykłady

+ +
navigator.requestMIDIAccess()
+  .then(function(access) {
+
+     // Get lists of available MIDI controllers
+     const inputs = access.inputs.values();
+     const outputs = access.outputs.values();
+
+     access.onstatechange = function(e) {
+
+       // Print information about the (dis)connected MIDI controller
+       console.log(e.port.name, e.port.manufacturer, e.port.state);
+     };
+  });
+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('WebMIDI API','#midiaccess-interface')}}{{Spec2('WebMIDI API')}}Definicja wstępna.
+ +

Kompatybilność przeglądarek

+ +

{{Compat("api.MIDIAccess")}}

+ +
+ +
diff --git a/files/pl/web/api/mousescrollevent/index.html b/files/pl/web/api/mousescrollevent/index.html new file mode 100644 index 0000000000..ed0ab35316 --- /dev/null +++ b/files/pl/web/api/mousescrollevent/index.html @@ -0,0 +1,126 @@ +--- +title: MouseScrollEvent +slug: Web/API/MouseScrollEvent +translation_of: Web/API/MouseScrollEvent +--- +

{{APIRef("DOM Events")}}{{ non-standard_header() }}{{deprecated_header}}

+ +

The DOM MouseScrollEvent represents events that occur due to the user moving a mouse wheel or similar input device.

+ +

Use standardardized {{ domxref("WheelEvent") }} instead of this legacy event object if available.

+ +

Method overview

+ + + + + + + +
void initMouseScrollEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in nsIDOMAbstractView viewArg, in long detailArg, in long screenXArg, in long screenYArg, in long clientXArg, in long clientYArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in unsigned short buttonArg, in nsIDOMEventTarget relatedTargetArg, in long axis);
+ +

Attributes

+ + + + + + + + + + + + + + +
AttributeTypeDescription
axislongIndicates scroll direction. Read only.
+ +

Constants

+ +

Delta modes

+ + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
HORIZONTAL_AXIS0x01The event is caused by horizontal wheel operation.
VERTICAL_AXIS0x02The event is caused by vertical wheel operation.
+ +

Methods

+ +

initMouseScrollEvent()

+ +

See nsIDOMMouseScrollEvent::initMouseScrollEvent().

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatNo() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatGeckoMobile("1.9.1") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

See also

+ + diff --git a/files/pl/web/api/navigator/appcodename/index.html b/files/pl/web/api/navigator/appcodename/index.html new file mode 100644 index 0000000000..ec0da7157c --- /dev/null +++ b/files/pl/web/api/navigator/appcodename/index.html @@ -0,0 +1,30 @@ +--- +title: window.navigator.appCodeName +slug: Web/API/Navigator/appCodeName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/appCodeName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca wewnętrzną nazwę "kodową" aktualnej przeglądarki.

+

Składnia

+
codeName = window.navigator.appCodeName
+
+

Parametry

+ +

Przykład

+
dump(window.navigator.appCodeName);
+
+

Uwagi

+

Mozilla, Netscape 6 i IE5 używają wewnętrznej nazwy "Mozilla".

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.navigator.appCodeName", "ja": "ja/DOM/window.navigator.appCodeName" } ) }}

diff --git a/files/pl/web/api/navigator/appname/index.html b/files/pl/web/api/navigator/appname/index.html new file mode 100644 index 0000000000..d651ac3682 --- /dev/null +++ b/files/pl/web/api/navigator/appname/index.html @@ -0,0 +1,29 @@ +--- +title: window.navigator.appName +slug: Web/API/Navigator/appName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/appName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca oficjalną nazwę przeglądarki.

+

Składnia

+
appName = window.navigator.appName
+
+

Parametry

+ +

Przykład

+
dump(window.navigator.appName);
+// dla NS6 wypisuje w konsoli "Navigator"
+
+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.navigator.appName", "ja": "ja/DOM/window.navigator.appName" } ) }}

diff --git a/files/pl/web/api/navigator/appversion/index.html b/files/pl/web/api/navigator/appversion/index.html new file mode 100644 index 0000000000..3d08f23cee --- /dev/null +++ b/files/pl/web/api/navigator/appversion/index.html @@ -0,0 +1,32 @@ +--- +title: window.navigator.appVersion +slug: Web/API/Navigator/appVersion +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/appVersion +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca wersję przeglądarki jako łańcuch znaków.

+

Składnia

+
ver = window.navigator.appVersion
+
+

Parametry

+ +

Przykład

+
if ( navigator.appVersion.charAt(0) == "5" ) {
+    // prawdopodobnie jest to piąta wersja przeglądarki
+ }
+
+

Uwagi

+

Własność window.navigator.userAgent również zawiera numer wersji przeglądarki (przykładowo: "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1"), lecz powinniśmy mieć świadomość jak łatwo jest zmienić ciąg user-agent i "naśladować" inne przeglądarki, platformy lub pośredników użytkownika oraz jak bezmyślni są sami producenci przeglądarek w ustawianiu tej wartości. Własności window.navigator.appVersion i window.navigator.userAgent są dość często stosowane w kodzie "szpiegującym przeglądarki": skryptach, które próbują dowiedzieć się jakiej używasz przeglądarki i wyświetlić stosowną do niej stronę.

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.navigator.appVersion", "ja": "ja/DOM/window.navigator.appVersion" } ) }}

diff --git a/files/pl/web/api/navigator/buildid/index.html b/files/pl/web/api/navigator/buildid/index.html new file mode 100644 index 0000000000..2f35af6f92 --- /dev/null +++ b/files/pl/web/api/navigator/buildid/index.html @@ -0,0 +1,41 @@ +--- +title: Navigator.buildID +slug: Web/API/Navigator/buildID +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/buildID +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca identyfikator kompilacji przeglądarki.

+ +

Składnia

+ +
buildID =
+navigator.buildID;
+
+ +

buildID jest identyfikatorem kompilacji aplikacji, zwracanym jako łańcuch znakówi. ID kompilacji jest w formie <tt>YYYYMMDDHH</tt> (gdzie: Y - rok, M - miesiąc, D - dzień, H - godzina).

+ +

Przykład

+ +
dump(window.navigator.buildID);
+// wyświetla w konsoli "2006090803"
+
+ +

Uwaga

+ +

Dostępne w Firefoksie 2 (Gecko 1.8.1) i późniejszych. Zaimplementowane w {{ Bug(345993) }}.

+ +

Specyfikacja

+ +

Nie jest częścią żadnego publicznego standardu.

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.buildID", "ja": "ja/DOM/window.navigator.buildID" } ) }}

diff --git a/files/pl/web/api/navigator/cookieenabled/index.html b/files/pl/web/api/navigator/cookieenabled/index.html new file mode 100644 index 0000000000..43c12ee2de --- /dev/null +++ b/files/pl/web/api/navigator/cookieenabled/index.html @@ -0,0 +1,45 @@ +--- +title: Navigator.cookieEnabled +slug: Web/API/Navigator/cookieEnabled +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/cookieEnabled +--- +

{{ ApiRef() }}

+ +

Posumowanie

+ +

Zwraca wartość logiczną tylko do odczytu, wskazującą czy obsługa ciasteczek jest włączona, czy nie.

+ +

Składnia

+ +
var cookieEnabled = navigator.cookieEnabled;
+
+ + + +

Przykład

+ +
if (!navigator.cookieEnabled) {
+  // poinformuj użytkownika, że przy włączonych ciasteczkach
+  // strona jest bardziej użyteczna
+}
+
+ +

Uwagi

+ +

W związku z {{ Bug(230350) }}, cookieEnabled może zwracać błędny wynik w aplikacjach opartych o Gecko.

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.cookieEnabled", "ja": "ja/DOM/window.navigator.cookieEnabled" } ) }}

diff --git a/files/pl/web/api/navigator/index.html b/files/pl/web/api/navigator/index.html new file mode 100644 index 0000000000..6ef2055b7a --- /dev/null +++ b/files/pl/web/api/navigator/index.html @@ -0,0 +1,119 @@ +--- +title: Navigator +slug: Web/API/Navigator +translation_of: Web/API/Navigator +--- +

{{ apiref() }}

+ +

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

+ +

A Navigator object can be retrieved using the read-only {{domxref("Window.navigator")}} property.

+ +

Properties

+ +

Doesn't inherit any property, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorGeolocation")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NetworkInformation")}}.

+ +

Standard

+ +
+
{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.
+
{{domxref("Navigator.battery")}} {{readonlyInline}}
+
Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.
+
{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}
+
Provides a {{domxref("Connection")}} with information about the network connection of a device.
+
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
+
Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the browser is working online.
+
{{domxref("Navigator.oscpu")}}
+
Returns a string that represents the current operating system.
+
{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.
+
{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}
+
Always returns 'Gecko', on any browser. This property is kept only for compatibility purpose.
+
{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}
+
Returns the user agent string for the current browser.
+
{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}
+
Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the associated document.
+
+ +

Non-standard

+ +
+
{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}
+
Returns the build identifier of the browser (e.g., "2006090803").
+
{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}
+
Returns a boolean indicating whether cookies are enabled in the browser or not.
+
{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}
+
Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.
+
{{domxref("navigator.id")}} {{non-standard_inline}}
+
Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for BrowserID to your web site.
+
{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}
+
Returns an {{domxref("window.navigator.mozApps", "Apps")}} object you can use to install, manage, and control Open Web apps.
+
{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}
+
The navigator.mozAudioChannelManager object provides access to the {{domxref("mozAudioChannelManager")}} interface, which is used to manage your Firefox OS device's audio channels, including setting what channel's volume to affect when the volume buttons are pressed inside a particular app.
+
{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}
+ {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}
+
Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.
+
{{domxref("navigator.mozSocial")}} {{non-standard_inline}}
+
The Object, returned by the navigator.mozSocial property, is available within the social media provider's panel to provide functionality it may need.
+
{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}
+
Returns the build number of the current browser (e.g., "20060909").
+
{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}
+
Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".
+
{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}
+
Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.
+
{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}
+
Returns the vendor name of the current browser (e.g., "Netscape6").
+
{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}
+
Returns the vendor version number (e.g. "6.1").
+
navigator.webkitPointer {{non-standard_inline}}
+
Returns a PointerLock object for the Mouse Lock API.
+
+ +

Methods

+ +

Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NavigatorStorageUtils")}}.

+ +

Standard

+ +
+
{{domxref("NavigatorUserMedia.getUserMedia()")}}
+
After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.
+
{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}
+
Allows web sites to register themselves as a possible handler for a given MIME type.
+
{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}
+
Allows web sites to register themselves as a possible handler for a given protocol.
+
{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}
+
Returns false. JavaScript taint/untaint functions removed in JavaScript 1.2.
+
{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}
+
Causes vibration on devices with support for it. Does nothing if vibration support isn't available.
+
+ +

Non standard

+ +
+
{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}
+
Lets code check to see if the document at a given URI is available without using the network.
+
{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}
+
Allows in-app payment.
+
{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}
+
Sets a user preference. This method is only available to privileged code and is obsolete; you should use the XPCOM Preferences API instead.
+
{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}
+
Request a wake lock for a resource. A wake lock prevents a specific part of a device from being turned off automatically.
+
diff --git a/files/pl/web/api/navigator/javaenabled/index.html b/files/pl/web/api/navigator/javaenabled/index.html new file mode 100644 index 0000000000..291d27782e --- /dev/null +++ b/files/pl/web/api/navigator/javaenabled/index.html @@ -0,0 +1,39 @@ +--- +title: NavigatorPlugins.javaEnabled +slug: Web/API/Navigator/javaEnabled +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorPlugins/javaEnabled +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Ta metoda wskazuje czy w aktualnej przeglądarce została włączona obsługa Javy.

+ +

Składnia

+ +
result = window.navigator.javaEnabled()
+
+ +

Przykład

+ +
if (window.navigator.javaEnabled()) {
+   // przeglądarka posiada Javę
+}
+
+ +

Uwagi

+ +

Zwracana przez tę metodę wartość wskazuje czy Java jest włączona czy też nie - a nie czy przeglądarka w ogóle obsługuje Javę.

+ +

Specyfikacja

+ +

DOM Level 0. Nie jest częścią specyfikacji.

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.javaEnabled", "ja": "ja/DOM/window.navigator.javaEnabled" } ) }}

diff --git a/files/pl/web/api/navigator/language/index.html b/files/pl/web/api/navigator/language/index.html new file mode 100644 index 0000000000..1dcc4daabc --- /dev/null +++ b/files/pl/web/api/navigator/language/index.html @@ -0,0 +1,45 @@ +--- +title: NavigatorLanguage.language +slug: Web/API/Navigator/language +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorLanguage/language +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca łańcuch znaków reprezentujący wersję językową przeglądarki.

+ +

Składnia

+ +
lang = window.navigator.language
+
+ +

Parametry

+ + + +

Przykład

+ +
if ( window.navigator.language != "pl" ) {
+ doLangSelect(window.navigator.language);
+}
+
+ +

Uwagi

+ +

Ta własność pojawia się również jako część łańcucha znaków navigator.userAgent.

+ +

Specyfikacja

+ +

DOM Level 0. Nie jest częścią specyfikacji.

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.language", "ja": "ja/DOM/window.navigator.language" } ) }}

diff --git a/files/pl/web/api/navigator/mimetypes/index.html b/files/pl/web/api/navigator/mimetypes/index.html new file mode 100644 index 0000000000..371e75eff2 --- /dev/null +++ b/files/pl/web/api/navigator/mimetypes/index.html @@ -0,0 +1,40 @@ +--- +title: NavigatorPlugins.mimeTypes +slug: Web/API/Navigator/mimeTypes +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorPlugins/mimeTypes +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca obiekt MimeTypeArray, który zawiera listę obiektów MimeType reprezentujących typy MIME rozpoznawane przez przeglądarkę.

+ +

Składnia

+ +
mimeTypes = navigator.mimeTypes;
+
+ +

mimeTypes jest obiektem MimeTypeArray, który posiada zarówno własność length jak i metody item(index) oraz namedItem(name).

+ +

Przykład

+ +
  alert(window.navigator.mimeTypes.item(0).description); // wyświetli ostrzeżenie "Mozilla Default Plug-in"
+
+ +

Uwagi

+ +

Wartością własności type w zerowym elemencie (obiekt MimeType "Mozilla Default Plug-in") jest * zamiast typowego formatu MIME jak np. "image/x-macpaint"

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.mimeTypes", "ja": "ja/DOM/window.navigator.mimeTypes" } ) }}

diff --git a/files/pl/web/api/navigator/mozpermissionsettings/index.html b/files/pl/web/api/navigator/mozpermissionsettings/index.html new file mode 100644 index 0000000000..df0966e04e --- /dev/null +++ b/files/pl/web/api/navigator/mozpermissionsettings/index.html @@ -0,0 +1,33 @@ +--- +title: Navigator.mozPermissionSettings +slug: Web/API/Navigator/mozPermissionSettings +translation_of: Archive/B2G_OS/API/Navigator/mozPermissionSettings +--- +

{{APIRef("Firefox OS")}}{{ non-standard_header() }}

+ +

{{ B2GOnlyHeader2('certified') }}

+ +

Summary

+ +

Returns a {{ domxref("PermissionSettings") }} object you can use to get and set permissions of apps on the Firefox OS platform.

+ +

Syntax

+ +
var permissions = window.navigator.mozPermissionSettings;
+
+ +

Value

+ +

navigator.mozPermissionSettings is a {{domxref("PermissionSettings")}} object.

+ +

Specification

+ +

Not part of any specification.

+ +

See also

+ + diff --git a/files/pl/web/api/navigator/online/index.html b/files/pl/web/api/navigator/online/index.html new file mode 100644 index 0000000000..20bbd73fb0 --- /dev/null +++ b/files/pl/web/api/navigator/online/index.html @@ -0,0 +1,47 @@ +--- +title: NavigatorOnLine.onLine +slug: Web/API/Navigator/onLine +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorOnLine/onLine +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca wartość logiczną wskazującą czy przeglądarka jest w trybie online, czy nie.

+ +

Składnia

+ +
online =
+window.navigator.onLine;
+
+ + + +

Przykład

+ +
alert(navigator.onLine ? "Jesteś online" : "Jesteś offline");
+
+ +

Uwagi

+ +

Zobacz Zdarzenia Online/Offline‎, aby uzyskać bardziej szczegółowy opis tej własności, jak również nowych funkcji związanych z trybem offline, wprowadzonych w Firefoksie 3.

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +

Opisana w szkicu roboczym HTML 5

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.onLine", "fr": "fr/DOM/window.navigator.onLine", "ja": "ja/DOM/window.navigator.onLine" } ) }}

diff --git a/files/pl/web/api/navigator/oscpu/index.html b/files/pl/web/api/navigator/oscpu/index.html new file mode 100644 index 0000000000..69a9f9deb4 --- /dev/null +++ b/files/pl/web/api/navigator/oscpu/index.html @@ -0,0 +1,41 @@ +--- +title: Navigator.oscpu +slug: Web/API/Navigator/oscpu +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/oscpu +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca łańcuch znaków reprezentujący bieżący system operacyjny.

+ +

Składnia

+ +
oscpuInfo = window.navigator.oscpu
+
+ + + +

Przykład

+ +
function osInfo() {
+alert(window.navigator.oscpu);
+}
+// zwraca: Windows NT 6.0
+
+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.oscpu", "ja": "ja/DOM/window.navigator.oscpu" } ) }}

diff --git a/files/pl/web/api/navigator/platform/index.html b/files/pl/web/api/navigator/platform/index.html new file mode 100644 index 0000000000..3a73ee3c2e --- /dev/null +++ b/files/pl/web/api/navigator/platform/index.html @@ -0,0 +1,28 @@ +--- +title: window.navigator.platform +slug: Web/API/Navigator/platform +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/platform +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca łańcuch znaków reprezentujący platformę przeglądarki.

+

Składnia

+
platform =navigator.platform
+
+

platform jest łańcuchem znaków z jedną z następujących wartości: "Win32", "Linux i686", "MacPPC", "MacIntel" lub inną.

+

Przykład

+
alert(navigator.platform);
+
+

Uwagi

+

Jeśli Twój kod nie jest uprzywilejowany (chrome lub przynajmniej kod z uprawnieniem UniversalBrowserRead), może on otrzymać wartość opcji <tt>general.platform.override</tt> zamiast prawdziwej platformy.

+

Specyfikacja

+

{{ DOM0() }}

+
+  
+

{{ languages( { "en": "en/DOM/window.navigator.platform", "ja": "ja/DOM/window.navigator.platform" } ) }}

diff --git a/files/pl/web/api/navigator/plugins/index.html b/files/pl/web/api/navigator/plugins/index.html new file mode 100644 index 0000000000..c60d9f6614 --- /dev/null +++ b/files/pl/web/api/navigator/plugins/index.html @@ -0,0 +1,58 @@ +--- +title: NavigatorPlugins.plugins +slug: Web/API/Navigator/plugins +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorPlugins/plugins +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca obiekt PluginArray będący listą wszystkich wtyczek zainstalowanych w aplikacji.

+ +

Składnia

+ +
plugins = navigator.plugins;
+
+ +

plugins jest tabelą PluginArray zawierającą obiekty Plugin reprezentujące zainstalowane wtyczki.

+ +

Zwrócona wartość nie jest jest tablicą JavaScript, ale posiada własność length i obsługuje dostęp do poszczególnych elementów za pomocą notacji nawiasowej (plugins{{ mediawiki.external(2) }}) jak również poprzez metody item(index ) i namedItem("name" ).

+ +

Przykład

+ +

Poniższy przykład wyświetla wewnątrz zaawansowanego dokumentu informacje o zainstalowanych wtyczkach. Zauważ własności dostępne w obiekcie Plugin: name, filename i description.

+ +
<script type="text/javascript">
+   var L = navigator.plugins.length;
+   document.write(L.toString().bold() + " Plugin(s)".bold());
+   document.write("<br>");
+   document.write("Nazwa wtyczki | Nazwa pliku | Opis".bold());
+   document.write("<br>");
+   for(var i=0; i<L; i++) {
+     document.write(navigator.plugins[i].name);
+     document.write(" | ");
+     document.write(navigator.plugins[i].filename);
+     document.write(" | ");
+     document.write(navigator.plugins[i].description);
+     document.write("<br>");
+   }
+</script>
+
+ +

Uwagi

+ +

Obiekt Plugin wyświetla skromny interfejs w celu uzyskania informacji o różnych wtyczkach zainstalowanych w przeglądarce. Lista wtyczek jest również dostępna poprzez wprowadzenie about:plugins w pasku adresu.

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.plugins", "ja": "ja/DOM/window.navigator.plugins" } ) }}

diff --git a/files/pl/web/api/navigator/product/index.html b/files/pl/web/api/navigator/product/index.html new file mode 100644 index 0000000000..50d34a4a66 --- /dev/null +++ b/files/pl/web/api/navigator/product/index.html @@ -0,0 +1,38 @@ +--- +title: window.navigator.product +slug: Web/API/Navigator/product +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/product +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność ta zwraca nazwę produktu bieżącej przeglądarki.

+

Składnia

+
productName = window.navigator.product
+
+

Parametry

+ +

Przykład

+
<script>
+function prod() {
+  dt = document.getElementById("d");
+  dt.innerHTML = window.navigator.product;
+}
+</script>
+<button onclick="prod();">produkt</button>
+<div id="d"> </div>
+// zwraca "Gecko"
+
+

Uwagi

+

Produkt jest tą częścią pełnego łańcucha identyfikatora przeglądarki, która następuje bezpośrednio po platformie. Na przykład, w identyfikatorze przeglądarki dla Netscape 6.1 produktem jest "Gecko", a pełny ciąg identyfikatora przeglądarki jest następujący: Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.navigator.product", "ja": "ja/DOM/window.navigator.product" } ) }}

diff --git a/files/pl/web/api/navigator/productsub/index.html b/files/pl/web/api/navigator/productsub/index.html new file mode 100644 index 0000000000..e5e580cbe9 --- /dev/null +++ b/files/pl/web/api/navigator/productsub/index.html @@ -0,0 +1,52 @@ +--- +title: Navigator.productSub +slug: Web/API/Navigator/productSub +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/productSub +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

productSub zwraca numer kompilacji bieżącej przeglądarki.

+ +

Składnia

+ +
prodSub = window.navigator.productSub
+
+ +

Parameters

+ + + +

Przykład

+ +
<script>
+function prodsub() {
+  dt = document.getElementById("d").childNodes[0];
+  dt.data = window.navigator.productSub;
+}
+</script>
+<button onclick="prodsub();">productSub</button>
+// zwraca: 20010725
+
+ +

Uwagi

+ +

W IE własność ta zwraca wartość nieokreśloną.

+ +

W Apple Safari własność zawsze zwraca 20030107.

+ +

Specyfikacja

+ +

DOM Level 0. Nie jest częścią specyfikacji.

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.productSub", "ja": "ja/DOM/window.navigator.productSub" } ) }}

diff --git a/files/pl/web/api/navigator/registercontenthandler/index.html b/files/pl/web/api/navigator/registercontenthandler/index.html new file mode 100644 index 0000000000..58f6f5dd39 --- /dev/null +++ b/files/pl/web/api/navigator/registercontenthandler/index.html @@ -0,0 +1,49 @@ +--- +title: Navigator.registerContentHandler +slug: Web/API/Navigator/registerContentHandler +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/registerContentHandler +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Pozwala stronom na zarejestrowanie się jako możliwe serwisy obsługujące zawartości konkretnego typu MIME.

+ +

{{ Note("Strony internetowe mogą zarejestrować tylko siebie jako serwisy obsługujące zawartość. Ze względów bezpieczeństwa nie jest możliwe, aby rozszerzenie lub strona internetowa zarejestrowały inną stronę do obsługi zawartości.") }}

+ +

Składnia

+ +
window.navigator.registerContentHandler(mimeType,
+uri,
+title);
+
+ + + +

Przykład

+ +
navigator.registerContentHandler("application/vnd.mozilla.maybe.feed",
+                                 "http://www.przyklad.tld/?foo=%s",
+                                 "Mój Czytnik Kanałów");
+
+ +

Uwagi

+ +

W Firefoksie 2 obsługiwane są tylko typy MIME application/vnd.mozilla.maybe.feed, application/atom+xml oraz application/rss+xml. Wszystkie wartości mają ten sam efekt, a zarejestrowane strony obsługujące otrzymają kanały we wszystkich wersjach Atom i RSS.

+ +

Specyfikacja

+ +

Określona przez szkic roboczy Web Applications 1.0 organizacji WHATWG.

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.registerContentHandler", "ja": "ja/DOM/window.navigator.registerContentHandler" } ) }}

diff --git a/files/pl/web/api/navigator/registerprotocolhandler/index.html b/files/pl/web/api/navigator/registerprotocolhandler/index.html new file mode 100644 index 0000000000..b5b040b91d --- /dev/null +++ b/files/pl/web/api/navigator/registerprotocolhandler/index.html @@ -0,0 +1,66 @@ +--- +title: Navigator.registerProtocolHandler +slug: Web/API/Navigator/registerProtocolHandler +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Firefox 3 + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/registerProtocolHandler +--- +

{{ ApiRef() }} {{ Fx_minversion_header(3) }}

+ +

Podsumowanie

+ +

Umożliwia zarejestrowanie witryny internetowej jako mechanizmu obsługi danego protokołu.

+ +

Składnia

+ +
window.navigator.registerProtocolHandler(protokół,
+uri,
+nazwa);
+
+ + + +

Przykład

+ +

Poniżej podano sposób rejestracji mechanizmu obsługi protokołu + mailto + przez przykładową aplikację internetową znajdującą się pod adresem http://www.example.com:

+ +
navigator.registerProtocolHandler("mailto",
+                                 "https://www.example.com/?uri=%s",
+                                 "Poczta internetowa");
+
+ +

W powyższym kodzie tworzona jest funkcja obsługi odnośników + mailto + , która powoduje przejście do przykładowej strony. Adres e-mail określony w odnośniku jest wstawiany do adresu URL.

+ +

Specyfikacja

+ +

Określone w specyfikacji WHATWG Web Applications 1.0, wersja robocza.

+ +

Zobacz także

+ + + +

 

+ +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.registerProtocolHandler", "es": "es/DOM/window.navigator.registerProtocolHandler", "fr": "fr/DOM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler" } ) }}

diff --git a/files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html new file mode 100644 index 0000000000..2a9863088c --- /dev/null +++ b/files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html @@ -0,0 +1,107 @@ +--- +title: Obsługa protokołów przez aplikacje WWW +slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +--- +

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU {{ Fx_minversion_header(3) }} +

+

Wprowadzenie

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +Często na stronach internetowych znaleźć można odnośniki do zasobów korzystających z protokołów innych niż http. Przykładem jednego z nich jest protokół mailto: +

+
<a href="mailto:webmaster@example.com">Napisz do webmastera</a>
+
+

Twórcy witryn internetowych używają odnośników mailto:, kiedy chcą zapewnić użytkownikom wygodny sposób na wysłanie wiadomości e-mail z poziomu strony WWW. Kiedy użytkownik aktywuje odnośnik, przeglądarka zwykle uruchamia domyślny program pocztowy określony w ustawieniach systemu operacyjnego. Można to określić jako desktopowy sposób obsługi protokołów. +

Aplikacje WWW również mogą zapewnić obsługę takich protokołów. Od kiedy coraz więcej rodzajów aplikacji przenoszonych jest do środowiska WWW, potrzeba takiej integracji jest coraz bardziej wyraźna. W istocie, istnieje szereg aplikacji WWW do obsługi poczty elektronicznej, które mogłyby przetwarzać odnośniki mailto. +

+

Rejestracja

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +

Ustawienie aplikacji jako mechanizmu obsługującego protokół nie jest skomplikowane. W zasadzie wystarczy, by witryna skorzystała z metody registerProtocolHandler(), by zarejestrować się w przeglądarce jako potencjalny mechanizm obsługi danego protokołu. Na przykład: +

+
navigator.registerProtocolHandler("mailto",
+                                  "https://www.example.com/?uri=%s",
+                                  "Przykładowa poczta");
+
+

gdzie parametrami są: +

+ +

Przeglądarka wykonując tę metodę wyświetli okno, w którym użytkownik będzie mógł wyrazić zgodę na zarejestrowanie aplikacji WWW jako mechanizmu obsługi protokołu. Firefox wyświetla następujące pytanie w obszarze powiadomień: +

Image:wph-notification.png +

{{ Note() }} +

+

Przykład

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="pl">
+<head>
+  <title>Przykład rejestracji obsługi protokołów</title>
+  <script type="text/javascript">
+    navigator.registerProtocolHandler("fikcyjny", "http://starkravingfinkle.org/projects/wph/handler.php?value=%s", "Fikcyjny protokół");
+  </script>
+</head>
+<body>
+  <h1>Przykład rejestracji obsługi protokołów</h1>
+  <p>Strona ta zainstaluje mechanizm obsługi protokołów dla protokołu <code>fikcyjny:</code>.</p>
+</body>
+</html>
+
+

Aktywacja

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +Od tej pory kiedykolwiek użytkownik aktywuje odnośnik do zasobu o zarejestrowanym protokole, przeglądarka przekieruje żądanie do adresu URL dostarczonego podczas rejestracji. Firefox domyślnie poprosi uprzednio użytkownika o potwierdzenie tej czynności. +

Image:wph-launch.png +

+

Przykład

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="pl">
+<head>
+  <title>Test obsługi protokołów</title>
+</head>
+<body>
+  <p>Widzieliście już kiedyś <a href="fikcyjny:to%20nie%20istnieje">coś takiego</a>?</p>
+</body>
+</html>
+
+

Obsługa protokołu

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +Kolejnym etapem jest obsłużenie żądania. Przeglądarka pobiera atrybut href odnośnika, łączy go z szablonem adresów URL podanym podczas rejestracji mechanizmu obsługi i wysyła do serwera żądanie HTTP GET z wynikowym adresem. Dla powyższego przykładu przeglądarka wyśle żądanie GET o następującym adresie: +

+
http://starkravingfinkle.org/projects/wph/handler.php?value=fikcyjny:to%20nie%20istnieje
+
+

Po stronie serwera można odebrać przekazany adres URL i wykonać żądane akcje. +

{{ Note("Kod po stronie serwera dostanie całą zawartość atrybutu href. Oznacza to, że serwer będzie musiał podczas przetworzyć otrzymany adres URL i oddzielić protokół od danych.") }} +

+

Przykład

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +

+
<?php
+$value = "";
+if ( isset ( $_GET["value"] ) ) {
+  $value = $_GET["value"];
+}
+?>
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="pl">
+<head>
+    <title>Obsługa protokołów - przykład</title>
+</head>
+<body>
+  <h1>Obsługa protokołów - przykład</h1>
+  <p>Strona ta otwierana jest po aktywowaniu odnośnika do zasobu o protokole <code>fikcyjny:</code>. Otrzymane dane:</p>
+  <textarea>
+<?php echo(urldecode($value)) ?>
+  </textarea>
+</body>
+</html>
+
+


+

+
+
+{{ languages( { "en": "en/Web-based_protocol_handlers", "fr": "fr/Gestionnaires_de_protocoles_web", "ja": "ja/Web-based_protocol_handlers" } ) }} diff --git a/files/pl/web/api/navigatorlanguage/index.html b/files/pl/web/api/navigatorlanguage/index.html new file mode 100644 index 0000000000..7d6b0751e7 --- /dev/null +++ b/files/pl/web/api/navigatorlanguage/index.html @@ -0,0 +1,148 @@ +--- +title: NavigatorLanguage +slug: Web/API/NavigatorLanguage +tags: + - API + - HTML-DOM + - NeedsTranslation + - No Interface + - Reference + - TopicStub +translation_of: Web/API/NavigatorLanguage +--- +

{{APIRef("HTML DOM")}}

+ +

NavigatorLanguage contains methods and properties related to the language of the navigator.

+ +

There is no object of type NavigatorLanguage, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.

+ +

Properties

+ +

The NavigatorLanguage interface doesn't inherit any property.

+ +
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.
+
+ +

Methods

+ +

The NavigatorLanguage interface neither implements, nor inherit any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}{{Spec2('HTML WHATWG')}}Since the {{SpecName('HTML5 W3C')}} snapshot, the languages property has been added.
{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}{{Spec2('HTML5 W3C')}}Initial specification; snapshot of  an early version{{SpecName('HTML WHATWG')}}.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
languages37{{CompatGeckoDesktop("32")}}{{CompatNo}}24{{CompatNo}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
languages{{CompatUnknown}}{{CompatUnknown}} {{CompatGeckoMobile("32")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("35")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/pl/web/api/navigatoronline/index.html b/files/pl/web/api/navigatoronline/index.html new file mode 100644 index 0000000000..11f6707c43 --- /dev/null +++ b/files/pl/web/api/navigatoronline/index.html @@ -0,0 +1,127 @@ +--- +title: NavigatorOnLine +slug: Web/API/NavigatorOnLine +tags: + - API + - HTML-DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/NavigatorOnLine +--- +

{{APIRef("HTML DOM")}}

+ +

The NavigatorOnLine interface contains methods and properties related to the connectivity status of the browser.

+ +

There is no object of type NavigatorOnLine, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.

+ +

Properties

+ +

The NavigatorOnLine interface doesn't inherit any property.

+ +
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the browser is working online.
+
+ +

Methods

+ +

The NavigatorOnLine interface neither implements, nor inherit any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML WHATWG')}}No change from the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoMobile(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html b/files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html new file mode 100644 index 0000000000..d286acc4b0 --- /dev/null +++ b/files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html @@ -0,0 +1,84 @@ +--- +title: Zdarzenia online i offline +slug: Web/API/NavigatorOnLine/Zdarzenia_online_i_offline +tags: + - AJAX + - DOM + - Programowanie_WWW + - Wszystkie_kategorie +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +

{{ Fx_minversion_header(3) }} W programie Firefox 3 zaimplementowano obsługę zdarzeń online i offline zdefiniowanych w specyfikacji WHATWG Web Applications 1.0. +

+

Omówienie

+

Do stworzenia dobrej aplikacji internetowej działającej w trybie offline konieczne jest istnienie sposobu na sprawdzenie, kiedy aplikacja faktycznie znajduje się w trybie offline. W niektórych przypadkach potrzebna jest także możliwość stwierdzenia, czy aplikacja powróciła do stanu „online”. W praktyce sprowadza się to do dwóch wymagań: +

+
  1. Konieczne jest stwierdzenie, kiedy użytkownik przełącza przeglądarkę w tryb online, aby można było przeprowadzić ponowną synchronizację z serwerem.
  2. Konieczne jest stwierdzenie, kiedy użytkownik przełącza przeglądarkę w tryb offline, aby można było odłożyć wysłanie żądania do serwera na później.
+

Zdarzenia online i offline pozwalają na uproszczenie powyższych procedur.

W aplikacji internetowej może także być konieczne wymuszenie przechowywania określonych dokumentów w pamięci podręcznej zasobów offline. W tym celu w kodzie sekcji HEAD należy wstawić znacznik LINK przedstawiony poniżej: +

+
<link rel="offline-resource" href="mój_zasób">
+
+

Przy przetwarzaniu kodu HTML przez program Firefox w wersji 3 lub nowszej dokumenty wymienione w znaczniku zostaną zapisane w specjalnej pamięci podręcznej zasobów offline. +

+

Interfejs API

+ +

navigator.onLine to własność, która zwraca wartość true lub false (true dla trybu online, false dla trybu offline). Własność ta jest aktualizowana za każdym razem, gdy użytkownik przełącza przeglądarkę w tryb offline, wybierając odpowiednie polecenie menu (w programie Firefox: Plik -> Pracuj w trybie offline). +

Ponadto ta własność powinna być aktualizowana zawsze, gdy w przeglądarce nie można nawiązać połączenia z siecią. Zgodnie ze specyfikacją: +

+
+Atrybut navigator.onLine musi zwracać wartość false, jeżeli w programie po kliknięciu odsyłacza przez użytkownika lub po wysłaniu przez skrypt żądania do zdalnej witryny nie można połączyć się z siecią (lub wiadomo, że taka próba nie powiedzie się)... +
+

W programie Firefox 2 ta własność jest aktualizowana przy przełączaniu przeglądarki między trybami online i offline oraz przy utracie lub ponownym nawiązaniu połączenia z siecią (dotyczy systemów Windows i Linux). +

Własność istnieje w starszych wersjach przeglądarek Firefox i Internet Explorer (obecna specyfikacja została oparta na tych właśnie wcześniejszych implementacjach), można zatem korzystać z niej już teraz. Automatyczne wykrywanie stanu połączenia sieciowego zostało wprowadzone w programie Firefox 2.

+

Zdarzenia "online" i "offline"

+

W programie Firefox 3 wprowadzono dwa nowe zdarzenia: "online" i "offline". Są one wywoływane w elemencie <body> każdej otwartej strony, gdy przeglądarka jest przełączana między trybem online i offline. Ponadto zdarzenie bąbelkuje od elementu document.body, poprzez element document, aż do elementu window. Żadnego ze zdarzeń nie można anulować (niemożliwe jest zablokowanie możliwości przełączania przeglądarki między trybami online i offline). +

Obserwatory (ang. event listeners) tych zdarzeń można zarejestrować na kilka sposobów: +

+ +

Przykład

+

Dostępny jest prosty przykład zastosowania, który pozwala na sprawdzenie działania zdarzeń. +XXX When mochitests for this are created, point to those instead and update this example -nickolay +

+
 <!doctype html>
+ <html>
+ <head>
+   <script>
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Zdarzenie: " + msg + "; stan=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   </script>
+   <style>...</style>
+ </head>
+ <body onload="loaded()">
+   <div id="status"><p id="state"></p></div>
+   <div id="log"></div>
+ </body>
+ </html>
+
+

Odsyłacze

+ +
+
+{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pt": "pt/Eventos_online_e_offline" } ) }} diff --git a/files/pl/web/api/navigatorplugins/index.html b/files/pl/web/api/navigatorplugins/index.html new file mode 100644 index 0000000000..c009a19a07 --- /dev/null +++ b/files/pl/web/api/navigatorplugins/index.html @@ -0,0 +1,111 @@ +--- +title: NavigatorPlugins +slug: Web/API/NavigatorPlugins +tags: + - API + - Experimental + - HTML-DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/NavigatorPlugins +--- +

{{APIRef("HTML DOM")}}{{SeeCompatTable}}

+ +

The NavigatorPlugins interface contains methods and properties related to the plugins installed in the browser.

+ +

There is no object of type NavigatorPlugins, but other interfaces, like {{domxref("Navigator")}}, implement it.

+ +

Properties

+ +
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.
+
+ +

Methods

+ +

The NavigatorPlugins interface doesn't inherit any method.

+ +
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatorplugins', 'NavigatorPlugins')}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/pl/web/api/parentnode/childelementcount/index.html b/files/pl/web/api/parentnode/childelementcount/index.html new file mode 100644 index 0000000000..f3bbff6554 --- /dev/null +++ b/files/pl/web/api/parentnode/childelementcount/index.html @@ -0,0 +1,93 @@ +--- +title: ParentNode.childElementCount +slug: Web/API/ParentNode/childElementCount +translation_of: Web/API/ParentNode/childElementCount +--- +
{{ APIRef("DOM") }}
+ +

ParentNode.childElementCount jest właściwością tylko do odczytu zwraca ona liczbę o typie unsigned long, która zwraca ilość elementów dzieci w elemencie rodzicu.

+ +
+

Ta właściwość została początkowo zdefiniowana w interfejsie  {{domxref("ElementTraversal")}}. Interfejs ten {{domxref("Node")}}, posiadał 2 różne zestawy właściwości - te, które mają elementy dzieci i te elementy, które są dziećmi. Dzieci zostały przeniesione do interfejsu {{domxref("ChildNode")}}, a rodzice do {{domxref("ParentNode")}}. Jest to zmiana techniczna, która nie powinna mieć wpływu na kompatybilność.

+
+ +

Składnia

+ +
var liczbaDzieci = node.childElementCount;
+
+ +
+
liczbaDzieci
+
Wartość która zostanie zwrócona o typie unsigned long (maksymalnie 64 bitowa liczba całkowita dodatnia).
+
node
+
Objekt reprezentowany przez {{domxref("Document")}}, {{domxref("DocumentFragment")}}, lub {{domxref("Element")}}.
+
+ +

Przykład

+ +
var elementRodzic = document.getElementById('tata');
+if (elementRodzic.childElementCount > 0) {
+  // Zrób coś
+}
+
+ +

Łatka dla IE8 & IE9 & Safari

+ +

Ta właściwość jest niewspierana na przeglądarkach IE9 i poniżej oraz Safari, jest niewspierana dla obiektów Document i DocumentFragment.

+ +
;(function(constructor) {
+  if (constructor &&
+      constructor.prototype &&
+      constructor.prototype.childElementCount == null) {
+    Object.defineProperty(constructor.prototype, 'childElementCount', {
+      get: function() {
+        var i = 0, dzieci = 0, wezel, iloscElementow = this.childNodes;
+        while (wezel = iloscElementow[i++]) {
+          if (wezel.nodeType === 1) dzieci++;
+        }
+        return dzieci;
+      }
+    });
+  }
+})(window.Node || window.Element);
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}{{Spec2('DOM WHATWG')}}Dzieli interfejs ElementTraversal na {{domxref("ChildNode")}} i ParentNode. Obecna właściwość jest zdefinionawa w tym drugim.
+ {{domxref("Document")}} i {{domxref("DocumentFragment")}} zaimlementowały już nowe interfejsy.
{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}{{Spec2('Element Traversal')}} +

Na chwilę obecną dodano wstępną definicje do interfejsu ElementTraversal i wykorzystywana jest ona w klasie {{domxref("Element")}}.

+
+ +

Kompatybilność z przeglądarkami

+ + + +

{{Compat("api.ParentNode.childElementCount")}}

+ +

Zobacz także

+ + diff --git a/files/pl/web/api/parentnode/children/index.html b/files/pl/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..1d8576d64b --- /dev/null +++ b/files/pl/web/api/parentnode/children/index.html @@ -0,0 +1,96 @@ +--- +title: ParentNode.children +slug: Web/API/ParentNode/children +tags: + - API + - Dzieci + - Dziecko + - Kolekcja HTML + - Potomek + - Potomkowie + - Właściwość + - węzeł +translation_of: Web/API/ParentNode/children +--- +
{{ APIRef("DOM") }}
+ +

The {{domxref("ParentNode")}} właściwość children jest właściwością tylko do odczytu (read-only) która zwraca aktualną kolekcję {{domxref("HTMLCollection")}} zawierającą wszystkie elementy podrzędne {{domxref("Element", "elements")}} węzła, na którym został wywołany.

+ +

Składnia

+ +
let children = node.children;
+ +

Value

+ +

{{ domxref("HTMLCollection") }} aktualna, uporządkowana kolekcja elementów DOM które są potomkami node. Możesz otrzymać pojedynczych potomków kolekcji używając albo {{domxref("HTMLCollection.item()", "item()")}} metody na kolekcji, albo używając notacji w stylu tablicowym języka JavaScript.

+ +

Jeżeli element node nie ma potomków, wtedy children jest pustą listą o długości 0 (length of 0).

+ +

Przykład

+ +
const foo = document.getElementById('foo');
+for (let i = 0; i < foo.children.length; i++) {
+  console.log(foo.children[i].tagName);
+}
+
+ +

Uzupełnienie

+ +
// Nadpisuje natywny prototyp 'children'.
+// Dodaje Document & DocumentFragment wsparcie dla IE9 & Safari.
+// Zwraca tablicę zamiast HTMLCollection.
+;(function(constructor) {
+  if (constructor &&
+    constructor.prototype &&
+    constructor.prototype.children == null) {
+    Object.defineProperty(constructor.prototype, 'children', {
+      get: function() {
+        let i = 0, node, nodes = this.childNodes, children = [];
+        while (node = nodes[i++]) {
+          if (node.nodeType === 1) {
+            children.push(node);
+          }
+        }
+        return children;
+      }
+    });
+  }
+})(window.Node || window.Element);
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Wstępna definicja
+ +

Zgodność z przeglądarkami

+ + + +

{{Compat("api.ParentNode.children")}}

+ +

Zobacz także

+ + diff --git a/files/pl/web/api/parentnode/index.html b/files/pl/web/api/parentnode/index.html new file mode 100644 index 0000000000..2cbf79f11c --- /dev/null +++ b/files/pl/web/api/parentnode/index.html @@ -0,0 +1,90 @@ +--- +title: ParentNode +slug: Web/API/ParentNode +tags: + - API + - DOM + - Finding Elements + - Finding Nodes + - Interface + - Locating Elements + - Locating Nodes + - Managing Elements + - Managing Nodes + - Mixin + - NeedsTranslation + - Node + - ParentNode + - Reference + - Selectors + - TopicStub +translation_of: Web/API/ParentNode +--- +
{{APIRef("DOM")}}
+ +

The ParentNode mixin contains methods and properties that are common to all types of {{domxref("Node")}} objects that can have children. It's implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.

+ +

See Locating DOM elements using selectors to learn how to use CSS selectors to find nodes or elements of interest.

+ +

Properties

+ +
+
{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}
+
Returns the number of children of this ParentNode which are elements.
+
{{domxref("ParentNode.children")}} {{readonlyInline}}
+
Returns a live {{domxref("HTMLCollection")}} containing all of the {{domxref("Element")}} objects that are children of this ParentNode, omitting all of its non-element nodes.
+
{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}
+
Returns the first node which is both a child of this ParentNode and is also an Element, or null if there is none.
+
{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}
+
Returns the last node which is both a child of this ParentNode and is an Element, or null if there is none.
+
+ +

Methods

+ +
+
{{domxref("ParentNode.append()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after the last child of the ParentNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ParentNode.prepend()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before the first child of the ParentNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ParentNode.querySelector()")}}
+
Returns the first {{domxref("Element")}} with the current element as root that matches the specified group of selectors.
+
{{domxref("ParentNode.querySelectorAll()")}}
+
Returns a {{domxref("NodeList")}} representing a list of elements with the current element as root that matches the specified group of selectors.
+
+ +

Specification

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and used it on {{domxref("Element")}}.
+ +

Browser compatibility

+ + + +

{{Compat("api.ParentNode")}}

+ +

See also

+ + diff --git a/files/pl/web/api/powiadomienie/index.html b/files/pl/web/api/powiadomienie/index.html new file mode 100644 index 0000000000..e314c36a3a --- /dev/null +++ b/files/pl/web/api/powiadomienie/index.html @@ -0,0 +1,348 @@ +--- +title: Powiadomienie +slug: Web/API/powiadomienie +tags: + - API + - JS Powiadomienia + - Powiadomienia + - Powiadomienie +translation_of: Web/API/Notification +--- +

{{APIRef("Web Notifications")}}

+ +

Interfejs Powiadomień {{domxref('Notifications_API','Notifications API')}}  jest używany do konfigurowania i wyświetlania powiadomień komputerowych do użytkownika .

+ +

{{AvailableInWorkers}}

+ +

Konstruktor

+ +
+
{{domxref("Notification.Notification()")}}
+
Tworzy nową instancję obiektu {{domxref('Notification')}} .
+
+ +

Cechy

+ +

Statyczne Cechy

+ +

Te Cechy są dostępne tylko dla obiektu powiadomienia.

+ +
+
{{domxref("Notification.permission")}} {{readonlyinline}}
+
Linia reprezentująca obecne uprawnienia do wyświetlania powiadomień.Możliwe Wartośći to:denied(Użytkownik odmawia do wyświetlania powiadomień), granted(Użytkownik zaakceptował wyświetlanie powiadomień),albo default(Wybór użytkownika jest nieznany i dlatego przeglądarka zachowuje się jak przy odmowie).
+
+ +

Cechy Instancji

+ +

Te Cechy są dostępne tylko dla obiektu powiadomień.

+ +
+
{{domxref("Notification.title")}} {{readonlyinline}}
+
Tytuł powiadomienia jak określone w opcjach parametru konstruktora.
+
{{domxref("Notification.dir")}} {{readonlyinline}}
+
Kierunek tekstu powiadomienia jak określone w opcjach parametru konstruktora.
+
{{domxref("Notification.lang")}} {{readonlyinline}}
+
Język kodu powiadomienia jak określone w opcjach parametru konstruktora.
+
{{domxref("Notification.body")}} {{readonlyinline}}
+
Tekst powiadomienia jak określone w opcjach parametru konstruktora.
+
{{domxref("Notification.tag")}} {{readonlyinline}}
+
ID powiadomienia (jeżeli jakiekolwiek) jak określone w opcjach parametru konstruktora.
+
{{domxref("Notification.icon")}} {{readonlyinline}}
+
Url obrazku użytego w powiadomieniu jak określone w opcjach parametru konstruktora.
+
{{domxref("Notification.data")}} {{readonlyinline}}
+
Zwraca klon struktury daty powiadomienia.
+
{{domxref("Notification.silent")}} {{readonlyinline}}
+
Opisuje czy powiadomienie powinno być ciche,takie jak bez dźwięku czy wbiracji bez względu na ustawienia urządzenia.
+
+ +

Nie wspierane cechy

+ +

Pokazane Cechy są najbardziej aktualną ze specyfikacją, ale nie są wspierane narazie przez żadną przeglądarkę.Wskazane jest aby sprawdzać regularnie czy status się zaktualizował , i daj nam znać jeżeli znajdziesz nie aktualne informacje.

+ +
+
{{domxref("Notification.noscreen")}} {{readonlyinline}}
+
Określa, czy należy włączyć powiadomienia na ekranie urządzenia, czy też nie.
+
{{domxref("Notification.renotify")}} {{readonlyinline}}
+
Określa, czy użytkownik powinien być powiadamiany po nowym powiadomieniu i zastąpić stare powiadomienie.
+
{{domxref("Notification.sound")}} {{readonlyinline}}
+
Określa dźwięk do odtworzenia wraz z powiadomieniem,za miejscę podstawowego powiadomienia systemowego.
+
{{domxref("Notification.sticky")}} {{readonlyinline}}
+
Określa czy powiadomienie powinno być trudniejsze do usunięcia przez użytkownika, klejące 'sticky'.
+
{{domxref("Notification.vibrate")}} {{readonlyinline}}
+
Określa wibrację urządzenia do emisji przez urządzenie.
+
+ +

Obsługa zdarzeń

+ +
+
{{domxref("Notification.onclick")}}
+
Obsługa dla zdarzenia {{event("click")}}.Odpalane przy każdym kliknięciu powiadomienia.
+
{{domxref("Notification.onerror")}}
+
Obsługa dla zdarzenia {{event("error")}}.Odpalane przy każdym razie kiedy powiadomienie będzie napotykało błąd.
+
+ +

Przestarzała obsługa

+ +

Pokazana obsługa zdarzeń jest nadal wspierana w  sekcji poniższej {{anch("browser compatibility")}},ale nie pokazane w obecnej specyfikacji. I w związku z tym, aby bezpiecznie założyć, że są przestarzałe mogą przestać działać w przyszłych wersjach przeglądarek.

+ +
+
{{domxref("Notification.onclose")}}
+
Obsługa zdażenia {{event("close")}}. Zamyka powiadomienie.
+
{{domxref("Notification.onshow")}}
+
Obsługa zdażenia {{event("show")}}.Pokazuje gdy powiadomienie jest pokazywane.
+
+ +

Metoda

+ +

Statyczna metoda

+ +

Te metody są dostępne tylko dla obiektu powiadomień.

+ +
+
{{domxref("Notification.requestPermission()")}}
+
Requests permission from the user to display notifications.
+
+ +

Metoda instacji

+ +

Te cechy są dostępne tylko dla obiektu powiadomień albo to prototype. Obiekt powiadomień pobiera to z interfejsu {{domxref("EventTarget")}}.

+ +
+
{{domxref("Notification.close()")}}
+
Programowo zamyka powiadomienie.
+
+ +

Przykład

+ +

W podstawowtym HTMLu:

+ +
<button onclick="notifyMe()">Pokaż Powiadomienie!</button>
+ +

Jest to możliwe aby wysłać powiadomienie - tutaj pokazujemy jak łatwo i w kompletnym składzie kodu zobaczyć czy powiadomienia są wspierane,potem sprawdzić uprawnienia czy zostały nadane dla obecnego dźwięku powiadomień, potem sprawdź uprawnienia jeżeli potrzebne,przed wysłaniem powiadomienia. 

+ +
function notifyMe() {
+  // Sprawdzamy czy przeglądarka obsługuje powiadomienia.
+  if (!("Notification" in window)) {
+    alert("Ta przeglądarka nie obsługuje powiadomień");
+  }
+
+  // Sprawdźmy czy uprawnienia dla powiadomienia zostały nadane
+  else if (Notification.permission === "granted") {
+    // jeżeli są tworzymy powiadomienie
+    var notification = new Notification("Hi there!");
+  }
+
+  // W innym przypadku tworzymy zapytanie o uprawnienia
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      //Jeżeli użytkownik zaakceptuje tworzymy powiadomienie
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // Na koniec, jeżeli użytkownik odmówił powiadomień i chcesz szanować go
+  // nie ma potrzeby dręczyć go zapytaniami
+}
+ +

{{EmbedLiveSample('Przyk%C5%82ad', '100%', 30)}}

+ +

W wielu przypadkach, nie potrzebujesz tworzyć nowych form. Dla przykładu, w naszym Emogotchi demo (see source code), Prosto odpalamy {{domxref("Notification.requestPermission")}} aby sprawdzać czy możemy dostać uprawnienia do wysyłania powiadomień: 

+ +
Notification.requestPermission();
+ +

Potem odpalamy funkcje spawnNotification() kiedy chcemy odpalić powiadomienie — to jest przekazywane do argumentu opisanego tekstu,ikony i tytułu który chcemy, potem tworzy konieczne opcje obiektu i odpala powiadomienie używając konstruktora {{domxref("Notification.Notification","Notification()")}}.

+ +
function spawnNotification(theBody,theIcon,theTitle) {
+  var options = {
+      body: theBody,
+      icon: theIcon
+  }
+  var n = new Notification(theTitle,options);
+}
+ +

Specifikacja

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Kompatybilność Przeglądarek

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Podstawowa usługa5{{property_prefix("webkit")}}[1]
+ 22		4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}256[3]
ikona5{{property_prefix("webkit")}}[1]
+ 22		4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}25{{CompatNo}}
Available in workers{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
silent{{CompatChrome(43.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
noscreen, renotify, sound, sticky{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ 		4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+
icon{{CompatUnknown}}{{CompatVersionUnknown}}4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
silent{{CompatNo}}{{CompatChrome(43.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
noscreen, renotify, sound, sticky{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.

+ +

Before Chrome 32, {{domxref("Notification.permission")}} was not supported.

+ +

Before Chrome 42, service worker additions were not supported.

+ +

[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its createNotification method.

+ +

Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the show method and supported only the click and close events.

+ +

Nick Desaulniers wrote a Notification shim to cover both newer and older implementations.

+ +

One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like /my_icon.png. You also can't use window.location.origin + "/my_icon.png" because window.location.origin is null in packaged apps. The manifest origin field fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to pass an absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.

+ +

When using notifications  in a Firefox OS app, be sure to add the desktop-notification permission in your manifest file. Notifications can be used at any permission level, hosted or above: "permissions": { "desktop-notification": {} }

+ +

[3] Safari zaczeło wspierać powiadomienia z wersją Safari 6,ale tylko od Mac OSX 10.8+(Mountain Lion).

+ +

Zobacz Także

+ + diff --git a/files/pl/web/api/push_api/index.html b/files/pl/web/api/push_api/index.html new file mode 100644 index 0000000000..e889cb6c01 --- /dev/null +++ b/files/pl/web/api/push_api/index.html @@ -0,0 +1,167 @@ +--- +title: Push API +slug: Web/API/Push_API +translation_of: Web/API/Push_API +--- +
{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
+ +

Push API daje aplikacjom web możliwość odbierania wiadomości przesłanych z serwera, niezależnie do tego czy aplikacja pracuje w tle, lub jest wogóle załadowana w przeglądarce internetowej. To pozwala programistom dostarczać (asynchronicznie) powiadomienia i aktualizacje do użytkowników którzy zezwolili na przesyłanie notyfikacj, w efekcie mamy lepszą komunikację z użytkownikiem, którzy dostają nowe treści w odpowiednim czasie.th timely new content.

+ +

Pojęcia i stosowanie

+ +

For an app to receive push messages, it has to have an active service worker. When the service worker is active, it can subscribe to push notifications, using {{domxref("PushManager.subscribe()")}}.

+ +

The resulting {{domxref("PushSubscription")}} includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data.

+ +

The service worker will be started as necessary to handle incoming push messages, which are delivered to the {{domxref("ServiceWorkerGlobalScope.onpush")}} event handler. This allows apps to react to push messages being received, for example, by displaying a notification (using {{domxref("ServiceWorkerRegistration.showNotification()")}}.)

+ +

Each subscription is unique to a service worker.  The endpoint for the subscription is a unique capability URL: knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret, or other applications might be able to send push messages to your application.

+ +

Activating a service worker to deliver a push message can result in increased resource usage, particularly of the battery. Different browsers have different schemes for handling this, there is currently no standard mechanism. Firefox allows a limited number (quota) of push messages to be sent to an application, although Push messages that generate notifications are exempt from this limit. The limit is refreshed each time the site is visited. In comparison, Chrome applies no limit, but requires that every push message causes a notification to be displayed.

+ +
+

Note: As of Gecko 44, the allowed quota of push messages per application is not incremented when a new notification fires, when another is still visible, for a period of three seconds. This handles cases where a burst of notifications is received, and not all generate a visible notification.

+
+ +
+

Note: Chrome versions earlier than 52 require you to set up a project on Google Cloud Messaging to send push messages, and use the associated project number and API key when sending push notifications. It also requires an app manifest, with some special parameters to use this service.

+
+ +

Interfejsy

+ +
+
{{domxref("PushEvent")}}
+
Represents a push action, sent to the global scope of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.
+
{{domxref("PushManager")}}
+
Provides a way to receive notifications from third-party servers, as well as request URLs for push notifications. This interface has replaced the functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.
+
{{domxref("PushMessageData")}}
+
Provides access to push data sent by a server, and includes methods to manipulate the received data.
+
{{domxref("PushSubscription")}}
+
Provides a subcription's URL endpoint, and allows unsubscription from a push service.
+
+ +

Wzbogacenia Service worker

+ +

The following additions to the Service Worker API have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.

+ +
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.
+
{{domxref("ServiceWorkerGlobalScope.onpush")}}
+
An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.
+
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
+
An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)
+
+ +

Przykłady

+ +

ServiceWorker Cookbook Mozilli zawiera dużo przydatnych przykładów Push.

+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Push API")}}{{Spec2("Push API")}}Initial definition
+ +

Zgodność przeglądarek

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunkcjonalnośćChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1][3]{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatGeckoDesktop(44.0)}}[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(48.0)}}[4]{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(48.0)}}[4]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ + + +

Zobacz również

+ + diff --git a/files/pl/web/api/range/index.html b/files/pl/web/api/range/index.html new file mode 100644 index 0000000000..cabb00df2c --- /dev/null +++ b/files/pl/web/api/range/index.html @@ -0,0 +1,105 @@ +--- +title: range +slug: Web/API/Range +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Range +--- +

{{ ApiRef("DOM") }}Obiekt Range reprezentuje fragment dokumentu, który stanowi węzeł oraz część węzła tekstowego w danym dokumencie.

+ +

A range can be created using the createRange method of the Document object. Range objects can also be retrieved by using the getRangeAt method of the selection object.

+ +

Własności

+ +
+
collapsed
+
Returns a boolean indicating whether the range's start and end points are at the same position.
+
commonAncestorContainer
+
Returns the deepest Node that contains the startContainer and endContainer Nodes.
+
endContainer
+
Returns the Node within which the Range ends.
+
endOffset
+
Returns a number representing where in the endContainer the Range ends.
+
startContainer
+
Returns the Node within which the Range starts.
+
startOffset
+
Returns a number representing where in the startContainer the Range starts.
+
+ +

Metody

+ +

Metody pozycjonowania

+ +

Te metody ustawiają punkt początkowy i końcowy obiektu range.

+ +
+
setStart
+
Ustawia pozycję początkową obiektu range.
+
setEnd
+
Ustawia pozycję końcową obiektu range.
+
setStartBefore
+
Ustawia pozycję początkowa dla obiektu range w odniesieniu do innego węzła.
+
setStartAfter
+
Ustawia pozycję początkowa dla obiektu range w odniesieniu do innego węzła.
+
setEndBefore
+
Ustawia pozycję końcową dla obiektu range w odniesieniu do innego węzła.
+
setEndAfter
+
Ustawia pozycję końcową dla obiektu range w odniesieniu do innego węzła.
+
selectNode
+
Ustawia obiekt range, aby zawierał węzeł wraz z jego zawartością.
+
selectNodeContents
+
Ustawia obiekt range, aby zawierał zawartość węzła.
+
collapse
+
Zawija obiekt range do jednego z jego punktów granicznych.
+
+ +

Metody edytujące

+ +

These methods retrieve Nodes from a range and modify the contents of a range.

+ +
+
cloneContents
+
Returns a document fragment copying the nodes of a Range.
+
deleteContents
+
Removes the contents of a Range from the document.
+
extractContents
+
Moves contents of a Range from the document tree into a document fragment
+
insertNode
+
Insert a node at the start of a Range.
+
surroundContents
+
Moves content of a Range into a new node.
+
+ +

Inne metody

+ +
+
compareBoundaryPoints
+
Porównuje punkty graniczne dwóch obiektów range.
+
cloneRange
+
Zwraca obiekt range z punktami granicznymi identycznymi z klonowanym obiektem range.
+
detach
+
Releases Range from use to improve performance.
+
toString
+
Zwraca tekst z obiektu range.
+
+ +

Metody Gecko

+ +

Ta sekcja opisuje szczególne metody Range Mozilli nie będące częścią specyfikacji W3C DOM.

+ +
+
compareNode {{ Obsolete_inline() }}
+
Zwraca stałą opisującą czy węzeł znajduje się przed, za, wewnątrz lub otacza obiekt range .
+
comparePoint
+
Zwraca -1, 0 lub 1 wskazując czy punkt porównania występuje przed, wewnątrz lub za obiektem range.
+
createContextualFragment
+
Zwraca fragment dokumentu utworzony z danego łańcucha kodu.
+
intersectsNode {{ Obsolete_inline() }}
+
Zwraca wartość Boolean określającą czy dany węzeł przecina obiekt range.
+
isPointInRange
+
Zwraca wartość Boolean określającą czy dany punkt jest zawarty w obiekcie range.
+
diff --git a/files/pl/web/api/response/index.html b/files/pl/web/api/response/index.html new file mode 100644 index 0000000000..394a5a4a4d --- /dev/null +++ b/files/pl/web/api/response/index.html @@ -0,0 +1,132 @@ +--- +title: Response +slug: Web/API/Response +tags: + - API + - Experimental + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Reference + - Response + - TopicStub +translation_of: Web/API/Response +--- +
{{APIRef("Fetch API")}}
+ +

The Response interface of the Fetch API represents the response to a request.

+ +

You can create a new Response object using the {{domxref("Response.Response()")}} constructor, but you are more likely to encounter a Response object being returned as the result of another API operation, for example a service worker {{domxref("Fetchevent.respondWith")}}, or a simple {{domxref("GlobalFetch.fetch()")}}.

+ +

Constructor

+ +
+
{{domxref("Response.Response","Response()")}}
+
Creates a new Response object.
+
+ +

Properties

+ +
+
{{domxref("Response.headers")}} {{readonlyinline}}
+
Contains the {{domxref("Headers")}} object associated with the response.
+
{{domxref("Response.ok")}} {{readonlyinline}}
+
Contains a boolean stating whether the response was successful (status in the range 200-299) or not.
+
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
+
Indicates whether or not the response is the result of a redirect; that is, its URL list has more than one entry.
+
{{domxref("Response.status")}} {{readonlyinline}}
+
Contains the status code of the response (e.g., 200 for a success).
+
{{domxref("Response.statusText")}} {{readonlyinline}}
+
Contains the status message corresponding to the status code (e.g., OK for 200).
+
{{domxref("Response.trailers")}}
+
Contains a {{domxref("Promise")}} resolving to a {{domxref("Headers")}} object associated with the response with {{domxref("Response.headers")}} for values of the HTTP {{HTTPHeader("Trailer")}} header.
+
{{domxref("Response.type")}} {{readonlyinline}}
+
Contains the type of the response (e.g., basic, cors).
+
{{domxref("Response.url")}} {{readonlyinline}}
+
Contains the URL of the response.
+
{{domxref("Response.useFinalURL")}}
+
Contains a boolean stating whether this is the final URL of the response.
+
+ +

Response implements {{domxref("Body")}}, so it also has the following properties available to it:

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
Stores a {{domxref("Boolean")}} that declares whether the body has been used in a response yet.
+
+ +

Methods

+ +
+
{{domxref("Response.clone()")}}
+
Creates a clone of a Response object.
+
{{domxref("Response.error()")}}
+
Returns a new Response object associated with a network error.
+
{{domxref("Response.redirect()")}}
+
Creates a new response with a different URL.
+
+ +

Response implements {{domxref("Body")}}, so it also has the following methods available to it:

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
+
{{domxref("Body.blob()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
+
{{domxref("Body.formData()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
+
{{domxref("Body.json()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.
+
{{domxref("Body.text()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text).
+
+ +

Examples

+ +

In our basic fetch example (run example live) we use a simple fetch() call to grab an image and display it in an {{htmlelement("img")}} tag. The fetch() call returns a promise, which resolves with the Response object associated with the resource fetch operation. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.

+ +
const image = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  const objectURL = URL.createObjectURL(blob);
+  image.src = objectURL;
+});
+ +

You can also use the {{domxref("Response.Response()")}} constructor to create your own custom Response object:

+ +
const response = new Response();
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Response")}}

+ +

See also

+ + diff --git a/files/pl/web/api/screen/colordepth/index.html b/files/pl/web/api/screen/colordepth/index.html new file mode 100644 index 0000000000..89c06c4b8c --- /dev/null +++ b/files/pl/web/api/screen/colordepth/index.html @@ -0,0 +1,43 @@ +--- +title: Screen.colorDepth +slug: Web/API/Screen/colorDepth +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Screen/colorDepth +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca głębię koloru ekranu.

+ +

Składnia

+ +
bitDepth = window.screen.colorDepth
+
+ +

Przykład

+ +
// Sprawdzenie głębi koloru ekranu
+if ( window.screen.colorDepth < 8) {
+    // Użycie wersji strony z małą ilością kolorów
+} else {
+    // Użycie prawidłowej wersji strony, o pełnej głębi kolorów
+}
+
+ +

Uwagi

+ +

Zobacz także window.screen.pixelDepth.

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.screen.colorDepth", "ja": "ja/DOM/window.screen.colorDepth" } ) }}

diff --git a/files/pl/web/api/screen/index.html b/files/pl/web/api/screen/index.html new file mode 100644 index 0000000000..91ce6c3476 --- /dev/null +++ b/files/pl/web/api/screen/index.html @@ -0,0 +1,74 @@ +--- +title: Screen +slug: Web/API/Screen +translation_of: Web/API/Screen +--- +
{{APIRef("CSSOM View")}}
+ +

The Screen interface represents a screen, usually the one on which the current window is being rendered.

+ +

Usually it is the one on which the current window is being rendered, obtained using window.screen.

+ +

Properties

+ +
+
{{domxref("Screen.availTop")}}
+
Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.
+
{{domxref("Screen.availLeft")}}
+
Returns the first available pixel available from the left side of the screen.
+
{{domxref("Screen.availHeight")}}
+
Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.
+
{{domxref("Screen.availWidth")}}
+
Returns the amount of horizontal space in pixels available to the window.
+
{{domxref("Screen.colorDepth")}}
+
Returns the color depth of the screen.
+
{{domxref("Screen.height")}}
+
Returns the height of the screen in pixels.
+
{{domxref("Screen.left")}}
+
Returns the distance in pixels from the left side of the main screen to the left side of the current screen.
+
{{domxref("Screen.orientation")}}
+
Returns the current orientation of the screen.
+
{{domxref("Screen.pixelDepth")}}
+
Gets the bit depth of the screen.
+
{{domxref("Screen.top")}}
+
Returns the distance in pixels from the top side of the current screen.
+
{{domxref("Screen.width")}}
+
Returns the width of the screen.
+
{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}
+
Boolean. Setting to false will turn off the device's screen.
+
{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}
+
Controls the brightness of a device's screen. A double between 0 and 1.0 is expected.
+
+ +

Events handler

+ +
+
{{domxref("Screen.onorientationchange")}}
+
A handler for the {{event("orientationchange")}} events.
+
+ +

Methods

+ +
+
{{domxref("Screen.lockOrientation")}}
+
Lock the screen orientation (only works in fullscreen or for installed apps)
+
{{domxref("Screen.unlockOrientation")}}
+
Unlock the screen orientation (only works in fullscreen or for installed apps)
+
+ +

Methods inherit from {{domxref("EventTarget")}}

+ +

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

+ +

Example

+ +
if (screen.pixelDepth < 8) {
+  // use low-color version of page
+} else {
+  // use regular, colorful page
+}
+
+ +

Specification

+ +

CSSOM View

diff --git a/files/pl/web/api/screen/width/index.html b/files/pl/web/api/screen/width/index.html new file mode 100644 index 0000000000..352f6cfbf3 --- /dev/null +++ b/files/pl/web/api/screen/width/index.html @@ -0,0 +1,108 @@ +--- +title: Screen.width +slug: Web/API/Screen/width +translation_of: Web/API/Screen/width +--- +
+
{{APIRef("CSSOM View")}}
+
+ +

Zwraca szerokość ekranu.

+ +

Składnia

+ +
lWidth = window.screen.width
+
+ +

Przykład

+ +
// crude way to check that the screen is at least 1024x768
+if (window.screen.width >= 1024 && window.screen.height >= 768) {
+  // resolution is 1024x768 or above
+}
+
+ +

Notes

+ +

Note that not all of the width given by this property may be available to the window itself. When other widgets occupy space that cannot be used by the window object, there is a difference in window.screen.width and window.screen.availWidth. See also {{domxref("window.screen.height")}}.

+ +

Internet Explorer will take into account the zoom setting when reporting the screen width. It will only return the real width of the screen if the zoom is set to 100%.

+ +

Specyfikacja

+ + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{ SpecName('CSSOM View', '#dom-screen-width', 'Screen.width') }}{{ Spec2('CSSOM View') }} 
+ +

Kompatybilność przeglądarek

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}6{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/pl/web/api/selection/addrange/index.html b/files/pl/web/api/selection/addrange/index.html new file mode 100644 index 0000000000..7827743f8e --- /dev/null +++ b/files/pl/web/api/selection/addrange/index.html @@ -0,0 +1,40 @@ +--- +title: addRange +slug: Web/API/Selection/addRange +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/addRange +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Dodaje zakres do zaznaczenia.

+

Składnia

+
sel.addRange(range)
+
+

Parametry

+
+
+ + range +
+
+ Obiekt zakresu, który będzie dodany do zaznaczenia.
+
+

Przykłady

+
 /* Wybiera wszystkie znaczniki STRONG w dokumencie HTML */
+ var strongs = document.getElementsByTagName("strong");
+ var s = window.getSelection();
+ if(s.rangeCount > 0) s.removeAllRanges();
+ for(var i = 0; i < strongs.length; i++) {
+  var range = document.createRange();
+  range.selectNode(strongs[i]);
+  s.addRange(range);
+ }
+
+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/addRange", "es": "es/DOM/Selection/addRange", "it": "it/DOM/Selection/addRange" } ) }}

diff --git a/files/pl/web/api/selection/anchornode/index.html b/files/pl/web/api/selection/anchornode/index.html new file mode 100644 index 0000000000..200bccb3fa --- /dev/null +++ b/files/pl/web/api/selection/anchornode/index.html @@ -0,0 +1,22 @@ +--- +title: anchorNode +slug: Web/API/Selection/anchorNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/anchorNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca węzeł, w którym się zaczyna zaznaczenie.

+

Skladnia

+
sel.anchorNode
+
+

Notatki

+

Użytkownik może wykonać zaznaczenie od lewej do prawej (w bieg dokumentu) lub od prawej do lewej (odwrotnie od biegu dokumentu). Kotwica znajduje się tam, gdzie użytkownik zaczyna selekcję. Może to być widoczne, kiedy zostanie przytrzymany klawisz Shift i naciśnięte strzałki na klawiaturze. Kotwica selekcji nie zmienia swojego położenia, ale skupienie selekcji, drugi koniec selekcji, porusza się.

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/anchorNode", "es": "es/DOM/Selection/anchorNode", "it": "it/DOM/Selection/anchorNode" } ) }}

diff --git a/files/pl/web/api/selection/anchoroffset/index.html b/files/pl/web/api/selection/anchoroffset/index.html new file mode 100644 index 0000000000..35a0148f6a --- /dev/null +++ b/files/pl/web/api/selection/anchoroffset/index.html @@ -0,0 +1,23 @@ +--- +title: anchorOffset +slug: Web/API/Selection/anchorOffset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/anchorOffset +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca pozycję, na której kotwica selekcji znajduje się w węźle anchorNode.

+

Składnia

+
sel.anchorOffset
+
+

Uwagi

+

Liczenie się tej zmiennej zaczyna się od 0. Jeżeli selekcja zaczyna się w pierwszym znaku anchorNode, zwracane jest 0.

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/anchorOffset", "es": "es/DOM/Selection/anchorOffset", "it": "it/DOM/Selection/anchorOffset" } ) }}

diff --git a/files/pl/web/api/selection/collapse/index.html b/files/pl/web/api/selection/collapse/index.html new file mode 100644 index 0000000000..fec80daf7e --- /dev/null +++ b/files/pl/web/api/selection/collapse/index.html @@ -0,0 +1,45 @@ +--- +title: collapse +slug: Web/API/Selection/collapse +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/collapse +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zawęża aktualne zaznaczenie w pojedynczy punkt. Dokument nie jest modyfikowany. Jeżeli treść jest edytowalna i aktywna, przeniesie się tam kursor.

+

Składnia

+
sel.collapse(parentNode,offset);
+
+

Parametry

+
+
+ + parentNode +
+
+ Kursor znajdzie się w tym węźle.
+
+
+
+ + offset +
+
+ Kursor zostanie umieszczony w tej odległości od początku węzła tekstowego + + parentNode + .
+
+

Przykłady

+
/* Umieszcza kursor na początku ciała dokumentu HTML. */
+var body = document.getElementsByTagName("body")[0];
+window.getSelection().collapse(body,0);
+
+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/collapse", "es": "es/DOM/Selection/collapse", "it": "it/DOM/Selection/collapse" } ) }}

diff --git a/files/pl/web/api/selection/collapsetoend/index.html b/files/pl/web/api/selection/collapsetoend/index.html new file mode 100644 index 0000000000..e7897ea59a --- /dev/null +++ b/files/pl/web/api/selection/collapsetoend/index.html @@ -0,0 +1,22 @@ +--- +title: collapseToEnd +slug: Web/API/Selection/collapseToEnd +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/collapseToEnd +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przesuwa kotwicę zaznaczenia do pozycji, w której znajduje się skupienie. Samo skupienie nie zmienia swojego położenia. Jeżeli treść jest aktywna i edytowalna, pojawi się tam kursor.

+

Składnia

+
sel.collapseToEnd()
+
+

Parametry

+

Brak.

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/collapseToEnd", "es": "es/DOM/Selection/collapseToEnd", "it": "it/DOM/Selection/collapseToEnd" } ) }}

diff --git a/files/pl/web/api/selection/collapsetostart/index.html b/files/pl/web/api/selection/collapsetostart/index.html new file mode 100644 index 0000000000..0dfdc92468 --- /dev/null +++ b/files/pl/web/api/selection/collapsetostart/index.html @@ -0,0 +1,22 @@ +--- +title: collapseToStart +slug: Web/API/Selection/collapseToStart +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/collapseToStart +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przesuwa skupienie zaznaczenia do położenia kotwicy. Sama kotwica nie zmienia swojego położenia. Jeżeli treść jest aktywna i edytowalna, przeniesie się tam kursor.

+

Składnia

+
sel.collapseToStart()
+
+

Parametry

+

Brak.

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/collapseToStart", "es": "es/DOM/Selection/collapseToStart", "it": "it/DOM/Selection/collapseToStart" } ) }}

diff --git a/files/pl/web/api/selection/containsnode/index.html b/files/pl/web/api/selection/containsnode/index.html new file mode 100644 index 0000000000..c73f0ae763 --- /dev/null +++ b/files/pl/web/api/selection/containsnode/index.html @@ -0,0 +1,47 @@ +--- +title: containsNode +slug: Web/API/Selection/containsNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/containsNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Sprawdza czy węzeł jest częścią zaznaczenia.

+

Składania

+
sel.containsNode(aNode,aPartlyContained)
+
+

Parametry

+
+
+ + aNode +
+
+ Węzeł, którego obecność sprawdzamy.
+
+ + aPartlyContained +
+
+ Kiedy jej wartością jest + + true + , containsNode zwraca wartość true kiedy część węzła jest częścią zaznaczenia.
+
+ Kiedy jej wartością jest + + false + , containsNode zwraca wartość true tylko i wyłącznie, gdy cały węzeł jest częścią zaznaczenia.
+
+

Przykłady

+
 /* Sprawdza czy cokolwiek wewnątrz elementu body jest zaznaczone */
+ alert(window.getSelection().containsNode(document.body, true));
+
+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/containsNode", "es": "es/DOM/Selection/containsNode", "it": "it/DOM/Selection/containsNode" } ) }}

diff --git a/files/pl/web/api/selection/deletefromdocument/index.html b/files/pl/web/api/selection/deletefromdocument/index.html new file mode 100644 index 0000000000..7cc9727ebc --- /dev/null +++ b/files/pl/web/api/selection/deletefromdocument/index.html @@ -0,0 +1,24 @@ +--- +title: deleteFromDocument +slug: Web/API/Selection/deleteFromDocument +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/deleteFromDocument +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Usuwa rzeczywisty tekst będący reprezentacją zaznaczenia z DOM dokumentu.

+

Składnia

+
sel.deleteFromDocument()
+
+

Parametry

+

Brak.

+

Przykłady

+

Użytkownik na stronie internetowej zaznacza tekst "mają dwoje" ze zdania "Króliki mają dwoje uszu". Następnie klika na przycisk, który wywołuje kod JavaScript window.getSelection().deleteFromDocument(). Tekst dokumentu staje się zdaniem "Króliki uszu".

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/deleteFromDocument", "es": "es/DOM/Selection/deleteFromDocument", "it": "it/DOM/Selection/deleteFromDocument" } ) }}

diff --git a/files/pl/web/api/selection/extend/index.html b/files/pl/web/api/selection/extend/index.html new file mode 100644 index 0000000000..fbec1f5eb5 --- /dev/null +++ b/files/pl/web/api/selection/extend/index.html @@ -0,0 +1,40 @@ +--- +title: extend +slug: Web/API/Selection/extend +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/extend +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przemieszcza skupienie zaznaczenia do podanego miejsca. Kotwica zaznaczenia nie zmienia swojego położenia. Zaznaczenie będzie miało koniec w nowym miejscu skupienia bez względu na kierunek zaznaczania.

+

Składnia

+
sel.extend(parentNode,offset)
+
+

Parametry

+
+
+ + parentNode +
+
+ Węzeł, w którym skupienie zmieni swoje położenie.
+
+
+
+ + offset +
+
+ Pozycja od początku węzła tekstowego + + parentNode + , gdzie zostanie umieszczone skupienie.
+
+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/extend", "es": "es/DOM/Selection/extend", "it": "it/DOM/Selection/extend" } ) }}

diff --git a/files/pl/web/api/selection/focusnode/index.html b/files/pl/web/api/selection/focusnode/index.html new file mode 100644 index 0000000000..e59310d0f1 --- /dev/null +++ b/files/pl/web/api/selection/focusnode/index.html @@ -0,0 +1,21 @@ +--- +title: focusNode +slug: Web/API/Selection/focusNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/focusNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca węzeł, w którym selekcja się kończy.

+

Składnia

+
sel.focusNode
+
+

Uwagi

+

Użytkownik może wykonać zaznaczenie od lewej do prawej (w bieg dokumentu) lub od prawej do lewej (odwrotnie od biegu dokumentu). Skupienie znajduje się tam, gdzie użytkownik kończy selekcję. Może to być widoczne, kiedy zostanie przytrzymany klawisz Shift i naciśnięte strzałki na klawiaturze. Skupienie selekcji zmienia swoje położenie, a skupienie selekcji, drugi koniec selekcji, nie.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/focusNode", "es": "es/DOM/Selection/focusNode", "it": "it/DOM/Selection/focusNode" } ) }}

diff --git a/files/pl/web/api/selection/focusoffset/index.html b/files/pl/web/api/selection/focusoffset/index.html new file mode 100644 index 0000000000..cba7b76783 --- /dev/null +++ b/files/pl/web/api/selection/focusoffset/index.html @@ -0,0 +1,22 @@ +--- +title: focusOffset +slug: Web/API/Selection/focusOffset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/focusOffset +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca pozycję, na której skupienie selekcji znajduje się w węźle focusNode.

+

Składnia

+
sel.focusOffset
+
+

Uwagi

+

Liczenie się tej zmiennej zaczyna się od 0. Jeżeli selekcja kończy się z pierwszym znakiem anchorNode, zwracane jest 0.

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/focusOffset", "es": "es/DOM/Selection/focusOffset", "it": "it/DOM/Selection/focusOffset" } ) }}

diff --git a/files/pl/web/api/selection/getrangeat/index.html b/files/pl/web/api/selection/getrangeat/index.html new file mode 100644 index 0000000000..ff4b2c962b --- /dev/null +++ b/files/pl/web/api/selection/getrangeat/index.html @@ -0,0 +1,44 @@ +--- +title: getRangeAt +slug: Web/API/Selection/getRangeAt +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/getRangeAt +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca obiekt zakresu reprezentujący jeden z obecnie zaznaczonych zakresów.

+

Składnia

+
range =sel.getRangeAt(index)
+
+

Parametry

+
+
+ + range +
+
+ Obiekt zakresu, który zostanie zwrócony.
+
+
+
+ + index +
+
+ Wartość liczbowa liczona od zera. Wartość ujemna, równa albo większa od rangeCount spowoduje wystąpienie błędu.
+
+

Przykłady

+
ranges = [];
+sel = window.getSelection();
+for(var i = 0; i < sel.rangeCount; i++) {
+ ranges[i] = sel.getRangeAt(i);
+}
+/* Każdy element w tablicy zakresów jest teraz
+ * obiektem zakresu reprezentującym jeden z
+ * zakresów w aktualnym zaznaczeniu */
+
+

{{ languages( { "en": "en/DOM/Selection/getRangeAt", "es": "es/DOM/Selection/getRangeAt" } ) }}

diff --git a/files/pl/web/api/selection/index.html b/files/pl/web/api/selection/index.html new file mode 100644 index 0000000000..83e76ccfa9 --- /dev/null +++ b/files/pl/web/api/selection/index.html @@ -0,0 +1,100 @@ +--- +title: Selection +slug: Web/API/Selection +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Selection +--- +

{{ ApiRef("DOM") }}{{SeeCompatTable}}

+ +

Podsumowanie

+ +

Klasa obiektu zwracanego przez window.getSelection() i inne metody.

+ +

Opis

+ +

Obiekt reprezentujący zakresy, które zaznaczył użytkownik. Zazwyczaj przechowuje tylko jeden zakres, który pobieramy następująco:

+ +
range = sel.getRangeAt(0);
+
+ +

Wywołanie metody toString() zwróci tekst znajdujący się wewnątrz zaznaczenia, na przykład:

+ +
selObj = window.getSelection();
+window.alert(selObj);
+
+ +

Słownik

+ +

Inne kluczowe pojęcia używane w tym dziale.

+ +
+
kotwica (anchor)
+
Kotwicą zaznaczenia jest jego właściwy początek. Kiedy tworzymy zaznaczenie przy użyciu myszki, kotwica w dokumencie znajduje się dokładnie tam, gdzie początkowo został wciśnięty przycisk myszki. Gdy użytkownik zmienia zaznaczenie używając myszki lub klawiatury, kotwica nie zmienia swego położenia.
+
skupienie (focus)
+
Skupieniem zaznaczenia jest jego właściwy koniec. Kiedy tworzymy zaznaczenie przy użyciu myszki, jej skupienie jest dokładnie tam, gdzie przycisk myszki zostaje zwolniony. Gdy użytkownik zmienia zaznaczenie używając myszki lub klawiatury, skupienie zmienia swe położenie na koniec tego zaznaczenia.
+
zakres (range)
+
Zakres to przyległa część dokumentu. Zakres może zawierać zarówno całe węzły, jak i ich części, jak np. wycinek węzła tekstowego. Użytkownik zazwyczaj wybiera tylko jedno zaznaczenie w danej chwili, jednak możliwe jest zaznaczenie kilku fragmentów na raz (na przykład używając klawisza Control). Zakres może być pobrany z zaznaczenia jako obiekt zakresu. Obiekty zakresów mogą być również utworzone poprzez DOM i programowo dodane lub usunięte z zaznaczenia.
+
+ +

Własności

+ +
+
anchorNode
+
Zwraca węzeł, w którym rozpoczyna się zaznaczenie.
+
anchorOffset
+
Zwraca pozycję, gdzie kotwica zaznaczenia znajduje się w węźle anchorNode.
+
focusNode
+
Zwraca węzeł, w którym kończy się zaznaczenie.
+
focusOffset
+
Zwraca pozycję, gdzie skupienie zaznaczenia znajduje się w węźle focusNode
+
isCollapsed
+
Zwraca wartość logiczną wskazującą czy początek zaznaczenia znajduje się w tym samym miejscu, co jego koniec.
+
rangeCount
+
Zwraca liczbę zakresów znajdujących się w zaznaczeniu.
+
+ +

Metody

+ +
+
getRangeAt
+
Zwraca obiekt zakresu reprezentujący jeden z obecnie zaznaczonych zakresów.
+
collapse
+
Zawęża aktualne zaznaczenie do pojedynczego punktu.
+
extend
+
Przesuwa koniec zaznaczenia do podanego punktu.
+
collapseToStart
+
Przesuwa koniec zaznaczenia do tego samego miejsca, w którym znajduje się początek.
+
collapseToEnd
+
Przesuwa początek zaznaczenia do tego samego miejsca, w którym znajduje się koniec. Sam koniec zaznaczenia nie zmienia swojego położenia.
+
selectAllChildren
+
Dodaje wszystkie dzieci podanego węzła do zaznaczenia.
+
addRange
+
Obiekt zakresu, który zostanie dodany do zaznaczenia.
+
removeRange
+
Usuwa zakres z zaznaczenia
+
removeAllRanges
+
Usuwa wszystkie zakresy z zaznaczenia.
+
deleteFromDocument
+
Usuwa zawartość zaznaczenia z dokumentu.
+
selectionLanguageChange
+
 
+
toString
+
Zwraca ciąg znaków, który jest obecnie reprezentowany przez obiekt zaznaczenia, tj. aktualnie zaznaczony tekst.
+
containsNode
+
Wskazuje czy konkretny węzeł jest częścią zaznaczenia.
+
+ +

Zobacz także

+ +

window.getSelection, Range

+ +

Odnośniki zewnętrzne

+ + diff --git a/files/pl/web/api/selection/iscollapsed/index.html b/files/pl/web/api/selection/iscollapsed/index.html new file mode 100644 index 0000000000..84b01c648c --- /dev/null +++ b/files/pl/web/api/selection/iscollapsed/index.html @@ -0,0 +1,21 @@ +--- +title: isCollapsed +slug: Web/API/Selection/isCollapsed +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/isCollapsed +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca wartość logiczną, która określa czy początek selekcji znajduje się w tym samym miejscu, co jej koniec.

+

Składnia

+
sel.isCollapsed
+
+

Uwagi

+

Nawet załamana selekcja może mieć rangeCount większe niż 0. sel.getRangeAt(0) może zwrócić zakres, który również jest załamany.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/isCollapsed", "es": "es/DOM/Selection/isCollapsed", "it": "it/DOM/Selection/isCollapsed" } ) }}

diff --git a/files/pl/web/api/selection/rangecount/index.html b/files/pl/web/api/selection/rangecount/index.html new file mode 100644 index 0000000000..f966cff941 --- /dev/null +++ b/files/pl/web/api/selection/rangecount/index.html @@ -0,0 +1,19 @@ +--- +title: rangeCount +slug: Web/API/Selection/rangeCount +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/rangeCount +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca liczbę zakresów, które znajdują się w zaznaczeniu.

+

Składnia

+
sel.rangeCount
+
+

Uwagi

+

Zaraz po załadowaniu strony, wartość rangeCount wynosi 0. Użytkownik może zazwyczaj wykonać tylko jedno zaznaczenie na raz, dlatego wartość rangeCount z reguły będzie wynosiła 1. Za pomocą skryptu możliwe jest stworzenie zaznaczenia, które zawiera więcej niż jeden zakres.

+

{{ languages( { "en": "en/DOM/Selection/rangeCount", "es": "es/DOM/Selection/rangeCount", "it": "it/DOM/Selection/rangeCount" } ) }}

diff --git a/files/pl/web/api/selection/removeallranges/index.html b/files/pl/web/api/selection/removeallranges/index.html new file mode 100644 index 0000000000..3ba0519f45 --- /dev/null +++ b/files/pl/web/api/selection/removeallranges/index.html @@ -0,0 +1,22 @@ +--- +title: removeAllRanges +slug: Web/API/Selection/removeAllRanges +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/removeAllRanges +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Usuwa wszystkie zakresy, ustawiając własności anchorNode i focusNode na null oraz usuwając samo zaznaczenie.

+

Składnia

+
sel.removeAllRanges();
+
+

Parametry

+

Brak.

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/removeAllRanges", "es": "es/DOM/Selection/removeAllRanges", "it": "it/DOM/Selection/removeAllRanges" } ) }}

diff --git a/files/pl/web/api/selection/removerange/index.html b/files/pl/web/api/selection/removerange/index.html new file mode 100644 index 0000000000..24fa532b22 --- /dev/null +++ b/files/pl/web/api/selection/removerange/index.html @@ -0,0 +1,40 @@ +--- +title: removeRange +slug: Web/API/Selection/removeRange +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/removeRange +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Usuwa zakres z zaznaczenia.

+

Składnia

+
sel.removeRange(range)
+
+

Parametry

+
+
+ + range +
+
+ Obiekt zakresu, który będzie usunięty z zaznaczenia.
+
+

Przykłady

+
/* Programowo, można wybrać więcej niż jeden zakres.
+ * Ten przykład usunie wszystkie zakresy oprócz pierwszego.*/
+s = window.getSelection();
+if(s.rangeCount > 1) {
+ for(var i = 1; i < s.rangeCount; i++) {
+  s.removeRange(s.getRangeAt(i));
+ }
+}
+
+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/removeRange", "es": "es/DOM/Selection/removeRange", "it": "it/DOM/Selection/removeRange" } ) }}

diff --git a/files/pl/web/api/selection/selectallchildren/index.html b/files/pl/web/api/selection/selectallchildren/index.html new file mode 100644 index 0000000000..df659530c6 --- /dev/null +++ b/files/pl/web/api/selection/selectallchildren/index.html @@ -0,0 +1,40 @@ +--- +title: selectAllChildren +slug: Web/API/Selection/selectAllChildren +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/selectAllChildren +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Dodaje wszystkie dzieci podanego węzła do zaznaczenia. Poprzednie zaznaczenie jest usuwane.

+

Składnia

+
sel.selectAllChildren(parentNode)
+
+

Parametry

+
+
+ + parentNode +
+
+ Wszystkie dzieci węzła + + parentNode + będą wybrane. Samo + + parentNode + nie będzie częścią zaznaczenia.
+
+

Przykłady

+
footer = document.getElementById("footer");
+window.getSelection().selectAllChildren(footer);
+/* Wszystko wewnątrz footer jest teraz wybrane */
+
+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/selectAllChildren", "es": "es/DOM/Selection/selectAllChildren", "it": "it/DOM/Selection/selectAllChildren" } ) }}

diff --git a/files/pl/web/api/selection/tostring/index.html b/files/pl/web/api/selection/tostring/index.html new file mode 100644 index 0000000000..588c81ec26 --- /dev/null +++ b/files/pl/web/api/selection/tostring/index.html @@ -0,0 +1,35 @@ +--- +title: toString +slug: Web/API/Selection/toString +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/toString +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca ciąg znakowy, który jest obecnie reprezentowany przez obiekt selekcji, tj. aktualnie zaznaczony tekst.

+

Składnia

+
string =sel.toString()
+
+ +

Własności

+

Brak.

+

Opis

+

Ta metoda zwraca obecnie zaznaczony tekst.

+

W JavaScript, ta metoda jest wywoływana automatycznie, kiedy funkcja, do której przesyłany jest obiekt, oczekuje ciągu znakowego:

+
alert(window.getSelection()) // Co jest wywoływane
+alert(window.getSelection().toString())  // Co jest w wywoływane w rzeczywistości
+
+

Zobacz również

+ +

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/toString", "es": "es/DOM/Selection/toString", "fr": "fr/DOM/Selection/toString", "it": "it/DOM/Selection/toString" } ) }}

diff --git a/files/pl/web/api/speechrecognition/index.html b/files/pl/web/api/speechrecognition/index.html new file mode 100644 index 0000000000..8f41dfb239 --- /dev/null +++ b/files/pl/web/api/speechrecognition/index.html @@ -0,0 +1,153 @@ +--- +title: SpeechRecognition +slug: Web/API/SpeechRecognition +translation_of: Web/API/SpeechRecognition +--- +

{{APIRef("Web Speech API")}}{{SeeCompatTable}}

+ +

Interfejs SpeechRecognition jest częścią Web Speech API i kontroluje usługę rozpoznawania mowy. Obsługuje również {{domxref("SpeechRecognitionEvent")}} zwracany przez usługę rozpoznawania mowy.

+ +
+

Uwaga: Na Chrome użycie Speech Recognition wymaga zastosowania serwera. Dźwięk jest przesyłany do usługi web, więc nie działa offline.

+
+ +

Konstruktor

+ +
+
{{domxref("SpeechRecognition.SpeechRecognition()")}}
+
Tworzy nowy obiekt SpeechRecognition.
+
+ +

Właściwości

+ +

SpeechRecognition dziedziczy równiez właściwości z interfejsu rodzica, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechRecognition.grammars")}}
+
Tworzy i zwraca kolekcję obiektów {{domxref("SpeechGrammar")}}, które reprezentują zasady gramatyczne akceptowane przez SpeechRecognition.
+
{{domxref("SpeechRecognition.lang")}}
+
Tworzy i zwraca język bieżącej instacji SpeechRecognition. Jeśli nie zostanie sprecyzowany domyślnie przyjmie wartość z atrybutu {{htmlattrxref("lang","html")}}, a jeśli i on nie został zdefiniowany - z ustawień językowych przeglądarki.
+
{{domxref("SpeechRecognition.continuous")}}
+
Ustawienie przyjęcia ciągłego strumienia mowy lub pojedynczego zwrotu. Domyslnie ustawiony na przyjęcie pojedynczego zwrotu (false.)
+
{{domxref("SpeechRecognition.interimResults")}}
+
Ustawienie kontrolujące zwracanie rezultatów pośrednich. Przyjmuje wartości (true) lub (false.) Rezultat pośredni rozpoznawania mowy to rezultat niepełny, uzyskiwany w trakcie rozpoznawania wypowiedzi (np. kiedy metoda {{domxref("SpeechRecognitionResult.isFinal")}} zwraca  false.) 
+
{{domxref("SpeechRecognition.maxAlternatives")}}
+
Ustawienie maksymalnej liczby alternatywnych wyników rozpoznawania mowy. Domyślnie - 1.
+
{{domxref("SpeechRecognition.serviceURI")}}
+
Specifies the location of the speech recognition service used by the current SpeechRecognition to handle the actual recognition. The default is the user agent's default speech service.
+
+ +
+
+ +

Methods

+ +

SpeechRecognition also inherits methods from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechRecognition.abort()")}}
+
Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a {{domxref("SpeechRecognitionResult")}}.
+
{{domxref("SpeechRecognition.start()")}}
+
Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
+
{{domxref("SpeechRecognition.stop()")}}
+
Stops the speech recognition service from listening to incoming audio, and attempts to return a {{domxref("SpeechRecognitionResult")}} using the audio captured so far.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
audiostart
+
Fired when the user agent has started to capture audio.
+ Also available via the onaudiostart property.
+
audioend
+
Fired when the user agent has finished capturing audio.
+ Also available via the onaudioend property.
+
end
+
Fired when the speech recognition service has disconnected.
+ Also available via the onend property.
+
error
+
Fired when a speech recognition error occurs.
+ Also available via the onerror property.
+
nomatch
+
Fired when the speech recognition service returns a final result with no significant recognition. This may involve some degree of recognition, which doesn't meet or exceed the {{domxref("SpeechRecognitionAlternative.confidence","confidence")}} threshold.
+ Also available via the onnomatch property.
+
result
+
Fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.
+ Also available via the onresult property.
+
soundstart
+
Fired when any sound — recognisable speech or not — has been detected.
+ Also available via the onsoundstart property.
+
soundend
+
Fired when any sound — recognisable speech or not — has stopped being detected.
+ Also available via the onsoundend property.
+
speechstart
+
Fired when sound that is recognised by the speech recognition service as speech has been detected.
+ Also available via the onspeechstart property.
+
speechend
+
Fired when speech recognised by the speech recognition service has stopped being detected.
+ Also available via the onspeechend property.
+
start
+
Fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
+ Also available via the onstart property.
+
+ +

Examples

+ +

In our simple Speech color changer example, we create a new SpeechRecognition object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the SpeechRecognition instance using the {{domxref("SpeechRecognition.grammars")}} property.

+ +

After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires,  we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour.

+ +
var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+speechRecognitionList.addFromString(grammar, 1);
+recognition.grammars = speechRecognitionList;
+//recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+
+var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}
+
+recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color;
+  bg.style.backgroundColor = color;
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Speech API', '#speechreco-section', 'SpeechRecognition')}}{{Spec2('Web Speech API')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.SpeechRecognition")}}

+ +

See also

+ + diff --git a/files/pl/web/api/storage/index.html b/files/pl/web/api/storage/index.html new file mode 100644 index 0000000000..22f478e9ff --- /dev/null +++ b/files/pl/web/api/storage/index.html @@ -0,0 +1,154 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - JavaScript + - Wszystkie_kategorie +translation_of: Web/API/Web_Storage_API +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Magazyn DOM (DOM Storage) jest nazwą określającą zestaw aspektów magazynowania danych wprowadzonych w specyfikacji Web Applications 1.0. Magazyn DOM jest zaprojektowany, by dostarczyć większą, bezpieczniejszą i prostszą do użycia, alternatywę przechowywania informacji w ciasteczkach. Jest obecnie dostępny tylko w przeglądarkach bazujących na Mozilli, zwłaszcza zaczynając od Firefoksa 2.

+ +
Uwaga: Magazyn DOM nie jest tym samym co mozStorage (interfejsy XPCOM Mozilli do SQLite) czy API przechowywania sesji (użyteczność magazynu XPCOM do użycia przez rozszerzenia).
+ +

Opis

+ +

Mechanizm Magazynu DOM w głównej mierze polega na bezpiecznym przechowywaniu par kluczy i wartości możliwych do późniejszego odtworzenia. Celem tego dodatku jest dostarczenie wszechstronnego środka, dzięki któremu mogą być budowane w pełni interaktywne aplikacje (włączając w to zaawansowane cechy, takie jak możliwość pracowania bez dostępu do sieci nawet przez dłuższe okresy czasu).

+ +

Obecnie tylko przeglądarki bazujące na Mozilli dostarczają działającą implementację specyfikacji Magazynu DOM. Jednakże, Internet Explorer posiada podobną funkcję nazwaną "zachowaniem danych użytkownika" (userData behavior), które pozwala na przechowanie danych pomiędzy wieloma sesjami przeglądarki.

+ +

Magazyn DOM jest użyteczny, ponieważ nie istnieje żadna dobra metoda przechowywania przez przeglądarkę sensownej pojemności danych przez dowolny okres czasu. Ciasteczka HTTP mają ograniczoną pojemność i nie dostarczają żadnego wsparcia dla organizowania przechowywanych danych oraz innych metod (takich jak Lokalny magazyn Flash (Flash Local Storage)), które do działania wymagają dodatkowych wtyczek.

+ +

Jedną z pierwszych aplikacji, które zaczęły używać nowej funkcjonalności Magazynu DOM (w dodatku do "zachowania danych użytkownika" Internet Explorer) było halfnote (aplikacja zarządzająca notatkami) napisana przez Aarona Boodmana. W swoim programie, Aaron jednocześnie zapisywał swoje notatki na serwer (kiedy jego połączenie Internetowe było aktywne) i dysk lokalny. To pozwala użytkownikowi na bezpieczne zapisywanie notatek, nawet ze sporadyczną aktywnością połączenia z Internetem.

+ +

Pomimo, że koncept oraz implementacja zaprezentowana w programie halfnote była stosunkowo prosta, jego powstanie wskazuje na możliwość tworzenia nowego typu aplikacji internetowych, użytecznych i działających zarówno z aktywnym połączeniem Internetowym, jak i bez niego.

+ +

Odnośniki

+ +

Poniższe elementy są obiektami globalnymi, które istnieją jako własności każdego okna DOM. Znaczy to, że są one dostępne jako własności sessionStorage lub window.sessionStorage (jest to ważne, ponieważ możliwe dzięki temu jest użycie ramek do przechowania i dostępu do dodatkowych danych, po za tym, co automatycznie jest dostępne na stronie).

+ +

sessionStorage

+ +

Jest to globalny obiekt, który zajmuje się przechowywaniem danych, które mają być dostępne na czas trwania sesji strony. Trwa ona tak długo, dopóki otwarte jest okno przeglądarki, które można przeładowywać i odświeżać. Otwarcie strony w nowej karcie bądź oknie, powoduje stworzenie nowej sesji.

+ +
// Zapisywanie danych do pamięci aktualnej sesji
+sessionStorage.username = "John";
+
+// Odtwarzanie wcześniej zapisanych danych
+alert( "username = " + sessionStorage.username );
+
+ +

Obiekt sessionStorage jest najbardziej pomocny przy przechowywaniu tymczasowych danych, które powinny być zapisane i chronione przez utraceniem w razie przypadkowego przeładowania strony.

+ +
Uwaga: Obiekt sessionStorage powinien również być w stanie przechowywać i odtwarzać dane po przypadkowym zawieszeniu się przeglądarki, jednak przez {{ Bug(339445) }} ta funkcjonalność w Firefox jeszcze nie działa.
+ +

Przykłady:

+ +

Automatycznie zapisuje treści pól tekstowych, by w razie przypadkowego odświeżenia strony, odtworzyć treści tych pól, by nie stracić danych już wprowadzonych.

+ +
 // Pobranie pola tekstowego, który zamierzamy śledzić.
+ var field = document.getElementById("field");
+
+ // Sprawdzenie, czy mamy zapisaną już wcześniej wartość
+ // (stanie się to tylko wtedy, gdy strona została przeładowana)
+ if ( sessionStorage.autosave ) {
+     // Odtworzenie wartości pola tekstowego
+     field.value = sessionStorage.autosave;
+ }
+
+ // Sprawdzanie wartości pola tekstowego co 1 sekundę
+ setInterval(function(){
+     // Oraz zapisanie jej do obiektu sesji
+     sessionStorage.autosave = field.value;
+ }, 1000);
+
+ +

Więcej informacji:

+ + + +

globalStorage

+ +

Jest to globalny obiekt, który utrzymuje wiele przestrzeni publicznych oraz prywatnych, które mogą być użyte do przechowywania danych przez dłuższy okres czasu (np. przez kilka stron czy sesji przeglądarki).

+ +
// Zapisanie danych, które będzie można odtworzyć tylko z domeny mozilla.org
+globalStorage['mozilla.org'].snippet = "<b>Cześć</b>, jak się masz?";
+
+// Zapisanie danych, które możliwe będą do otworzenia przez dowolną stronę czy domenę
+globalStorage[''].favBrowser = "Firefox";
+
+ +

Dokładniej mówiąc, obiekt globalStorage daje nam dostęp do wielu różnych magazynów obiektów, do których można przypisywać dane. Dla przykładu, jeśli chcielibyśmy stworzyć stronę internetową, która używałaby obiektu globalStorage w tej domenie (developer.mozilla.org) mielibyśmy takie obiekty magazynów nam dostępne:

+ + + +

Przykłady:

+ +

Wszystkie te przykłady wymagają dołączenia kodu na wszystkich stronach, na których chcemy zaobserwować efekt.

+ +

Zapamiętywanie nazwy użytkownika dla konkretnej subdomeny, która została odwiedzona:

+ +
 globalStorage['developer.mozilla.org'].username = "John";
+
+ +

Zliczenie każdej wizyty użytkownika na każdej ze stron w danej domenie:

+ +
 // musi zostać użyte parseInt, ponieważ wszystkie przechowywane dane są jako ciągi znakowe
+ globalStorage['mozilla.org'].visits =
+     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;
+
+ +

Zapamiętywanie adresów wszystkich stron, które odwiedzasz:

+ +
 globalStorage[''].sites += "," + location.hostname;
+
+ +

Więcej informacji:

+ + + +

Więcej informacji:

+ + + +

Przykłady

+ + + +

Tematy powiązane

+ + + +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}

diff --git a/files/pl/web/api/stylesheet/cssrules/index.html b/files/pl/web/api/stylesheet/cssrules/index.html new file mode 100644 index 0000000000..d3fabad79a --- /dev/null +++ b/files/pl/web/api/stylesheet/cssrules/index.html @@ -0,0 +1,46 @@ +--- +title: stylesheet.cssRules +slug: Web/API/Stylesheet/cssRules +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSRuleList +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca wszystkie reguły/zasady CSS w arkuszu stylów jako {{domxref("CSSRuleList")}}, tablico-podobny obiekt.

+ +

Składnia

+ +
rules = stylesheet.cssRules
+
+ +

rules jest tablicą {{domxref("CSSRuleList")}} indywidualnych obiektów cssRule. Pojedynczy obiekt cssRule może odwołać się do jednego z następujących obiektów:

+ + + +

Przykład

+ +
// pobiera pierwszą zasadę
+first_rule = document.styleSheets[0].cssRules[0];
+
+ +

Uwagi

+ +

Zobacz obiekt DOM {{domxref("cssRule")}}.

+ +

Specyfikacja

+ +

DOM Level 2 Style: CSSStyleSheet.cssRules

diff --git a/files/pl/web/api/stylesheet/deleterule/index.html b/files/pl/web/api/stylesheet/deleterule/index.html new file mode 100644 index 0000000000..bda06f24b4 --- /dev/null +++ b/files/pl/web/api/stylesheet/deleterule/index.html @@ -0,0 +1,26 @@ +--- +title: stylesheet.deleteRule +slug: Web/API/Stylesheet/deleteRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSStyleSheet/deleteRule +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda deleteRule usuwa regułę stylu bieżącego obiektu arkusza stylów.

+

Składnia

+
stylesheet.deleteRule(index)
+
+

Parametry

+ +

Przykład

+
 myStyles.deleteRule(0);
+
+

Specyfikacja

+

deleteRule

+

{{ languages( { "en": "en/DOM/stylesheet.deleteRule" } ) }}

diff --git a/files/pl/web/api/stylesheet/disabled/index.html b/files/pl/web/api/stylesheet/disabled/index.html new file mode 100644 index 0000000000..74e1e5401a --- /dev/null +++ b/files/pl/web/api/stylesheet/disabled/index.html @@ -0,0 +1,25 @@ +--- +title: stylesheet.disabled +slug: Web/API/Stylesheet/disabled +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/disabled +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Ta własność sygnalizuje, gdzie bieżący arkusz stylów jest używany lub nie.

+

Składnia

+
bool = stylesheet.disabled
+
+

Przykład

+
// jeśli arkusz stylów jest wyłączony...
+if (stylesheet.disabled) {
+   // zachowuje style in-line
+}
+
+

Specyfikacja

+

disabled

+

{{ languages( { "en": "en/DOM/stylesheet.disabled" } ) }}

diff --git a/files/pl/web/api/stylesheet/href/index.html b/files/pl/web/api/stylesheet/href/index.html new file mode 100644 index 0000000000..e0d7661c24 --- /dev/null +++ b/files/pl/web/api/stylesheet/href/index.html @@ -0,0 +1,42 @@ +--- +title: stylesheet.href +slug: Web/API/Stylesheet/href +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/href +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca położenie zewnetrznego arkusza stylów.

+

Składnia

+
uri = stylesheet.href
+
+

Parametry

+ +

Przykład

+
 // W lokalnej maszynie:
+ <html>
+  <head>
+   <link rel="StyleSheet" href="example.css" type="text/css" />
+   <script>
+    function sref() {
+     alert(document.styleSheets[0].href);
+    }
+   </script>
+  </head>
+  <body>
+   <div class="thunder">Thunder</div>
+   <button onclick="sref()">ss</button>
+  </body>
+ </html>
+// Zwraca "file:////C:/Windows/Desktop/example.css
+
+

Notatki

+

Jeżeli arkusz stylów jest zewnętrznym arkuszem stylów, wartością tego atrybutu jest jego lokalizacja. Dla wewnętrznego arkusza stylów, wartość tego atrybutu wynosi null.

+

Specyfikacja

+

href

diff --git a/files/pl/web/api/stylesheet/index.html b/files/pl/web/api/stylesheet/index.html new file mode 100644 index 0000000000..dca62c79ee --- /dev/null +++ b/files/pl/web/api/stylesheet/index.html @@ -0,0 +1,57 @@ +--- +title: Stylesheet +slug: Web/API/Stylesheet +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSStyleSheet +--- +

{{ ApiRef() }}

+ +

Ten dział opisuje obiekt CSSStyleSheet, który opisuje pojedynczy arkusz stylów css.

+ +

Arkusz stylów CSS składa się z reguł CSS, każda z nich może być manipulowana bezpośrednio przez obiekt CSSRule. Obiekt arkusza stylów pozwala ci kontrolować i modyfikować arkusze stylów,włączając jego listę reguł.

+ +

Możesz pobrać listę arkuszy stylów dla bieżącego dokumentu używając własności document.styleSheets.

+ +

Własności

+ +
+
stylesheet.cssRules
+
Zwraca wszystkie reguły/zasady CSS w arkuszu stylów jako tablicę.
+
stylesheet.disabled
+
Ta własność sygnalizuje, czy bieżący arkusz stylów jest używany lub nie.
+
stylesheet.href
+
Zwraca położenie zewnętrznego arkusza stylów.
+
stylesheet.media
+
SpeObiekt media określa zamierzony nośnik docelowy dla stylu informacji.
+
stylesheet.ownerNode
+
Zwraca węzeł łączący arkusz stylów z dokumentem.
+
stylesheet.ownerRule
+
Jeżeli arkusz stylów pochodzi z reguły @import, własność ownerRule będzie zawierać CSSImportRule.
+
stylesheet.parentStyleSheet
+
Zwraca arkusz stylów, który włącza obecny arkusz (jeśli istnieje).
+
stylesheet.title
+
Zwraca doradczy tytuł bieżącego arkusza stylów.
+
stylesheet.type
+
Określa język arkusza stylów dla tego arkusza stylów.
+
+ +

Metody

+ +
+
stylesheet.deleteRule
+
Usuwa reguły z arkusza stylów.
+
stylesheet.insertRule
+
Umieszcza nową regułę stylu dla bieżącego arkusza stylów.
+
+ +

Specyfikacja

+ +

DOM Level 2 Style Sheets: StyleSheet

+ +

DOM Level 2 CSS: CSSStyleSheet

+ +

{{ languages( { "en": "en/DOM/stylesheet" } ) }}

diff --git a/files/pl/web/api/stylesheet/insertrule/index.html b/files/pl/web/api/stylesheet/insertrule/index.html new file mode 100644 index 0000000000..eeabdc8a31 --- /dev/null +++ b/files/pl/web/api/stylesheet/insertrule/index.html @@ -0,0 +1,42 @@ +--- +title: stylesheet.insertRule +slug: Web/API/Stylesheet/insertRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/CSSStyleSheet/insertRule +--- +

{{APIRef("CSSOM")}}

+ +

Podsumowanie

+ +

Metoda insertRule dodaje nową regułę stylu do aktualnego arkuszu stylu.

+ +

Składnia

+ +
stylesheet.insertRule(rule, index)
+
+ +

Parametry

+ + + +

Przykład

+ +
 // push a new rule onto the top of my stylesheet
+ myStyle.insertRule("#blanc { color: white }", 0);
+
+ +

Uwagi

+ +

For rule sets this contains both the selector and the style declaration. For at-rules, this specifies both the at-identifier and the rule content.

+ +

Specyfikacja

+ +

insertRule 

diff --git a/files/pl/web/api/stylesheet/media/index.html b/files/pl/web/api/stylesheet/media/index.html new file mode 100644 index 0000000000..8264cd5cb1 --- /dev/null +++ b/files/pl/web/api/stylesheet/media/index.html @@ -0,0 +1,29 @@ +--- +title: stylesheet.media +slug: Web/API/Stylesheet/media +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/media +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Obiekt media określa zamierzony nośnik docelowy dla stylu informacji.

+

Składnia

+
medium = stylesheet.media
+stylesheet.media =medium
+
+

Parametry

+ +

Przykład

+
<link rel="StyleSheet" href="document.css" type="text/css" media="screen" />
+
+

Uwagi

+

Domyślną wartością dla media jest "screen".

+

Specyfikacja

+

DOM Level 2 Styles - STYLESHEET

+

{{ languages( { "en": "en/DOM/stylesheet.media" } ) }}

diff --git a/files/pl/web/api/stylesheet/ownerrule/index.html b/files/pl/web/api/stylesheet/ownerrule/index.html new file mode 100644 index 0000000000..93d73c35c5 --- /dev/null +++ b/files/pl/web/api/stylesheet/ownerrule/index.html @@ -0,0 +1,24 @@ +--- +title: stylesheet.ownerRule +slug: Web/API/Stylesheet/ownerRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Jeżeli arkusz stylów pochodzi z reguły @import, własność ownerRule będzie zawierać regułę CSSImportRule.

+

Składnia

+
rule = stylesheet.ownerRule
+
+

Parametry

+ +

Uwagi

+

Zauważ, że jeżeli wartość własności ownerNode bieżącego elementu STYLE wynosi NULL, wówczas reguła ownerRule zwróci !!TODO!!. I odwrotnie.

+

Specyfikacja

+

ownerRule

+

{{ languages( { "en": "en/DOM/stylesheet.ownerRule" } ) }}

diff --git a/files/pl/web/api/stylesheet/parentstylesheet/index.html b/files/pl/web/api/stylesheet/parentstylesheet/index.html new file mode 100644 index 0000000000..9d79c0197a --- /dev/null +++ b/files/pl/web/api/stylesheet/parentstylesheet/index.html @@ -0,0 +1,29 @@ +--- +title: stylesheet.parentStyleSheet +slug: Web/API/Stylesheet/parentStyleSheet +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/parentStyleSheet +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca arkusz stylów, który włącza obecny arkusz (jeśli istnieje).

+

Składnia

+
objRef = stylesheet.parentStyleSheet
+
+

Przykład

+
// znajdź arkusz stylów najwyższego poziomu
+if (stylesheet.parentStyleSheet) {
+  sheet = stylesheet.parentStyleSheet;
+}
+else
+{ sheet = stylesheet; }
+
+

Uwagi

+

Ta własność zwraca wartość NULL, jeśli obecny arkusz stylów jest arkuszem najwyższego poziomu lub jeśli włączanie arkuszy stylów nie jest obsługiwane.

+

Specyfikacja

+

parentStyleSheet

+

{{ languages( { "en": "en/DOM/stylesheet.parentStyleSheet" } ) }}

diff --git a/files/pl/web/api/stylesheet/title/index.html b/files/pl/web/api/stylesheet/title/index.html new file mode 100644 index 0000000000..48353f2667 --- /dev/null +++ b/files/pl/web/api/stylesheet/title/index.html @@ -0,0 +1,18 @@ +--- +title: stylesheet.title +slug: Web/API/Stylesheet/title +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/title +--- +

{{ ApiRef() }}

+

Podsumowanie

+

title zwraca doradczy tytuł bieżącego arkusza stylów.

+

Uwagi

+

Tytuł jest często określany w ownerNode.

+

Specyfikacja

+

title

+

{{ languages( { "en": "en/DOM/stylesheet.title" } ) }}

diff --git a/files/pl/web/api/stylesheet/type/index.html b/files/pl/web/api/stylesheet/type/index.html new file mode 100644 index 0000000000..ea1892faa4 --- /dev/null +++ b/files/pl/web/api/stylesheet/type/index.html @@ -0,0 +1,22 @@ +--- +title: stylesheet.type +slug: Web/API/Stylesheet/type +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/type +--- +

{{ ApiRef() }}

+

Podsumowanie

+

type określa język arkusza stylów dla tego arkusza stylów.

+

Składnia

+
string = stylesheet.type
+
+

Przykład

+
 ss.type = "text/css";
+
+

Specyfikacja

+

type

+

{{ languages( { "en": "en/DOM/stylesheet.type" } ) }}

diff --git a/files/pl/web/api/web_audio_api/index.html b/files/pl/web/api/web_audio_api/index.html new file mode 100644 index 0000000000..e67cec2fd6 --- /dev/null +++ b/files/pl/web/api/web_audio_api/index.html @@ -0,0 +1,503 @@ +--- +title: Web Audio API +slug: Web/API/Web_Audio_API +translation_of: Web/API/Web_Audio_API +--- +
+

Web Audio API to potężny i uniwersalny system webowej kontroli audio umożliwiający deweloperom wybór źródeł audio, dodawanie efektów do audio, tworzenie wizualizacji audio, stosowanie efektów przestrzennych (jak panorama) i wiele więcej.

+
+ +

Założenia Web Audio i jego zastosowanie

+ +

Web Audio API dotyczy przebiegu operacji audio wewnątrz kontekstu audio (audio context) i został zaprojektowany po to, by umożliwić obróbkę modularną (modular routing). Podstawowe operacje audio zostają wykonywane z węzłami audio (audio nodes), które złączone tworzą wykres trasowania audio (audio routing graph). Niektóre źródła - o różnych typach układów kanałów - są wspierane nawet w obrębie pojedynczego kontekstu. Modularny design cechuje się elastycznością umożliwiającą tworzenie złożonych funkcji audio z efektami dynamicznymi.

+ +

Audio nodes are linked into chains and simple webs by their inputs and outputs. They typically start with one or more sources. Sources provide arrays of sound intensities (samples) at very small timeslices, often tens of thousands of them per second. These could be either computed mathematically (such as {{domxref("OscillatorNode")}}), or they can be recordings from sound/video files (like {{domxref("AudioBufferSourceNode")}} and {{domxref("MediaElementAudioSourceNode")}}) and audio streams ({{domxref("MediaStreamAudioSourceNode")}}). In fact, sound files are just recordings of sound intensities themselves, which come in from microphones or electric instruments, and get mixed down into a single, complicated wave.

+ +

Outputs of these nodes could be linked to inputs of others, which mix or modify these streams of sound samples into different streams. A common modification is multiplying the samples by a value to make them louder or quieter (as is the case with {{domxref("GainNode")}}). Once the sound has been sufficiently processed for the intended effect, it can be linked to the input of a destination ({{domxref("AudioContext.destination")}}), which sends the sound to the speakers or headphones. This last connection is only necessary if the user is supposed to hear the audio.

+ +

A simple, typical workflow for web audio would look something like this:

+ +
    +
  1. Create audio context
    2. +
  2. Inside the context, create sources — such as <audio>, oscillator, stream
    3. +
  3. Create effects nodes, such as reverb, biquad filter, panner, compressor
    4. +
  4. Choose final destination of audio, for example your system speakers
    5. +
  5. Connect the sources up to the effects, and the effects to the destination.
    6. +
+ +

A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information.

+ +

Timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to target specific samples, even at a high sample rate. So applications such as drum machines and sequencers are well within reach.

+ +

The Web Audio API also allows us to control how audio is spatialized. Using a system based on a source-listener model, it allows control of the panning model and deals with distance-induced attenuation or doppler shift induced by a moving source (or moving listener).

+ +
+

You can read about the theory of the Web Audio API in a lot more detail in our article Basic concepts behind Web Audio API.

+
+ +

Web Audio API Interfaces

+ +

The Web Audio API has a number of interfaces and associated events, which we have split up into nine categories of functionality.

+ +

General audio graph definition

+ +

General containers and definitions that shape audio graphs in Web Audio API usage.

+ +
+
{{domxref("AudioContext")}}
+
The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an {{domxref("AudioNode")}}. An audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an AudioContext before you do anything else, as everything happens inside a context.
+
{{domxref("AudioNode")}}
+
The AudioNode interface represents an audio-processing module like an audio source (e.g. an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element), audio destination, intermediate processing module (e.g. a filter like {{domxref("BiquadFilterNode")}}, or volume control like {{domxref("GainNode")}}).
+
{{domxref("AudioParam")}}
+
The AudioParam interface represents an audio-related parameter, like one of an {{domxref("AudioNode")}}. It can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.
+
The {{event("ended")}} event
+
The ended event is fired when playback has stopped because the end of the media was reached.
+
+ +

Defining audio sources

+ +

Interfaces that define audio sources for use in the Web Audio API.

+ +
+
{{domxref("OscillatorNode")}}
+
The OscillatorNode interface represents a periodic waveform, such as a sine or triangle wave. It is an {{domxref("AudioNode")}} audio-processing module that causes a given frequency of wave to be created.
+
{{domxref("AudioBuffer")}}
+
The AudioBuffer interface represents a short audio asset residing in memory, created from an audio file using the {{ domxref("AudioContext.decodeAudioData()") }} method, or created with raw data using {{ domxref("AudioContext.createBuffer()") }}. Once decoded into this form, the audio can then be put into an {{ domxref("AudioBufferSourceNode") }}.
+
{{domxref("AudioBufferSourceNode")}}
+
The AudioBufferSourceNode interface represents an audio source consisting of in-memory audio data, stored in an {{domxref("AudioBuffer")}}. It is an {{domxref("AudioNode")}} that acts as an audio source.
+
{{domxref("MediaElementAudioSourceNode")}}
+
The MediaElementAudioSourceNode interface represents an audio source consisting of an HTML5 {{ htmlelement("audio") }} or {{ htmlelement("video") }} element. It is an {{domxref("AudioNode")}} that acts as an audio source.
+
{{domxref("MediaStreamAudioSourceNode")}}
+
The MediaStreamAudioSourceNode interface represents an audio source consisting of a WebRTC {{domxref("MediaStream")}} (such as a webcam, microphone, or a stream being sent from a remote computer). It is an {{domxref("AudioNode")}} that acts as an audio source.
+
+ +

Defining audio effects filters

+ +

Interfaces for defining effects that you want to apply to your audio sources.

+ +
+
{{domxref("BiquadFilterNode")}}
+
The BiquadFilterNode interface represents a simple low-order filter. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices, or graphic equalizers. A BiquadFilterNode always has exactly one input and one output.
+
{{domxref("ConvolverNode")}}
+
The ConvolverNode interface is an {{domxref("AudioNode")}} that performs a Linear Convolution on a given {{domxref("AudioBuffer")}}, and is often used to achieve a reverb effect.
+
{{domxref("DelayNode")}}
+
The DelayNode interface represents a delay-line; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.
+
{{domxref("DynamicsCompressorNode")}}
+
The DynamicsCompressorNode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.
+
{{domxref("GainNode")}}
+
The GainNode interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given gain to be applied to the input data before its propagation to the output.
+
{{domxref("StereoPannerNode")}}
+
The StereoPannerNode interface represents a simple stereo panner node  that can be used to pan an audio stream left or right.
+
{{domxref("WaveShaperNode")}}
+
The WaveShaperNode interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.
+
{{domxref("PeriodicWave")}}
+
Describes a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.
+
+ +

Defining audio destinations

+ +

Once you are done processing your audio, these interfaces define where to output it.

+ +
+
{{domxref("AudioDestinationNode")}}
+
The AudioDestinationNode interface represents the end destination of an audio source in a given context — usually the speakers of your device.
+
{{domxref("MediaStreamAudioDestinationNode")}}
+
The MediaStreamAudioDestinationNode interface represents an audio destination consisting of a WebRTC {{domxref("MediaStream")}} with a single AudioMediaStreamTrack, which can be used in a similar way to a {{domxref("MediaStream")}} obtained from {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.
+
+ +

Data analysis and visualization

+ +

If you want to extract time, frequency, and other data from your audio, the AnalyserNode is what you need.

+ +
+
{{domxref("AnalyserNode")}}
+
The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.
+
+ +

Splitting and merging audio channels

+ +

To split and merge audio channels, you'll use these interfaces.

+ +
+
{{domxref("ChannelSplitterNode")}}
+
The ChannelSplitterNode interface separates the different channels of an audio source out into a set of mono outputs.
+
{{domxref("ChannelMergerNode")}}
+
The ChannelMergerNode interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.
+
+ +

Audio spatialization

+ +

These interfaces allow you to add audio spatialization panning effects to your audio sources.

+ +
+
{{domxref("AudioListener")}}
+
The AudioListener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.
+
{{domxref("PannerNode")}}
+
The PannerNode interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.
+
+ +

Audio processing in JavaScript

+ +

You can write JavaScript code to process audio data. To do so, you use the interfaces and events listed below.

+ +
+

As of the August 29, 2014 version of the Web Audio API spec. these features have been marked as deprecated, and are soon to be replaced by {{ anch("Audio_Workers") }}.

+
+ +
+
{{domxref("ScriptProcessorNode")}}
+
The ScriptProcessorNode interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.
+
{{event("audioprocess")}} (event)
+
The audioprocess event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.
+
{{domxref("AudioProcessingEvent")}}
+
The Web Audio API AudioProcessingEvent represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.
+
+ +

Offline/background audio processing

+ +

It is possible to process/render an audio graph very quickly in the background — rendering it to an {{domxref("AudioBuffer")}} rather than to the device's speakers — with the following.

+ +
+
{{domxref("OfflineAudioContext")}}
+
The OfflineAudioContext interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard AudioContext, an OfflineAudioContext doesn't really render the audio but rather generates it, as fast as it can, in a buffer.
+
{{event("complete")}} (event)
+
The complete event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.
+
{{domxref("OfflineAudioCompletionEvent")}}
+
The OfflineAudioCompletionEvent represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.
+
+ +

Audio Workers

+ +

Audio workers provide the ability for direct scripted audio processing to be done inside a web worker context, and are defined by a couple of interfaces (new as of 29th August 2014). These are not implemented in any browsers yet. When implemented, they will replace {{domxref("ScriptProcessorNode")}}, and the other features discussed in the Audio processing in JavaScript section above.

+ +
+
{{domxref("AudioWorkerNode")}}
+
The AudioWorkerNode interface represents an {{domxref("AudioNode")}} that interacts with a worker thread to generate, process, or analyse audio directly.
+
{{domxref("AudioWorkerGlobalScope")}}
+
The AudioWorkerGlobalScope interface is a DedicatedWorkerGlobalScope-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worker thread.
+
{{domxref("AudioProcessEvent")}}
+
This is an Event object that is dispatched to {{domxref("AudioWorkerGlobalScope")}} objects to perform processing.
+
+ +

Obsolete interfaces

+ +

The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.

+ +
+
{{domxref("JavaScriptNode")}}
+
Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.
+
{{domxref("WaveTableNode")}}
+
Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.
+
+ +

Example

+ +

This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the Voice-change-o-matic demo (also check out the full source code at Github) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!

+ +

The Web Audio API lines are highlighted; if you want to find out more about what the different methods, etc. do, have a search around the reference pages.

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
+// Webkit/blink browsers need prefix, Safari won't work without window.
+
+var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
+var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
+var mute = document.querySelector('.mute'); // mute button
+var drawVisual; // requestAnimationFrame
+
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+
+function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i < n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+
+navigator.getUserMedia (
+  // constraints - only audio needed for this app
+  {
+    audio: true
+  },
+
+  // Success callback
+  function(stream) {
+    source = audioCtx.createMediaStreamSource(stream);
+    source.connect(analyser);
+    analyser.connect(distortion);
+    distortion.connect(biquadFilter);
+    biquadFilter.connect(gainNode);
+    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together
+
+    visualize(stream);
+    voiceChange();
+
+  },
+
+  // Error callback
+  function(err) {
+    console.log('The following gUM error occured: ' + err);
+  }
+);
+
+function visualize(stream) {
+  WIDTH = canvas.width;
+  HEIGHT = canvas.height;
+
+  var visualSetting = visualSelect.value;
+  console.log(visualSetting);
+
+  if(visualSetting == "sinewave") {
+    analyser.fftSize = 2048;
+    var bufferLength = analyser.frequencyBinCount; // half the FFT value
+    var dataArray = new Uint8Array(bufferLength); // create an array to store the data
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i < bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(visualSetting == "off") {
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+  }
+
+}
+
+function voiceChange() {
+  distortion.curve = new Float32Array;
+  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run
+
+  var voiceSetting = voiceSelect.value;
+  console.log(voiceSetting);
+
+  if(voiceSetting == "distortion") {
+    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
+  } else if(voiceSetting == "biquad") {
+    biquadFilter.type = "lowshelf";
+    biquadFilter.frequency.value = 1000;
+    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
+  } else if(voiceSetting == "off") {
+    console.log("Voice settings turned off"); // do nothing, as off option was chosen
+  }
+
+}
+
+// event listeners to change visualize and voice settings
+
+visualSelect.onchange = function() {
+  window.cancelAnimationFrame(drawVisual);
+  visualize(stream);
+}
+
+voiceSelect.onchange = function() {
+  voiceChange();
+}
+
+mute.onclick = voiceMute;
+
+function voiceMute() { // toggle to mute and unmute sound
+  if(mute.id == "") {
+    gainNode.gain.value = 0; // gain set to 0 to mute sound
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.gain.value = 1; // gain set to 1 to unmute sound
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API')}}{{Spec2('Web Audio API')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support14 {{property_prefix("webkit")}}{{CompatVersionUnknown}}23{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}28 {{property_prefix("webkit")}}{{CompatVersionUnknown}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
+
+ +

See also

+ + + + diff --git a/files/pl/web/api/webgl_api/index.html b/files/pl/web/api/webgl_api/index.html new file mode 100644 index 0000000000..a3cc7bb3d0 --- /dev/null +++ b/files/pl/web/api/webgl_api/index.html @@ -0,0 +1,252 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - WebGL +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +

WebGL (Web Graphics Library) to API języka JavaScript służące do renderowania (rysowania) interaktywnej grafiki 3D i 2D poprzez kompatybilną przeglądarkę bez używania pluginów. WebGL został oparty na API OpenGL ES 2.0 i może zostać wykorzystany do pracy z elementem {{HTMLElement("canvas")}}.

+ +

Aktualnie Jest wspierany przez Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ i Internet Explorer 11+; ponad to urządzenie użytkownika musi także spełniać odpowiednie warunki sprzętowe, aby móc obsłużyć WebGL (przede wszystkim obsługiwać OpenGL co najmniej w wersji 2.0).

+ +
+
+

Tematy

+ +
+
Rozpocznij pracę z WebGL
+
Czyli jak stworzyć pierwszy kontekst WebGL.
+
Dodawanie grafiki 2D do kontekstu WebGL
+
Czyli jak wyświetlić proste kształty używając WebGL.
+
Nakładamy kolory używając shaderów w WebGL
+
Czyli jak dodać nieco koloru naszym figurom w WebGL
+
Animacja obiektów w WebGL
+
Pokażemy jak zmieniać i przekształcać obiekty na potrzeby prostej animacji.
+
Tworzenie obiektów 3D używając WebGL
+
Pokażemy jak tworzyć i animować obiekty 3D (w tym przykładzie, sześcian).
+
Tworzenie tekstur w WebGL
+
Zademonstrowanie tworzenia map tekstur, na obiektach.
+
Światła w WebGL
+
Jak zasymulować efekty świetlne w twoim kontekście WebGL.
+
Animacja tekstur w WebGL
+
Pokaz, jak animować tekstury, w tym przypadku mapowanie strumienia Ogg na obracającym się sześcianie.
+
WebGL - najlepsze praktyki
+
Porady i sugestie na wdrożenie zawartości WebGL.
+
Cross-domain textures
+
Informacje na temat załadowania tekstur dla domen innych niż aktualne informacje, które są przetwarzane.
+
Używanie rozszerzeń
+
Jak używać rozszerzeń aby włączyć je w WebGL.
+
+
+ +
+ + +
+
Raw WebGL: An introduction to WebGL
+
Rozmowa z Nick Desaulniers o wprowadzająca do podstaw WebGL. To jest idealne miejsce aby zacząć jeśli nigdy nie programowałeś grafiki niskopoziomowej.
+
WebGL - Specyfikacje
+
Specyfikacja WebGL.
+
Strona Khronos WebGL
+
Strona domowa WebGL w Khronos Group.
+
Learning WebGL
+
Strona z tutorialami na temat jak używać WebGL.
+
WebGL Fundamentals
+
Tutorial z podstawami WebGL.
+
WebGL Matrices
+
Wprowadzenie metryk używając 2D WebGL. Ta seria wyjaśnia także matematyczne zależności perspektyw 3D.
+
The WebGL Cookbook
+
Strona z poręcznymi przykładami kodu WebGL.
+
Planet WebGL
+
Agregat dla ludzi zaangażowanych w społeczność WebGL.
+
ewgl-matrices
+
Biblioteka 'blazing fast matrix' dla WebGL
+
glMatrix
+
Biblioteka JavaScript Matrix and Vector dla wysoko wydajnych app WebGL.
+
mjs
+
A JavaScript vector and matrix math library, optimized for WebGL usage.
+
Sylvester
+
Biblioteka Open Source do manipulowania wektorami i metrykami. Nie zoptymalizowana pod WebGl (eksperymentalna).
+
WebGL playground
+
Narzędzia online do twoarzenia i dzielenia się projektami WebGL. Dobra dla szybkich prototypów i eksperymenotwania.
+
WebGL Academy
+
HTML/Javascript edytor z tutorialami do nauki podstaw programowania WebGL.
+
 
+
+
+
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("2.0")}}91112 (experiment)5.1 (experiment)
OES_texture_float{{CompatGeckoDesktop("6.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_standard_derivatives{{CompatGeckoDesktop("10.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_texture_filter_anisotropic{{CompatGeckoDesktop("13.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_s3tc{{CompatGeckoDesktop("15.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
drawingBufferWidth and drawingBufferHeight attributes{{CompatGeckoDesktop("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)Chrome for AndroidIE MobileOpera MobileSafari Mobile
Basic support425 (experiment){{CompatNo}}12 (experiment)8.1
drawingBufferWidth and drawingBufferHeight attributes{{CompatGeckoMobile("9.0")}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_texture_float{{CompatGeckoMobile("6.0")}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_standard_derivatives{{CompatGeckoMobile("10.0")}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_texture_filter_anisotropic{{CompatGeckoMobile("13.0")}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_element_index_uint{{CompatUnknown}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_vertex_array_object{{CompatUnknown}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_s3tc{{CompatGeckoMobile("15.0")}}25
+ prefixed with WEBKIT_		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBKIT_EXT_texture_filter_nisotropic{{CompatNo}}25{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Compatibility notes

+ +

In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the webgl context name, but older ones need experimental-webgl as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name experimental-webgl2 in the future for testing.

+ +

Gecko notes

+ +

WebGL debugging and testing

+ +

Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:

+ +
+
webgl.min_capability_mode
+
Boolean-owska stała, oznaczająca tryb w którym włączenie jej na true, przyczynia się do włączenia minimum kompatybilności. Kiedy ten tryb jest włączony, WebGL jest skonfigurowany w taki sposób, aby wspomagał w minimalnym zakresie jego możliwości, wymagane przez specyfikacje. Tryb ten zapewnia możliwość pracy kodu WebGL na urządzeniach i przeglądarkach niezależnie od ich kompatybilności. Opcja false jest ustawiona domyślnie.
+
 
+
webgl.disable_extensions
+
Boolean-owska stała, oznaczająca tryb w którym ustawienie jej na true, powoduje zamknięcie wszystkich rozszerzeń WebGL. Wartość false jest ustawiona domyślnie.
+
diff --git a/files/pl/web/api/webgl_api/tutorial/index.html b/files/pl/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..cecc84cbfe --- /dev/null +++ b/files/pl/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,40 @@ +--- +title: WebGL tutorial +slug: Web/API/WebGL_API/Tutorial +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +
{{WebGLSidebar}}
+ +
+

WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

+
+ +

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

+ +

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 and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.

+ +

In this tutorial

+ +
+
Getting started with WebGL
+
How to set up a WebGL context.
+
Adding 2D content to a WebGL context
+
How to render simple flat shapes using WebGL.
+
Using shaders to apply color in WebGL
+
Demonstrates how to add color to shapes using shaders.
+
Animating objects with WebGL
+
Shows how to rotate and translate objects to create simple animations.
+
Creating 3D objects using WebGL
+
Shows how to create and animate a 3D object (in this case, a cube).
+
Using textures in WebGL
+
Demonstrates how to map textures onto the faces of an object.
+
Lighting in WebGL
+
How to simulate lighting effects in your WebGL context.
+
Animating textures in WebGL
+
Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.
+
diff --git a/files/pl/web/api/window/alert/index.html b/files/pl/web/api/window/alert/index.html new file mode 100644 index 0000000000..786efd57a3 --- /dev/null +++ b/files/pl/web/api/window/alert/index.html @@ -0,0 +1,58 @@ +--- +title: window.alert +slug: Web/API/Window/alert +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/alert +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Wyświetla okno ostrzegawcze z podanym tekstem.

+ +

Składnia

+ +
window.alert(wiadomość);
+
+ + + +

Przykład

+ +
window.alert("Hello world!");
+// "window." prefix jest opcjonalny, więc
+// alert("Hello world!"); będzie miało taki sam efekt
+
+ +

Wyświetli:

+ +

Grafika:AlertHelloWorld.png

+ +

Uwagi

+ +

Okno ostrzegawcze powinno być używane do przekazania wiadomości, które nie wymagają żadnej odpowiedzi ze strony użytkownika, poza potwierdzeniem komunikatu.

+ +

The following text is shared between this article, DOM:window.prompt and DOM:window.confirm Okna dialogowe to okna modalne - uniemożliwiają użytkownikowi dostęp do reszty interfejsu programu dopóki okno nie zostanie zamknięte. Z tego powodu nie powinieneś nadużywać funkcji, które otwierają okna dialogowe.

+ +

Przy pracy z chrome (np. przy tworzeniu rozszerzenie) zaleca się korzystanie z nsIPromptService.

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +

Zobacz też

+ +

confirm, prompt

+ +

Dla chrome zobacz alert() i alertCheck()

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.alert", "fr": "fr/DOM/window.alert", "ja": "ja/DOM/window.alert" } ) }}

diff --git a/files/pl/web/api/window/applicationcache/index.html b/files/pl/web/api/window/applicationcache/index.html new file mode 100644 index 0000000000..5f176fa81e --- /dev/null +++ b/files/pl/web/api/window/applicationcache/index.html @@ -0,0 +1,33 @@ +--- +title: Window.applicationCache +slug: Web/API/Window/applicationCache +translation_of: Web/API/Window/applicationCache +--- +

{{APIRef}}

+ +

Podsumowanie

+ +

Zwraca referencję do obiektu przetrzymującego cache aplikacji.

+ +

Składnia

+ +
cache = window.applicationCache
+
+ +

Parametry

+ + + +

Specyfikacja

+ + + +

Zobacz także

+ + diff --git a/files/pl/web/api/window/clearinterval/index.html b/files/pl/web/api/window/clearinterval/index.html new file mode 100644 index 0000000000..e763be1f4a --- /dev/null +++ b/files/pl/web/api/window/clearinterval/index.html @@ -0,0 +1,28 @@ +--- +title: window.clearInterval +slug: Web/API/Window/clearInterval +tags: + - Window +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +
+ {{ApiRef}}
+

Podsumowanie

+

Anuluje powtarzającą się akcję, która została utworzona korzystając z setInterval().

+

Składnia

+
window.clearInterval(idInterwalu)
+
+

idInterwalu to identyfikator powtarzającej się akcji, która ma zostać anulowana. Ten identyfikator został zwrócony z {{domxref("window.setInterval","setInterval()")}}.

+

Przykład

+

Zobacz przykład z setInterval().

+

Specification

+

{{DOM0}}

+

Zobacz także

+ diff --git a/files/pl/web/api/window/cleartimeout/index.html b/files/pl/web/api/window/cleartimeout/index.html new file mode 100644 index 0000000000..64604dc479 --- /dev/null +++ b/files/pl/web/api/window/cleartimeout/index.html @@ -0,0 +1,40 @@ +--- +title: window.clearTimeout +slug: Web/API/Window/clearTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Usuwa opóźnienie ustanione przez window.setTimeout().

+

Składnia

+
window.clearTimeout(id)
+
+

gdzie id jest identyfikatorem opóźnienia do usunięcia, który został zwrócony podczas wywołania window.setTimeout().

+

Przykład

+

Uruchomienie poniższego skryptu w kontekscie strony i pojedyncze kliknięcie spowoduje wyświetlenie wiadomości po jednej sekundzie. Jeżeli użytkownik będzie klikał na stronie przynajmniej raz na sekundę wiadomość nigdy nie zostanie wyświetlona.

+
var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    this.cancel();
+    var self = this;
+    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
+  },
+
+  cancel: function() {
+    if(typeof this.timeoutID == "number") {
+      window.clearTimeout(this.timeoutID);
+      delete this.timeoutID;
+    }
+  }
+};
+window.onclick = function() { alarm.setup() };
+
+

Uwagi

+

Przekazanie niepoprawnego ID do clearTimeout nie powoduje żadnej akcji (żaden błąd nie jest wyrzucany).

+

Specyfikacja

+

{{ DOM0() }}

+

{{ languages( { "en": "en/DOM/window.clearTimeout", "fr": "fr/DOM/window.clearTimeout", "ja": "ja/DOM/window.clearTimeout", "pl": "pl/DOM/window.clearTimeout" } ) }}

diff --git a/files/pl/web/api/window/closed/index.html b/files/pl/web/api/window/closed/index.html new file mode 100644 index 0000000000..bdffbcd94d --- /dev/null +++ b/files/pl/web/api/window/closed/index.html @@ -0,0 +1,59 @@ +--- +title: window.closed +slug: Web/API/Window/closed +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/closed +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Ta własność oznacza czy dane okno jest zamknięte lub nie.

+

Składnia

+
var isClosed = windowRef.closed;
+
+


+ Ta własność jest tylko do odczytu.

+

Zwracane wartości

+
+
+ isClosed
+
+ Wartość logiczna. Możliwe wartości:
+
+ +

Przykłady

+

Zmiana adresu URL okna pierwotnego z okna otworzonego

+

Ten przykład demonstruje w jaki sposób okno otworzone może zmienić adres URL okna, które je otwarło. Przed próbą zmiany adresu URL, sprawdza czy obecne okno posiada okno-rodzica stosując własność window.opener oraz czy nie zostało ono zamknięte.

+
// Sprawdza czy okno otwierające istnieje i nie zostało zamknięte
+if (window.opener && !window.opener.closed) {
+  window.opener.location.href = "http://www.mozilla.org";
+}
+
+

Zauważ, że okno otwierane ma dostęp tylko do okna, które je otworzyło.

+

Odświeżanie uprzednio otwartego okna

+

W tym przykładzie funkcja refreshPopupWindow() wywołuje metodę reload obiektu location otwartego okna, by odświeżyć jego dane. Jeżeli okno nie zostało jeszcze otwarte, bądź użytkownik zamknął je, zostaje utworzone nowe okno.

+
var popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow && !popupWindow.closed) {
+    // popupWindow jest otwarte, przeładujmy je
+    popupWindow.location.reload(true);
+  } else {
+    // Otwieramy nowe okno
+    popupWindow = window.open("popup.html","dataWindow");
+  }
+}
+
+

Specyfikacja

+

DOM Level 0. window.closed nie jest częścią żadnej specyfikacji W3C, ani technicznej rekomendacji.

+

Dodatkowe źródła

+

MSDN window.closed

+
+  
+

{{ languages( { "en": "en/DOM/window.closed", "fr": "fr/DOM/window.closed", "ja": "ja/DOM/window.closed" } ) }}

diff --git a/files/pl/web/api/window/content/index.html b/files/pl/web/api/window/content/index.html new file mode 100644 index 0000000000..66eed370a9 --- /dev/null +++ b/files/pl/web/api/window/content/index.html @@ -0,0 +1,43 @@ +--- +title: window.content +slug: Web/API/Window/content +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/content +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca obiekt Window dla zawartości głównego okna. This is useful in XUL windows that have a <browser> (or tabbrowser or <iframe>) with type="content-primary" attribute on it - the most famous example is Firefox main window, browser.xul. In such cases, content returns a reference to the Window object for the document currently displayed in the browser. It is a shortcut for browserRef.contentWindow.

+ +

In unprivileged content (webpages), content is normally equivalent to top (except in the case of a webpage loaded in a sidebar, content still refers to the Window of the currently selected tab).

+ +

Some examples use _content instead of content. The former has been deprecated for a long time, and you should use content in the new code.

+ +

Składnia

+ +
var windowObject = window.content;
+
+ +

Przykład

+ +

Executing the following code in a chrome XUL window with a <browser type="content-primary"/> element in it draws a red border around the first div on the page currently displayed in the browser:

+ +
content.document.getElementsByTagName("div")[0].style.border = "solid red 1px";
+
+ +

Specyfikacja

+ +

Nie jest częścią żadnej specyfikacji.

+ +

Zobacz także

+ + diff --git a/files/pl/web/api/window/controllers/index.html b/files/pl/web/api/window/controllers/index.html new file mode 100644 index 0000000000..cdb67298bf --- /dev/null +++ b/files/pl/web/api/window/controllers/index.html @@ -0,0 +1,24 @@ +--- +title: window.controllers +slug: Web/API/Window/controllers +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/controllers +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca kontrolery XUL okna chrome.

+

Składnia

+
controllers = window.controllers
+
+ +

Specyfikacja

+

XUL-specific. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.controllers", "ja": "ja/DOM/window.controllers" } ) }}

diff --git a/files/pl/web/api/window/crypto/index.html b/files/pl/web/api/window/crypto/index.html new file mode 100644 index 0000000000..5d7bac8666 --- /dev/null +++ b/files/pl/web/api/window/crypto/index.html @@ -0,0 +1,19 @@ +--- +title: window.crypto +slug: Web/API/Window/crypto +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/crypto +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca obiekt crypto przeglądarki, który może być wtedy użyty do manipulacji różnymi własnościami zabezpieczeń przeglądarki.

+

Zobacz więcej szczegółów o JavaScript crypto.

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.crypto", "ja": "ja/DOM/window.crypto" } ) }}

diff --git a/files/pl/web/api/window/defaultstatus/index.html b/files/pl/web/api/window/defaultstatus/index.html new file mode 100644 index 0000000000..f352835233 --- /dev/null +++ b/files/pl/web/api/window/defaultstatus/index.html @@ -0,0 +1,35 @@ +--- +title: window.defaultStatus +slug: Web/API/Window/defaultStatus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/defaultStatus +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Pobiera/ustawia tekst paska stanu dla danego okna.

+

Składnia

+
sMsg = window.defaultStatus
+window.defaultStatus =sMsg
+
+

Parametry

+ +

Przykład

+
<html>
+ <body onload="window.defaultStatus='hello!';"/>
+  <button onclick="window.confirm('Czy jesteś pewien, że chcesz wyjść?');">confirm</button>
+ </body>
+</htm>
+
+

Uwagi

+

Aby ustawić zawartość paska stanu, gdy okno zostało już otwarte, możemy użyć window.status.

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.defaultStatus", "ja": "ja/DOM/window.defaultStatus" } ) }}

diff --git a/files/pl/web/api/window/directories/index.html b/files/pl/web/api/window/directories/index.html new file mode 100644 index 0000000000..7c4e113760 --- /dev/null +++ b/files/pl/web/api/window/directories/index.html @@ -0,0 +1,33 @@ +--- +title: window.directories +slug: Web/API/Window/directories +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/directories +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca obiekt paska adresu okna.

+

Składnia

+
dirBar = window.directories
+
+

Parametry

+

+ + dirBar + jest obiektem typu barProp.

+

Przykład

+
<script>
+ function dirs() {
+  alert(window.directories);
+ }
+</script>
+
+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.directories", "ja": "ja/DOM/window.directories" } ) }}

diff --git a/files/pl/web/api/window/document/index.html b/files/pl/web/api/window/document/index.html new file mode 100644 index 0000000000..296c81af50 --- /dev/null +++ b/files/pl/web/api/window/document/index.html @@ -0,0 +1,40 @@ +--- +title: window.document +slug: Web/API/Window/document +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/document +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca referencję do dokumentu zawartego w oknie.

+

Składnia

+
doc = window.document
+
+

Parametry

+ +

Przykład

+
<html>
+<head>
+   <title>Witaj, Świecie!</title>
+</head>
+<body>
+
+<script type="text/javascript">
+   var doc = window.document;
+   alert( doc.title);    // wyświetli: Witaj, Świecie!
+</script>
+
+</body>
+</html>
+

Specyfikacja

+

{{ DOM0() }}

+
+  
+

{{ languages( { "en": "en/DOM/window.document", "fr": "fr/DOM/window.document", "ja": "ja/DOM/window.document" } ) }}

diff --git a/files/pl/web/api/window/dump/index.html b/files/pl/web/api/window/dump/index.html new file mode 100644 index 0000000000..f0ddb923c3 --- /dev/null +++ b/files/pl/web/api/window/dump/index.html @@ -0,0 +1,30 @@ +--- +title: window.dump +slug: Web/API/Window/dump +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/dump +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wypisuje wiadomość w konsoli.

+

Składnia

+
dump(wiadomość);
+
+ +

Uwagi

+

dump jest często używany do debugowania JavaScriptu. W uprzywilejowanym kodzie można użyć także Components.utils.reportError oraz nsIConsoleService do zapisu w konsoli błędów.

+

W Gecko dump jest domyślnie zablokowane - jego użycie nic nie powoduje, nie wywołuje też żadnego błędu. Aby zobaczyć wyjście metody dump, musisz włączyć ją, zmieniając preferencję browser.dom.window.dump.enabled na true. Możesz to zrobić za pomocą about:config lub pliku user.js

+

Żeby cokolwiek zobaczyć, będziesz potrzebował konsoli. Jeśli jeszcze jej nie masz, zamknięcie programu i wywołanie z parametrem <tt>-console</tt> w linii poleceń powinno otworzyć konsolę.

+

dump jest też dostępny dla komponentów XPCOM implementowanych w JavaScript, mimo że w ich kontekście window nie jest obiektem globalnym.

+

Specyfikacja

+

{{ DOM0() }}

+
+  
+

{{ languages( { "en": "en/DOM/window.dump", "fr": "fr/DOM/window.dump", "ja": "ja/DOM/window.dump" } ) }}

diff --git a/files/pl/web/api/window/focus/index.html b/files/pl/web/api/window/focus/index.html new file mode 100644 index 0000000000..35cb33dbc4 --- /dev/null +++ b/files/pl/web/api/window/focus/index.html @@ -0,0 +1,24 @@ +--- +title: window.focus +slug: Web/API/Window/focus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/focus +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Ustawia okno jako aktywne.

+

Składnia

+
window.focus()
+
+

Przykład

+
if (clicked) { window.focus(); }
+
+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.focus", "ja": "ja/DOM/window.focus" } ) }}

diff --git a/files/pl/web/api/window/frameelement/index.html b/files/pl/web/api/window/frameelement/index.html new file mode 100644 index 0000000000..773e7d37e2 --- /dev/null +++ b/files/pl/web/api/window/frameelement/index.html @@ -0,0 +1,34 @@ +--- +title: window.frameElement +slug: Web/API/Window/frameElement +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/frameElement +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca element (jak np. <iframe> lub <object>), w którym osadzone jest okno lub wartość null, gdy okno jest najwyższego poziomu.

+

Składnia

+
varframeEl = window.frameElement;
+
+ +

Przykład

+
var frameEl = window.frameElement;
+// jeśli jesteśmy wewnątrz ramki, to zmień jej adres URL na 'http://mozilla.org/'
+if (frameEl)
+  frameEl.src = 'http://mozilla.org/';
+
+

Uwagi

+

Zauważ, że pomimo swojej nazwy własność działa również dla dokumentów wewnątrz <object> lub innych elementów osadzających.

+

Zobacz także window.parent, który zwraca okno-rodzica, którym jest okno zawierające frameElement okna-dziecka.

+

Specyfikacja

+

{{ DOM0() }}

+
+  
+

{{ languages( { "en": "en/DOM/window.frameElement", "ja": "ja/DOM/window.frameElement" } ) }}

diff --git a/files/pl/web/api/window/frames/index.html b/files/pl/web/api/window/frames/index.html new file mode 100644 index 0000000000..1e1e625ca4 --- /dev/null +++ b/files/pl/web/api/window/frames/index.html @@ -0,0 +1,31 @@ +--- +title: window.frames +slug: Web/API/Window/frames +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/frames +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca obiekt tablico-podobny, zawierający listę ramek podrzędnych bieżącego okna.

+

Składnia

+
frameList = window.frames;
+
+ +

Przykład

+
var frames = window.frames; // lub // var frames = window.parent.frames;
+for (var i = 0; i < frames.length; i++) {
+  // zrób coś z każdą ramką podrzędną jako frames[i]
+  frames[i].document.body.style.background = "red";
+}
+
+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.frames", "ja": "ja/DOM/window.frames" } ) }}

diff --git a/files/pl/web/api/window/getselection/index.html b/files/pl/web/api/window/getselection/index.html new file mode 100644 index 0000000000..c6768feb45 --- /dev/null +++ b/files/pl/web/api/window/getselection/index.html @@ -0,0 +1,39 @@ +--- +title: window.getSelection +slug: Web/API/Window/getSelection +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/getSelection +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca obiekt zaznaczenia reprezentujący zakres tekstu zaznaczonego przez użytkownika. Zauważ, że nie ma to żadnego powiązania z obiektem listy selekcji DOM!

+

Składnia

+
selection =window.getSelection();
+
+

Parametry

+ +

Przykład

+
function foo() {
+   var selObj = window.getSelection();
+   alert(selObj);
+   var selRange = selObj.getRangeAt(0);
+   // teraz możemy operować na zakresie
+}
+
+

Uwagi

+

W JavaScript, kiedy przesyłany jest obiekt selekcji do funkcji, zamiast jej, przesyłana jest jej reprezentacja w postaci ciągu znaków (tj. zaznaczony tekst). Może to złudnie przypominać, że obiekt selekcji wygląda jak ciąg znaków (obiekt string), kiedy tak naprawdę ma swoje własne właściwości i metody. Dokładniej, zwracana jest wartość wywołania metody toString(). I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian

+

Specyfikacja

+

DOM poziomu 0. Nie jest częścią specyfikacji.

+

Zobacz również

+

Selection, Range

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/window.getSelection", "es": "es/DOM/window.getSelection", "fr": "fr/DOM/window.getSelection", "it": "it/DOM/window.getSelection", "ja": "ja/DOM/window.getSelection" } ) }}

diff --git a/files/pl/web/api/window/index.html b/files/pl/web/api/window/index.html new file mode 100644 index 0000000000..0c833217a3 --- /dev/null +++ b/files/pl/web/api/window/index.html @@ -0,0 +1,494 @@ +--- +title: window +slug: Web/API/Window +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +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.customElements")}}{{ReadOnlyInline}}
+
returns a reference to the {{domxref("CustomElementRegistry")}} object, which can be used to register new custom elements and get information about previously registered custom elements.
+
{{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.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.
+
{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.
+
{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.
+
{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.
+
{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.
+
{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.
+
{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.
+
{{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.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to the {{domxref("NetworkInformation")}} interface, which provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes.
+
{{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.StaticRange")}} {{experimental_inline}} {{readonlyinline}}
+
Returns a {{domxref('StaticRange.StaticRange','StaticRange()')}} constructor which creates a {{domxref('StaticRange')}} object.
+
{{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 button 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/pl/web/api/window/localstorage/index.html b/files/pl/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..e93c5c15e7 --- /dev/null +++ b/files/pl/web/api/window/localstorage/index.html @@ -0,0 +1,125 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Pamięć + - Referencja + - Storage + - Web Storage + - WindowLocalStorage + - Własność + - localStorage +translation_of: Web/API/Window/localStorage +--- +

{{APIRef()}}

+ +

Własność localStorage pozwala na dostęp do lokalnego obiektu {{domxref("Storage")}}. localStorage jest podobne w swoich założeniach do sessionStorage. Różnica pomiędzy nimi polega na tym, że dane przechowywane w localStorage nie mają daty ważności, a dane przechowywane w sessionStorage usuwane są po zakończeniu danej sesji - czyli przy zamknięciu przeglądarki.

+ +

Składnia

+ +
myStorage = localStorage;
+ +

Wartość

+ +

Obiekt {{domxref("Storage")}}.

+ +

Przykład

+ +

Poniższy kod uzyskuje dostęp do lokalnego obiektu {{domxref("Storage")}}, należącego do obecnej domeny i dodaje do niego własność używająć metody {{domxref("Storage.setItem()")}}.

+ +
localStorage.setItem('myCat', 'Tom');
+ +
+

Notka: Pełny przykład znajdziesz w artykule Using the Web Storage API .

+
+ +

Specyfikajca

+ + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}{{Spec2('Web Storage')}} 
+ +

Wsparcie przeglądarek

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
WłasnośćChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
WłasnośćAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Podstawowe wspracie2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Sposób wsparcia dla localStorage i {{domxref("sessionStorage")}} różni się w zależności od przeglądarki. Tutaj znajdziesz szczegółowe dane na temat wsparcia poszczególnych przeglądarek dla obiektów Storage.

+ +
+

Notka: Zaczynając od wersji iOS 5.1, Safari przetrzymuje dane localStorage w folderze cache. Folder ten poddawany jest okresowemu czyszczeniu, zazwyczaj, gdy w pamięci urządzenia kończy się miejsce. Tryb prywatny w mobilnej przeglądarce Safari blokuje również całkowicie możliwość zapisu do pamięci localStorage.

+
+ +

Zobacz także

+ + diff --git a/files/pl/web/api/window/name/index.html b/files/pl/web/api/window/name/index.html new file mode 100644 index 0000000000..0b91ec81ec --- /dev/null +++ b/files/pl/web/api/window/name/index.html @@ -0,0 +1,27 @@ +--- +title: window.name +slug: Web/API/Window/name +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/name +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Pobiera/ustawia nazwę okna.

+

Składnia

+
string = window.name
+ window.name =string
+
+

Przykład

+
window.name = "lab_view";
+
+

Uwagi

+

Nazwa okna jest używana pierwotnie dla ustawienia celu dla linków oraz formularzy. Okno nie musi posiadać nazwy.

+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.name", "ja": "ja/DOM/window.name" } ) }}

diff --git a/files/pl/web/api/window/navigator/index.html b/files/pl/web/api/window/navigator/index.html new file mode 100644 index 0000000000..c43e84184b --- /dev/null +++ b/files/pl/web/api/window/navigator/index.html @@ -0,0 +1,84 @@ +--- +title: window.navigator +slug: Web/API/Window/navigator +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/navigator +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca odwołanie do obiektu navigator, który może być zapytany o informację na temat aplikacji uruchamiającej skrypt.

+ +

Przykład

+ +
alert("Używasz " + navigator.appName);
+
+ +

Własności

+ +
+
navigator.appCodeName
+
Zwraca wewnętrzną nazwę "kodową" aktualnej przeglądarki.
+
navigator.appName
+
Zwraca oficjalną nazwę przeglądarki.
+
navigator.appVersion
+
Zwraca wersję przeglądarki jako łańcuch znaków.
+
navigator.buildID
+
Zwraca identyfikator kompilacji przeglądarki (np. "2006090803").
+
navigator.cookieEnabled
+
Zwraca wartość logiczną wskazującą czy obsługa ciasteczek jest włączona, czy nie.
+
navigator.language
+
Zwraca łańcuch znaków reprezentujący wersję językową przeglądarki.
+
navigator.mimeTypes
+
Zwraca listę typów MIME obsługiwanych przez przeglądarkę.
+
navigator.onLine
+
Zwraca wartość logiczną wskazującą czy przeglądarka jest w trybie online.
+
navigator.oscpu
+
Zwraca łańcuch znaków reprezentujący bieżący system operacyjny.
+
navigator.platform
+
Zwraca łańcuch znaków reprezentujący platformę przeglądarki.
+
navigator.plugins
+
Zwraca tablicę z zainstalowanymi wtyczkami przeglądarki.
+
navigator.product
+
Zwraca nazwę produktu bieżącej przeglądarki (np. "Gecko")
+
navigator.productSub
+
Zwraca numer kompilacji bieżącej przeglądarki (np. "20060909").
+
navigator.securityPolicy
+
Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".
+
navigator.userAgent
+
Returns the user agent string for the current browser.
+
navigator.vendor
+
Returns the vendor name of the current browser (e.g. "Netscape6")
+
navigator.vendorSub
+
Returns the vendor version number (e.g. "6.1")
+
+ +

Metody

+ +
+
navigator.javaEnabled
+
Określa czy w przeglądarce jest włączona obsługa Javy.
+
navigator.taintEnabled {{ Obsolete_inline() }} 
+
Returns false. JavaScript taint/untaint functions removed in JavaScript 1.2
+
navigator.preference
+
Sets a user preference. This method is only available to privileged code, and you should use XPCOM API preferencji instead.
+
navigator.registerContentHandler
+
Pozwala stronom na zarejestrowanie się jako możliwe serwisy obsługujące dla zawartości konkretnego typu MIME.
+
navigator.registerProtocolHandler
+
Pozwala stronom na zarejestrowanie się jako możliwe serwisy obsługujące dany protokół.
+
+ +

Zobacz także

+ +

DOM Client Object Cross-Reference:navigator

+ +

Specyfikacja

+ +

 

diff --git a/files/pl/web/api/window/onload/index.html b/files/pl/web/api/window/onload/index.html new file mode 100644 index 0000000000..45e1b97328 --- /dev/null +++ b/files/pl/web/api/window/onload/index.html @@ -0,0 +1,62 @@ +--- +title: window.onload +slug: Web/API/Window/onload +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onload +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Uchwyt zdarzenia dla zdarzenia wczytywania okna (window).

+ +

Składnia

+ +
window.onload = funcRef;
+
+ + + +

Przykład

+ +
window.onload = function() {
+  init();
+  doSomethingElse();
+};
+
+ +
<html>
+<head>
+
+<title>Test onload</title>
+
+<script type="text/javascript">
+
+window.onload = load;
+
+function load()
+{
+ alert("Wykryto zdarzenie load!");
+}
+</script>
+</head>
+
+<body>
+<p>Zdarzenie load występuje w momencie zakończenia ładowania dokumentu!</p>
+</body>
+</html>
+
+ +

Uwagi

+ +

Zdarzenie load wywoływane jest na końcu procesu ładowania dokumentu. W momencie wystąpienia zdarzenia, DOM zawiera już wszystkie obiekty zawarte w dokumencie oraz zakończone zostało wczytywanie obrazków oraz ramek.
+
+ Istnieje także zdarzenie DOMContentLoaded (które można zarejestrować za pomocą addEventListener) występujące w momencie gdy DOM dla danej strony został zbudowany ale bez czekania na zakończenie ładowania pozostałych zasobów.

diff --git a/files/pl/web/api/window/open/index.html b/files/pl/web/api/window/open/index.html new file mode 100644 index 0000000000..de2d422a8b --- /dev/null +++ b/files/pl/web/api/window/open/index.html @@ -0,0 +1,796 @@ +--- +title: window.open +slug: Web/API/Window/open +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/open +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Tworzy nowe okno przeglądarki i wczytuje do niego wskazany zasób.

+ +

Składnia

+ +
referencjaDoObiektuOkna = window.open(strUrl, strNazwaOkna [, strCechyOkna]);
+
+ +

Parametry i zwracana wartość

+ +
+
referencjaDoObiektuOkna
+
Referencja wskazująca na obiekt nowoutworzonego okna to wartość zwracana przez metodę open(). Jeżeli z jakichś powodów nie uda się otworzyć okna, zwrócone zostanie null. Referencje taką dobrze jest przechowywać w zmiennej globalnej. Możesz wtedy użyć jej do do pobrania właściwości nowego okna lub wywołania jego metod - pod warunkiem, że zależność między głównym a nowym oknem spełnia Zasadę tego samego pochodzenia - wymaganą ze względów bezpieczeństwa.
+
+ +
+
strUrl
+
Adres URL, który ma zostać wczytany w nowym oknie. Może to być dokument HTML gdzieś w Sieci, może to być obrazek lub dowolny inny plik, który może obsłużyć przeglądarka.
+
+ +
+
strNazwaOkna
+
Ciąg znaków używany jako nazwa okna. Nazwy tej można użyć jako celu dla odnośników i formularzy, określanego za pomocą atrybutu target elementu <a> lub <form>. Nazwa nie powinna zawierać spacji. strNazwaOkna nie określa tytułu nowego okna.
+
+ +
+
strCechyOkna
+
Parametr opcjonalny. Jest to ciąg znaków, w którym wymienione zostają cechy (funkcjonalność, paski narzędzi) nowego okna przeglądarki. Parametr ten nie może zawierać żadnych spacji. Każda żądana cecha okna oddzielana jest od innych za pomocą przecinka.
+
+ +

Opis

+ +

Metoda open() tworzy nowe okno przeglądarki, podobnie jak przy wybraniu polecenia Nowe okno w menu Plik. Parametr strUrl określa URL, który ma zostać pobrany i załadowany w nowym oknie. Jeśli strUrl jest pustym ciągiem, utworzone zostanie puste okno (URL about:blank) z domyślnym zestawem pasków głównego okna.

+ +

Zauważ, że zdalny URL nie zostanie załadowany od razu. Po zakończeniu wykonywania window.open() okno zawsze zawiera about:blank. Faktyczne pobieranie z adresu URL jest opóźniane do momentu zakończenia wykonywania bieżącego bloku skryptu. Tworzenie okna i ładowanie wskazanego zasobu odbywają się asynchronicznie.

+ +

Przykłady

+ +
<script type="text/javascript">
+
+/* Deklaracja zmiennej globalnej, w której będzie
+   przechowywana referencja do nowego okna */
+
+var WindowObjectReference;
+
+function openRequestedPopup()
+{
+  WindowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName",
+        "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes");
+}
+</script>
+
+ +
<script type="text/javascript">
+var WindowObjectReference; // zmienna globalna
+
+function openRequestedPopup()
+{
+ WindowObjectReference = window.open("http://www.domainname.ext/path/ImageFile.png",
+       "DescriptiveWindowName",
+       "resizable=yes,scrollbars=yes,status=yes");
+}
+</script>
+
+ +

Jeśli istnieje już okno o tej samej nazwie strWindowName, to zamiast otwierania nowego okna w istniejącym oknie zostanie załadowany URL strUrl. W takim wypadku wartością zwracaną jest referencja do istniejącego okna, a parametr strWindowFeatures jest ignorowany. Wywołanie metody z pustym ciągiem jako strUrl to sposób uzyskania referencji do otwartego okna jeśli znana jest jego nazwa. Zawartość tego okna nie zostanie zmieniona. Jeśli chcesz otwierać nowe okno przy każdym wywołaniu window.open(), podaj specjalną wartość _blank jako parametr strWindowName.

+ +

strWindowFeatures to opcjonalny ciąg znaków z rozdzieloną przecinkami listą żądanych cech nowego okna. Po otwarciu okna nie możesz zmienić jego funkcjonalności czy pasków za pomocą JavaScriptu. Jeśli strWindowName nie określa istniejącego okna i jeśli nie podasz parametru strWindowFeatures (lub będzie on tylko pustym ciągiem znaków), w nowym oknie znajdize się domyślny zestaw pasków głównego okna.

+ +

Jeżeli zostanie użyty parametr strWindowFeatures, ale nie zostaną podane cechy określające rozmiar, wymiary okna będą takie same, jak wymiary ostatnio wyrenderowanego okna.

+ +

Jeśli zostanie podany parametr strWindowFeatures, ale bez definiowania cech określających pozycję, wtedy współrzędne lewego górnego rogu będą przesunięte o 22 piksele od miejsca, gdzie znajdował się róg ostatnio wyrenderowanego okna. Przesunięcie to jest implementowane przez producentów przeglądarek (w MSIE 6 SP2 wynosi ono 29 pikseli przy domyślnym motywie) - ma ono ułatwiać użytkownikom dostrzeżenie, że otwarto nowe okno. Jeśli ostatnio używane okno było zmaksymalizowane, przesunięcie o 22 piksele nie zostanie użyte - nowe okno także będzie zmaksymalizowane.

+ +

Jeśli podajesz strWindowFeatures, cechy, które nie zostaną określone, będą wyłączone lub usunięte (z wyjątkiem titlebar i close, które domyślnie ustawiane są na yes)>.

+ +
+

Porada: Jeśli podajesz parametr strWindowFeatures, zawrzyj tylko te cechy, które chcesz, by były włączone lub wyświetlane; pozostałe (poza titlebar i close) zostaną wyłączone.

+
+ +

Firefox Chrome Toolbars Illustration

+ +

Pozycja i rozmiar okna

+ + + +
+
left
+
Określa odległość między lewą krawędzią obszaru roboczego aplikacji w systemie operacyjnym użytkownika a najbardziej wysuniętą w lewo częścią obramowania nowego okna przeglądarki. Nowe okno nie możo być zainicjowane w miejscu wychodzącym poza ekran.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
+ +
+
top
+
Określa odległość między górną krawędzią obszaru roboczego aplikacji w systemie operacyjnym użytkownika a najbardziej wysuniętą w górę częścią obramowania nowego okna przeglądarki. Nowe okno nie możo być zainicjowane w miejscu wychodzącym poza ekran.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
+ +
+
height
+
Określa wysokość obszaru zawartości okna wyrażoną w pikselach. Wartość zawiera wysokość poziomego paska przewijania, jeśli jest on wyświetlany. Wymagana minimalna wartość to 100.
+
Note on outerHeight versus height (or innerHeight)
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
+ +
+
width
+
Określa wysokość obszaru zawartości okna wyrażoną w pikselach. Wartość zawiera szerokość pionowego paska przewijania, jeśli jest on wyświetlany. Nie jest włączana szerokość panelu bocznego, jeśli jest on otwarty. Wymagana minimalna wartość to 100.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
+ +
+
screenX
+
Cecha wycofana. Określa to samo co left, ale obsługują ją tylko przeglądarki Netscape i oparte o Mozillę.
+
Obsługiwane przez Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
screenY
+
Cecha wycofana. Określa to samo co top, ale obsługują ją tylko przeglądarki Netscape i oparte o Mozillę.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
outerHeight
+
Określa wysokość całego okna przeglądarki w pikselach. Wartość outerHeight zawiera w sobie wszystkie widoczne paski, poziomy pasek przewijania (jeśli jest widoczny) i obramowanie okna. Minimalna wymana wartość to 100.
+
Uwaga: ponieważ pasek tytułowy jest zawsze widoczny, wywołanie outerHeight=100 zmniejszy innerHeight okna poniżej wymaganych 100 pikseli.
+
Note on outerHeight versus height (or innerHeight)
+
Obsługiwane przez Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
outerWidth
+
Określa szerokość całego okna przeglądarki w pikselach. Wartość outerWidth zawiera w sobie pionowy pasek przewijania (jeśli jest widoczny) i obramowanie okna. Minimalna wymana wartość to 100.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
innerHeight
+
To samo co height, ale obsługiwane tylko przez przeglądarki Netscape i oparte o Mozillę
+
Note on outerHeight versus height (or innerHeight)
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
innerWidth
+
To samo co width, ale obsługiwane tylko przez przeglądarki Netscape i oparte o Mozillę
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +

Toolbar and chrome features

+ +
+
menubar 
+
Jeśli ta opcja jest ustawiona na yes, wtedy nowe okno posiada widoczny pasek menu.
+
Użytkownicy Mozilli i Firefoxa mogą wymusić by każde nowo otwarte okno posiadało widoczny masek menu poprzez ustawienie
+ dom.disable_window_open_feature.menubar
+ na true w about:config lub w ich pliku user.js.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
toolbar 
+
Jeśli ta opcja jest ustawiona na yes, wtedy nowe okno posiada widoczny pasek nawigacji (Przyciski: poprzednia strona, następna strona, odśwież, zatrzymaj). In addition to the Navigation Toolbar, Mozilla-based browsers will render the Tab Bar if it is visible, present in the parent window.
+
Mozilla and Firefox users can force new windows to always render the Navigation Toolbar by setting
+ dom.disable_window_open_feature.toolbar
+ to true in about:config or in their user.js file.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
location 
+
If this feature is set to yes, then the new secondary window renders the Location bar in Mozilla-based browsers. MSIE 5+ and Opera 7.x renders the Address Bar.
+
Mozilla and Firefox users can force new windows to always render the location bar by setting
+ dom.disable_window_open_feature.location
+ to true in about:config or in their user.js file.
+
+ +

Note that MSIE 7 will force the presence of the Address Bar: "We think the address bar is also important for users to see in pop-up windows. A missing address bar creates a chance for a fraudster to forge an address of their own. To help thwart that, IE7 will show the address bar on all internet windows to help users see where they are." coming from Microsoft Internet Explorer Blog, Better Website Identification

+ +
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
+ +
+
directories 
+
If this feature is set to yes, then the new secondary window renders the Personal Toolbar in Netscape 6.x, Netscape 7.x and Mozilla browser. It renders the Bookmarks Toolbar in Firefox 1.x and, in MSIE 5+, it renders the Links bar. In addition to the Personal Toolbar, Mozilla browser will render the Site Navigation Bar if such toolbar is visible, present in the parent window.
+
Mozilla and Firefox users can force new windows to always render the Personal Toolbar/Bookmarks toolbar by setting
+ dom.disable_window_open_feature.directories
+ to true in about:config or in their user.js file.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
personalbar 
+
Same as directories but only supported by Netscape and Mozilla-based browsers.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
status 
+
If this feature is set to yes, then the new secondary window has a status bar. Users can force the rendering of status bar in all Mozilla-based browsers, in MSIE 6 SP2 (Note on status bar in XP SP2) and in Opera 6+. The default preference setting in recent Mozilla-based browser releases and in Firefox 1.0 is to force the presence of the status bar.
+
Note on status bar
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +

Window functionality features

+ +
+
resizable 
+
If this feature is set to yes, the new secondary window will be resizable.
+
Note: Starting with version 1.4, Mozilla-based browsers have a window resizing grippy at the right end of the status bar, this ensures that users can resize the browser window even if the web author requested this secondary window to be non-resizable. In such case, the maximize/restore icon in the window's titlebar will be disabled and the window's borders won't allow resizing but the window will still be resizable via that grippy in the status bar.
+
+ +
+

Tip: For accessibility reasons, it is strongly recommended to set this feature always to yes.

+
+ +
+
Mozilla and Firefox users can force new windows to be easily resizable by setting
+ dom.disable_window_open_feature.resizable
+ to true in about:config or in their user.js file.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
scrollbars 
+
If this feature is set to yes, the new secondary window will show horizontal and/or vertical scrollbar(s) if the document doesn't fit into the window's viewport.
+
+ +
+

Tip: For accessibility reasons, it is strongly encouraged to set this feature always to yes.

+
+ +
+
Mozilla and Firefox users can force this option to be always enabled for new windows by setting
+ dom.disable_window_open_feature.scrollbars
+ to true in about:config or in their user.js file.
+
Note on scrollbars
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
dependent 
+
If set to yes, the new window is said to be dependent of its parent window. A dependent window closes when its parent window closes. A dependent window is minimized on the Windows task bar only when its parent window is minimized. On Windows platforms, a dependent window does not show on the task bar. A dependent window also stays in front of the parent window.
+
Dependent windows are not implemented on MacOS X, this option will be ignored.
+
In MSIE 6, the nearest equivalent to this feature is the showModelessDialog() method.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
chrome 
+
Note: Starting with Mozilla 1.7/Firefox 0.9, this feature requires the UniversalBrowserWrite privilege ({{ Bug(244965) }}). Without this privilege it is ignored.
+
If set to yes, the page is loaded as window's only content, without any of the browser's interface elements. There will be no context menu defined by default and none of the standard keyboard shortcuts will work. The page is supposed to provide a user interface of its own, usually this feature is used to open XUL documents (standard dialogs like the JavaScript Console are opened this way).
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
modal 
+
Note: Starting with Mozilla 1.2.1, this feature requires the UniversalBrowserWrite privilege ({{ Bug(180048) }}). Without this privilege, it is equivalent to dependent.
+
If set to yes, the new window is said to be modal. The user cannot return to the main window until the modal window is closed. A typical modal window is created by the alert() function.
+
The exact behavior of modal windows depends on the platform and on the Mozilla release version.
+
The MSIE 6 equivalent to this feature is the showModalDialog() method.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
dialog 
+
The dialog feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button. Firefox and its command system menu under WindowsMozilla 1.2+ and Netscape 7.1 will render the other menu system commands (in FF 1.0 and in NS 7.0x, the command system menu is not identified with the Firefox/NS 7.0x icon on the left end of the titlebar: that's probably a bug. You can access the command system menu with a right-click on the titlebar). Dialog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu. They are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. On Mac systems, dialog windows have a different window border and they may get turned into a sheet.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
minimizable 
+
This setting can only apply to dialog windows; "minimizable" requires dialog=yes. If minimizable is set to yes, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. Any non-dialog window is always minimizable and minimizable=no will be ignored.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
fullscreen 
+
Do not use. Not implemented in Mozilla. There are no plans to implement this feature in Mozilla.
+
This feature no longer works in MSIE 6 SP2 the way it worked in MSIE 5.x. The Windows taskbar, as well as the titlebar and the status bar of the window are not visible, nor accessible when fullscreen is enabled in MSIE 5.x.
+
fullscreen always upsets users with large monitor screen or with dual monitor screen. Forcing fullscreen onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users.
+
Note on fullscreen
+
Obsługiwane przez: Internet Explorer 5+
+
fullscreen does not really work work in MSIE 6 SP2.
+
+ +

Features requiring privileges

+ +

The following features require the UniversalBrowserWrite privilege, otherwise they will be ignored. Chrome scripts have this privilege automatically, others have to request it from the PrivilegeManager.

+ +
+
titlebar 
+
By default, all new secondary windows have a titlebar. If set to no, this feature removes the titlebar from the new secondary window.
+
Mozilla and Firefox users can force new windows to always render the titlebar by setting
+ dom.disable_window_open_feature.titlebar
+ to true in about:config or in their user.js file.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
alwaysRaised 
+
If set to yes, the new window will always be displayed on top of other browser windows, regardless of whether it is active or not.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
alwaysLowered 
+
If set to yes, the new created window floats below, under its own parent when the parent window is not minimized. alwaysLowered windows are often referred as pop-under windows. The alwaysLowered window can not be on top of the parent but the parent window can be minimized. In NS 6.x, the alwaysLowered window has no minimize system command icon and no restore/maximize system command.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
z-lock 
+
Same as alwaysLowered.
+
+ +
+
close 
+
When set to no, this feature removes the system close command icon and system close menu item. It will only work for dialog windows (dialog feature set). close=no will override minimizable=yes.
+
Mozilla and Firefox users can force new windows to always have a close button by setting
+ dom.disable_window_open_feature.close
+ to true in about:config or in their user.js file.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +

The position and size feature elements require a number to be set. The toolbars and window functionalities can be set with a yes or no; you can use 1 instead of yes and 0 instead of no. The toolbar and functionality feature elements also accept the shorthand form: you can turn a feature on by simply listing the feature name in the strWindowFeatures string. If you supply the strWindowFeatures parameter, then the titlebar and close are still yes by default, but the other features which have a yes/no choice will be no by default and will be turned off.

+ +

Example:

+ +
<script type="text/javascript">
+var WindowObjectReference; // global variable
+
+function openRequestedPopup()
+{
+  WindowObjectReference = window.open("http://www.domainname.ext/path/ImgFile.png",
+        "DescriptiveWindowName",
+        "width=420,height=230,resizable,scrollbars=yes,status=1");
+}
+</script>
+
+ +

In this example, the window will be resizable, it will render scrollbar(s) if needed, if the content overflows requested window dimensions and it will render the status bar. It will not render the menubar nor the location bar. Since the author knew about the size of the image (400 pixels wide and 200 pixels high), he added the margins applied to the root element in MSIE 6 which is 15 pixels for top margin, 15 pixels for the bottom margin, 10 pixels for the left margin and 10 pixels for the right margin.

+ +

Best practices

+ +
<script type="text/javascript">
+var WindowObjectReference = null; // global variable
+
+function openFFPromotionPopup()
+{
+  if(WindowObjectReference == null || WindowObjectReference.closed)
+  /* if the pointer to the window object in memory does not exist
+     or if such pointer exists but the window was closed */
+
+  {
+    WindowObjectReference = window.open("http://www.spreadfirefox.com/",
+           "PromoteFirefoxWindowName", "resizable=yes,scrollbars=yes,status=yes");
+    /* then create it. The new window will be created and
+       will be brought on top of any other window. */
+  }
+  else
+  {
+    WindowObjectReference.focus();
+    /* else the window reference must exist and the window
+       is not closed; therefore, we can bring it back on top of any other
+       window with the focus() method. There would be no need to re-create
+       the window or to reload the referenced resource. */
+  };
+}
+</script>
+
+(...)
+
+<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindowName"
+onclick="openFFPromotionPopup(); return false;"
+title="This link will create a new window or will re-use
+an already opened one">Promote Firefox adoption</a></p>
+
+ +

The above code solves a few usability problems related to links opening secondary window. The purpose of the return false in the code is to cancel default action of the link: if the onclick event handler is executed, then there is no need to execute the default action of the link. But if javascript support is disabled or non-existent on the user's browser, then the onclick event handler is ignored and the browser loads the referenced resource in the target frame or window that has the name "PromoteFirefoxWindowName". If no frame nor window has the name "PromoteFirefoxWindowName", then the browser will create a new window and will name it "PromoteFirefoxWindowName".

+ +

More reading on the use of the target attribute:

+ +

HTML 4.01 Target attribute specifications

+ +

How do I create a link that opens a new window?

+ +

You can also parameterize the function to make it versatile, functional in more situations, therefore re-usable in scripts and webpages:

+ +
<script type="text/javascript">
+var WindowObjectReference = null; // global variable
+
+function openRequestedPopup(strUrl, strWindowName)
+{
+  if(WindowObjectReference == null || WindowObjectReference.closed)
+  {
+    WindowObjectReference = window.open(strUrl, strWindowName,
+           "resizable=yes,scrollbars=yes,status=yes");
+  }
+  else
+  {
+    WindowObjectReference.focus();
+  };
+}
+</script">
+(...)
+
+<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow"
+onclick="openRequestedPopup(this.href, this.target); return false;"
+title="This link will create a new window or will re-use
+an already opened one">Promote
+Firefox adoption</a></p>
+
+ +

You can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner:

+ +
<script type="text/javascript">
+var WindowObjectReference = null; // global variable
+var PreviousUrl; /* global variable which will store the
+                    url currently in the secondary window */
+
+function openRequestedSinglePopup(strUrl)
+{
+  if(WindowObjectReference == null || WindowObjectReference.closed)
+  {
+    WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+           "resizable=yes,scrollbars=yes,status=yes");
+  }
+  else if(previousUrl != strUrl)
+  {
+    WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+        "resizable=yes,scrollbars=yes,status=yes");
+    /* if the resource to load is different,
+       then we load it in the already opened secondary window and then
+       we bring such window back on top/in front of its parent window. */
+    WindowObjectReference.focus();
+  }
+  else
+  {
+    WindowObjectReference.focus();
+  };
+  PreviousUrl = strUrl;
+  /* explanation: we store the current url in order to compare url
+     in the event of another call of this function. */
+}
+</script>
+
+(...)
+
+<p><a href="http://www.spreadfirefox.com/" target="SingleSecondaryWindowName"
+onclick="openRequestedSinglePopup(this.href); return false;"
+title="This link will create a new window or will re-use
+an already opened one">Promote Firefox
+adoption</a></p>
+<p><a href="http://www.mozilla.org/support/firefox/faq"
+target="SingleSecondaryWindowName"
+onclick="openRequestedSinglePopup(this.href); return false;"
+title="This link will create a new window or will re-use
+an already opened one">Firefox FAQ</a></p>
+
+ +

FAQ

+ +
+
How can I prevent the confirmation message asking the user whether he wants to close the window?
+
You can not. New windows not opened by javascript can not as a rule be closed by JavaScript. The JavaScript Console in Mozilla-based browsers will report the warning message: "Scripts may not close windows that were not opened by script." Otherwise the history of URLs visited during the browser session would be lost.
+
More on the window.close() method
+
+ +
+
How can I bring back the window if it is minimized or behind another window?
+
First check for the existence of the window object reference of such window and if it exists and if it has not been closed, then use the focus() method. There is no other reliable way. You can examine an example explaining how to use the focus() method.
+
+ +
+
How do I force a maximized window?
+
You cannot. All browser manufacturers try to make the opening of new secondary windows noticed by users and noticeable by users to avoid confusion, to avoid disorienting users.
+
+ +
+
How do I turn off window resizability or remove toolbars?
+
You cannot force this. Users with Mozilla-based browsers have absolute control over window functionalities like resizability, scrollability and toolbars presence via user preferences in about:config. Since your users are the ones who are supposed to use such windows (and not you, being the web author), the best is to avoid interfering with their habits and preferences. We recommend to always set the resizability and scrollbars presence (if needed) to yes to insure accessibility to content and usability of windows. This is in the best interests of both the web author and the users.
+
+ +
+
How do I resize a window to fit its content?
+
You can not reliably because the users can prevent the window from being resized by unchecking the
+
+ +

Edit/Preferences/Advanced/Scripts & Plug-ins/Allow Scripts to/ Move or resize existing windows
+ checkbox in Mozilla or
+ Tools/Options.../Content tab/Enable Javascript/Advanced button/Move or resize existing windows
+ checkbox in Firefox or by setting
+ dom.disable_window_move_resize
+ to true in the about:config or by editing accordingly their user.js file.

+ +
+
In general, users usually disable moving and resizing of existing windows because allowing authors' scripts to do so has been abused overwhelmingly in the past and the rare scripts that do not abuse such feature are often wrong, inaccurate when resizing the window. 99% of all those scripts disable window resizability and disable scrollbars when in fact they should enable both of these features to allow a cautious and sane fallback mechanism if their calculations are wrong.
+
+ +
+
The window method sizeToContent() is also disabled if the user unchecks the preference Move or resize existing windows checkbox. Moving and resizing a window remotely on the user's screen via script will very often annoy the users, will disorient the user, and will be wrong at best. The web author expects to have full control of (and can decide about) every position and size aspects of the users' browser window ... which is simply not true.
+
+ +
+
How do I open a referenced resource of a link in a new tab? or in a specific tab?
+
Currently, you can not. Only the user can set his advanced preferences to do that. K-meleon 1.1, a Mozilla-based browser, gives complete control and power to the user regarding how links are opened. Some advanced extensions also give Mozilla and Firefox a lot of power over how referenced resources are loaded.
+
+ +
+
In a few years, the target property of the CSS3 hyperlink module may be implemented (if CSS3 Hyperlink module as it is right now is approved). And even if and when this happens, you can expect developers of browsers with tab-browsing to give the user entire veto power and full control over how links can open web pages. How to open a link should always be entirely under the control of the user.
+
+ +
+
How do I know whether a window I opened is still open?
+
You can test for the existence of the window object reference which is the returned value in case of success of the window.open() call and then verify that WindowObjectReference.closed return value is false.
+
+ +
+
How can I tell when my window was blocked by a popup blocker?
+
With the built-in popup blockers of Mozilla/Firefox and Internet Explorer 6 SP2, you have to check the return value of window.open(): it will be null if the window wasn't allowed to open. However, for most other popup blockers, there is no reliable way.
+
+ +
+
What is the JavaScript relationship between the main window and the secondary window?
+
The return value of the window.open() method and the opener property. The WindowObjectReference links the main (opener) window to the secondary (sub-window) window while the opener keyword will link the secondary window to its main (opener) window.
+
+ +
+
I can not access the properties of the new secondary window. I always get an error in the javascript console saying "Error: uncaught exception: Permission denied to get property <property_name or method_name>. Why is that?
+
It is because of the cross-domain script security restriction (also referred as the "Same Origin Policy"). A script loaded in a window (or frame) from a distinct origin (domain name) cannot get nor set properties of another window (or frame) or the properties of any of its HTML objects coming from another distinct origin (domain name). Therefore, before executing a script targeting a secondary window, the browser in the main window will verify that the secondary window has the same domain name.
+
More reading on the cross-domain script security restriction: http://www.mozilla.org/projects/secu...me-origin.html
+
+ +

Usability issues

+ +

Avoid resorting to window.open()

+ +

Generally speaking, it is preferable to avoid resorting to window.open() for several reasons:

+ + + + + + + + + + + +

If you want to offer to open a link in a new window, then follow tested and recommendable usability and accessibility guidelines:

+ +
Never use this form of code for links:
+ <a href="javascript:window.open(...)" ...>
+ +

"javascript:" links break accessibility and usability of webpages in every browser.

+ + + +

Further reading:

+ + + +
Nigdy nie używaj <a href="#" onclick="window.open(...);">
+ +

Takie pseudo-linki ograniczają dostępność stron. Zawsze używaj rzeczywistych URLi jako wartości atrybutu href tak by w przypadku braku obsługi javascriptu lub gdy przeglądarka nie obsługuje otwierania odrębnych okien (jak w przypadku MS-Web TV, przeglądarek tekstowych, itp.), przeglądarka miała możliwość dostępu do zasobu zgodnie z domyślnym sposobem obsługi zasobów. Tak sformułowane linki kolidują także z dodatkowymi funkcjami przeglądarek obsługujących zakładki, np.: kliknięcie linku środkowym klawiszem myszy, kliknięcie linku z przytrzymanym klawiszem ctrl, naciśnięcie kombinacji ctrl+enter czy gesty myszą.

+ + + +

Identify links that will open new windows in a way that helps navigation for users by coding the title attribute of the link, by adding an icon at the end of the link or by coding the cursor accordingly.

+ +

The purpose is to warn users in advance of context changes to minimize confusion on the user's part: changing the current window or popping up new windows can be very disorienting to users (Back toolbar button is disabled).

+ +
+

"Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button."
+ quote from The Top Ten New Mistakes of Web Design: 2. Opening New Browser Windows, Jakob Nielsen, May 1999

+
+ +

When extreme changes in context are explicitly identified before they occur, then the users can determine if they wish to proceed or so they can be prepared for the change: not only they will not be confused or feel disoriented, but more experienced users can better decide how to open such links (in a new window or not, in the same window, in a new tab or not, in "background" or not).

+ +

References

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Przykład ikon & kursorów "Nowego okna"
New window icon from yahoo.comNew window icon from microsoft.comNew window icon from webaim.orgNew window icon from sun.com
New window icon from bbc.co.ukNew window icon from Accessible Internet SolutionsNew window icon from accessify.comNew window icon from webstyleguide.com
New window icon from an unknown sourceNew window icon from an unknown sourceNew window icon from an unknown sourceNew window icon from gtalbot.org
New window cursor from draig.deNew window cursor from mithgol.ru
+ +
Always use the target attribute
+ +

If javascript support is disabled or non-existent, then the user agent will create a secondary window accordingly or will render the referenced resource according to its handling of the target attribute: e.g. some user agents which can not create new windows, like MS Web TV, will fetch the referenced resource and append it at the end of the current document. The goal and the idea is to try to provide - not impose - to the user a way to open the referenced resource, a mode of opening the link. Your code should not interfere with the features of the browser at the disposal of the user and your code should not interfere with the final decision resting with the user.

+ +
Do not use target="_blank"
+ +

Always provide a meaningful name to your target attribute and try to reuse such target attribute in your page so that a click on another link may load the referenced resource in an already created and rendered window (therefore speeding up the process for the user) and therefore justifying the reason (and user system resources, time spent) for creating a secondary window in the first place. Using a single target attribute value and reusing it in links is much more user resources friendly as it only creates one single secondary window which is recycled. On the other hand, using "_blank" as the target attribute value will create several new and unnamed windows on the user's desktop which can not be recycled, reused. In any case, if your code is well done, it will not interfere with the user's final choice but will rather merely offer him more choices, more ways to open links and more power to the tool he's using (a browser).

+ +

Glossary

+ +
+
Opener window, parent window, main window, first window 
+
Terms often used to describe or to identify the same window. It is the window from which a new window will be created. It is the window on which the user clicked a link which lead to the creation of another, new window.
+
+ +
+
Sub-window, child window, secondary window, second window 
+
Terms often used to describe or to identify the same window. It is the new window which was created.
+
+ +
+
Unrequested popup windows
+
Script-initiated windows opening automatically without the user's consent.
+
+ +

Specification

+ +

DOM Level 0. window.open() is not part of any W3C (World Wide Web Consortium) specification or technical recommendation.

+ +

Notes

+ +

Note on precedence

+ +

In cases where left and screenX (and/or top and screenY) have conflicting values, then left and top have precedence over screenX and screenY respectively. If left and screenX (and/or top and screenY) are defined in the strWindowFeatures list, then left (and/or top) will be honored and rendered. In the following example the new window will be positioned at 100 pixels from the left side of the work area for applications of the user's operating system, not at 200 pixels.

+ +
<script type="text/javascript">
+WindowObjectReference = window.open("http://news.bbc.co.uk/",
+           "BBCWorldNewsWindowName",
+           "left=100,screenX=200,resizable,scrollbars,status");
+</script>
+
+ +

If left is set but top has no value and screenY has a value, then left and screenY will be the coordinate positioning values of the secondary window.

+ +

outerWidth has precedence over width and width has precedence over innerWidth. outerHeight has precedence over height and height has precedence over innerHeight. In the following example, Mozilla-browsers will create a new window with an outerWidth of 600 pixels wide and will ignore the request of a width of 500 pixels and will also ignore the request of an innerWidth of 400 pixels.

+ +
<script type="text/javascript">
+WindowObjectReference = window.open("http://www.wwf.org/",
+           "WWildlifeOrgWindowName",
+           "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status");
+</script>
+
+ +

Note on position and dimension error correction

+ +

Requested position and requested dimension values in the strWindowFeatures list will not be honored and will be corrected if any of such requested value does not allow the entire browser window to be rendered within the work area for applications of the user's operating system. No part of the new window can be initially positioned offscreen. This is by default in all Mozilla-based browser releases.

+ +

MSIE 6 SP2 has a similar error correction mechanism but it is not activated by default in all security levels: a security setting can disable such error correction mechanism.

+ +

Note on scrollbars

+ +

When content overflows window viewport dimensions, then scrollbar(s) (or some scrolling mechanism) are necessary to ensure that content can be accessed by users. Content can overflow window dimensions for several reasons which are outside the control of web authors:

+ + + +

Note on status bar

+ +

You should assume that a large majority of users' browsers will have the status bar or that a large majority of users will want to force the status bar presence: best is to always set this feature to yes. Also, if you specifically request to remove the status bar, then Firefox users will not be able to view the Site Navigation toolbar if it is installed. In Mozilla and in Firefox, all windows with a status bar have a window resizing grippy at its right-most side. The status bar also provides info on http connection, hypertext resource location, download progress bar, encryption/secure connection info with SSL (Secure Socket Layer) connection (displaying a yellow padlock icon), internet/security zone icons, privacy policy/cookie icon, etc. Removing the status bar usually removes a lot of functionality, features and information considered useful (and sometimes vital) by the users.

+ +

Note on security issues of the status bar presence

+ +

In MSIE 6 for XP SP2: For windows opened using window.open():

+ +
+

"For windows opened using window.open():
+ Expect the status bar to be present, and code for it. The status bar will be on by default and is 20-25 pixels in height. (...)"
+ quote from Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2

+
+ +
+

"(...) windows that are created using the window.open() method can be called by scripts and used to spoof a user interface or desktop or to hide malicious information or activity by sizing the window so that the status bar is not visible.
+ Internet Explorer windows provide visible security information to the user to help them ascertain the source of the Web page and the security of the communication with that page. When these elements are not in view, the user might think they are on a more trusted page or interacting with a system process when they are actually interacting with a malicious host. (...)
+ Script-initiated windows will be displayed fully, with the Internet Explorer title bar and status bar. (...)
+ Script management of Internet Explorer status bar
+ Detailed description
+ Internet Explorer has been modified to not turn off the status bar for any windows. The status bar is always visible for all Internet Explorer windows. (...) Without this change, windows that are created using the window.open() method can be called by scripts and spoof a user interface or desktop or hide malicious information or activity by hiding important elements of the user interface from the user.
+ The status bar is a security feature of Internet Explorer windows that provides Internet Explorer security zone information to the user. This zone cannot be spoofed (...)"
+ quote from Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions

+
+ +

Note on fullscreen

+ +

In MSIE 6 for XP SP2:

+ + + + + +

References:

+ + + + + +

Note on outerHeight versus height

+ +

innerHeight vs outerHeight illustration

+ +

Tutorials

+ +

JavaScript windows (tutorial) by Lasse Reichstein Nielsen

+ +

The perfect pop-up (tutorial) by Ian Lloyd

+ +

Popup windows and Firefox (interactive demos) by Gérard Talbot

+ +

References

+ +

Links Want To Be Links by Jukka K. Korpela

+ +

Links & JavaScript Living Together in Harmony by Jeff Howden

diff --git a/files/pl/web/api/window/opendialog/index.html b/files/pl/web/api/window/opendialog/index.html new file mode 100644 index 0000000000..6d24bf03fd --- /dev/null +++ b/files/pl/web/api/window/opendialog/index.html @@ -0,0 +1,75 @@ +--- +title: window.openDialog +slug: Web/API/Window/openDialog +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/openDialog +--- +

{{ ApiRef() }}

+

Podsumowanie

+

window.openDialog jest rozszerzeniem do window.open. Zachowuje się w taki sam sposób, oprócz tego, że opcjonalnie pobiera jeden lub więcej parametrów przeszłego windowFeatures i windowFeatures itself is treated a little differently.

+

The optional parameters, if present, will be bundled up in a JavaScript Array object and added to the newly created window as a property named window.arguments. They may be referenced in the JavaScript of the window at any time, including during the execution of a load handler. These parameters may be used, then, to pass arguments to and from the dialog window.

+

Note that the call to openDialog() returns immediately. If you want the call to block until the user has closed the dialog, supply modal as a windowFeatures parameter. Note that this also means the user won't be able to interact with the opener window until he closes the modal dialog.

+

Składnia

+
newWindow = openDialog(url, name, features, arg1, arg2, ...)
+
+
+
+ newWindow 
+
+ Otwarte okno.
+
+ url 
+
+ Adres URL który będzie wczytany do nowego okna.
+
+ name 
+
+ Nazwa okna (opcjonalnie). Zobacz opis window.open, aby dowiedzieć się więcej.
+
+ features 
+
+ Zobacz opis window.open, aby dowiedzieć się więcej.
+
+ arg1, arg2, ... 
+
+ Argumenty dopasowujące nowe okno (opcjonalnie).
+
+

Przykład

+
var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
+
+

Uwagi

+

Nowe możliwości

+

all - Initially activates (or deactivates ("all=no")) all chrome (except the behaviour flags chrome, dialog and modal). These can be overridden (so "menubar=no,all" turns on all chrome except the menubar.) This feature is explicitly ignored by DOM:window.open. window.openDialog finds it useful because of its different default assumptions.

+

Domyślne zachowanie

+

Możliwości chrome i dialog są zawsze assumed on, unless explicitly turned off ("chrome=no"). openDialog treats the absence of the features parameter as does DOM:window.open, (that is, an empty string sets all features to off) except chrome and dialog, which default to on. If the features parameter is a zero-length string, or contains only one or more of the behaviour features (chrome, dependent, dialog and modal) the chrome features are assumed "OS' choice." That is, window creation code is not given specific instructions, but is instead allowed to select the chrome that best fits a dialog on that operating system.

+

Passing extra parameters to the dialog

+

To pass extra parameters into the dialog, you can simply supply them after the windowFeatures parameter:

+
openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
+
+

The extra parameters will then get packed into a property named arguments of type Array, and this property gets added to the newly opened dialog window.

+

To access these extra parameters from within dialog code, use the following scheme:

+
var food  = window.arguments[0];
+var price = window.arguments[1];
+
+

Note that you can access this property from within anywhere in the dialog code.

+

Zwracanie wartości z okienka dialogowego

+

Since window.close() erases all properties associated with the dialog window (i.e. the variables specified in the JavaScript code which gets loaded from the dialog), it is not possible to pass return values back past the close operation using globals (or any other constructs).

+

To be able to pass values back to the caller, you have to supply some object via the extra parameters. You can then access this object from within the dialog code and set properties on it, containing the values you want to return or preserve past the window.close() operation.

+
var retVals = { address: null, delivery: null };
+openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals);
+
+

If you set the properties of the retVals object in the dialog code as described below, you can now access them via the retVals array after the openDialog() call returns.

+

Inside the dialog code, you can set the properties as follows:

+
var retVals = window.arguments[2];
+retVals.address  = enteredAddress;
+retVals.delivery = "immediate";
+
+

Zobacz także .

+

Specyfikacja

+

{{ DOM0() }}

diff --git a/files/pl/web/api/window/opener/index.html b/files/pl/web/api/window/opener/index.html new file mode 100644 index 0000000000..3cd744928e --- /dev/null +++ b/files/pl/web/api/window/opener/index.html @@ -0,0 +1,49 @@ +--- +title: window.opener +slug: Web/API/Window/opener +tags: + - API + - HTML DOM + - Window + - Własność + - odniesienie + - opener +translation_of: Web/API/Window/opener +--- +

{{APIRef("HTML DOM")}}

+ +

Podsumowanie

+ +

Właściwość opener obiektu {{domxref ("Window")}} zwraca odniesienie do okna, które otworzyło okno używając {{domxref ("Window.open", "open()")}}.

+ +

Innymi słowy, jeśli okno A otwiera okno B, B.opener zwraca A.

+ +

Składnia

+ +
openerWindow = window.opener;
+
+ +

Wartość

+ +

{{domxref ("Window")}} odnosi się do okna, które wywołało open(), aby otworzyć bieżące okno, lub null, jeśli to okno nie zostało otwarte przez połączenie z innym lub utworzone przez inne.

+ +

W niektórych przeglądarkach atrybut rel="noopener noreferrer" w początkowym elemencie {{HTMLElement ("a")}} zapobiega ustawianiu referencji window.opener, w którym to przypadku ta właściwość zwróci wartość null.

+ +

Przykład

+ +
 if window.opener != indexWin {
+     referToTop(window.opener);
+ }
+
+ +

Uwagi

+ +

Kiedy okno jest otwarte z innego okna, to utrzymuje referencję do pierwszego okna jako window.opener. Jeśli bieżące okno nie posiada własności opener, te metoda zwróci NULL.

+ +

Wsparcie przeglądarek

+ + + +

{{Compat("api.Window.opener")}}

diff --git a/files/pl/web/api/window/prompt/index.html b/files/pl/web/api/window/prompt/index.html new file mode 100644 index 0000000000..0a90ac5c2e --- /dev/null +++ b/files/pl/web/api/window/prompt/index.html @@ -0,0 +1,33 @@ +--- +title: window.prompt +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wyświetla okno dialogowe z prośbą do użytkownika o wpisanie jakiegoś tekstu.

+

Składnia

+
result = window.prompt(text,value);
+
+ +

Przykład

+
var sign = prompt("Jaki jest twój znak zodiaku?");
+if (sign.toLowerCase() == "skorpion")
+   alert("Wow! Też jestem Skorpionem!");
+
+

Gdy użytkownik naciśnie przycisk OK, zwracany jest wpisany przez niego tekst. Jeśli użytkownik naciśnie przycisk OK bez wprowadzania tekstu, zwrócony zostanie pusty łańcuch znaków. Jeśli użytkownik naciśnie przycisk Anuluj, ta funkcja zwróci wartość null.

+

Uwagi

+

Okno dialogowe typu prompt zawiera pole tekstowe o wielkości pojedynczej linii, przycisk Anuluj i przycisk OK oraz zwraca tekst (możliwy również pusty), które użytkownik wpisał w to pole tekstowe.

+

The following text is shared between this article, DOM:window.confirm and DOM:window.alert Okna dialogowe to okna modalne - uniemożliwiają użytkownikowi dostęp do reszty interfejsu programu dopóki okno nie zostanie zamknięte. Z tego powodu nie powinieneś nadużywać funkcji, które otwierają okna dialogowe.

+

Zamiast tego użytkownicy Chrome (na przykład rozszerzenia) powinni używać metod nsIPromptService.

+

Specyfikacja

+

{{ DOM0() }}

+

Zobacz także

+

alert, confirm

+
+  
+

{{ languages( { "en": "en/DOM/window.prompt", "fr": "fr/DOM/window.prompt", "ja": "ja/DOM/window.prompt" } ) }}

diff --git a/files/pl/web/api/window/requestanimationframe/index.html b/files/pl/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..703a908e8d --- /dev/null +++ b/files/pl/web/api/window/requestanimationframe/index.html @@ -0,0 +1,170 @@ +--- +title: Window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - DOM + - Metodă +translation_of: Web/API/window/requestAnimationFrame +--- +

{{APIRef}}
+ Metoda Window.requestAnimationFrame() informuje przeglądarkę o zamiarze wykonania animacji i żąda od przeglądarki wywołania określonej funkcji w celu odświeżenia animacji przed następnym odmalowaniem. Argumentem metody jest funkcja (callback) do wywołania przed następnym odmalowaniem (odświeżeniem kanwy).

+ +
Uwaga: Twoja funkcja musi samodzielnie wywołać requestAnimationFrame(), jeżeli chcesz odmalować kolejną ramkę animacji.
+ +

Należy wywołać tą metodą za każdym razem, gdy jesteś gotowy do odświeżenia swojej animacji na ekranie. Spowoduje to żądanie od przeglądarki wykonania twojej funkcji przed następnym odmalowaniem. Częstotliwość wykonywania funkcji wynosi zazwyczaj 60 razy na sekundę, jednakże według rekomendacji W3C w większości przeglądarek odpowiada częstotliwości odświeżania ekranu. Ta częstotliwość może zostać zredukowana do niższej wartości, gdy kod wykonywany jest w zakładce pozostającej w tle lub w ukrytej {{ HTMLElement("iframe") }} w celu poprawienia wydajności lub przedłużenia żywotności baterii.

+ +

Wywoływanej funkcji przekazywany jest pojedynczy argument {{domxref("DOMHighResTimeStamp")}}, który zawiera aktualny czas rozpoczęcia wykonywania tej funkcji, wstawionej do kolejki przez wywołanie requestAnimationFrame. Wiele różnych funkcji wywołanych w jednej ramce otrzyma jednakże tę samą wartość znacznika czasu, niezależnie od czasu spędzonego wykonaniu obliczeń w poprzedzającej funkcji. Znacznik czasu jest liczbą dziesiętną wyrażoną w milisekundach z maksymalną dokładnością 1ms (1000 µs).

+ +

Składnia

+ +
window.requestAnimationFrame(callback);
+
+ +

Parametry

+ +
+
callback
+
Parametr określający funkcję do wywołania, gdy nadchodzi czas odświeżenia animacji przed następnym odmalowaniem. Przekazywana funkcja przyjmuje pojedynczy argument {{domxref("DOMHighResTimeStamp")}}, który określa aktualny czas (zwrócony przez {{domxref('Performance.now()')}} ) w momencie rozpoczęcia przez requestAnimationFrame uruchamiania skolejkowanych wcześniej funkcji.
+
+ +

Wartość zwracana

+ +

Wartość typu long integer będącą identyfikatorem żądania, który unikalnie określa pozycję na liście funkcji do wykonania. Jest to niezerowa wartość, jednakże nie wolno przyjmować żadnych innych założeń dotyczących wartości tego identyfikatora. Możesz przekazać tę wartość do {{domxref("Window.cancelAnimationFrame()")}} aby anulować żądanie wywołania funkcji do odświeżenia.

+ +

Przykład

+ +
var start = null;
+var element = document.getElementById("SomeElementYouWantToAnimate");
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.left = Math.min(progress/10, 200) + "px";
+  if (progress < 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}{{Spec2('HTML WHATWG')}}Brak zmian, zastępuje poprzednią.
{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}{{Spec2('RequestAnimationFrame')}}Wstępna definicja
+ +

Zgodność przeglądarek

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support10.0 {{property_prefix("webkit")}}
+ 24.0 3		4.0 {{property_prefix("moz")}} 1 4
+ 23 2		10.0{{compatversionunknown}} {{property_prefix("-o")}}
+ 15.0		6.0 {{property_prefix("webkit")}}
+ 6.1
return value23.0{{CompatGeckoDesktop("11.0")}}10.0{{compatversionunknown}}{{compatversionunknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.416.0 {{property_prefix("webkit")}}{{CompatUnknown}}{{CompatUnknown}}14.07.0
+ 6.0 {{property_prefix("webkit")}}
requestID return value{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

1 Przed Gecko 11.0 {{geckoRelease("11.0")}}, mozRequestAnimationFrame() mogłobyć wywołane bez parametru. To nie jest dalej wspierane, gdyż raczej nie stanie się częścią standardu.

+ +

2 Parametrem wywoływanej funkcji jest {{domxref("DOMTimeStamp")}} zamiast {{domxref("DOMHighResTimeStamp")}} gdy stosuje się metodę z prefiksem. DOMTimeStamp ma dokładność tylko do milisekundy, podczas gdy DOMHighResTimeStamp ma minimalną dokładność dziesięciu mikrosekund. Co więcej, czas zerowy jest inny: DOMHighResTimeStamp ma taki sam czas zerowy jak performance.now(), lecz DOMTimeStamp ma czas zerowy jak Date.now().

+ +

3 Poprawnym wywołaniem anulowania żądania w Chrome jest aktualnie window.cancelAnimationFrame(). W starszych wersjach window.webkitCancelAnimationFrame() & window.webkitCancelRequestAnimationFrame(), które są przestarzałe, ale ciągle wspierane.

+ +

4 Wsparcie dla wersji z prefiksem zostało usunięte z Firefox 42.

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/window/resizeby/index.html b/files/pl/web/api/window/resizeby/index.html new file mode 100644 index 0000000000..df817ea665 --- /dev/null +++ b/files/pl/web/api/window/resizeby/index.html @@ -0,0 +1,32 @@ +--- +title: window.resizeBy +slug: Web/API/Window/resizeBy +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/resizeBy +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zmienia rozmiar okna o pewną wartość.

+

Składnia

+
window.resizeBy(xDelta,yDelta)
+
+

Parametry

+ +

Przykład

+
// Spowoduje zmniejszenie się okna
+window.resizeBy(-200, -200);
+
+

Uwagi

+

Ta metoda zmienia rozmiar okna relatywnie do jego obecnego rozmiaru. Aby zmienić rozmiar okna bezwzględnie zastosuj DOM:window.resizeTo.

+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.resizeBy", "ja": "ja/DOM/window.resizeBy" } ) }}

diff --git a/files/pl/web/api/window/resizeto/index.html b/files/pl/web/api/window/resizeto/index.html new file mode 100644 index 0000000000..532b561993 --- /dev/null +++ b/files/pl/web/api/window/resizeto/index.html @@ -0,0 +1,36 @@ +--- +title: window.resizeTo +slug: Web/API/Window/resizeTo +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/resizeTo +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Dynamicznie zmienia rozmiar okna.

+

Składnia

+
window.resizeTo(iWidth,iHeight)
+
+

Parametry

+ +

Przykład

+
 // funkcja zmienia rozmiar okna do połowy aktualnie
+ // wyświetlanego ekranu
+ function halve() {
+   window.resizeTo(window.screen.availWidth/2,
+      window.screen.availHeight/2);
+ }
+
+

Uwagi

+

Zobacz także DOM:window.resizeBy.

+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.resizeTo", "ja": "ja/DOM/window.resizeTo" } ) }}

diff --git a/files/pl/web/api/window/scroll/index.html b/files/pl/web/api/window/scroll/index.html new file mode 100644 index 0000000000..3aeacc5f9a --- /dev/null +++ b/files/pl/web/api/window/scroll/index.html @@ -0,0 +1,33 @@ +--- +title: window.scroll +slug: Web/API/Window/scroll +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scroll +--- +

 

+

{{ ApiRef() }}

+

Podsumowanie

+

Przesuwa się do danych koordynatów w dokumencie.

+

Składnia

+
window.scroll(x-coord,y-coord)
+
+

Parametry

+ +

Przykład

+
 // przenieś 100-ny piksel poziomy na górę okna
+ <button onClick="scroll(0, 100);">kliknij, by przesunąć się o 100 pikseli w dół </button>
+
+

Uwagi

+

Powyższa funkcja jest tym co funkcja window.scrollTo. Dla przesuwu względnego zobacz window.scrollBy, window.scrollByLines oraz window.scrollByPages.

+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.scroll", "ja": "ja/DOM/window.scroll" } ) }}

diff --git a/files/pl/web/api/window/scrollbylines/index.html b/files/pl/web/api/window/scrollbylines/index.html new file mode 100644 index 0000000000..329171c9c7 --- /dev/null +++ b/files/pl/web/api/window/scrollbylines/index.html @@ -0,0 +1,35 @@ +--- +title: window.scrollByLines +slug: Web/API/Window/scrollByLines +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scrollByLines +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przewija dokument przez daną liczbę linii.

+

Składnia

+
window.scrollByLines(lines)
+
+

Parametry

+ +

Przykład

+
// przewija w dół o 5 linii w dokumencie.
+<button onclick="scrollByLines(5);">down 5 lines</button>
+
+
// przewija w górę o 5 linii w dokumencie.
+<button onclick="scrollByLines(-5);">up 5 lines</button>
+
+

Uwagi

+

Zobacz także window.scrollBy, window.scrollByPages.

+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.scrollByLines", "ja": "ja/DOM/window.scrollByLines" } ) }}

diff --git a/files/pl/web/api/window/scrollbypages/index.html b/files/pl/web/api/window/scrollbypages/index.html new file mode 100644 index 0000000000..99548bf52c --- /dev/null +++ b/files/pl/web/api/window/scrollbypages/index.html @@ -0,0 +1,35 @@ +--- +title: window.scrollByPages +slug: Web/API/Window/scrollByPages +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scrollByPages +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przewija aktualny dokument przez określoną liczbę stron.

+

Składnia

+
window.scrollByPages(pages)
+
+

Parametry

+ +

Przykład

+
// przewija w dół dokument o 1 stronę
+window.scrollByPages(1);
+
+// przewija w górę dokument o 1 stronę
+window.scrollByPages(-1);
+
+

Uwagi

+

Zobacz także window.scrollBy, window.scrollByLines, window.scroll, window.scrollTo.

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.scrollByPages", "ja": "ja/DOM/window.scrollByPages" } ) }}

diff --git a/files/pl/web/api/window/scrollto/index.html b/files/pl/web/api/window/scrollto/index.html new file mode 100644 index 0000000000..6bdb2154a7 --- /dev/null +++ b/files/pl/web/api/window/scrollto/index.html @@ -0,0 +1,32 @@ +--- +title: window.scrollTo +slug: Web/API/Window/scrollTo +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scrollTo +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przesuwa się do danych koordynatów w dokumencie.

+

Składnia

+
window.scrollTo(x-coord,y-coord)
+
+

Parametry

+ +

Przykład

+
window.scrollTo(0, 1000);
+
+

Uwagi

+

Powyższa funkcja jest tym co funkcja window.scroll. Dla przesuwu względnego zobacz window.scrollBy, window.scrollByLines oraz window.scrollByPages.

+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+

 

+
+  
+

{{ languages( { "en": "en/DOM/window.scrollTo", "fr": "fr/DOM/window.scrollTo", "ja": "ja/DOM/window.scrollTo" } ) }}

diff --git a/files/pl/web/api/window/setinterval/index.html b/files/pl/web/api/window/setinterval/index.html new file mode 100644 index 0000000000..5cbfadde80 --- /dev/null +++ b/files/pl/web/api/window/setinterval/index.html @@ -0,0 +1,87 @@ +--- +title: window.setInterval +slug: Web/API/Window/setInterval +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Ustawia opóźnienie do cyklicznego wywoływania określonej funkcji.

+ +

Składnia

+ +
var idInterwalu = window.setInterval(funkcja, opóźnienie[, parametr1, parametr2, ...]);
+var idInterwalu = window.setInterval(kod, opóźnienie);
+ +

 Parametry

+ + + +

Należy zwrócić uwagę, że przekazywanie dodatkowych parametrów w pierwszej składni nie działa w Internet Explorerze.

+ +

Przykład

+ +
idInterwalu = window.setInterval(animuj, 500);
+
+ +

 W poniższym przykładzie, funkcja zmienKolorTekstu() będzie wykonywana co sekundę, dopóki użytkownik nie naciśnie przycisku Stop, co spowoduje wywołanie clearInterval() z parametrem idInterwalu.

+ +
<html>
+<head>
+<title>przykład z wykorzystaniem setInterval/clearInterval</title>
+
+<script type="text/javascript">
+var idInterwalu;
+
+function zmienKolor() {
+  idInterwalu = setInterval(zmienKolorTekstu, 1000);
+}
+
+function zmienKolorTekstu() {
+  var elem = document.getElementById("my_box");
+  if (elem.style.color == 'red') {
+    elem.style.color = 'blue';
+  } else {
+    elem.style.color = 'red';
+  }
+}
+
+function zatrzymajZmianeKoloru() {
+  clearInterval(idInterwalu);
+}
+</script>
+</head>
+
+<body onload="zmienKolor();">
+<div id="my_box">
+<p>Hello World</p>
+</div>
+<button onclick="zatrzymajZmianeKoloru();">Stop</button>
+</body>
+</html>
+ +

Uwagi

+ +

Funkcja setInterval() służy do ustawienia opóźnienia dla cyklicznie wywoływanych funkcji, takich jak funkcje animacji.

+ +

Możliwe jest anulowanie wykonania fukcji poprzez wywołanie window.clearInterval().

+ +

Jeżeli funkcja ma zostać wykonana tylko raz a nie być wykonywana cyklicznie to należy skorzystać z  window.setTimeout().

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +

{{ languages( { "en": "en/DOM/window.setInterval", "fr": "fr/DOM/window.setInterval", "ja": "ja/DOM/window.setInterval", "pl": "pl/DOM/window.setInterval" } ) }}

diff --git a/files/pl/web/api/window/settimeout/index.html b/files/pl/web/api/window/settimeout/index.html new file mode 100644 index 0000000000..926080dd5b --- /dev/null +++ b/files/pl/web/api/window/settimeout/index.html @@ -0,0 +1,46 @@ +--- +title: window.setTimeout +slug: Web/API/Window/setTimeout +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Uruchamia fragment kodu bądź funkcję po określonym odstępie czasu.

+

Składnia

+
id = window.setTimeout(funkcja, opóźnienie[, param1, param2, ...]);
+id = window.setTimeout(kod, opóźnienie);
+
+

gdzie

+ +

Przykłady

+
window.setTimeout('window.parent.generateOutput()', 1000);
+
+
function generateOutput(aConcise) {
+  if(aConcise)
+    parent.generateConciseOutput();
+  else
+    parent.generateOutput();
+}
+window.setTimeout(generateOutput, 1000, true);
+
+

Zobacz też przykład użycia clearTimeout().

+

Uwagi

+

Możesz anulować opóźnienie wywołania funkcji za pomocą window.clearTimeout().

+

Jeśli chcesz, by funkcja była uruchamiana cyklicznie (np. co każde N milisekund), rozważ wykorzystanie window.setInterval().

+

Specyfikacja

+

{{ DOM0() }}

+

{{ languages( { "en": "en/DOM/window.setTimeout", "fr": "fr/DOM/window.setTimeout", "ja": "ja/DOM/window.setTimeout", "pl": "pl/DOM/window.setTimeout" } ) }}

diff --git a/files/pl/web/api/window/sidebar/index.html b/files/pl/web/api/window/sidebar/index.html new file mode 100644 index 0000000000..280b5dcce3 --- /dev/null +++ b/files/pl/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/pl/web/api/windowbase64/atob/index.html b/files/pl/web/api/windowbase64/atob/index.html new file mode 100644 index 0000000000..cd36201a6c --- /dev/null +++ b/files/pl/web/api/windowbase64/atob/index.html @@ -0,0 +1,104 @@ +--- +title: WindowBase64.atob() +slug: Web/API/WindowBase64/atob +tags: + - API + - Base-64 + - Base64 + - Method + - Metodă + - Reference + - Referencja + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +

{{APIRef}}

+

Funkcja WindowBase64.atob() dekoduje ciąg danych, który został zakodowany używając kodowania base-64. Możesz użyć metody window.btoa() aby zakodować i przesłać dane, które w innym wypadku mogą powodować problemy z komunikacją, a następnie odebrać je i użyć metody window.atob() aby zdekodować dane ponownie. Na przykład możesz zakodować, przesłać i zdekodować znaki kontrolne ASCII o wartościach od 0 do 31.

+

Aby używać tej funkcji z ciągami Unicode albo UTF-8, zobacz tę uwagę w Kodowaniu i dekodowaniu Base64 i tę uwagę w window.btoa().

+

Składnia

+
var odkodowaneDane = window.atob(zakodowaneDane);
+

Przykład

+
var zakodowaneDane = window.btoa("Hello, world"); // kodowanie ciągu
+var odkodowaneDane = window.atob(zakodowaneDane); // odkodowywanie ciągu
+

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}Bez zmian od ostatniej migawki, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Migawka {{SpecName("HTML WHATWG")}}. Bez zmian.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Migawka {{SpecName("HTML WHATWG")}}. Utworzenie WindowBase64 (properties where on the target before it).
+

Zgodność przeglądarek

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
FunkcjaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Podstawowa obsługa{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1][2]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + +
FunkcjaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Podstawowa obsługa{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+

[1]  btoa() jest także dostępna dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli window nie jest globalnym obiektem w komponencie.

+

[2] Wraz z Firefoxem 27, metoda atob() ignoruje wszystkie spacje w argumencie dla zgodności z najnowszą specyfikacją HTML5. ({{ bug(711180) }})

+

Zobacz też

+ diff --git a/files/pl/web/api/windowbase64/btoa/index.html b/files/pl/web/api/windowbase64/btoa/index.html new file mode 100644 index 0000000000..cf3e90c26d --- /dev/null +++ b/files/pl/web/api/windowbase64/btoa/index.html @@ -0,0 +1,126 @@ +--- +title: WindowBase64.btoa() +slug: Web/API/WindowBase64/btoa +tags: + - API + - Base-64 + - Base64 + - Method + - Reference + - Referencja + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +--- +

{{APIRef}}

+

Tworzy string ASCII zakodowany w base-64 z ciągu ("string") danych binarnych.

+

Metoda ta jednak nie nadaje się do konwertowania surowych ciągów Unicode! Zobacz sekcję Unicode poniżej.

+

Składnia

+
var zakodowaneDane = window.btoa(ciagDoZakodowania);
+

Przykład

+
var zakodowaneDane = window.btoa("Hello, world"); // kodowanie ciągu
+var odkodowaneDane = window.atob(zakodowaneDane); // odkodowywanie ciągu ("Hello, world")
+
+

Uwagi

+

Możesz używać tej metody do kodowania danych, które w innym wypadku mogą powodować problemy z komunikacją. Przekaż je, a następnie użyj metody window.atob() aby odkodować dane ponownie. Na przykład możesz zakodować znaki kontrolne takie jak ASCII o wartości od 0 do 31.

+

btoa() jest także dostępne dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli window nie jest globalnym obiektem w komponencie.

+

Ciągi Unicode

+

W większości przeglądarek odwołanie się do window.btoa() z ciągiem Unicode spowoduje wystąpienie wyjątku Character Out Of Range.

+

Aby tego uniknąć, rozważ ten model odnotowany przez Johana Sundströma:

+
function utf8_to_b64( str ) {
+    return window.btoa(encodeURIComponent( escape( str )));
+}
+
+function b64_to_utf8( str ) {
+    return unescape(decodeURIComponent(window.atob( str )));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
+b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
+
+utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
+b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
+
+
+

Lepszym, bardziej wiarygodnym i mniej wymagającym rozwiązaniem jest konwersja DOMString do ciągu zakodowanego w UTF-8 używając TypedArray. W tym celu proszę zapoznać się z tym akapitem.

+

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML WHATWG')}}Brak zmian od ostatniej migawki, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML5.1')}}Migawka {{SpecName("HTML WHATWG")}}. Bez zmian.
{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}{{Spec2('HTML5 W3C')}}Migawka {{SpecName("HTML WHATWG")}}. Utworzenie WindowBase64 (properties where on the target before it).
+

Zgodność przeglądarek

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
FunkcjaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Podstawowa obsługa{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + +
FunkcjaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Podstawowa obsługa{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+

[1] btoa() jest także dostępna dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli window nie jest globalnym obiektem w komponencie.

+

Zobacz też

+ diff --git a/files/pl/web/api/windowbase64/index.html b/files/pl/web/api/windowbase64/index.html new file mode 100644 index 0000000000..2d13e49406 --- /dev/null +++ b/files/pl/web/api/windowbase64/index.html @@ -0,0 +1,113 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +

{{APIRef("HTML DOM")}}

+ +

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This helper neither defines nor inherits any properties.

+ +

Methods

+ +

This helper does not inherit any methods.

+ +
+
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

+ +

See also

+ + diff --git a/files/pl/web/api/zdarzenia_dotykowe/index.html b/files/pl/web/api/zdarzenia_dotykowe/index.html new file mode 100644 index 0000000000..4d49e9b5b5 --- /dev/null +++ b/files/pl/web/api/zdarzenia_dotykowe/index.html @@ -0,0 +1,336 @@ +--- +title: Zdarzenia dotykowe +slug: Web/API/Zdarzenia_dotykowe +translation_of: Web/API/Touch_events +--- +
{{DefaultAPISidebar("Touch Events")}}
+ +

W celu zapewnienia wsparcia dla dotykowych interfejsów użytkownika, zdarzenia dotykowe oferują możliwość interpretowania aktywności palca (lub rysika) na ekranach i gładzikach.

+ +

Interfejsy zdarzeń dotykowych to stounkowo niskopoziomowe API, które mogą być użyte do specyficznych dla aplikacji wielodotykowych interakcji takich jak gesty wykonywane dwoma palcami. Interakcja wielodotykowa zaczyna się, kiedy palec (lub rysik) dotyka powierzchni ekranu lub gładzika. Pozostałe palce mogą dotknąć powierzhni później i, opcjonalnie, poruszać się po powierzchni dotykowej. Interakcja kończy się, gdy palce są zabrane z powierzchni ekranu lub gładzika. W czasie trwania interakcji, aplikacja odbiera zdarzenia dotykowe podczas faz startu, ruchu i zakończenia tejże interakcji.

+ +

Zdarzenia dotykowe są podobne do zdarzeń myszki, z tą różnicą, że pozwalają na jednoczesne dotknięcia w różnych miejscach na ekranie. Interfejs {{domxref("TouchEvent")}} hermetyzuje wszystkie punkty dotyku aktywne w danym momencie. Interfejs {{domxref("Touch")}}, który reprezentuje pojedynczy punkt dotyku, zawiera informacje takie jak pozycja punktu dotyku w stosunku do widoku okna przeglądarki.

+ +

Definicje

+ +
+
Powierzchnia
+
Powierzchnia dotykowa. Może to być ekran lub gładzik.
+
+ +
+
Punkt dotyku
+
Punkt kontaktu z powierzchnią. Może to być palec (lub łokieć, ucho, nos, cokolwiek, ale najczęściej jednak palec) lub rysik.
+
+ +

Interfejsy

+ +
+
{{domxref("TouchEvent")}}
+
Reprezentuje zdarzenie, które zachodzi, gdy stan dotknięć powierzchni się zmienia.
+
{{domxref("Touch")}}
+
Reprezentuje pojedynczy punkt kontaktu między użytkownikiem a powierzchnią dotykową.
+
{{domxref("TouchList")}}
+
Reprezentuje grupę dotknięć; jest używany, gdy na przykład użytkownik dotyka powierzchni wieloma palcami jednocześnie.
+
+ +

Przykład

+ +

Poniższy przykład śledzi wiele dotknięć w jednym czasie, pozwalając użytkownikowi na rysowanie w elemencie {{HTMLElement("canvas")}} przy użyciu więcej niż jednego palca jednocześnie. Kod ten będzie działać jedynie w przeglądarkach wspierających zdarzenia dotykowe.

+ +
Uwaga: W niniejszym tekście słowo „palec” używane jest do opisania kontaktu z powierzchnią dotykową, ale może to być oczywiście także rysik lub dowolna inna metoda dotykania ekranu.
+ +

Stwórz kanwę

+ +
<canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
+  Twoja przeglądarka nie wspiera elementu kanwa (canvas).
+</canvas>
+<br>
+<button onclick="startup()">Initialize</button>
+<br>
+Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
+
+ +

Ustawianie funkcji do obsługi zdarzeń

+ +

Kiedy strona się ładuje, pokazana niżej funkcja startup() powinna być wywołana przez atrybut onload naszego elementu {{HTMLElement("body")}} (choć w przykładzie używamy przycisku do jej uruchomienia, ze względu na ograniczenia systemu przykłądów w MDN).

+ +
function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchmove", handleMove, false);
+  console.log("initialized.");
+}
+
+ +

Funkcja ta po prostu ustawia nasłluchiwanie zdarzeń dla naszego elementu {{HTMLElement("canvas")}}, tak że możemy obsłużyć zdarzenia dotykowe, kiedy się pojawią.

+ +

Śledzenie nowych zdarzeń

+ +

We'll keep track of the touches in-progress.

+ +
var ongoingTouches = [];
+
+ +

When a {{event("touchstart")}} event occurs, indicating that a new touch on the surface has occurred, the handleStart() function below is called.

+ +
function handleStart(evt) {
+  evt.preventDefault();
+  console.log("touchstart.");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i < touches.length; i++) {
+    console.log("touchstart:" + i + "...");
+    ongoingTouches.push(copyTouch(touches[i]));
+    var color = colorForTouch(touches[i]);
+    ctx.beginPath();
+    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);  // a circle at the start
+    ctx.fillStyle = color;
+    ctx.fill();
+    console.log("touchstart:" + i + ".");
+  }
+}
+
+ +

This calls {{domxref("event.preventDefault()")}} to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivered). Then we get the context and pull the list of changed touch points out of the event's {{domxref("TouchEvent.changedTouches")}} property.

+ +

After that, we iterate over all the {{domxref("Touch")}} objects in the list, pushing them onto an array of active touch points and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4 pixel radius circle will show up neatly.

+ +

Drawing as the touches move

+ +

Each time one or more fingers moves, a {{event("touchmove")}} event is delivered, resulting in our handleMove() function being called. Its responsibility in this example is to update the cached touch information and to draw a line from the previous position to the current position of each touch.

+ +
function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i < touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx >= 0) {
+      console.log("continuing touch "+idx);
+      ctx.beginPath();
+      console.log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      console.log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.lineWidth = 4;
+      ctx.strokeStyle = color;
+      ctx.stroke();
+
+      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
+      console.log(".");
+    } else {
+      console.log("can't figure out which touch to continue");
+    }
+  }
+}
+
+ +

This iterates over the changed touches as well, but it looks in our cached touch information array for the previous information about each touch in order to determine the starting point for each touch's new line segment to be drawn. This is done by looking at each touch's {{domxref("Touch.identifier")}} property. This property is a unique integer for each touch, and remains consistent for each event during the duration of each finger's contact with the surface.

+ +

This lets us get the coordinates of the previous position of each touch and use the appropriate context methods to draw a line segment joining the two positions together.

+ +

After drawing the line, we call Array.splice() to replace the previous information about the touch point with the current information in the ongoingTouches array.

+ +

Handling the end of a touch

+ +

When the user lifts a finger off the surface, a {{event("touchend")}} event is sent. We handle this by calling the handleEnd() function below. Its job is to draw the last line segment for each touch that ended and remove the touch point from the ongoing touch list.

+ +
function handleEnd(evt) {
+  evt.preventDefault();
+  log("touchend");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i < touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx >= 0) {
+      ctx.lineWidth = 4;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8);  // and a square at the end
+      ongoingTouches.splice(idx, 1);  // remove it; we're done
+    } else {
+      console.log("can't figure out which touch to end");
+    }
+  }
+}
+
+ +

This is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call Array.splice(), we simply remove the old entry from the ongoing touch list, without adding in the updated information. The result is that we stop tracking that touch point.

+ +

Handling canceled touches

+ +

If the user's finger wanders into browser UI, or the touch otherwise needs to be canceled, the {{event("touchcancel")}} event is sent, and we call the handleCancel() function below.

+ +
function handleCancel(evt) {
+  evt.preventDefault();
+  console.log("touchcancel.");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i < touches.length; i++) {
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+    ongoingTouches.splice(idx, 1);  // remove it; we're done
+  }
+}
+
+ +

Since the idea is to immediately abort the touch, we simply remove it from the ongoing touch list without drawing a final line segment.

+ +

Convenience functions

+ +

This example uses two convenience functions that should be looked at briefly to help make the rest of the code more clear.

+ +

Selecting a color for each touch

+ +

In order to make each touch's drawing look different, the colorForTouch() function is used to pick a color based on the touch's unique identifier. This identifier is an opaque number, but we can at least rely on it differing between the currently-active touches.

+ +
function colorForTouch(touch) {
+  var r = touch.identifier % 16;
+  var g = Math.floor(touch.identifier / 3) % 16;
+  var b = Math.floor(touch.identifier / 7) % 16;
+  r = r.toString(16); // make it a hex digit
+  g = g.toString(16); // make it a hex digit
+  b = b.toString(16); // make it a hex digit
+  var color = "#" + r + g + b;
+  console.log("color for touch with identifier " + touch.identifier + " = " + color);
+  return color;
+}
+
+ +

The result from this function is a string that can be used when calling {{HTMLElement("canvas")}} functions to set drawing colors. For example, for a {{domxref("Touch.identifier")}} value of 10, the resulting string is "#a31".

+ +

Copying a touch object

+ +

Some browsers (mobile Safari, for one) re-use touch objects between events, so it's best to copy the bits you care about, rather than referencing the entire object.

+ +
function copyTouch(touch) {
+  return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
+}
+ +

Finding an ongoing touch

+ +

The ongoingTouchIndexById() function below scans through the ongoingTouches array to find the touch matching the given identifier, then returns that touch's index into the array.

+ +
function ongoingTouchIndexById(idToFind) {
+  for (var i = 0; i < ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // not found
+}
+
+ +

Showing what's going on

+ +
function log(msg) {
+  var p = document.getElementById('log');
+  p.innerHTML = msg + "\n" + p.innerHTML;
+}
+ +

If your browser supports it, you can {{LiveSampleLink('Example', 'see it live')}}.

+ +

jsFiddle example

+ +

Dodatkowe wskazówki

+ +

This section provides additional tips on how to handle touch events in your web application.

+ +

Obsługa kliknięć

+ +

Since calling preventDefault() on a {{event("touchstart")}} or the first {{event("touchmove")}} event of a series prevents the corresponding mouse events from firing, it's common to call preventDefault() on {{event("touchmove")}} rather than {{event("touchstart")}}. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)

+ +
function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+
+  switch (evt.type) {
+    case "touchstart":
+      type = "mousedown";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchmove":
+      type = "mousemove";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchend":
+      type = "mouseup";
+      touch = evt.changedTouches[0];
+      break;
+  }
+
+  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null);
+  evt.originalTarget.dispatchEvent(newEvt);
+}
+
+ +

Calling preventDefault() only on a second touch

+ +

One technique for preventing things like pinchZoom on a page is to call preventDefault() on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.

+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}{{Spec2('Touch Events 2')}}Added radiusX, radiusY, rotationAngle, force properties
{{SpecName('Touch Events', '#touch-interface', 'Touch')}}{{Spec2('Touch Events')}}Initial definition.
+ +

Wsparcie przeglądarek

+ +

Touch

+ +

Touch events are typically available on devices with a touch screen, but many browsers make the touch events API unavailable on all desktop devices, even those with touch screens.

+ +

The reason for this is that some websites use the availability of parts of the touch events API as an indicator that the browser is running on a mobile device. If the touch events API is available, these websites will assume a mobile device and serve mobile-optimised content. This may then provide a poor experience for users of desktop devices that have touch screens.

+ +

To support both touch and mouse across all types of device, use pointer events instead.

+ + + +

{{Compat("api.Touch")}}

+ +

Firefox, touch events, and multiprocess (e10s)

+ +

In Firefox, touch events are disabled when e10s (electrolysis; multiprocess Firefox) is disabled. e10s is on by default in Firefox, but can end up becoming disabled in certain situations, for example when certain accessibility tools or Firefox add-ons are installed that require e10s to be disabled to work. This means that even on a touchscreen-enabled desktop/laptop, touch events won't be enabled.

+ +

You can test whether e10s is disabled by going to about:support and looking at the "Multiprocess Windows" entry in the "Application Basics" section. 1/1 means it is enabled, 0/1 means disabled.

+ +

If you want to force e10s to be on — to explicitly re-enable touch events support — you need to go to about:config and create a new Boolean preference browser.tabs.remote.force-enable. Set it to true, restart the browser, and e10s will be enabled regardless of any other settings.

diff --git "a/files/pl/web/bezpiecze\305\204stwo/certificate_transparency/index.html" "b/files/pl/web/bezpiecze\305\204stwo/certificate_transparency/index.html" new file mode 100644 index 0000000000..7a9b814c43 --- /dev/null +++ "b/files/pl/web/bezpiecze\305\204stwo/certificate_transparency/index.html" @@ -0,0 +1,63 @@ +--- +title: Certificate Transparency +slug: Web/Bezpieczeństwo/Certificate_Transparency +tags: + - Bezpieczeństwo + - Web + - bezpieczeństwo aplikacji WWW +translation_of: Web/Security/Certificate_Transparency +--- +

Certyfikat Przejrzystości (Certificate Transparency) to otwarta platforma programistyczna (framework) stworzona do ochrony oraz monitorowania braków w certyfikacji. Świeżo wydane certyfikaty dostają się do obiegu publicznego, często niezależne logi CT zostają wpisane do rejestru, przez co zachowany zostaje zabezpieczony kryptograficznie rekord certyfikatów TLS.

+ +

W ten sposób organy certyfikujące (CA) mogą podlegać znacznie większemu, publicznemu nadzorowi i kontroli. Potencjalnie szkodliwe certyfikaty, jak te, które naruszają Podstawowe Wymogi CA/B Forum mogą zostać znacznie sprawniej wykryte i cofnięte. Podmioty zajmujące się sprzedażą przeglądarek oraz opiekuni certyfikatów zaufanych są również uprawnieni do podejmowania gruntowniej popartych decyzji dot. problematycznych organów certyfikujących, którym mogą odmowić zaufania.

+ +

Kontekst

+ +

Logi CT są budowane w ramach struktury danych drzewa Merkla (Merkle tree). Węzły są oznaczane hashami kryptograficznymi ich węzłów potomnych. Liście (leaf nodes) zawierają hashe aktualnych części danych. Oznaczenie węzła głównego (root node) zależy jednakże od wszystkich pozostałych węzłów w drzewie.

+ +

W kontekście przejrzystości certyfikacji dane hashowane przez liście są certyfikatami wydawanymi obecnie przez różne CA. Obecność certyfikatu może zostać zweryfikowana przez dowód kontroli skutecznie generowany i weryfikowany w czasie działania logarytmicznego - logarithmic O(log n) time.

+ +

Pierwotnie, w 2013 roku przejrzystość certyfikacji służyła przeciwdziałaniu narażania CA (naruszenia DigiNotar w 2011 roku), wątpliwym decyzjom (incydent Trustwave subordinate root w 2012 roku) oraz technicznym problemom wydawniczym (emisja słabego, 512-bitowego certyfikatu przez Digicert Sdn Bhd w Malezji)

+ +

Wdrożenie

+ +

Gdy certyfikaty zostają dostarczone do rejestru CT, znacznik SCT (signed certificate timestamp) zostaje wygenerowany i zwrócony. Służy to jako dowód, że certyfikat został dostarczony i zostanie dodany do rejestru.

+ +

Wg specyfikacji podczas komunikacji serwery zgodne muszą dostarczać numery tych SCTów do klientów TLS. Może do tego dojść na kilka różnych sposobów:

+ + + +

Przy rozszerzeniu certyfikatu X.509 o włączonych SCTsach decydują organy certyfikujące. Przy stosowaniu tego typu mechanizmu nie powinna istnieć potrzeba modyfikacji serwerów webowych.

+ +

W przypadku ostatnich metod serwery powinny być aktualizowane, aby móc wysyłać żądane dane. Korzyść stanowi fakt, że operator serwera może modyfikować źródła rejestru CT dostarczając SCTsy wysyłane przez rozszerzenie TLS/"zszytą" odpowiedź OCSP.

+ +

Wymagania przeglądarki

+ +

Google Chrome wymaga umieszczania rejestru CT dla wszystkich kwestii związanych z emisjami certyfkatów z datą notBefore po 30 kwietnia 2018 roku. Użytkownicy zostaną uchronieni przed odwiedzaniem stron używających niezgodnych certyfikatów TLS. Wcześniej Chrome wymagało umieszczania Rozszerzonej Walidacji (EV) oraz certyfikatów wydawanych przez Symantec.

+ +

Apple wymaga zróżnicowanej liczby SCTsów dla Safari i innych serwerów celem zaufania certyfikatom.

+ +

Firefox aktualnie ani nie sprawdza ani nie wymaga stosowania rejestru CT dla stron odwiedzanych przez użytkowników.

+ +

Nagłówek Expect-CT może zostać użyty do żądania, by przeglądarka zawsze wymuszała wymóg przejrzystości certyfikacji (np. w Chrome nawet, jeśli certyfikat został wydany z datą notBefore, przed kwietniem)

+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
Certificate TransparencyIETF RFC
diff --git "a/files/pl/web/bezpiecze\305\204stwo/index.html" "b/files/pl/web/bezpiecze\305\204stwo/index.html" new file mode 100644 index 0000000000..0d3cdd2c07 --- /dev/null +++ "b/files/pl/web/bezpiecze\305\204stwo/index.html" @@ -0,0 +1,24 @@ +--- +title: Bezpieczeństwo aplikacji WWW +slug: Web/Bezpieczeństwo +tags: + - Bezpieczeństwo + - Web + - bezpieczeństwo aplikacji WWW +translation_of: Web/Security +--- +
+

Zapewnienie bezpieczeństwa Twojej strony lub aplikacji WWW jest niezwykle istotne. Nawet proste błędy w kodzie mogą skutkować wyciekiem prywatnych danych i ich kradzieżą przez nieodpowiednie osoby. Wymienione tutaj artykuły dot. bezpieczeństwa aplikacji WWW dostarczą Ci informacji, które mogą okazać się pomocne w zabezpieczeniu Twojej strony i jej kodu przez atakami i kradzieżą danych.

+
+ +

{{LandingPageListSubpages}}

+ +

Zobacz również

+ + + +

{{QuickLinksWithSubpages}}

diff --git "a/files/pl/web/bezpiecze\305\204stwo/podstawy_bezpieczenstwa_informacji/index.html" "b/files/pl/web/bezpiecze\305\204stwo/podstawy_bezpieczenstwa_informacji/index.html" new file mode 100644 index 0000000000..93555b6a71 --- /dev/null +++ "b/files/pl/web/bezpiecze\305\204stwo/podstawy_bezpieczenstwa_informacji/index.html" @@ -0,0 +1,36 @@ +--- +title: Podstawy bezpieczeństwa informacji +slug: Web/Bezpieczeństwo/Podstawy_bezpieczenstwa_informacji +tags: + - Bezpieczeństwo + - Początkujący + - bezpieczeństwo aplikacji WWW +translation_of: Web/Security/Information_Security_Basics +--- +

Podstawowa znajomość bezpieczeństwa informacji może pomóc Ci uniknąć pozostawiania Twojego oprogramowania i stron WWW niezabezpieczonych oraz zawierających podatności, które później mogą zostać wykorzystane do osiągnięcia korzyści finansowych lub do innych, podejrzanych celów. Te arykuły mogą Ci pomóc zdobyć potrzebną bazę wiedzy.Dzięki zapoznaniu się z nimi będziesz świadomy/a, jak ważne jest bezpieczeństwo podczas tworzenia stron WWW oraz podczas implementacji treści.

+ +
+
Poufność, Integralność i Dostępność
+
+

Opisuje najważniejsze cele bezpieczeństwa, które są absolutnie niezbędne do zrozumienia istoty bezpieczeństwa

+
+
Podatności
+
Definiuje główne kategorie podatności i omawia obecność podatności w każdym oprogramowaniu
+
Zagrożenia
+
Krótko przedstawia główne zagrożenia
+
Kontrole Bezpieczeństwa
+
Definiuje główne kategorie kontroli bezpieczeństwa i omawia ich potencjalne wady
+
Bezpieczeństwo TCP/IP
+
Zarys modelu TCP/IP z naciskiem na aspekty bezpieczeństwa SSL
+
+ +

Zobacz również

+ + + +

{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}

diff --git "a/files/pl/web/bezpiecze\305\204stwo/podstawy_bezpieczenstwa_informacji/podatnosci/index.html" "b/files/pl/web/bezpiecze\305\204stwo/podstawy_bezpieczenstwa_informacji/podatnosci/index.html" new file mode 100644 index 0000000000..772145243a --- /dev/null +++ "b/files/pl/web/bezpiecze\305\204stwo/podstawy_bezpieczenstwa_informacji/podatnosci/index.html" @@ -0,0 +1,100 @@ +--- +title: Podatności +slug: Web/Bezpieczeństwo/Podstawy_bezpieczenstwa_informacji/Podatnosci +tags: + - Bezpieczeństwo + - Początkujący + - Tutorial + - bezpieczeństwo aplikacji WWW + - podatności + - samouczek +translation_of: Archive/Security/Vulnerabilities +--- +
+

Niniejszy artykuł tłumaczy czym są podatności i omawia ich występowanie we wszystkich systemach.

+ +

Podatność to słabość systemu, która może zostać wykorzystana do naruszenia poufności, integralności i/lub dostępności. Podatności można kategoryzować na wiele sposobów. W tym artykule użyjemy trzech kategorii najwyższego ryzyka: usterki oprogramowania, problemy przy konfiguracji zabezpieczeń i nadużycie funkcji oprogramowania. Kategorie te zostały umówione poniżej.

+
+ +

Kategorie podatności

+ +

Usterki oprogramowania są wynikiem niezamierzonego błędu w architekturze lub samym kodzie oprogramowania. Jako przykład może posłużyć błąd przy weryfikacji wprowadzanych danych, np. kiedy dane wprowadzane przez użytkownika nie są prawidłowo sprawdzane pod kątem prób wprowadzania szkodliwych stringów używających nieporządanych znaków czy zbyt długich wartości wiązanych ze znanymi atakami. Inny przykład to błąd dopuszczający sytuację wyścigu ("race condition"), przez który atakujący może przeprowadzić określone działanie posiadając podniesione uprawnienia.

+ +

Ustawienia konfiguracji bezpieczeństwa to element bezpieczeństwa oprogramowania który może zostać zmieniony przez samo oprogramowanie. Przykłady ustawień to np. system operacyjny oferujący dostęp do listy kontrolnej przydzielającej prawa użytkowników do odczytu i modyfikacji plików oraz np. aplikacja dopuszczająca umożliwianie lub uniemożliwianie szyfrowania danych wrażlliwych znajdujących się w aplikacji.

+ +

Problemy przy konfiguracji zabezpieczeń to m.in. używanie ustawień konfiguracji bezpieczeństwa w sposób, który ma negatywny wpływ na bezpieczeństwo oprogramowania.

+ +

Cecha oprogamowania to możliwość funkcyjna udostępniona przez oprogramowanie. Podatność na nadużycie funkcji oprogramowania to taki typ podatności, w której dana funkcja stanowi dziurę bezpieczeństwa systemu. Tego typu podatności stwarza projektant oprogramowania, gdy aby uzyskać dodatkowe funkcje oprogramowania zakłada idylliczny scenariusz i ryzykuje tym samym podatność na ewentualne ataki.

+ +

Na przykład, oprogramowanie klienckie email może zawierać funkcjonalność, która umożliwia wyrenderowanie treści HTML w wiadomościach email. Atakujący może w tej sytuacji stworzyć fałszywy mail zawierający hiperlink, który po wyrenderowaniu w HTML wygląda na nieszkodliwy, a w rzeczywistości po kliknięciu przekierowuje odbiorcę na szkodliwą stronę. Jednym z idyllicznych założeń w fazie projektowania funkcji renderowania treści HTML była myśl, że użytkownicy nie otrzymają szkodliwych hiperlinków i nie będą w nie klikać.

+ +

Podatności nadużycia funkcji oprogramowania pojawiają się podczas projektowania oprogramowania lub jego komponentów (np. protokół, który oprogramowanie wdraża). Idylliczne założenia mogą być oczywiste - np. projektant jest świadomy słabości bezpieczeństwa i zakłada, że oddzielna kontrola bezpieczeństwa wystarczy.

+ +

Często jednak założenia idylliczne są dwuznaczne, chociażby utworzenie funkcji bez wcześniejszego ocenienia ryzyka. Dodatkowo zagrożenia mogą się zmieniać w czasie życia oprogramowania czy protokołu w nim użytego.

+ +

Przykład? Address Resolution Protocol (ARP) zakłada, że odpowiedź ARP zawiera prawidłowe mapowanie pomiędzy adresami Media Access Control (MAC) a Internet Protocol (IP). Cache ARP używają tej informacji, by umożliwić przydatne działanie - zezwolenie na wysyłanie danych pomiędzy urządzeniami w jednej sieci lokalnej. Jednakże atakujący mógłby wygenerować fałszywe komunikaty ARP celem zmylenia tabli systemowej ARP i w ten sposób przeporwadzić atak denial-of-service lub man-in-the-middle attack.

+ +

Protokuł ARP został ustandaryzowany ponad 25 lat temu, a zagrożenia znacząco się od tego czasu zmieniły, więc założenia idylliczne, które były wówczas nie do uniknięcia dziś nie mają już raczej racji bytu.

+ +

Może być ciężko odróżnić podatność nadużycia funkcji oprogramowania od pozostałych dwóch kategorii. Np. zarówno podatności związane z wadami, jak i nadużyciami mogą wynikać z braków w procesie projektowania oprogramowania. Jednakże wady oprogramowania są jednoznacznie negatywne - nie mają cech pozytywnych w odniesieniu do bezpieczeństwa czy funkcjonalności - podczas gdy podatności na nadużycia funkcji oprogramowania są wynikiem dostarczania dodatkowych funkcji.

+ +

Mogą mylić podatności na nadużycia w odniesieniu do funkcji, które można odblokowywać lub zablokowywać - w rozumieniu, że są konfigurowalne - a kwestie konfiguracji bezpieczeństwa. Kluczową różnicą jest to, że przy podatności na nadużycia ustawienia bezpieczeństwa umożliwiają lub blokują całą funkcję, a nie wpływają jedynie na bezpieczeństwo. Podatność wynikająca z konfiguracji bezpieczeństwa dotyczy wyłącznie bezpieczeństwa.

+ +

Np. ustawienie blokujące używanie HTML w mailach ma ogromny wpływ na zarówno kwestię bezpieczeństwa, jak i funkcjonalności. W tym przypadku podatność w odniesieniu do ustawienia będzie podatnością związaną z nadużyciem. Ustawienie blokujące funkcję antiphishingową w kliencie pocztowym ma ogromny wpływ wyłącznie na bezpieczeństwo, więc podatność dot. takiego ustawienia byłaby określona jako podatność w związku z konfiguracją bezpieczeństwa.

+ +

Obecność podatności

+ +

Żaden system nie jest w 100% bezpieczny: każdy system ma podatności. W danym momencie system może nie posiadać żadnych widocznych wad, ale podatności na problemy z konfiguracją bezpieczeństwa i nadużycia funkcji oprogramowania są zawsze obecne.

+ +

Podatność na nadużycia w przypadku funkcji oprogramowania jest nieodłączna, ponieważ każda funkcjonalność musi być opierana na założeniach idyllicznych - a te założenia mogą zostać złamane mimo dołożenia ogromnych wysiłków i poniesienia sporych kosztów. Kwestie konfiguracji bezpieczeństwa są nie do uniknięcia z dwóch powodów.

+ +

Po pierwsze, wiele ustawień konfiguracyjnych zwiększa bezpieczeństwo kosztem funkcjonalności, więc używanie najbezpieczniejszych ustawień może doprowadzić do bezużyteczności oprogramowania. Po drugie, wiele ustawień bezpieczeństwa ma zarówno pozytywne, jak i negatywne kosekwencje względem bezpieczeństwa.

+ +

Przykładem jest dopuszczona liczba następujących po sobie, nieudanych prób logowania na konto użytkownika zanim zostanie ono zablokowane. Ustawiając ją na 1 uzyskalibyśmy najbezpieczniejszą opcję przeciw atakom opartym na zgadywaniu haseł, ale jednocześnie blokowalibyśmy legalnych użytkowników po tym, jak jednokrotnie wpisaliby złe hasło. Co więcej, prawdopodobnie zachęciłoby to do używania przez atakujących ataków typu denial-of-service z racji łatwości generowania pojedynczej, nieudanej próby logowania dla wszystkich kont użytkowników.

+ +

Z powodu liczby nieuniknionych podatności w ustawieniach konfiguracji bezpieczeństwa i możliwości nadużyć funkcji oprogramowania plus liczby podatności na wady oprogramowania w systemie niezależnie od czasu, każdy system może posiadać dziesiątki, jak nie setki podatności w jednym tylko systemie.

+ +

Te podatności prawdopodobnie posiadają zróżnicowane cechy. Część będzie łatwa do wykorzystania, podczas gdy inne będą możliwe do wykorzystania jedynie w sytuacji zaistnienia kombinacji wysoce nieprawdopodobnych warunków.

+ +

Jedna podatność może skutkować dostępem do systemu na poziomie administratora, podczas gdy inna jedynie umożliwiać odczyt nieistotnego pliku.

+ +

Ostatecznie organizacje muszą wiedzieć, jak trudno jest wykorzystać daną podatność i co się stanie w sytuacji, jeśli dojdzie do jej wykorzystania.

+ +

Podatności stron WWW

+ +

OWASP lub Projekt Bezpieczeństwa Otwartej Sieci (Open Web Security Project) to organizacja non-profit skoncentrowana na zwiększaniu bezpieczeństwa oprogramowania i aplikacji WWW. Wg Open Web Application Security Project pod względem popularności XSS był siódmą z najczęściej spotykanych podatności aplikacji WWW w roku 2017.

+ +

Organizacja publikuje listę najważniejszych podatności aplikacji WWW bazując na danych z różnych organizacji bezpieczeństwa.

+ +

Podatnosci aplikacji WWW są priorytetowane pod względem możliwości wykorzystania, wykrywalności i wpływu na oprogramowanie, którym może być każdy CMS, jak WordPress, Joomla, Magneto, Woocommerce i inne.

+ +

Poniżej przedstawiamy sześć najpopularniejszych podatności stron WWW, przed którymi musisz się chronić.

+ +

1. SQL Injections
+ 2. Cross Site Scripting (XSS)
+ 3. Broken Authentication & Session Management - IdentityManager
+ 4. Insecure Direct Object References - DOM (Document Object Model)
+ 5. Security Misconfiguration
+ 6. Cross-Site Request Forgery (CSRF)

+ +

Zobacz również

+ + + +
+

Informacja o dokumentacji źródłowej

+ + +
+ +

{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}

diff --git "a/files/pl/web/bezpiecze\305\204stwo/same-origin_policy/index.html" "b/files/pl/web/bezpiecze\305\204stwo/same-origin_policy/index.html" new file mode 100644 index 0000000000..23f296444e --- /dev/null +++ "b/files/pl/web/bezpiecze\305\204stwo/same-origin_policy/index.html" @@ -0,0 +1,277 @@ +--- +title: Reguła tego samego pochodzenia (Same-origin policy) +slug: Web/Bezpieczeństwo/Same-origin_policy +tags: + - Bezpieczeństwo + - CORS + - Host + - JavaScript + - Same-origin policy + - URL + - origin + - pochodzenie + - reguła tego samego pochodzenia + - źródło +translation_of: Web/Security/Same-origin_policy +--- +

Same-origin policy (reguła tego samego pochodzenia) to istotny mechanizm bezpieczeństwa, który określa sposób, w jaki dokument lub skrypt jednego pochodzenia ({{Glossary("origin")}}) może komunikować się z zasobem innego pochodzenia. Pozwala to na odizolowanie potencjalnie szkodliwych dokumentów i tym samym redukowane są czynniki sprzyjające atakom.

+ +

Definicja "origin"

+ +

Dwa URLe są tego samego pochodzenia, jeśli {{Glossary("protocol")}}, {{Glossary("port")}} (jeśli wyszczególniony) oraz {{Glossary("host")}} są takie same dla obu. Tego typu charakterystykę nazywa się "krotką schematu/hosta/portu" ("scheme/host/port tuple") lub po prostu "krotką" ("Krotka" to kolekcja elementów tworzących zbiór - generyczna forma, która może być podwójna/potrójna/poczwórna itd.).

+ +

Poniższa tabela zawiera przykłady zestawień "originów" z URLem http://store.company.com/dir/page.html:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
URLWynikPowód
http://store.company.com/dir2/other.htmlSame originRóżni się tylko ścieżka
http://store.company.com/dir/inner/another.htmlSame originRóżni się tylko ścieżka
https://store.company.com/page.htmlNiepowodzenieInny protokół
http://store.company.com:81/dir/page.htmlNiepowodzenieInny port (http:// domyślnie jest portem 80)
http://news.company.com/dir/page.htmlNiepowodzenieInny host
+ +

Zobacz również definicję "origin" dla URLów file:, ich zestawienie jest bardziej złożone.

+ +

Odziedziczone "origin"

+ +

Skrypty wywoływane przez strony z URLami about:blank lub javascript: dziedziczą "origin" dokumentu zawierającego ten URL, ponieważ tego typu URLe nie zawierają informacji o serwerze źródłowym.

+ +
+

Przykładowo, about:blank jest często używany jako URL nowego, pustego, wyskakującego okienka, w którym skrypt-rodzic umieszcza treść (np. przez mechanizm {{domxref("Window.open()")}}). Jeśli dane okienko zawiera również JavaScript, skrypt odziedziczy ten sam "origin" jak skrypt, który je utworzył.

+
+ +
+

data: URLe zyskują nowy, pusty kontekst bezpieczeństwa.

+
+ +

Wyjątki w Internet Explorer

+ +

W Internecie Explorerze istnieją dwa wyjątki od reguły same-origin:

+ +
+
Strefy Zaufania
+
Jeśli obie domeny znajdują się w strefie wysokiego zaufania (np. firmowe domeny intranetu), wówczas ograniczenia same-origin nie są stosowane.
+
Port
+
IE nie bierze pod uwagę portów w trakcie sprawdzania obecności tego samego pochodzenia. Przykładowo, https://company.com:81/index.html i https://company.com/index.html są uznawane za posiadające ten sam "origin", więc nie są implementowane żadne ograniczenia .
+
+ +

Wspomniane wyjątki są niestandardowe i nie są wspierane przez inne przeglądarki.

+ +

Zmiana origin

+ +

Strona może zmieniać swoje pochodzenie przy zachowaniu pewnych ograniczeń. Skrypt może nadać wartość {{domxref("document.domain")}} równą swojej obecnej domenie lub superdomenie swojej obecnej domeny. Jeśli odwołuje się do superdomeny obecnej domeny, wówczas krótsza superdomena jest brana pod uwagę przy kontroli same-origin.

+ +

Załóżmy, że skrypt z dokumentu pod adresem http://store.company.com/dir/other.html wywołuje poniższą linijkę:

+ +
document.domain = "company.com";
+
+ +

Następnie strona może przejść pomyślnie kontrolę same-origin mając adres http://company.com/dir/page.html (przyjmując, że http://company.com/dir/page.html ma document.domain równe "company.com" by wskazać, że chce na to zezwalać - sprawdź: {{domxref("document.domain")}}). Jednakże, company.com nie może ustawić document.domain na othercompany.com, ponieważ nie jest to superdomena company.com.

+ +

Numer portu jest sprawdzany oddzielnie przez przeglądarkę. Każde odwołanie do document.domain, w tym document.domain = document.domain, spowoduje przypisanie numerowi portu wartości null. Jednakże, nie uda się nawiązać komunikacji company.com:8080 z company.com tylko poprzez umieszczenie document.domain = "company.com" w pierwszym z nich. Taki zapis musi znajdować się w obu dokumentach, aby ich porty były równocześnie równe null.

+ +
+

Zauważ: Używając document.domain , żeby pozwolić subdomenie na bezpieczny dostęp do rodzica potrzebujesz ustawić document.domain na tę samą wartość jednocześnie w domenie rodzica i w subdomenie. Jest to wymagane nawet podczas zwykłego przywracania domeny rodzica do pierwotnej wartości. Niepowodzenie może skutkować błędami dostępu.

+
+ +

Dostęp sieciowy cross-origin (międzyźródłowy)

+ +

Reguła tego samego pochodzenia kontroluje interakcje pomiędzy dwoma różnymi "originami", np. kiedy używasz elementu {{domxref("XMLHttpRequest")}} czy {{htmlelement("img")}}. Tego typu interakcje przeważnie dzielą się na trzy kategorie:

+ + + +

Poniżej znajdują się przykłady zasobów, które można osadzać międzyźródłowo:

+ + + +

Jak umożliwić dostęp cross-origin

+ +

Poprzez CORS można zezwolić na dostęp cross-origin. CORS jest częścią {{Glossary("HTTP")}}, co pozwala serwerom na określanie, które hosty są upoważnione do ładowania treści z tego serweru.

+ +

Jak zablokować dostęp cross-origin

+ + + +

Dostęp cross-origin API skryptu

+ +

API JavaScriptu, jak {{domxref("HTMLIFrameElement.contentWindow", "iframe.contentWindow")}}, {{domxref("window.parent")}}, {{domxref("window.open")}} i {{domxref("window.opener")}} pozwalają dokumentom na bezpośrednią, wzajemną referencję. Jeśli dwa dokumenty nie są tego samego pochodzenia, referencje te umożliwiają bardzo ograniczony dostęp do obiektów {{domxref("Window")}} i {{domxref("Location")}}, jako opisano w następnych dwóch sekcjach.

+ +

Do komunikacji pomiędzy dokumentami o różnym pochodzeniu stosuje się {{domxref("window.postMessage")}}.

+ +

Specyfikacja: Standard HTML § Obiekty cross-origin.

+ +

Window

+ +

Poniższy dostęp cross-origin jest dopuszczany w przypadku wymienionych właściwości Window:

+ + + + + + + + + + + + + + + + + + + + + +
Metody
{{domxref("window.blur")}}
{{domxref("window.close")}}
{{domxref("window.focus")}}
{{domxref("window.postMessage")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Własności
{{domxref("window.closed")}}Tylko do odczytu.
{{domxref("window.frames")}}Tylko do odczytu.
{{domxref("window.length")}}Tylko do odczytu.
{{domxref("window.location")}}Odczyt/Zapis.
{{domxref("window.opener")}}Tylko do odczytu.
{{domxref("window.parent")}}Tylko do odczytu.
{{domxref("window.self")}}Tylko do odczytu.
{{domxref("window.top")}}Tylko do odczytu.
{{domxref("window.window")}}Tylko do odczytu.
+ +

Niektóre przeglądarki zezwalają na dostęp większej ilości właściwości, niż wypisane powyżej.

+ +

Location

+ +

Poniższy dostęp cross-origin jest dopuszczany w przypadku właściwości Location:

+ + + + + + + + + + + + +
Metody
{{domxref("location.replace")}}
+ + + + + + + + + + + + + + +
Atrybuty
{{domxref("URLUtils.href")}}Tylko do zapisu.
+ +

Niektóre przeglądarki umożliwiają dostęp do większej liczby właściwości, niż wymienione powyżej.

+ +

Dostęp cross-origin do danych pamięci

+ +

Dostęp do danych przechowywanych w przeglądarce, jak localStorage czy IndexedDB są odseparowane pochodzeniem. Każdy origin otrzymuje własną, odseparowaną pamięć i JavaScript jednego pochodzenia nie może odczytywać lub wpisywać niczego do pamięci należącej do innego originu.

+ +

Ciasteczka (cookies) używają oddzielnej definicji originów. Strona może ustalić ciasteczko dla własnej domeny lub domeny-rodzica dopóki, gdy domena-rodzic nie jest sufiksem publicznym. Firefox i Chrome używają listy sufiksów publicznych (Public Suffix List), by zweryfikować czy domena jest sufiksem publicznym. Internet Explorer używa własnej, wewnątrznej metody weryfikacji czy domena jest sufiksem publicznym. Przeglądarka udostępni ciasteczko podanej domenie zawierającej jakiekolwiek subdomeny, niezależnie jaki protokół (HTTP/HTTPS) czy port jest używany. Przy ustalaniu ciasteczka możliwe jest określenie limitu dostępności używając flag domeny (Domain), ścieżki (Path), bezpiecznej (Secure) i Http-Only. Gdy odczytywane jest ciasteczko nie można zobaczyć, gdzie zostało ustalone. Nawet jeśli używane są wyłącznie bezpieczne połączenia https dane ciasteczko mogło zostać ustalone poprzez połączenie niebezpieczne.

+ +

Zobacz również

+ + + +
+

Informacje dot. dokumentu źródłowego

+ + +
+ +

{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}

diff --git "a/files/pl/web/bezpiecze\305\204stwo/subresource_integrity/index.html" "b/files/pl/web/bezpiecze\305\204stwo/subresource_integrity/index.html" new file mode 100644 index 0000000000..69f20709ec --- /dev/null +++ "b/files/pl/web/bezpiecze\305\204stwo/subresource_integrity/index.html" @@ -0,0 +1,163 @@ +--- +title: Integralność podzasobów (Subresource Integrity) +slug: Web/Bezpieczeństwo/Subresource_Integrity +tags: + - Bezpieczeństwo + - HTML + - HTTP + - Wstęp + - bezpieczeństwo aplikacji WWW +translation_of: Web/Security/Subresource_Integrity +--- +

Subresource Integrity (SRI), w wolnym tłumaczeniu "integralność podzasobów", to funkcja bezpieczeństwa umożliwiająca przeglądarkom weryfikowanie, czy zasoby, które przechwytują (np. z CDN) docierają do nich bez nieporządanych zmian. Działanie takie jest możliwe dzięki używaniu hasha kryptograficznego, z którym przechwycony zasób musi być zgodny.

+ +
+

Notka: W celu weryfikacji integralności podzasobów danych przekazywanych ze źródła innego, niż dokument w którym są osadzane przeglądarki dodatkowo sprawdzają źródło poprzez międzyźródłowe udostępnianie zasobów, tzw. Cross-Origin Resource Sharing (CORS). Dzięki temu upewniają się, że pochodzenie (origin) oferujące dane zasoby pozwala na udostępnianie ich z innym, sprecyfizowanym originem.

+
+ +

Korzyści wynikające z "Subresource Integrity"

+ +

Używając {{Glossary("CDN", "Content Delivery Networks (CDNs)")}} do hostowania plików, jak np. skrypty czy arkusze stylów, które są udostępnianie pośród licznych stron WWW można polepszyć wydajność strony i zachować przepustowość łącza. Jednakże, używając CDNów ryzykujemy, że jeśli atakujący przejmie kontrolę nad CDNem to może wprowadzić szkodliwą zawartość do plików na CDNie (lub zupełnie je zastąpić) i przez to potencjalnie może zaatakować wszystkie strony, które przechwytują pliki z tego CDNu.

+ +

"Subresource Integrity" pozwala na ograniczenie ryzyka ataków tego typu poprzez zapewnienie, że pliki które dana aplikacja, bądź dokument WWW przechwytują (m. in. z CDNu) zostały dostarczone bez udziału trzeciej strony, która "wzbogaciła" nasze dane o dodatkową treść oraz bez żadnych, jakichkolwiek innych zmian w przesyłanych plikach.

+ +

Używanie "Subresource Integrity"

+ +

Korzystanie z funkcji "Subresource Integrity" jest możliwe przez określenie hasha zakodowanego kryptograficznie w base64 zasobu (pliku), który przeglądarka ma przechwycić, z wartością atrybutu integrity danego elementu {{HTMLElement("script")}} or {{HTMLElement("link")}}.

+ +

Wartość integrity zaczyna się od co najmniej jednego stringu, przy czym każdy string zawiera prefiks wskazujący na konkretny algorytm hashowy (obecnie dozwolonymi prefiksami są sha256, sha384, i sha512), następnie opatrzony myślnikiem i zakończony aktualnym hashem zakodowanym w base64.

+ +
+

Notka: Wartość integrity może zawierać liczne hashe oddzielone białymi znakami. Zasób zostanie załadowany, jeśli dopasuje się z jednym z tych hashów.

+
+ +

Przykładowy string integrity z hashem sha384 zakodowanym w base64:

+ +
sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC
+
+ +

Więc oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC to część "hashowa", a prefiks sha384 wskazuje, że jest to hash sha384.

+ +
+

Notka: Część "hashowa" wartości integrity jest, mówić ściśle, skrótem kryptograficznym formowanym przez zastosowanie określonych funkcji hashowych do danego outputu (np. skryptu lub arkuszu stylów). Zwykle używa się skrótu "hash" do określania skrótu kryptograficznego, więc w taki sposób to określenie jest używane w niniejszym artykule.

+
+ +

Narzędzia do generowania hashów SRI

+ +

Możesz generować hashe SRI z konsoli z openssl używając wywołania polecenia, jak:

+ +
cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A
+ +

lub z shasum używając wywołania polecenia, jak:

+ +
shasum -b -a 384 FILENAME.js | awk '{ print $1 }' | xxd -r -p | base64
+
+ +
+

Notka:

+ + +
+ +

Warto wiedzieć, że dostępny na https://www.srihash.org/ SRI Hash Generator to narzędzie online umożliwiające generowanie hashy SRI.

+ +

Zasady bezpieczeństwa zawartości i Integralności podzasobów(Content Security Policy & Subresource Integrity)

+ +

Możesz skorzystać z Zasad bezpieczeństwa zawartości (Content Security Policy), by skonfigurować swój serwer, żeby wymuszał by określone typy plików wymagały stosowania Subresource Integrity. Aby to zrobić użyj dyrektywy {{CSP("require-sri-for")}} w swoim nagłówku CSP, np.:

+ +
Content-Security-Policy: require-sri-for script;
+ +

Dzięki temu zapisowi każda próba załadowania JavaScript powiedzie się jedynie, jeśli informacja o Subresource Integrity znajduje się na miejscu, a testy integralności zakończą się sukcesem.

+ +

Możesz również określić, że SRI powinno być stosowane podczas ładowania arkuszy stylów:

+ +
Content-Security-Policy: require-sri-for style;
+ +

Możesz również określić zarówno script, jak i style aby wymagać SRI przy obu typach plików.

+ +

Udostępnianie zasobów między źródłami i Integralności podzasobów (Cross-Origin Resource Sharing & Subresource Integrity)

+ +

Celem weryfikacji integralności podzasobów danych pochodzących z originu innego, niż dokument, w którym są osadzone, przeglądarki dodatkowo sprawdzają dane za pomocą CORS (Cross-Origin Resource Sharing). Upewniają się, że origin dostarczający dane pozwala na udostępnianie wnioskującemu originowi. Wtedy dane muszą zostać dostarczone z nagłówkiem Access-Control-Allow-Origin, co pozwala na udostępnienie danych wnioskującemu originowi, np.:

+ +
Access-Control-Allow-Origin: *
+ +

Przykłady

+ +

W poniższych przykładach przyjmimy, że oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC to oczekiwany hash SHA-384 (skrót) określonego skryptu example-framework.js i że istnieje kopia skryptu hostowana na https://example.com/example-framework.js.

+ +

Subresource Integrity with the <script> element

+ +

Możesz użyć niniejszego elementu {{HTMLElement("script")}}, by nakazać przeglądarce, aby przed wywołaniem skryptu https://example.com/example-framework.js najpierw porównała skrypt z oczekiwanym hashem i zweryfikowała, że są dopasowane.

+ +
<script src="https://example.com/example-framework.js"
+        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
+        crossorigin="anonymous"></script>
+ +
+

Notka: By dowiedzieć się więcej nt. zastosowania atrybutu crossorigin sprawdź atrybuty ustawień CORS.

+
+ +

Jak przeglądarki radzą sobie z "Subresource Integrity"

+ +

Przeglądarki radzą sobie z SRI poprzez podjęcie poniższych działań:

+ +
    +
  1. +

    Kiedy przeglądarka napotka element {{HTMLElement("script")}} lub {{HTMLElement("link")}} z atrybutem integrity, przed wywołaniem skryptu lub przed zastosowaniem jakiegokolwiek arkusza stylów określonego przez element {{HTMLElement("link")}}, przeglądarka musi najpierw porównać skrypt lub arkusz stylów do oczekiwanego hasha podanego w wartości integrity.

    + +

    Notka: Celem weryfikacji integralności podzasobów danych dostarczanych z originu innego, niż dokument, w którym zostały osadzone, przeglądarki dodatkowo sprawdzają dane poprzez stosowanie CORS, aby upewnić się, że origin dostarczający dane pozwala na udostępnianie ich z wnioskującym originem.

    +
    2. +
  2. Jeśli skrypt lub arkusz stylów nie pasuje do odpowiadającej mu wartości integrity, przeglądarka musi odmówić wywołania skryptu lub uwzględnienia arkusza stylów i zamiast tego musi zwrócić błąd sieciowy wskazujący, że nie powiodło się przechwycenie tego skryptu lub arkusza stylów.
    3. +
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('Subresource Integrity')}}{{Spec2('Subresource Integrity')}}
{{SpecName('Fetch')}}{{Spec2('Fetch')}}
+ +

Kompatybilność z przeglądarkami

+ +

<script integrity>

+ + + +

{{Compat("html.elements.script.integrity")}}

+ +

CSP: require-sri-for

+ + + +

{{Compat("http.headers.csp.require-sri-for")}}

+ +

Zobacz również

+ + + +

{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}

diff --git a/files/pl/web/css/-moz-binding/index.html b/files/pl/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..e44145368c --- /dev/null +++ b/files/pl/web/css/-moz-binding/index.html @@ -0,0 +1,48 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +tags: + - CSS + - Non-standard +translation_of: Archive/Web/CSS/-moz-binding +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Podsumowanie

+ +

-moz-binding jest używany przez aplikacje bazujące na Mozilli, by dołączyć wiązanie XBL do elementu DOM.

+ + + +

Składnia

+ +
-moz-binding: uri | none
+
+ +

Wartości

+ +
+
uri
+
Identyfikator URI dla wiązania XBL (włączając w to identyfikator fragmentaryczny).
+
none
+
Żadne wiązanie XBL nie jest stosowane do elementu.
+
+ +

Przykład

+ +
.exampleone {
+	-moz-binding: url("http://www.mozilla.org/xbl/htmlBindings.xml#checkbox");
+}
+
+ +

Zobacz także

+ +

Dokumentacja XBL: Binding Attachment and Detachment

+ +

Kurs XUL:Wprowadzenie do XBL

diff --git a/files/pl/web/css/-moz-border-bottom-colors/index.html b/files/pl/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..62e5f28015 --- /dev/null +++ b/files/pl/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,56 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +tags: + - CSS + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli -moz-border-bottom-colors ustawia kolory dolnego obramowania. Powinna być ustawiona lista kolorów. Jeśli element ma obramowanie, które jest szersze niż pojedynczy piksel, każda linia pikseli używa następnego koloru określonego w tej własności, z zewnątrz do wewnątrz. Eliminuje to potrzebę zagnieżdżonych boksów. Jeśli obramowanie jest szersze niż liczba określonej w tej własności kolorów, pozostała część obramowania jest w kolorze określonym najbliżej środka.

+ + + +

Obecność -moz-border-bottom-colors oddziela kod rysujący obramowanie, który był zaprojektowany do rysowania obramowań elementów interfejsu użytkownika, ale nie wspiera wielu innych własności obramowania.

+ +

Składnia

+ +
-moz-border-bottom-colors: [<color> | transparent,]* <color> | transparent
+
+ +

Wartości

+ +
+
<color>
+
Określa kolor linii pikseli dolnego obramowania
+
transparent
+
Linia pikseli nie ma własnego koloru, w zamian pokazuje kolor elementu pod spodem
+
+ +

Powiązane własności

+ + + +

Przykłady

+ +
hbox.example {
+  border: 5px solid #000000;
+
+  /* Kolor dolnego obramowania będzie czerwony, zielony, niebieski i biały
+     zaczynając od zewnątrz */
+  -moz-border-bottom-colors: #FF0000 #00FF00 #0000FF #FFFFFF;
+}
+
+ +
 
diff --git a/files/pl/web/css/-moz-border-left-colors/index.html b/files/pl/web/css/-moz-border-left-colors/index.html new file mode 100644 index 0000000000..303bdfa747 --- /dev/null +++ b/files/pl/web/css/-moz-border-left-colors/index.html @@ -0,0 +1,15 @@ +--- +title: '-moz-border-left-colors' +slug: Web/CSS/-moz-border-left-colors +tags: + - CSS + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-left-colors +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli -moz-border-left-colors ustawia kolory obramowania lewej krawędzi.

+ +

Zobacz więcej informacji we własności -moz-border-bottom-colors.

diff --git a/files/pl/web/css/-moz-box-align/index.html b/files/pl/web/css/-moz-box-align/index.html new file mode 100644 index 0000000000..1d6c77d415 --- /dev/null +++ b/files/pl/web/css/-moz-box-align/index.html @@ -0,0 +1,77 @@ +--- +title: '-moz-box-align' +slug: Web/CSS/-moz-box-align +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-align +--- +

{{ CSSRef() }}

+ +

{{warning("This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.")}}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli -moz-box-align określa jak element XUL box (pudełko) wyrównuje swoją zawartość w poprzek (prostopadle) do kierunku swojego układu. Efekt tego jest widoczny tylko, jeśli w pudełku jest dodatkowa przestrzeń.

+ +

Kierunek układu zależy od orientacji elementu: poziomej lub pionowej.

+ + + +

Składnia

+ +
-moz-box-align: start | center | end | baseline | stretch
+
+ +

Wartości

+ +
+
start
+
Pudełko wyrównuje zawartość od początku, opuszczając dodatkową przestrzeń na końcu.
+
center
+
Pudełko wyrównuje zawartość do środka, dzieląc pustą przestrzeń odpowiednio między początek i koniec.
+
end
+
Pudełko wyrównuje zawartość do końca, opuszczając dodatkową przestrzeń na początku
+
baseline
+
Pudełko wyrównuje linie bazowe zawartości (ustawiając tekst w kolejności). Ma zastosowanie tylko, gdy orientacja pudełka jest pozioma.
+
stretch
+
Pudełko rozciąga zawartość, zatem w pudełku nie ma dodatkowej przestrzeni.
+
+ +

Przykłady

+ +
hbox.example {
+	-moz-box-align: end; /* przenosi zawartość do dołu */
+}
+
+ +

Notatki

+ +

Krawędź pudełka określona jakostart dla celu wyrównania zależy od orientacji pudełka

+ + + + + + + + + + + + +
Poziomagórna
Pionowalewa
+ +

Krawędź przeciwna do początkowej jest określana jakoend

+ +

Jeśli wyrównanie jest ustawione przy użyciu atrybutu align elementu, wtedy styl jest ignorowany.

+ +

Zobacz także

+ +

CSS:-moz-box-orient, CSS:-moz-box-pack

diff --git a/files/pl/web/css/-moz-box-flex/index.html b/files/pl/web/css/-moz-box-flex/index.html new file mode 100644 index 0000000000..bd4f192a92 --- /dev/null +++ b/files/pl/web/css/-moz-box-flex/index.html @@ -0,0 +1,64 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/-moz-box-flex +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-flex +--- +

{{ CSSRef() }}

+ +

{{ warning("This is a property for controlling parts of the XUL box model.  It does not match either the old CSS Flexible Box Layout Module drafts for 'box-flex' (which were based on this property) or the behavior of '-webkit-box-flex' (which is based on those drafts).") }}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli -moz-box-flex określa jak pudełko powiększa się, by wypełnić pudełko, które je zawiera, w kierunku układu zawierającego pudełka.

+ + + +

Składnia

+ +
-moz-box-flex:liczba
+
+ +

Wartości

+ +
+
0
+
Pudełko nie powiększa się.
+
> 0
+
Pudełko rozszerza się, by wypełnić proporcjonalną część dostępnej przestrzeni.
+
+ +

Przykłady

+ +
hbox.example {
+	-moz-box-flex: 1; /* take up some more space */
+}
+
+ +

Uwagi

+ +

Zawierające pudełko przydziela dodatkową dostępną przestrzeń proporcjonalnie do wartości rozciągania każdego elementu zawartości.

+ +

Elementy zawartości, które mają rozciąganie ustawione na zero, nie powiększają się.

+ +

Jeśli tylko jeden element zawartości ma niezerowe rozciąganie, wtedy powiększa się on do wypełnienia dostępnej wolnej przestrzeni.

+ +

Elementy zawartości, które mają takie samo rozciąganie, powiększają się o tą samą bezwzględną liczbę.

+ +

Jeśli wartość rozciąganie jest ustawiona przy użyciu atrybutu flex w elemencie, wtedy styl jest ignorowany.

+ +

Aby zrobić element XUL w zawierającym pudełku takich samych rozmiarów, ustaw atrybut equalsize zawierającego pudełka na wartość always. Ten atrybut nie ma odpowiadającej własności CSS.

+ +

Zobacz także

+ +

CSS:-moz-box-orient, CSS:-moz-box-pack

+ +
 
diff --git a/files/pl/web/css/-moz-box-orient/index.html b/files/pl/web/css/-moz-box-orient/index.html new file mode 100644 index 0000000000..5effdac347 --- /dev/null +++ b/files/pl/web/css/-moz-box-orient/index.html @@ -0,0 +1,54 @@ +--- +title: '-moz-box-orient' +slug: Web/CSS/-moz-box-orient +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-orient +--- +

{{ CSSRef() }}

+ +

{{ warning("This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced in newer drafts.") }}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli -moz-box-orient określa, czy pudełko rozkłada swoją zawartość poziomo czy pionowo.

+ +

Np. elementy XUL box i hbox domyślnie rozkładają swoją zawartość poziomo, zaś elementy XUL vbox domyślnie rozkładają swoją zawartość pionowo.

+ + + +

Składnia

+ +
-moz-box-orient: horizontal | vertical
+
+ +

Wartości

+ +
+
horizontal
+
Pudełko układa swoją zawartość w poziomie.
+
vertical
+
Pudełko układa swoją zawartość w pionie.
+
+ +

Przykłady

+ +
hbox.example {
+	-moz-box-orient: vertical; /* zmiana orientacji */
+}
+
+ +

Notatki

+ +

Jeśli orientacja jest ustawiona w elemencie przy użyciu atrybutu orient, wtedy styl jest ignorowany.

+ +

Zobacz także

+ +

CSS:direction, CSS:-moz-box-direction

diff --git a/files/pl/web/css/-moz-box-pack/index.html b/files/pl/web/css/-moz-box-pack/index.html new file mode 100644 index 0000000000..edbbe60856 --- /dev/null +++ b/files/pl/web/css/-moz-box-pack/index.html @@ -0,0 +1,82 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/-moz-box-pack +tags: + - CSS + - Non-standard +translation_of: Web/CSS/box-pack +--- +

{{ CSSRef() }}

+ +

{{warning("This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.")}}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli -moz-box-pack określa jak pudełko wpakowuje swoją zawartość w kierunku swojego układu. Efekt tego jest widoczny tylko wtedy, gdy w pudełku jest dodatkowa wolna przestrzeń.

+ +

Kierunek układu zależy od orientacji elementu: poziomej lub pionowej.

+ + + +

Składnia

+ +
-moz-box-pack: start | center | end | justify
+
+ +

Wartości

+ +
+
start
+
Pudełko wpakowuje zawartość od początku, zostawiając dodatkową wolną przestrzeń na końcu.
+
center
+
Pudełko wpakowuje zawartość w środku, dzieląc dodatkową wolną przestrzeń pomiędzy początek i koniec.
+
end
+
Pudełko wpakowuje zawartość na końcu, zostawiając dodatkową wolną przestrzeń na początku.
+
justify
+
 ?
+
+ +

Przykłady

+ +
hbox.example {
+	-moz-box-pack: end; /* przesuwa zawartość na prawo */
+}
+
+ +

Notatki

+ +

Krawędź pudełka, określona jakostart dla celów wpakowywania, zależy od orientacji i kierunku pudełka.

+ + + + + + + + + + + + + + + + + + + +
 NormalnaOdwrócona
Poziomolewaprawa
Pionowogóradół
+ +

Krawędź przeciwna do początkowej jest określana jakoend.

+ +

Jeśli wpakowywanie jest ustawione w atrybucie pack elementu, wtedy styl jest ignorowany.

+ +

Zobacz także

+ +

CSS:-moz-box-orient, CSS:-moz-box-direction, CSS:-moz-box-align

diff --git a/files/pl/web/css/-moz-image-region/index.html b/files/pl/web/css/-moz-image-region/index.html new file mode 100644 index 0000000000..8b8315df3c --- /dev/null +++ b/files/pl/web/css/-moz-image-region/index.html @@ -0,0 +1,41 @@ +--- +title: '-moz-image-region' +slug: Web/CSS/-moz-image-region +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-image-region +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Podsumowanie

+ +

Dla określonych elementów i pseudoelementów XUL, które używają obrazka z własności {{ Cssxref("list-style-image") }}, ta własność określa obszar obrazka, który jest używany w miejsce całego obrazka. Pozwala to elementowi używać różnych fragmentów tego samego obrazka w celu ulepszenia wykonania.

+ +

Składnia jest podobna do własności {{ Cssxref("clip") }}. Wszystkie cztery wartości są określane względem górnego lewego rogu obrazka.

+ + + +

Składnia

+ +
-moz-image-region: rect(top, right, bottom, left);
+
+ +

Przykłady

+ +
#example-button {
+  /* display only the 4x4 area from the top left of this image */
+  list-style-image: url("chrome://example/skin/example.png");
+  -moz-image-region: rect(0px, 4px, 4px, 0px);
+}
+#example-button:hover {
+  /* use the 4x4 area to the right of the first for the hovered button */
+  -moz-image-region: rect(0px, 8px, 4px, 4px);
+}
+
diff --git a/files/pl/web/css/-moz-outline-color/index.html b/files/pl/web/css/-moz-outline-color/index.html new file mode 100644 index 0000000000..bded69c35c --- /dev/null +++ b/files/pl/web/css/-moz-outline-color/index.html @@ -0,0 +1,12 @@ +--- +title: '-moz-outline-color' +slug: Web/CSS/-moz-outline-color +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/outline-color +--- +

d

diff --git a/files/pl/web/css/-moz-outline-radius-bottomleft/index.html b/files/pl/web/css/-moz-outline-radius-bottomleft/index.html new file mode 100644 index 0000000000..fd55bfdfef --- /dev/null +++ b/files/pl/web/css/-moz-outline-radius-bottomleft/index.html @@ -0,0 +1,17 @@ +--- +title: '-moz-outline-radius-bottomleft' +slug: Web/CSS/-moz-outline-radius-bottomleft +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-bottomleft +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Podsumowanie

+ +

W aplikacjach Mozilli -moz-outline-radius-bottomleft ustawia zaokrąglenie dolnego lewego rogu konturu.

+ +

Zobacz więcej informacji we własności -moz-outline-radius.

+ +
 
diff --git a/files/pl/web/css/-moz-outline-radius-bottomright/index.html b/files/pl/web/css/-moz-outline-radius-bottomright/index.html new file mode 100644 index 0000000000..2ac8105365 --- /dev/null +++ b/files/pl/web/css/-moz-outline-radius-bottomright/index.html @@ -0,0 +1,15 @@ +--- +title: '-moz-outline-radius-bottomright' +slug: Web/CSS/-moz-outline-radius-bottomright +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-bottomright +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

W aplikacjach Mozilli -moz-outline-radius-bottomright ustawia zaokrąglenie dolnego prawego rogu konturu.

+ +

Zobacz więcej informacji we własności -moz-outline-radius.

diff --git a/files/pl/web/css/-moz-outline-radius-topleft/index.html b/files/pl/web/css/-moz-outline-radius-topleft/index.html new file mode 100644 index 0000000000..695c0fa28f --- /dev/null +++ b/files/pl/web/css/-moz-outline-radius-topleft/index.html @@ -0,0 +1,15 @@ +--- +title: '-moz-outline-radius-topleft' +slug: Web/CSS/-moz-outline-radius-topleft +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-topleft +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Podsumowanie

+ +

W aplikacjach Mozilli -moz-outline-radius-topleft ustawia zaokrąglenie górnego lewego rogu konturu.

+ +

Zobacz więcej informacji we własności -moz-outline-radius.

diff --git a/files/pl/web/css/-moz-outline-radius/index.html b/files/pl/web/css/-moz-outline-radius/index.html new file mode 100644 index 0000000000..8fc9754922 --- /dev/null +++ b/files/pl/web/css/-moz-outline-radius/index.html @@ -0,0 +1,71 @@ +--- +title: '-moz-outline-radius' +slug: Web/CSS/-moz-outline-radius +tags: + - CSS + - Non-standard +translation_of: Web/CSS/-moz-outline-radius +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Podsumowanie

+ +

W aplikacjach Mozilli -moz-outline-radius może być używane do nadania konturowi zaokrąglonych rogów. Kontur jest linią rysowaną wokół elementu, na zewnątrz krawędzi obramowania w celu wyróżnienia elementu.

+ + + +

Składnia

+ +
-moz-outline-radius:<outline-radius>{1,4} | inherit ;
+
+ +

Wartości

+ +

<outline-radius> reprezentuje jedną w wartości:

+ +
+
<length> 
+
długość
+
<percentage> 
+
procenty, względem szerokości pudełka
+
+ +

Zatem używane są 4 wartości w porządku górny lewy, górny prawy, dolny prawy i dolny lewy. Jeśli podane są mniej niż 4 wartości, lista wartości jest powtarzana do uzupełnienia pozostałych wartości.

+ +

Powiązane własności

+ + + +

Przykłady

+ +
hbox.example {
+  -moz-outline: #000000 solid 10px;
+  width: 500px;
+  height: 500px;
+  /* kontur wygnie się w kształt litery 'D' */
+  -moz-outline-radius: 10px 200px 200px 10px;
+}
+
+ +

Znane błędy

+ +

Te błędy są takie same jak w border-radius.

+ + diff --git a/files/pl/web/css/@document/index.html b/files/pl/web/css/@document/index.html new file mode 100644 index 0000000000..75889861b3 --- /dev/null +++ b/files/pl/web/css/@document/index.html @@ -0,0 +1,46 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - CSS + - CSS At-rule +translation_of: Web/CSS/@document +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Reguła @-moz-document jest regułą @ ograniczającą reguły zawartych w sobie stylów bazując na adresie URL dokumentu. Jest stworzona głównie dla stylów użytkownika.

+ +

Składnia

+ +

Przykłady

+ +

Możesz tego użyć w swoim pliku userContent.css:

+ +
@document url(http://www.w3.org/),
+               url-prefix(http://www.w3.org/Style/),
+               domain(mozilla.org)
+{
+  /* Reguły CSS  dotyczą tutaj:
+     + Strony "http://www.w3.org/".
+     + Strony, której URL rozpoczyna się "http://www.w3.org/Style/"
+     + Każdej strony, dla której URL domeny zawiera "mozilla.org" lub kończy się
+       ".mozilla.org"
+   */
+
+  /* zrobienie powyższych stron potwornymi */
+  body { color: purple; background: yellow; }
+}
+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ +

Dostępne od Mozilli 1.8 / Firefox 1.5.

+ +
 
diff --git a/files/pl/web/css/@import/index.html b/files/pl/web/css/@import/index.html new file mode 100644 index 0000000000..3ed94ea5d7 --- /dev/null +++ b/files/pl/web/css/@import/index.html @@ -0,0 +1,34 @@ +--- +title: '@import' +slug: Web/CSS/@import +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/@import +--- +

{{ CSSRef() }}

+

Podsumowanie

+

@import pozwala użytkownikom importować reguły stylów z innych arkuszy stylów.

+

Składnia

+
@import "url";
+@import "url"media1,media2,...;
+@import url("url");
+@import url("url")media1;
+
+

Notatki

+

W związku z tym, że program użytkownika może pominąć wyszukiwanie zasobów dla niewspieranych typów mediów, autorzy mogą określić reguły @import zależne od mediów. Te warunkowe importowanie określa się przy użyciu oddzielonych przecinkami typów mediów po URI. W przypadku braku jakiegokolwiek typu mediów import jest bezwarunkowy. Określenie all dla medium przynosi ten sam efekt.

+

 

+

Przykłady

+
@import url("fineprint.css") print;
+@import url("bluish.css") projection, tv;
+
+

Specyfikacje

+ +

Zgodność z przeglądarką

+

Zobacz także

+

{{ Cssxref("@media") }}, {{ Cssxref("@font-face") }}

+

{{ languages( { "en": "en/CSS/@import", "fr": "fr/CSS/@import" } ) }}

diff --git a/files/pl/web/css/@media/index.html b/files/pl/web/css/@media/index.html new file mode 100644 index 0000000000..f1f74e6374 --- /dev/null +++ b/files/pl/web/css/@media/index.html @@ -0,0 +1,193 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/@media +--- +

{{ CSSRef() }} +

+

Podsumowanie

+

@media określa typ docelowych mediów (oddzielonych przecinkami) dla zestawu reguł (ograniczonych klamrami). +

+

Składnia

+
@media <typy mediów> {
+  /* reguły specyficzne dla medium */
+}
+
+

Typy mediów

+
all +
Pasujące dla wszystkich urządzeń. +
braille +
Przeznaczone dla dotykowych urządzeń brailla. +
embossed +
Przeznaczone dla drukarek brailla. +
handheld +
Przeznaczone dla urządzeń kieszonkowych (przeważnie z małym ekranem, ograniczoną przepustowością). +
print +
Przeznaczone dla materiałów stronnicowanych lub dokumentów pokazywanych na ekranie w trybie podglądu wydruku. Sprawdź rozdział o mediach stronnicowanych, aby dowiedzieć się o zagadnieniach formatowania, które są specyficzne dla mediów stronnicowanych. +
projection +
Przeznaczone dla rzutowanych prezentacji, np. projektorów. Sprawdź rozdział o mediach stronnicowanych, aby dowiedzieć się o zagadnieniach formatowania, które są specyficzne dla mediów stronnicowanych. +
screen +
Przeznaczone przede wszystkim dla kolorowych ekranów komputerowych. +
speech +
Przeznaczone dla syntezatorów mowy. Uwaga: CSS2 miał do tego celu podobny typ mediów nazywany 'aural' . Zobacz w dodatku szczegóły o arkuszach stylów 'aural'. +
tty +
Przeznaczone dla mediów używających dla znaków siatki o stałej podziałce (jak np. dalekopis, terminal lub urządzenia przenośne o ograniczonych możliwościach wyświetlania). Autorzy nie powinni używać dla medium "tty" jednostek w pikselach. +
tv +
Przeznaczone dla urządzeń telewizyjnych (niska rozdzielczość, kolor, ograniczone przewijanie ekranów, dźwięk dostępny). +
+


+

+

Grupy mediów

+

Typy mediów są również częścią różnych grup mediów. Poniższa tabel pokazuje, które typy są w których grupach. +

+ + + + + + + + + + + + +
+Grupy +
Typ +continuous +paged +visual +audio +speech +tactile +grid +bitmap +interactive +static +
braille +X + + + + +X +X + +X +X +
embossed + +X + + + +X +X + + +X +
handheld +X +X +X +X +X + +X +X +X +X +
print + +X +X + + + + +X + +X +
projection + +X +X + + + + +X +X + +
screen +X + +X +X + + + +X +X +X +
speech +X + + + +X + + + +X +X +
tty +X + +X + + + +X + +X +X +
tv +X +X +X +X + + + +X +X +X +
+

Przykłady

+
  @media print {
+    body { font-size: 10pt }
+  }
+  @media screen {
+    body { font-size: 13px }
+  }
+  @media screen, print {
+    body { line-height: 1.2 }
+  }
+
+

Uwagi

+

Wielomodalny typ medium jest wciąż jednym typem medium. Np. typ medium 'tv' jest wielomodalnym typem, który prezentuje jednocześnie wizualnie i słuchowo dla jednego obrazu. +

+

Specyfikacje

+ +

Zgodność z przeglądarką

+

Zobacz także

+

{{ Cssxref("@import") }}, {{ Cssxref("@font-face") }} +

{{ languages( { "en": "en/CSS/@media", "fr": "fr/CSS/@media" } ) }} diff --git a/files/pl/web/css/@supports/index.html b/files/pl/web/css/@supports/index.html new file mode 100644 index 0000000000..1c726ccdc8 --- /dev/null +++ b/files/pl/web/css/@supports/index.html @@ -0,0 +1,123 @@ +--- +title: '@supports' +slug: Web/CSS/@supports +translation_of: Web/CSS/@supports +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

@supports CSS at-rule zawiera grupę reguł w bloku CSS zamkniętych w klamrowych nawiasach. Składa się z deklaracji CSS (klucz-para). Do wykorzstania mamy także warunkowość zdań: koniunkcję, alternatywę oraz negację. Powyższa reguła daje nam możliwość wykrycia dostępności danej reguły.

+ +

Istnieje możliwość użycia tej reguły na zewnątrz CSS conditional-group at-rule, uzyskując tym samym dostęp do kontrolowania jej przy użyciu obiektowego modelu interfejsu CSS {{domxref("CSSSupportsRule")}}.
+  

+ +

Składnia

+ +
@supports <wyrażenie> {
+  /* reguły, które zostaną zaaplikowane w przypadku gdy wyrażenie jest prawdziwe */
+}
+
+ +

Przykłady

+ +

Sprawdzanie wsparcia danej właściowści CSS

+ +
@supports (animation-name: test) {
+    … /* reguły aplikowane gdy właściwość "animation-name" jest dostepna bez tzw. vendor prefixes, np. "-webkit-animation" */
+    @keyframes { /* przykład użycia @supports na zewnątrz innej reguły @ */
+      …
+    }
+}
+
+ +

Sprawdzanie wsparcia danej właściowści CSS wraz z przedrostkami

+ +
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
+    … /* reguły aplikowane są dostępne, niezależnie czy przeglądarka obsługuje wersja z przedrostkami czy bez */
+}
+
+ +

Sprawdzanie czy przeglądarka nie obsługuje danej właściwości

+ +
@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
+   /* aplikowane reguły, jeśli powyższe wyrażenie jest prawdziwe */
+}
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }}{{ Spec2('CSS3 Conditional') }}Initial definition.
+ +

Zgodność z przeglądarką

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CechaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Podstawowe wsparcie28.0{{ CompatGeckoDesktop("22") }} [1]{{ CompatNo() }}12.1{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CechaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Podstawowe wsparcie{{ CompatNo() }}{{ CompatGeckoMobile("22") }} [1]{{ CompatNo() }}12.1{{ CompatNo() }}
+
+ +

[1] Gecko 17 do Gecko 21 wspierał tą cechę tylko gdy użytkownik włączył ją ustawiając wartość  layout.css.supports-rule.enabled na true.

+ +

Zobacz też

+ + diff --git a/files/pl/web/css/_colon_-moz-last-node/index.html b/files/pl/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..8650cda09d --- /dev/null +++ b/files/pl/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,63 @@ +--- +title: ':last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - Non-standard +translation_of: 'Web/CSS/:-moz-last-node' +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Podsumowanie

+ +

Pseudoklasa :last-node sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on ostatnim węzłem potomnym swojego rodzica. :last-node uwzględnia również węzły tekstowe składające się niebiałych znaków. Pseudoklasą, która działa identycznie, jednak nie uwzględnia węzłów tekstowych jest {{ Cssxref(":last-child") }}.

+ +

Składnia

+ +
selektor:-moz-last-node { własności }
+
+ +

Przykłady

+ +
<html>
+  <body>
+  Trochę tekstu.
+    <span id="first">pierwszy</span>
+    <div>
+      <span id="dfirst">pierwszy</span>
+      <span id="dsecond">drugi</span>
+    </div>
+    <span id="second">drugi</span>
+  </body>
+</html>
+
+ +
span:-moz-last-node { font-weight: bold; }
+
+ +

Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów span, które są ostatnimi dziećmi swoich rodziców. Zostaną tutaj pogrubione obydwa słowa "drugi".

+ +
    +
  1. span o id dsecond jest ostatnim dzieckiem elementu div
    2. +
  2. span o id second jest ostatnim dzieckiem elementu body
    3. +
+ +

 

+ +
div:-moz-first-node:last-child { background-color: red; }
+
+ +

Ten przykład ustawi czerwony kolor tła wszystkim elementom div, które są jedynymi dziećmi swojego rodzica. Jednak za elementem może znajdować się węzeł tekstowy.

+ +
div:-moz-first-child:last-node { background-color: red; }
+
+ +

Ten przykład natomiast ustawi czerwony kolor tła wszystkim elementom div, które są jedynymi dziećmi swojego rodzica. Przed elementem może znajdować się węzeł tekstowy.

+ +

Notatki

+ +

Pseudoklasa :-moz-last-node nie jest obecnie obsługiwana. Skorzystaj z {{ Cssxref(":-moz-last-node") }}

+ +

Zobacz także

+ +

{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":first-node") }}

diff --git a/files/pl/web/css/_colon_-moz-tree-cell-text/index.html b/files/pl/web/css/_colon_-moz-tree-cell-text/index.html new file mode 100644 index 0000000000..ea450f5cb5 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-cell-text/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-tree-cell-text' +slug: 'Web/CSS/:-moz-tree-cell-text' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text' +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Aktywowany przez atrybut properties.

+ +

Powiązane elementy

+ + + +

Własności stylów

+ + diff --git a/files/pl/web/css/_colon_-moz-tree-cell/index.html b/files/pl/web/css/_colon_-moz-tree-cell/index.html new file mode 100644 index 0000000000..d6fb331d38 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-cell/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-cell' +slug: 'Web/CSS/:-moz-tree-cell' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell' +--- +

{{ CSSRef() }}{{Non-standard_header}}

+ +

Aktywowany przez atrybut properties.

+ +

Powiązane elementy

+ + + +

Własności stylów

+ + diff --git a/files/pl/web/css/_colon_-moz-tree-column/index.html b/files/pl/web/css/_colon_-moz-tree-column/index.html new file mode 100644 index 0000000000..9e17185510 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-column/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-tree-column' +slug: 'Web/CSS/:-moz-tree-column' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-column' +--- +

{{ CSSRef() }}{{Non-standard_header}}

+ +

Aktywowany przez atrybut properties.

+ +

Powiązane elementy

+ + + +

Własności stylów

+ + diff --git a/files/pl/web/css/_colon_-moz-tree-drop-feedback/index.html b/files/pl/web/css/_colon_-moz-tree-drop-feedback/index.html new file mode 100644 index 0000000000..651ab25f65 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-drop-feedback/index.html @@ -0,0 +1,26 @@ +--- +title: ':-moz-tree-drop-feedback' +slug: 'Web/CSS/:-moz-tree-drop-feedback' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-drop-feedback' +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Podsumowanie

+ +

Aktywowany przez atrybut properties.

+ +

Powiązane elementy

+ + + +

Własności stylów

+ + diff --git a/files/pl/web/css/_colon_-moz-tree-image/index.html b/files/pl/web/css/_colon_-moz-tree-image/index.html new file mode 100644 index 0000000000..ae4bd01d26 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-image/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-image' +slug: 'Web/CSS/:-moz-tree-image' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-tree-image' +--- +

{{ CSSRef() }}{{Non-standard_header}}

+ +

Podsumowanie

+ +

Aktywowany przez atrybut properties.

+ +

Powiązane elementy

+ + + +

Własności stylów

+ + diff --git a/files/pl/web/css/_colon_-moz-tree-indentation/index.html b/files/pl/web/css/_colon_-moz-tree-indentation/index.html new file mode 100644 index 0000000000..646d986d82 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-indentation/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-tree-indentation' +slug: 'Web/CSS/:-moz-tree-indentation' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-indentation' +--- +

{{ CSSRef() }}{{Non-standard_header}}

+ +

Aktywowany przez atrybut properties.

+ +

Powiązane elementy

+ + + +

Własności stylów

+ + diff --git a/files/pl/web/css/_colon_-moz-tree-line/index.html b/files/pl/web/css/_colon_-moz-tree-line/index.html new file mode 100644 index 0000000000..dbe7014b2f --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-line/index.html @@ -0,0 +1,24 @@ +--- +title: ':-moz-tree-line' +slug: 'Web/CSS/:-moz-tree-line' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-line' +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Aktywowany przez atrybut properties.

+ +

Powiązane elementy

+ + + +

Własności stylów

+ + diff --git a/files/pl/web/css/_colon_-moz-tree-progressmeter/index.html b/files/pl/web/css/_colon_-moz-tree-progressmeter/index.html new file mode 100644 index 0000000000..65442cf74e --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-progressmeter/index.html @@ -0,0 +1,24 @@ +--- +title: ':-moz-tree-progressmeter' +slug: 'Web/CSS/:-moz-tree-progressmeter' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-progressmeter' +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Aktywowany przez atrybut properties.

+ +

Powiązane elementy

+ + + +

Własności stylów

+ + diff --git a/files/pl/web/css/_colon_-moz-tree-row/index.html b/files/pl/web/css/_colon_-moz-tree-row/index.html new file mode 100644 index 0000000000..763aefc4bb --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-row/index.html @@ -0,0 +1,47 @@ +--- +title: ':-moz-tree-row' +slug: 'Web/CSS/:-moz-tree-row' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row' +--- +

{{ CSSRef() }}{{Non-standard_header}}

+ +

-moz-tree-row jest używane do wybrania wierszy i zastosowania stylu do drzewa wierszy.

+ +

Powiązane elementy

+ + + +

Składnia

+ +
treechildren::-moz-tree-row {style properties }
+
+ +

Własności stylów

+ + + +

Przykłady

+ +
treechildren::-moz-tree-row( foo bar )
+{
+    margin: 2%;
+}
+
+ +

...gdzie...

+ +
  <treerow properties="foo">...</treerow>
+
diff --git a/files/pl/web/css/_colon_-moz-tree-separator/index.html b/files/pl/web/css/_colon_-moz-tree-separator/index.html new file mode 100644 index 0000000000..b855c38553 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-separator/index.html @@ -0,0 +1,27 @@ +--- +title: ':-moz-tree-separator' +slug: 'Web/CSS/:-moz-tree-separator' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-separator' +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Podsumowanie

+ +

Aktywowany przez atrybut properties.

+ +

Powiązane elementy

+ + + +

Własności stylów

+ + diff --git a/files/pl/web/css/_colon_-moz-tree-twisty/index.html b/files/pl/web/css/_colon_-moz-tree-twisty/index.html new file mode 100644 index 0000000000..0da422f8a2 --- /dev/null +++ b/files/pl/web/css/_colon_-moz-tree-twisty/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-twisty' +slug: 'Web/CSS/:-moz-tree-twisty' +tags: + - CSS + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-twisty' +--- +

{{ CSSRef() }}{{Non-standard_header}}

+ +

Aktywowany przez atrybut properties.

+ +

Powiązane elementy

+ + + +

Własności stylów

+ + diff --git a/files/pl/web/css/_colon_active/index.html b/files/pl/web/css/_colon_active/index.html new file mode 100644 index 0000000000..7779ce45f6 --- /dev/null +++ b/files/pl/web/css/_colon_active/index.html @@ -0,0 +1,160 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - pseudo klasa +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

Pseudo klasa:active

+ +

Właściwość :active CSS pseudo-class jest używany w momencie aktywowania danego elementu przez użytkownika. Podczas interakcji z myszą zazwyczaj jest to czas pomiędzy naciśnięciem przycisku myszy a zwolnieniem go. Pseudo klasa :active jest często używna z elementami HTML jak {{HTMLElement("a")}} lub {{HTMLElement("button")}} ale nie tylko.

+ +

Pseudo klasa :active może zostać zastąpiona przez inne pseudo-klasy powiązane z linkami, takie jak {{cssxref (": link")}}, {{cssxref (": hover")}} i {cssxref (": visited" )}}, które mogą się pojawić w kolejnych regułach. W celu dopasowania odpowiednich linków, należy umieścić: active we wszystkich innych regułach linków, zgodnie z definicją zlecenia LVHA:: link -: visited -: hover -: active.

+ +
Notatka: W systemach z wieloma przyciskami, CSS 3 określa pseudo klasę :active dla przycisku podstawowego.
+ +

Składnia

+ +
{{csssyntax}}
+ +

Przykład

+ +
+

HTML

+ +
<body>
+    <h1>:active przykład selektora CSS</h1>
+    <p>Ten link zmieni się w czasie kliknięcia i zwolnienia<a href="#">Mozilla Developer Network</a>.</p>
+</body>
+ +

CSS

+ +
body { background-color: #ffffc9 }
+a:link { color: blue } /* unvisited links */
+a:visited { color: purple } /* visited links */
+a:hover { font-weight: bold } /* user hovers */
+a:active { color: lime } /* active links */
+
+ +
{{EmbedLiveSample('example',600,140)}}
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}No change.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Initial definition.
+ +

Wsparcie przeglądarek

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}4.05.01.0
Support on non-<a> elements1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}8.07.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}6.06.01.0
Support on non-<a> elements1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} [1]
+
+ +

[1] By default, Safari Mobile does not use the {{cssxref(":active")}} state unless there is a touchstart event handler on the relevant element or on the {{HTMLElement("body")}}.

+ +

Zobacz też

+ + diff --git a/files/pl/web/css/_colon_after/index.html b/files/pl/web/css/_colon_after/index.html new file mode 100644 index 0000000000..71261c88bb --- /dev/null +++ b/files/pl/web/css/_colon_after/index.html @@ -0,0 +1,63 @@ +--- +title: ':after' +slug: 'Web/CSS/:after' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/::after' +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Tworzy pseudoelement, który staje się ostatnim dzieckiem danego elementu. Zazwyczaj używany jest do wprowadzania kosmetycznych zmian danego elementu. Domyślnie element wstawiany jest inline.

+ +

Składnia

+ +
/* składnia CSS2 */ selektor:after { własności }
+/* składnia CSS3 */ selektor::after { własności }
+ +

Zapis ::aft​er został wprowadzony w CSS 3 w celu ustanowienia różnicy pomiędzy pseudo klasami, a pseudo elementami. Przeglądarki akceptują również notację :after wprowadzoną w CSS 2.

+ +

Przykłady

+ +

Prosty przykład

+ +
<html>
+  <body>
+    <p>akapit</p>
+  </body>
+</html>
+
+ +
p:after {
+  content: 'Koniec';
+  display: block;
+  margin-top: 3em;
+}
+
+ +
+
body:after { content: 'Koniec dokumentu'; }
+
+ +

Notatki

+ +

Elementy wstawiane do dokumentu poprzez :after nie są widziane w drzewie dokumentu.

+ +

Specyfikacje

+ + + +

Zobacz także

+ +

{{ Cssxref(":before") }}, {{ Cssxref("content") }}

+ +

 

+ +

{{ languages( { "en": "en/CSS/:after", "es": "es/CSS/after", "fr": "fr/CSS/:after" } ) }}

diff --git a/files/pl/web/css/_colon_before/index.html b/files/pl/web/css/_colon_before/index.html new file mode 100644 index 0000000000..5c1a1f3772 --- /dev/null +++ b/files/pl/web/css/_colon_before/index.html @@ -0,0 +1,60 @@ +--- +title: ':before' +slug: 'Web/CSS/:before' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/::before' +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Tworzy pseudoelement, który staje się pierwszym dzieckiem danego elementu. Zazwyczaj używany jest do wprowadzania kosmetycznych zmian danego elementu. Domyślnie element wstawiany jest inline.

+ +

Składnia

+ +
element:before { własności }
+
+ +

Najczęściej używana jest własność {{ Cssxref("content") }}, która pozwala na wstawienie treści do pseudoelementu.

+ +

Przykłady

+ +

Zobacz przykład

+ +
<html>
+  <body>
+    <p>akapit</p>
+  </body>
+</html>
+
+ +
p:before {
+  content: 'Tekst przed akapitem';
+  display: block;
+}
+
+ +

 

+ +

Notatki

+ +

Elementy wstawiane do dokumentu poprzez :before nie są widziane w drzewie dokumentu.

+ +

Specyfikacje

+ + + +

Zobacz także

+ +

{{ Cssxref(":after") }}, {{ Cssxref("content") }}

+ +

 

+ +

{{ languages( { "en": "en/CSS/:before", "es": "es/CSS/before", "fr": "fr/CSS/:before" } ) }}

diff --git a/files/pl/web/css/_colon_empty/index.html b/files/pl/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..5d0479f9a6 --- /dev/null +++ b/files/pl/web/css/_colon_empty/index.html @@ -0,0 +1,44 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:empty' +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Pseudoklasa :empty odnosi się do elementów, które nie posiadają żadnych węzłów potomnych (wliczając w to węzły tekstowe).

+ +

Składnia

+ +
selektor:empty { własności }
+
+ +

Przykłady

+ +
span:empty::before { content: "pusty span"; font-style:italic; }
+
+ +

Powyższy przykład doda przed każdym pusty elementem span tekst "pusty span "

+ +
*:not(:empty) {własności }
+
+ +

Przykład nada własności wszystkim niepustym elementom.

+ +

Notatki

+ +

Jeśli wewnątrz elementu znajduje się jakikolwiek znak, wliczając w to białe znaki, element nie będzie traktowany jako empty

+ +

Zobacz także

+ +

{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref("content") }}, {{ Cssxref(":not") }}

+ +
 
+ +

{{ languages( { "en": "en/CSS/:empty", "es": "es/CSS/vac\u00edo", "fr": "fr/CSS/:empty" } ) }}

diff --git a/files/pl/web/css/_colon_first-child/index.html b/files/pl/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..25e81d027e --- /dev/null +++ b/files/pl/web/css/_colon_first-child/index.html @@ -0,0 +1,74 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:first-child' +--- +

{{ CSSRef() }} +

+

Podsumowanie

+

Pseudoklasa :first-child sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on pierwszym węzłem potomnym swojego rodzica. :first-child ignoruje węzły tekstowe. Pseudoklasą, która działa identycznie, jednak uwzględnia węzły tekstowe jest {{ Cssxref(":first-node") }}. +

+

Składnia

+
selektor:first-child { własności }
+
+

Przykłady

+
<html>
+  <body>
+  Trochę tekstu.
+    <span id="first">pierwszy</span>
+    <div>
+      <span id="dfirst">pierwszy</span>
+      <span id="dsecond">drugi</span>
+    </div>
+    <span id="second">drugi</span>
+  </body>
+</html>
+
+
span:first-child { font-weight: bold; }
+
+

Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów span, które są pierwszymi dziećmi swoich rodziców. Zostaną tutaj pogrubione słowa "pierwszy":

+
  1. W pierwszym przypadku span o id first jest pierwszym dzieckiem elementu body +
  2. W drugim przypadku span o id dfirst jest pierwszym dzieckiem elementu div +
+


+

+
div:first-child:last-child { background-color: red; }
+
+

Ten przykład ustawi czerwony kolor tła wszystkim elementom div, które są jedynymi dziećmi swojego rodzica. +

+
<table>
+  <tr>
+    <td>Nagłówek k1</td>
+    <td>Nagłówek k2</td>
+  </tr>
+  <tr>
+    <td>Wiersz k1</td>
+    <td>Wiersz k2</td>
+  </tr>
+  <tr>
+    <td>Wiersz k1</td>
+    <td>Wiersz k2</td>
+  </tr>
+  <tr>
+    <td>Wiersz k1</td>
+    <td>Wiersz k2</td>
+  </tr>
+</table>
+
+
table tr:first-child { background-color: red; }
+
+

Ten przykład ustawi czerwone tło pierwszemu wierszowi tabeli (nagłówkowi). +UWAGA: Ten przykład ma za zadanie pokazać jak działa pseudoklasa :first-child. +

+

Notatki

+

Zobacz także

+

{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":last-child") }} +

+
+
+{{ languages( { "en": "en/CSS/:first-child", "fr": "fr/CSS/:first-child" } ) }} diff --git a/files/pl/web/css/_colon_first-letter/index.html b/files/pl/web/css/_colon_first-letter/index.html new file mode 100644 index 0000000000..5de2e64cbd --- /dev/null +++ b/files/pl/web/css/_colon_first-letter/index.html @@ -0,0 +1,49 @@ +--- +title: ':first-letter' +slug: 'Web/CSS/:first-letter' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/::first-letter' +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Pseudoelement odnoszący się do pierwszej litery w bloku.

+ +

Składnia

+ +
element::first-letter { własności }
+
+ +

Przykłady

+ +
p::first-letter { text-transform: uppercase; }
+
+ +

Przykład zamieni w każdym paragrafie pierwszą literę na wielką.

+ +
p::first-letter { color: red; }
+
+ +

Przykład zmieni kolor pierwszej litery na czerwony w każdym elemencie p

+ + + +

Notatki

+ +

Pseudoelementy nie mogą być negowane poprzez {{ Cssxref(":not") }}.

+ +

Specyfikacje

+ + + +

Zobacz także

+ +

{{ Cssxref("text-transform") }}

diff --git a/files/pl/web/css/_colon_first-node/index.html b/files/pl/web/css/_colon_first-node/index.html new file mode 100644 index 0000000000..123c08088b --- /dev/null +++ b/files/pl/web/css/_colon_first-node/index.html @@ -0,0 +1,58 @@ +--- +title: ':first-node' +slug: 'Web/CSS/:first-node' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:-moz-first-node' +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Podsumowanie

+ +

Pseudoklasa :first-node sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on pierwszym węzłem potomnym swojego rodzica. :first-node uwzględnia również węzły tekstowe składające się niebiałych znaków. Pseudoklasą, która działa identycznie, jednak nie uwzględnia węzłów tekstowych jest {{ Cssxref(":first-child") }}.

+ +

Składnia

+ +
selektor:first-node { własności }
+
+ +

Przykłady

+ +
<html>
+  <body>
+  Trochę tekstu.
+    <span id="first">pierwszy</span>
+    <div>
+      <span id="dfirst">pierwszy</span>
+      <span id="dsecond">drugi</span>
+    </div>
+    <span id="second">drugi</span>
+  </body>
+</html>
+
+ +
span:first-node { font-weight: bold; }
+
+ +

Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów span, które są pierwszymi dziećmi swoich rodziców. Zostanie tutaj pogrubione tylko jedno słowo "pierwszy", ponieważ span o id first nie jest pierwszym dzieckiem elementu body. Pierwszym dzieckiem elementu body jest węzeł tekstowy.

+ +
div:first-node:last-child { background-color: red; }
+
+ +

Ten przykład ustawi czerwony kolor tła wszystkim elementom div, które są jedynymi dziećmi swojego rodzica. Jednak za elementem może znajdować się węzeł tekstowy.

+ +
div:first-child:last-node { background-color: red; }
+
+ +

Ten przykład natomiast ustawi czerwony kolor tła wszystkim elementom div, które są jedynymi dziećmi swojego rodzica. Przed elementem może znajdować się węzeł tekstowy.

+ +

Notatki

+ +

Pseudoklasa :first-node nie jest obecnie obsługiwana. Skorzystaj z {{ Cssxref(":-moz-first-node") }}

+ +

Zobacz także

+ +

{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":last-node") }}

diff --git a/files/pl/web/css/_colon_hover/index.html b/files/pl/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..91006dd99a --- /dev/null +++ b/files/pl/web/css/_colon_hover/index.html @@ -0,0 +1,101 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +translation_of: 'Web/CSS/:hover' +--- +
+

{{CSSRef}}

+ +

Pseudo klasa:hover

+
+ +

Właściwość :hover CSS pseudo-class jest używana gdy użytkownik wchodzi w interakcję z elementem za pomocą urządzenia wskazującego, ale niekoniecznie go aktywuje. Generalnie wyzwalanie następuje gdy użytkownik wskaże element kursorem, np. wskaźnikiem myszy.

+ +
/* Wybierz każdy element <a>, który zostanie najechany kursorem */
+a:hover {
+  color: orange;
+}
+ +

Style zdefiniowane przez pseudo-klasę :active będą nadpisywane przez każdą kolejną powiązaną pseudo-klasę ({{ cssxref(":link") }}, {{ cssxref(":visited") }}, lub {{ cssxref(":active") }}) która ma conajmniej taką samą specyfikację. Aby dopasować odpowiednio linki umieść :hover za :link i :visited ale przed :active zgodnie z zasadą LVHA : :link — :visited — :hover — :active.

+ +
Notatka: Pseudo-klasa :hover wykazuje problem na ekranach dotykowych. W zależności od przeglądarki :hover może nigdy nie być  zgodna, może zmienić styl na czas wskazania elementu lub zmienić go do czasu oznaczenia innego elementu. Web developerzy powinni zadbać o to aby elementy działy również na urządzeniach z ograniczeniami obługi funkcji. 
+ +

Składnia

+ +
{{csssyntax}}
+ +

Przykład

+ +

HTML

+ +
<a href="#">Wskaż ten link.</a>
+ +

CSS

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

Rezultat

+ +

{{EmbedLiveSample("Przykład")}}

+ +

Galeria obrazów

+ +

Możesz użyć pseudo-klasy :hover do utworzenia galerii obrazów, gdzie pełnowymiarowe obrazy będą wyświetlae wtedy, gdy kursor przesunie się nad miniaturą. Zobacz demo takiego rozwiązania.

+ +
Notatka: Dla analogicznego efektu, ale opartego o pseudo-klasę :checked (zastostosowane dla ukrytych radio-box'ów), zobacz demo, zaczerpnięte z strony dotyczącej :checked.
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}{{ Spec2('CSS4 Selectors') }}Allows :hover to be applied to any pseudo-element.
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}{{ Spec2('CSS3 Selectors') }}No significant change.
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

Kompatybilne przeglądarki

+ +
+ + +

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

+
+ +

Zobacz także

+ + diff --git a/files/pl/web/css/_colon_lang/index.html b/files/pl/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..c8bf3f144f --- /dev/null +++ b/files/pl/web/css/_colon_lang/index.html @@ -0,0 +1,31 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:lang' +--- +

{{ CSSRef() }}

+

Podsumowanie

+

Pseudoklasa :lang pozwala na dopasowanie własności dla elementów w określonym języku. W HTML4 odnosi się do atrybutu lang. W XML-u do xml:lang.

+

Składnia

+
selektor:lang(symbol) { własności }
+
+

Gdzie symbol to symbol języka zgodny z

+

Przykłady

+
p:lang(pl) {własności }
+
+

Zostaną zastosowane własności dla wszystkich elementów P, których atrybut lang ustawiony jest na pl.

+

Notatki

+

Jeśli dany element nie ma przepisanego atrybutu lang pod uwagę brany jest język ustawiony dla całego dokumentu.

+

 

+

Specyfikacje

+ +

Zobacz także

+

{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":empty") }}

diff --git a/files/pl/web/css/_colon_last-child/index.html b/files/pl/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..c051571b1f --- /dev/null +++ b/files/pl/web/css/_colon_last-child/index.html @@ -0,0 +1,51 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:last-child' +--- +

{{ CSSRef() }} +

+

Podsumowanie

+

Pseudoklasa :last-child sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on ostatnim węzłem potomnym swojego rodzica. :last-child ignoruje węzły tekstowe. Pseudoklasą, która działa identycznie, jednak uwzględnia węzły tekstowe jest {{ Cssxref(":last-node") }}. +

+

Składnia

+
selektor:last-child { własności }
+
+

Przykłady

+
<html>
+  <body>
+  Trochę tekstu.
+    <span id="first">pierwszy</span>
+    <div>
+      <span id="dfirst">pierwszy</span>
+      <span id="dsecond">drugi</span>
+    </div>
+    <span id="second">drugi</span>
+  </body>
+</html>
+
+
span:last-child { font-weight: bold; }
+
+

Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów span, które są ostatnimi dziećmi swoich rodziców. Zostaną tutaj pogrubione słowa "drugi":

+
  1. W pierwszym przypadku span o id dsecond jest ostatnim dzieckiem elementu div +
  2. W drugim przypadku span o id second jest ostatnim dzieckiem elementu body +
+


+

+
div:first-child:last-child { background-color: red; }
+
+

Ten przykład ustawi czerwony kolor tła wszystkim elementom div, które są jedynymi dziećmi swojego rodzica. +


+

+

Notatki

+

Zobacz także

+

{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref(":first-child") }} +

+
+
+{{ languages( { "en": "en/CSS/:last-child", "fr": "fr/CSS/:first-child" } ) }} diff --git a/files/pl/web/css/_colon_link/index.html b/files/pl/web/css/_colon_link/index.html new file mode 100644 index 0000000000..6fb07d5479 --- /dev/null +++ b/files/pl/web/css/_colon_link/index.html @@ -0,0 +1,70 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - CSS Psuedo-class + - Web +translation_of: 'Web/CSS/:link' +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Pseudo-klasa :link pozwala wybrać linki wewnątrz elementów. Dzięki niej możesz wybrać każdy link, który nie został jeszcze odwiedzony, nawet taki, który ma już nadane wartości za pomocą innych pseudo-klas, takich jak: {{ cssxref(":hover") }}, {{ cssxref(":active") }} lub {{ cssxref(":visited") }}. W celu odpowiedniej stylizacji linków musisz wstawić pseudo-klasę :link na początku, według kolejności LVHA: :link — :visited — :hover — :active. Pseudo-klasa {{ cssxref(":focus") }} jest zazwyczaj ustawiana przed lub po pseudo-klasie :hover (w zależności od oczekiwanego efektu).

+ +

Składnia

+ +
{{csssyntax}}
+ +

Przykłady

+ +
a:link {color: slategray;}
+.external:link {background-color: lightblue;}
+ +

Specyfikacje

+ + + +

Kompatybilność z przeglądarkami

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Przeglądarka Najniższa wersja
Chrome4.0
Edge7.0
Firefox2.0
Safari3.1
Opera9.6
+ +

Zobacz też

+ + diff --git a/files/pl/web/css/_colon_not/index.html b/files/pl/web/css/_colon_not/index.html new file mode 100644 index 0000000000..a9c87058d8 --- /dev/null +++ b/files/pl/web/css/_colon_not/index.html @@ -0,0 +1,73 @@ +--- +title: ':not' +slug: 'Web/CSS/:not' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:not' +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Pseudoklasa :not sprawia, iż własności są stosowane do elementów, które nie spełniają podanego kryterium.

+ +

Składnia

+ +
selektor:not(selektor) { własności }
+
+ +

Przykłady

+ +
*:not(DIV) { color: red; }
+
+ +

Przykład nada czerwony kolor czcionki wszystkim elementom za wyjątkiem elementów DIV.

+ +
input:not([DISABLED]) { border-color: green; }
+
+ +

Przykład nada wszystkim elementom INPUT, które są aktywne (nie są DISABLED), zmieni kolor obramowania na zielone.

+ +
input:not([TYPE=PASSWORD]) {własności }
+
+ +

Przykład przydzieli własności wszystkim elementom INPUT, które mają atrybut TYPE inny niż PASSWORD.

+ +
*:not(P) {własności }
+
+ +

Przykład przydzieli własności wszystkim elementom innym, niż P.

+ +
a:not(:hover) {własności }
+
+ +

Przykład nada własności wszystkim elementom A, na których nie stoi kursor. Jest to równoważne z:

+ +
a:link:visited {własności }
+
+ + + +
body > input:not([disabled]):not([type=text]) {własności }
+
+ +

Przykład przypisze własności wszystkim elementom INPUT, które są dziećmi BODY oraz, które nie mają atrybutu DISABLED i jednocześnie nie są typu TEXT.

+ +

Notatki

+ +

Pseudoklasa :not nie może być negowana przez inne :not.

+ + + +

Specyfikacje

+ + + +

Zobacz także

+ +

{{ Cssxref(":before") }}, {{ Cssxref(":after") }}, {{ Cssxref("content") }}, {{ Cssxref(":empty") }}

diff --git a/files/pl/web/css/_colon_root/index.html b/files/pl/web/css/_colon_root/index.html new file mode 100644 index 0000000000..850a9e8277 --- /dev/null +++ b/files/pl/web/css/_colon_root/index.html @@ -0,0 +1,26 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: 'Web/CSS/:root' +--- +

{{ CSSRef() }}

+

Podsumowanie

+

Pseudoklasa :root odnosi się do głównego węzła dokumentu.

+

Składnia

+
selektor:root {własności }
+
+

Przykłady

+
*:root { margin: 0; }
+
+

Przykład głównemu węzłowi dokumentu ustawi margines na zero.

+

Notatki

+

W HTML4 głównym węzłem dokumentu jest zawsze element HTML.

+

Specyfikacje

+

CSS 3

+

Zobacz także

+

{{ Cssxref(":empty") }}, {{ Cssxref(":not") }}

diff --git a/files/pl/web/css/appearance/index.html b/files/pl/web/css/appearance/index.html new file mode 100644 index 0000000000..fb3d059ffe --- /dev/null +++ b/files/pl/web/css/appearance/index.html @@ -0,0 +1,96 @@ +--- +title: '-moz-appearance' +slug: Web/CSS/appearance +tags: + - CSS + - Non-standard +translation_of: Web/CSS/appearance +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Podsumowanie

+ +

-moz-appearance jest używane przez przeglądarki bazujące na Mozilli do wyświetlania elementu przy użyciu natywnego dla platformy wyglądu, opartego na temacie systemu operacyjnego.

+ + + +

Składnia

+ +
-moz-appearance:appearance value
+
+ +

Wartości

+ +
+
none
+
Żaden specjalny wygląd nie jest stosowany. (Domyślnie)
+
button
+
Element jest rysowany jak przycisk (button).
+
button-small
+
Element jest rysowany jak mały przycisk (small button).
+
checkbox
+
Element jest rysowany jak pole wyboru (checbox), uwzględniając tylko stan bieżący (actual) pola wyboru.
+
checkbox-container
+
Element jest rysowany jak kontener dla pola wyboru, który może zawierać efekt podświetlanego tła pod określoną platformą. Zazwyczaj powinien zawierać etykietę (label) oraz pole wyboru.
+
checkbox-small
+
dialog
+
Element jest stylizowany jak pole dialogowe (dialog box), które zawiera kolor tła i inne własności.
+
listbox
+
menuitem
+
Element jest stylizowany jak pozycja menu (menu item), pozycja jest podświetlana po najechaniu.
+
menulist
+
menulist-button
+
Element jest stylizowany jak przycisk (button), który może wskazywać, że listę menu (menulist) można otworzyć.
+
menulist-textfield
+
Element jest stylizowany jak pole tekstowe (text field) dla listy menu (menulist).
+
menupopup
+
progressbar
+
Element jest stylizowany jak pasek postępu (progress bar).
+
radio
+
Element jest stylizowany jak przycisk typu radio (radio button), uwzględniając tylko stan bieżący (actual) przycisku radio.
+
radio-container
+
Element jest rysowany jak kontener przycisku radio, który może zawierać efekt podświetlanego tła pod określoną platformą. Zazwyczaj powinien zawierać etykietę (label) oraz przycisk radio.
+
radio-small
+
resizer
+
scrollbar
+
scrollbarbutton-down
+
scrollbarbutton-left
+
scrollbarbutton-right
+
scrollbarbutton-up
+
scrollbartrack-horizontal
+
scrollbartrack-vertical
+
separator
+
statusbar
+
tab
+
tab-left-edge
+
tabpanels
+
textfield
+
toolbar
+
toolbarbutton
+
toolbox
+
tooltip
+
treeheadercell
+
treeheadersortarrow
+
treeitem
+
treetwisty
+
treetwistyopen
+
treeview
+
window
+
+ +

Przykłady

+ +
.exampleone {
+	-moz-appearance: toolbarbutton;
+}
+
+ +

Notatki

+ +

Ta własność jest często używana w arkuszach stylów XUL do projektowania zwyczajnych dla platformy widżetów oraz w implementacjach XBL widżetów, które pochodzą z platformy mozilla.

diff --git a/files/pl/web/css/attribute_selectors/index.html b/files/pl/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..93ffda8fec --- /dev/null +++ b/files/pl/web/css/attribute_selectors/index.html @@ -0,0 +1,238 @@ +--- +title: Selektory artybutów +slug: Web/CSS/Attribute_selectors +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

Selektor atrybutów CSS dopasowuje elementy w oparciu o obecność lub wartość danego atrybutu.

+ +
/* <a> Element z artybutem "title" */
+a[title] {
+  color: purple;
+}
+
+/* <a> elemente href zawierajacy "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* <a> element href zawirający "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* <a> elementy href kończące się na  ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* <a> elementy, których atrybut klasy zawiera słowo "logo" */
+a[class~="logo"] {
+  padding: 2px;
+}
+ +

Syntax

+ +
+
[attr]
+
+ +

Reprezentuje elementy z atrybutem o nazwie attr.

+ +
+
[attr=value]
+
Reprezentuje elementy z atrybutem o nazwie attr, którego wartością jest "value".
+
[attr~=value]
+
Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
+
[attr|=value]
+
Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.
+
[attr^=value]
+
Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
+
[attr$=value]
+
Represents elements with an attribute name of attr whose value is suffixed (followed) by value.
+
[attr*=value]
+
Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
+
[attr operator value i]
+
Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).
+
[attr operator value s] {{Experimental_Inline}}
+
Adding an s (or S) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).
+
+ +

Examples

+ + + +

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 with "cAsE" anywhere in the URL,
+with matching capitalization */
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* 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>
+ +

Result

+ +

{{EmbedLiveSample("Links")}}

+ +

Languages

+ +

CSS

+ +
/* All divs with a `lang` attribute are bold. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* All divs without a `lang` attribute are italicized. */
+div:not([lang]) {
+  font-style: italic;
+}
+
+/* All divs in US English are blue. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* All divs in Portuguese are green. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* All divs in Chinese are red, whether
+   simplified (zh-CN) or traditional (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* All divs with a Traditional Chinese
+   `data-lang` are purple. */
+/* Note: You could also use hyphenated attributes
+   without double quotes */
+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>
+
+ +

Result

+ +

{{EmbedLiveSample("Languages")}}

+ +

HTML ordered lists

+ +

The HTML specification requires the {{htmlattrxref("type", "input")}} attribute to be matched case-insensitively due to it primarily being used in the {{HTMLElement("input")}} element, trying to use attribute selectors to with the {{htmlattrxref("type", "ol")}} attribute of an {{HTMLElement("ol", "ordered list")}} doesn't work without the case-sensitive modifier.

+ +

CSS

+ +
/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Example list</li>
+</ol>
+ +

Result

+ +

{{EmbedLiveSample("HTML_ordered_lists")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS4 Selectors")}}Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.
{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}{{Spec2("CSS2.1")}}Initial definition
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/pl/web/css/azimuth/index.html b/files/pl/web/css/azimuth/index.html new file mode 100644 index 0000000000..2841b5441e --- /dev/null +++ b/files/pl/web/css/azimuth/index.html @@ -0,0 +1,97 @@ +--- +title: azimuth +slug: Web/CSS/azimuth +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Archive/Web/CSS/azimuth +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

W połączeniu z elevation, azimuth umożliwia ustawianie różnych źródeł audio w przestrzeni i wykorzystywanie ich do prezentacji słuchowych. Jest to ważne w związku z tym, że dostarcza to naturalnego sposobu do odtwarzania kilku głosów w oddali, przy czym każdy z nich może pojawić się w innym miejscu strefy dźwięku. Wyjście stereofoniczne wytwarza boczną strefę dźwięku, podczas gdy obuuszne słuchawki i wielogłośnikowe zestawy pozwalają na pełną trójwymiarową strefę.

+ + + +

Składnia

+ +
azimuth:angle | [[ left-side | far-left | left |
+    center-left | center | center-right | right |
+    far-right | right-side ] || behind ] | leftwards |
+    rightwards | inherit
+
+ +

Wartości

+ +
+
angle 
+
Słyszalna pozycja źródła jest opisywana jako kąt z zakresu -360 stopni do 360 stopni. Wartość 0stopni znaczy dokładnie z przodu w centrum strefy dźwięku (to jest wartość domyślna). 90 stopni jest na prawo, 180 stopni z tyłu, i 270 stopni lub -90 stopni jest na lewo.
+
+ +

grafika:Azimuth.png

+ +

 

+ +

Słowa kluczowe do ustawiania pozycji

+ + + +

Przykłady

+ +
h1   { azimuth: 30deg }
+td.a { azimuth: far-right }          /*  60 stopni */
+#12  { azimuth: behind far-right }   /* 120 stopni */
+p.comment { azimuth: behind }        /* 180 stopni */
+
+ +

Specyfikacja

+ + + +

Zgodność z przeglądarką

+ +

TBD (może być porzucone ze względu na listę centralnej zgodności)

+ +

Zobacz także

+ +

{{ Cssxref("elevation") }}

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/CSS/azimuth", "es": "es/CSS/azimuth", "fr": "fr/CSS/azimuth", "zh-cn": "cn/CSS/azimuth" } ) }}

diff --git a/files/pl/web/css/background-attachment/index.html b/files/pl/web/css/background-attachment/index.html new file mode 100644 index 0000000000..636e991bdf --- /dev/null +++ b/files/pl/web/css/background-attachment/index.html @@ -0,0 +1,124 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-attachment +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Jeśli {{ Cssxref("background-image") }} jest określone, background-attachment decyduje, czy położenie danego obrazka jest stałe względem okna, czy też przewija się wraz z zawierającym go blokiem.

+ +

{{cssinfo}}

+ +

Składnia

+ +
background-attachment: scroll | fixed | inherit
+
+ +

Wartości

+ +
+
scroll 
+
Jeśli zdefiniowane jest scroll, obrazek tła będzie się przewijał wewnątrz okna wraz z zawierającym go blokiem.
+
fixed 
+
Jeśli zdefiniowane jest fixed, obrazek tła nie będzie się przewijał z zawierającym go blokiem, zamiast tego pozostanie nieruchomy względem okna.
+
+ +

Przykłady

+ +

Simple example

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

Result

+ +

{{EmbedLiveSample("Simple_example")}}

+ +

Multiple background image support

+ +

This property supports multiple background images. You can specify a different <attachment> for each background, separated by commas. Each image is matched with the corresponding attachment type, from first specified to last.

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

Result

+ +

{{EmbedLiveSample("Multiple_background_image_support")}}

+

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer4
Firefox1
Netscape6
Opera3.5
diff --git a/files/pl/web/css/background-color/index.html b/files/pl/web/css/background-color/index.html new file mode 100644 index 0000000000..611526f4ac --- /dev/null +++ b/files/pl/web/css/background-color/index.html @@ -0,0 +1,82 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-color +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Właściwość CSS background-color ustawia kolor tła elementu, albo poprzez wartość koloru lub słowo kluczowe transparent.

+ +

{{cssinfo}}

+ +

Składnia

+ +

Właściwość background-color jest deklarowana jako pojedyncza wartość <color>.

+ +
background-color: color | transparent | inherit
+
+ +

Wartości

+ +
+
{{cssxref("<color>")}}
+
Jest to styl CSS, który opisuje zunifikowany kolor tła. Nawet jeśli jest zdefiniowany jeden lub kilka {{cssxref("background-image")}}, kolor może być renderowany, poprzez przezroczystość o ile nie jest ustawiony jako opaque. W CSS transparent jest kolorem.
+
Kolor może być określony jako szesnastkowa wartość RGB np. #ffaac9, typowa wartość RGB np. + 
rgb(255, 255, 128);
+  lub poprzez użycie jednego z predefiniowanych słów kluczowych określających kolor.
+
transparent 
+
Domyślną wartością dla background-color jest transparent, oznacza to, że element nie ma własnego koloru tła, zamiast tego renderowany jest kolor tła rodzica.
+
+ +

Przykłady

+ +

HTML

+ +
<div class="exampleone">
+ Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Examples","200","150")}}

+ +

Specyfikacje

+ + diff --git a/files/pl/web/css/background-image/index.html b/files/pl/web/css/background-image/index.html new file mode 100644 index 0000000000..471909c967 --- /dev/null +++ b/files/pl/web/css/background-image/index.html @@ -0,0 +1,114 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-image +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność background-image ustawia obrazek tła dla elementu.

+ +

{{cssinfo}}

+ +

Składnia

+ +
background-image: uri | none | inherit
+
+ +

Wartości

+ +
+
uri 
+
Położenie zasobu obrazka używanego jako obrazek tła.
+
none 
+
Używane do wyszczególnienia, że dany element nie powinien mieć obrazka tła.
+
+ +

Przykłady

+ +

Note that the star image is partially transparent and is layered over the cat image.

+ +

HTML

+ +
<div>
+    <p class="catsandstars">
+        This paragraph is full of cats<br />and stars.
+    </p>
+    <p>This paragraph is not.</p>
+    <p class="catsandstars">
+        Here are more cats for you.<br />Look at them!
+    </p>
+    <p>And no more.</p>
+</div>
+ +

CSS

+ +
pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Przyk%C5%82ady')}}

+ +

Uwagi

+ +

Twórcy powinni się upewnić, że określili {{ Cssxref("background-color") }} do użycia w przypadku, jeśli obrazek jest niedostępny. Obrazki tła są wyświetlane nad kolorem tła.

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkiNajniższa wersja
Internet Explorer4
Firefox1
Netscape4
Opera3.5
diff --git a/files/pl/web/css/background-origin/index.html b/files/pl/web/css/background-origin/index.html new file mode 100644 index 0000000000..551703c7da --- /dev/null +++ b/files/pl/web/css/background-origin/index.html @@ -0,0 +1,52 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - CSS + - CSS Background + - CSS Property +translation_of: Web/CSS/background-origin +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

w aplikacjach opartych na Mozilli -moz-background-origin decyduje, który boks wyznacza układ współrzędnych używanych przez wartości własności {{ Cssxref("background-position") }}.

+ +

background-origin nie stosuje się, gdy własność {{ Cssxref("background-attachment") }} ma wartość fixed.

+ + + +

 

+ +

Składnia

+ +
background-origin: border-box | padding-box | content-box
+
+ +

Wartości

+ +
+
border-box
+
Pozycja tła jest relatywna względem obramowania, zatem obrazek może znaleźć się pod obramowaniem.
+
padding-box
+
Pozycja tła jest relatywna względem wypełnienia.
+
content-box
+
Pozycja tła jest relatywna względem zawartości.
+
+ +

Przykłady

+ +
hbox.example {
+  border: 10px double #000000;
+  padding: 10px;
+  background: url('image.jpg');
+  background-position: center left;
+  /* tło będzie wewnątrz padding */
+  background-origin: content-box;
+}
+
diff --git a/files/pl/web/css/background-position/index.html b/files/pl/web/css/background-position/index.html new file mode 100644 index 0000000000..6279af31f2 --- /dev/null +++ b/files/pl/web/css/background-position/index.html @@ -0,0 +1,122 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-position +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

background-position ustawia początkowe położenie obrazka tła, który został zdefiniowany.

+ +

{{cssinfo}}

+ +

Składnia

+ +
background-position: [ <percentage> | <length> | left | center | right  ]
+                     [ <percentage> | <length> | top  | center | bottom ] ? ;
+
+ +
background-position: [ top | center | bottom ];
+
+ +
background-position: inherit;
+
+ +

Wartości

+ +
+
{{cssxref("<percentage>")}} <percentage>
+
Wraz z parą wartości '0% 0%', lewy górny róg obrazka jest wyrównany względem górnego lewego rogu dopełnienia bloku. Para wartości '100% 100%' umieszcza dolny prawy róg obrazka w dolnym prawym rogu obszaru dopełnienia. Wraz z parą wartości '14% 84%', punkt 14% wszerz i 84% w dół obrazka jest umiejscawiany w punkcie 14% wszerz i 84% w dół obszaru dopełnienia'.
+
{{cssxref("<length>")}} <length>
+
Wraz z parą wartości '2cm 1cm', górny lewy róg obrazka jest umieszczony 2cm od prawego i 1cm poniżej górnego krańca obszaru dopełnienia.
+
top left oraz left top
+
Tak samo jak '0% 0%'.
+
top, top center, oraz center top
+
Tak samo jak '50% 0%'.
+
right top oraz top right
+
Tak samo jak '100% 0%'.
+
left, left center, oraz center left
+
Tak samo jak '0% 50%'.
+
center oraz center center
+
Tak samo jak '50% 50%'.
+
right, right center, oraz center right
+
Tak samo jak '100% 50%'.
+
bottom left oraz left bottom
+
Tak samo jak '0% 100%'.
+
bottom, bottom center, oraz center bottom
+
Tak samo jak '50% 100%'.
+
bottom right oraz right bottom
+
Tak samo jak '100% 100%'.
+
+ +

Jeśli tylko jedna wartość jest określona, wtedy ustawia położenie poziome, z pozycją pionową 50%. W innym przypadku pierwsza wartość określa położenie w poziomie. Dozwolone są kombinacje słów kluczowych, długości i procentów, jednak, jeśli słowa kluczowe są wymieszane z innymi wartościami, wartości 'left' i 'right' mogą być używane tylko jako pierwsza wartość, zaś wartości 'top' i 'bottom' mogą być używane tylko jako druga wartość. Położenie ujemne jest dozwolone.

+ +

Przykłady

+ +
.exampleone {
+	background-image: url("logo.png");
+	background-position: top center;
+}
+
+.exampletwo {
+	background-image: url("logo.png");
+	background-position: 25% 75%;
+}
+
+.examplethree {
+	background-image: url("logo.png");
+	background-position: 2cm bottom;
+}
+
+.examplefour {
+	background-image: url("logo.png");
+	background-position: center 10%;
+}
+
+.examplefive {
+	background-image: url("logo.png");
+	background-position: 2cm 50%;
+}
+
+
+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer4
Firefox1
Netscape6
Opera3.5
diff --git a/files/pl/web/css/background-size/index.html b/files/pl/web/css/background-size/index.html new file mode 100644 index 0000000000..7c4383448a --- /dev/null +++ b/files/pl/web/css/background-size/index.html @@ -0,0 +1,190 @@ +--- +title: background-size +slug: Web/CSS/background-size +translation_of: Web/CSS/background-size +--- +
{{CSSRef}}
+ +

Właściwość background-size określa wielkość elementu background-image. Obrazek może pozostać w jego domyślnych wymiarach, rozciągnięty do nowych wymiarów lub ustawiony tak, aby zajmował całą dostępną przestrzeń zachowując swoje proporcje.

+ +
{{EmbedInteractiveExample("pages/css/background-size.html")}}
+ + + +

Przestrzenie nie zapełnione przez background-image wypełnia {{cssxref("background-color")}}, background-color będzie widoczny jeżeli obrazek jest przezroczysty.

+ +

Syntax

+ +
/* Wartości słowne */
+background-size: cover;
+background-size: contain;
+
+/* Właściwości z jedną wartością */
+/* szerokość obrazka (wysokość stanie się 'auto') */
+background-size: 50%;
+background-size: 3.2em;
+background-size: 12px;
+background-size: auto;
+
+/* Właściwości z dwoma wartościami */
+/* pierwsza wartość: szerokość obrazka, druga wartość: wysokość */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* Wiele teł */
+background-size: auto, auto; /* Not to be confused with `auto auto` */
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* Wartości globalne */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+
+ +

Właściwość background-size jest określana w jeden z podanych sposobów:

+ + + +

Aby określić wielkość wielu teł, odziel wartości dla każdego tła przecinkami.

+ +

Values

+ +
+
contain
+
Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania czy przycinania.
+
cover
+
Skaluje obrazek do jak największych rozmiarów, bez jego rozciągania. Jeżeli proporcje obrazu są inne od elementu, jest on przycinany pionowo lub poziomo - tak, żeby nie zostało puste miejsce.
+
auto
+
Skaluje tło w odpowiednim kierunku, po to aby zachować jego nieodłączne proporcje.
+
{{cssxref("<length>")}}
+
Rozciąga obrazek w odpowiednim kierunku do określonej długości. Nie można używać wartości ujemnych.
+
{{cssxref("<percentage>")}}
+
[do przetłumaczenia na: Polski]
+
Stretches the image in the corresponding dimension to the specified percentage of the background positioning area. The background positioning area is determined by the value of {{cssxref("background-origin")}} (by default, the padding box). However, if the background's {{cssxref("background-attachment")}} value is fixed, the positioning area is instead the entire {{glossary("viewport")}}. Negative values are not allowed.
+
+ +

Intrinsic dimensions and proportions

+ +

The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio). These attributes are as follows:

+ + + +
+

Note: The behavior of <gradient>s changed in Gecko 8.0 {{geckoRelease("8.0")}}. Before this, they were treated as images with no intrinsic dimensions, but with intrinsic proportions identical to that of the background positioning area.

+
+ +
+

Note: In Gecko, background images created using the {{cssxref("element()")}} function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion. This is non-standard behavior.

+
+ +

Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:

+ +
+
If both components of background-size are specified and are not auto:
+
The background image is rendered at the specified size.
+
If the background-size is contain or cover:
+
While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.
+
If the background-size is auto or auto auto:
+
+
    +
  • If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.
    • +
  • If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.
    • +
  • If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if contain had been specified instead.
    • +
  • If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. The other dimension is computed using the specified dimension and the intrinsic proportions.
    • +
  • If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area.
    • +
+
+
+
Note: SVG images have a preserveAspectRatio attribute that defaults to the equivalent of contain. In Firefox 43, as opposed to Chrome 52, an explicit background-size causes preserveAspectRatio to be ignored.
+
+
If the background-size has one auto component and one non-auto component:
+
+
    +
  • If the image has intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the specified dimension and the intrinsic proportions.
    • +
  • If the image has no intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.
    • +
+
+
+ +
+

Note: Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.

+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

Examples

+ +

Please see Scaling background images for examples.

+ +

Notes

+ +

If you use a <gradient> as the background and specify a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%). Rendering of <gradient>s in such cases changed in Firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with the CSS3 background-size specification and with the CSS3 Image Values gradient specification.

+ +
.gradient-example {
+  width: 50px;
+  height: 100px;
+  background-image: linear-gradient(blue, red);
+
+  /* Not safe to use */
+  background-size: 25px;
+  background-size: 50%;
+  background-size: auto 50px;
+  background-size: auto 50%;
+
+  /* Safe to use */
+  background-size: 25px 50px;
+  background-size: 50% 50%;
+}
+
+ +

Note that it's particularly not recommended to use a pixel dimension and an auto dimension with a <gradient>, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}{{Spec2('CSS3 Backgrounds')}}Initial definition.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.background-size")}}

+ +

See also

+ + diff --git a/files/pl/web/css/background/index.html b/files/pl/web/css/background/index.html new file mode 100644 index 0000000000..0fc3dea0c2 --- /dev/null +++ b/files/pl/web/css/background/index.html @@ -0,0 +1,134 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - CSS Tło + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/background +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność background jest skrótem do ustawiania poszczególnych wartości tła z jednego miejsca w arkuszu stylów. Właściwość background może być stosowana do ustawiania wartości dla jednej lub więcej z wymienionych warstw własności: {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}.

+ +

{{cssinfo}}

+ +

Składnia

+ +
background: [  <background-color>    ||  <background-image>       ||
+               <background-repeat>   ||  <background-attachment>  ||
+               <background-position>
+            ]   |   {{ Cssxref("inherit") }} ;
+
+ +

Właściwość background jest deklarowana przez jedną lub więcej warstw tej właściwości, oddzielonych przecinkami.

+ +

Składnia każdej z warstw jest następująca:

+ + + +
+
 
+
+ +

Wartości

+ +
+
background-color
+
Zobacz background-color.
+
background-image 
+
Zobacz background-image.
+
background-repeat 
+
Zobacz background-repeat.
+
background-attachment 
+
Zobacz background-attachment.
+
background-position 
+
Zobacz background-position.
+
+ +

Przykłady

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Examples")}}

+ +

Notatki

+ +

Biorąc pod uwagę sensowność deklaracji, własność background najpierw ustawia poszczególne własności tła na ich domyślne wartości, potem przydziela jawnie wartości określone w deklaracji. Nie musisz definiować wartości dla każdej warstwy, wystarczy, że zadeklarujesz tylko te, które chcesz zmienić z wartości domyślnej.

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Zobacz także

+ +

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/pl/web/css/border-bottom-color/index.html b/files/pl/web/css/border-bottom-color/index.html new file mode 100644 index 0000000000..ba88e74906 --- /dev/null +++ b/files/pl/web/css/border-bottom-color/index.html @@ -0,0 +1,149 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - Dokumentacje +translation_of: Web/CSS/border-bottom-color +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

border-bottom-color ustawia kolor dolnego obramowania elementu, poprzez wartość koloru lub słowo kluczowe transparent.

+ + + +

Składnia

+ +
border-bottom-color: color | transparent | inherit
+
+ +

Wartości

+ +
+
color 
+
Kolor może być zdefiniowany jako szestnastkowa wartość RGB, zwykła wartość RGB lub poprzez użycie jednego z predefiniowanych słów określających kolory.
+
transparent 
+
Element nie ma własnego koloru, zamiast tego pokazuje kolor elementu pod spodem.
+
+ +

Powiązane własności

+ + + +

Przykłady

+ +

Zobacz przykład

+ +
element {
+	width: 300px;
+        padding: 15px;
+        border-bottom-size: 1px;
+        border-bottom-style: solid;
+        border-bottom-color: #000;
+}
+
+
+ +

Notatki

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS3 Backgrounds')}}No significant changes, though the transparent keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.
{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-bottom-color')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser Compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1.0")}}[1]43.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1.0")}}[1]6.5111.0
+
+ +

[1] Gecko-based browsers like Firefox also support the non-standard {{Cssxref("-moz-border-bottom-colors")}} CSS property that sets the bottom border to multiple colors.

+ +

See also

+ + diff --git a/files/pl/web/css/border-bottom-left-radius/index.html b/files/pl/web/css/border-bottom-left-radius/index.html new file mode 100644 index 0000000000..0047da4c13 --- /dev/null +++ b/files/pl/web/css/border-bottom-left-radius/index.html @@ -0,0 +1,20 @@ +--- +title: '-moz-border-radius-bottomleft' +slug: Web/CSS/border-bottom-left-radius +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom-left-radius +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli -moz-border-radius-bottomleft ustawia zaokrąglenie dolnego lewego rogu obramowania.

+ +

Zobacz więcej informacji we własności -moz-border-radius.

+ +

{{ languages( { "de": "de/CSS/border-bottom-left-radius", "en": "en/CSS/-moz-border-radius-bottomleft", "fr": "fr/CSS/border-bottom-left-radius", "ja": "ja/CSS/border-bottom-left-radius" } ) }}

diff --git a/files/pl/web/css/border-bottom-right-radius/index.html b/files/pl/web/css/border-bottom-right-radius/index.html new file mode 100644 index 0000000000..c43c814a8c --- /dev/null +++ b/files/pl/web/css/border-bottom-right-radius/index.html @@ -0,0 +1,20 @@ +--- +title: '-moz-border-radius-bottomright' +slug: Web/CSS/border-bottom-right-radius +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom-right-radius +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli -moz-border-radius-bottomright ustawia zaokrąglenie dolnego prawego rogu obramowania.

+ +

Zobacz więcej informacji we własności -moz-border-radius.

+ +

{{ languages( { "de": "de/CSS/border-bottom-right-radius", "en": "en/CSS/-moz-border-radius-bottomright", "fr": "fr/CSS/-moz-border-radius-bottomright", "ja": "ja/CSS/border-bottom-right-radius" } ) }}

diff --git a/files/pl/web/css/border-bottom-style/index.html b/files/pl/web/css/border-bottom-style/index.html new file mode 100644 index 0000000000..0b212631ff --- /dev/null +++ b/files/pl/web/css/border-bottom-style/index.html @@ -0,0 +1,159 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom-style +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

border-bottom-style ustawia styl linii dolnego obramowania bloku.

+ + + +

Składnia

+ +
border-bottom-style: <border-style> | inherit
+
+ +

Wartości <border-style>

+ +
+
none 
+
Bez obramowania.
+
hidden 
+
Podobnie jak 'none', oprócz sytuacji konfliktu rozdzielczości obramowania dla elementów tabeli.
+
dotted 
+
Seria kropek.
+
dashed 
+
Seria krótkich kresek lub odcinków linii.
+
solid 
+
Pojedyncza, prosta, ciągła linia.
+
double 
+
Dwie proste linie, które dają w sumie liczbę pikseli zdefiniowaną jako border-width.
+
groove 
+
Efekt wyrzeźbienia.
+
ridge 
+
Przeciwieństwo groove. Obramowanie wydaje się trójwymiarowe (zapowiadane).
+
inset 
+
Sprawia wrażenie, że blok jest zapadnięty.
+
outset 
+
Przeciwieństwo inset. Sprawia, że blok wydaje się trójwymiarowy (wysunięty).
+
+ +

Powiązane własności

+ + + +

Przykłady

+ +

Zobacz przykład

+ +
element {
+        border-bottom-size: 1px;
+        border-bottom-style: dotted;
+        border-bottom-color: #000;
+}
+
+ +

Notatki

+ +

Jeżeli wartość border-style nie jest ustawiona, wtedy twoje obramowanie nie pojawi się, ponieważ domyślna wartość jest ustawiona na none.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-bottom-style', 'border-bottom-style') }}{{ Spec2('CSS3 Backgrounds') }}No significant change
{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}{{ Spec2('CSS2.1') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.01.05.59.21.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}7.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

See also

+ + diff --git a/files/pl/web/css/border-bottom-width/index.html b/files/pl/web/css/border-bottom-width/index.html new file mode 100644 index 0000000000..6b85e8972f --- /dev/null +++ b/files/pl/web/css/border-bottom-width/index.html @@ -0,0 +1,143 @@ +--- +title: border-bottom-width +slug: Web/CSS/border-bottom-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom-width +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

border-bottom-width ustawia szerokość dolnego obramowania bloku.

+ + + +

Składnia

+ +
border-bottom-width: <border-width> | inherit
+
+ +

Wartości <border-width>

+ +
+
thin
+
Cienkie obramowanie.
+
medium
+
Średnie obramowanie.
+
thick
+
Grube obramowanie.
+
<length>
+
Grubość obramowania ma sprecyzowaną wartość. Sprecyzowana szerokość obramowania nie może być ujemna.
+
+ +

Powiązane własności

+ + + +

Przykłady

+ +

Zobacz przykład

+ +
element {
+    border-bottom-width: thin;
+    border-bottom-style: solid;
+    border-bottom-color: #000;
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width') }}{{ Spec2('CSS3 Backgrounds') }}No significant change
{{ SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width') }}{{ Spec2('CSS2.1') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.01.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ + diff --git a/files/pl/web/css/border-bottom/index.html b/files/pl/web/css/border-bottom/index.html new file mode 100644 index 0000000000..8ff156c730 --- /dev/null +++ b/files/pl/web/css/border-bottom/index.html @@ -0,0 +1,146 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-bottom +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność border-bottom jest skróconą własnością, która ustawia wartości dla następujących własności: {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }} oraz {{ Cssxref("border-bottom-width") }}. Te własności opisują dolne obramowanie elementu.

+ + + +

Składnia

+ +
border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit
+
+ +

Wartości

+ +
+
border-width 
+
Zobacz {{ Cssxref("border-bottom-width") }}.
+
border-style 
+
Zobacz {{ Cssxref("border-bottom-style") }}.
+
border-color 
+
Zobacz {{ Cssxref("border-bottom-color") }}.
+
+ +

Przykłady

+ +

Zobacz przykład

+ +
element {
+    border-bottom-width: 1px solid #000;
+}
+
+ +

Notatki

+ +

Trzy wartości skróconej własności mogą być określone w dowolnym porządku, zaś jedna lub dwie z nich mogą być pominięte.

+ +

Jak w przypadku wszystkich skróconych własności, border-bottom zawsze ustawia wartości wszystkich własności, które może ustawić, nawet, jeśli nie są określone. Zatem te, które nie są zdefiniowane, ustawia do ich domyślnych wartości. Oznacza to, że:

+ +
  border-bottom-style: dotted;
+  border-bottom: thick green;
+ +

jest dokładnie tym samym, co

+ +
  border-bottom-style: dotted;
+  border-bottom: none thick green;
+ +

i wartość {{ Cssxref("border-bottom-style") }}, nadana przed border-bottom, jest ignorowana.

+ +

Ponieważ domyślną wartością {{ Cssxref("border-bottom-style") }} jest none, nieokreślenie wartości składnika border-style oznacza, że własność ustawi brak obramowania.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom') }}{{ Spec2('CSS3 Backgrounds') }}No direct changes, though the modification of values for the {{ cssxref("border-bottom-color") }} do apply to it.
{{ SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom') }}{{ Spec2('CSS2.1') }}No significant changes
{{ SpecName('CSS1', '#border-bottom', 'border-bottom') }}{{ Spec2('CSS1') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1.0") }}43.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1.0") }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}
+
diff --git a/files/pl/web/css/border-collapse/index.html b/files/pl/web/css/border-collapse/index.html new file mode 100644 index 0000000000..24439aa553 --- /dev/null +++ b/files/pl/web/css/border-collapse/index.html @@ -0,0 +1,89 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-collapse +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność border-collapse jest używana do stworzenia połączonych obramowań. Ma ona duży wpływ na wygląd i styl komórek tabeli. Wyświetlanie obramowań tabeli jest podzielone w CSS2 na dwie kategorie - "połączone" i "rozdzielone". Własność ta definiuje, którego rodzaju wyświetlania użyć. W modelu połączonych obramowań sąsiadujące komórki tabel współdzielą obramowania. W modelu rozdzielonych obramowań sąsiadujące komórki mają swoje własne odrębne obramowania (odległość między nimi określona jest przez własność 'border-spacing').

+ + + +

Składnia

+ +
border-collapse: value
+
+ +

Wartości

+ + + +

Przykłady

+ +

Zobacz przykład

+ +
<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500">
+
+ +
<table border="1" style="border-collapse: separate" bordercolor="#111111" width="500">
+
+ +

Notatki

+ +

W modelu wyświetlania "połączonych obramowań" wartość 'border-style' ustawiona na "inset" zachowuje się jak "groove", zaś "outset" zachowuje się jak "ridge". CSS2 definiuje, że wartością początkową dla tej własności jest "collapse", jednak CSS2.1 oraz Mozilla/Opera określają lub zachowują się tak, że wartością początkową jest "separate".

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer5.5
Netscape7
Opera5
+ +

Zobacz także

+ +

{{ Cssxref("border-spacing") }}

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/CSS/border-collapse", "es": "es/CSS/border-collapse", "fr": "fr/CSS/border-collapse" } ) }}

diff --git a/files/pl/web/css/border-color/index.html b/files/pl/web/css/border-color/index.html new file mode 100644 index 0000000000..196f39d235 --- /dev/null +++ b/files/pl/web/css/border-color/index.html @@ -0,0 +1,135 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-color +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność border-color jest skróconą własnością dla ustawienia koloru czterech krawędzi obramowania elementu.

+ +

{{cssinfo}}

+ +

Składnia

+ +
border-color: [ <color> || transparent ]{1,4} | inherit
+
+ +

Wartości

+ +
+
<color> 
+
Kolor może być zdefiniowany jako szesnastkowa wartość RGB, zwykła wartość RGB lub poprzez użycie jednego z predefiniowanych słów określających kolory.
+
+ +
+
transparent 
+
Obramowanie nie jest rysowane, ale zajmuje przestrzeń na stronie.
+
+ +

Można ustawić do czterech wartości.

+ +

Jeśli dana jest jedna wartość koloru, wtedy wszystkie cztery krawędzie są tego koloru.
+ Jeśli dwie wartości - obramowanie górne i dolne używa pierwszej wartości, lewe i prawe używa drugiej.
+ Jeśli trzy wartości - pierwsza jest dla górnej krawędzi, druga dla lewej i prawej, trzecia dla dolnej.
+ Jesli cztery wartości - pierwsza dla górnego obramowania, druga dla prawego, trzecia dla dolnego i czwarta dla lewego.

+ +

Przykłady

+ +

Zobacz przykład

+ +
element {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+
+ +

Notatki

+ +

W celu zobaczenia obramowania musisz również ustawić {{ Cssxref("border-width") }} na wartość dodatnią oraz {{ Cssxref("border-style") }} na jakąś widoczną.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-color', 'border-color') }}{{ Spec2('CSS3 Backgrounds') }}The transparent keyword has been removed as it is now a part of the {{cssxref("<color>")}} data type.
{{ SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color') }}{{ Spec2('CSS2.1') }}The property is now a shorthand property
{{ SpecName('CSS1', '#border-color', 'border-color') }}{{ Spec2('CSS1') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{ CompatGeckoDesktop("1.0") }} [1]4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.0{{ CompatGeckoMobile("1.9.2") }} [1]7.0111.0
+
diff --git a/files/pl/web/css/border-left-color/index.html b/files/pl/web/css/border-left-color/index.html new file mode 100644 index 0000000000..80338c4cf0 --- /dev/null +++ b/files/pl/web/css/border-left-color/index.html @@ -0,0 +1,109 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-left-color +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

border-left-color ustala kolor lewego obramowania elementu, poprzez konkretną wartość lub przez słowo kluczowe transparent.

+ + + +

Składnia

+ +
border-left-color: color | transparent | inherit
+
+ +

Wartości

+ +
+
color 
+
Kolor może zostać podany przy pomocy szesnastkowej reprezentacji RGB, zwykłej wartości RGB lub przez predefiniowane słowo klucz.
+
transparent 
+
Element nie ma własnego koloru, pokazuje kolor elementu spod niego.
+
+ +

Powiązane własności

+ + + +

Przykłady

+ +

Zobacz przykład

+ +
element {
+	width: 300px;
+        padding: 15px;
+        border-bottom-size: 1px;
+        border-bottom-style: solid;
+        border-bottom-color: #000;
+}
+
+
+ +

Notatki

+ + + +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

 

+ +

Zobacz także

+ +

{{ Cssxref("border") }}, {{ Cssxref("border-left") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-width") }},

+ +

{{ languages( { "de": "de/CSS/border-left-color", "en": "en/CSS/border-left-color", "fr": "fr/CSS/border-left-color", "ja": "ja/CSS/border-left-color" } ) }}

diff --git a/files/pl/web/css/border-left-style/index.html b/files/pl/web/css/border-left-style/index.html new file mode 100644 index 0000000000..f1bbd8935b --- /dev/null +++ b/files/pl/web/css/border-left-style/index.html @@ -0,0 +1,16 @@ +--- +title: border-left-style +slug: Web/CSS/border-left-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-left-style +--- +

{{ CSSRef() }}

+

Podsumowanie

+

border-left-style ustawia styl linii lewego obramowania bloku.

+

Zobacz własność border-bottom-style, aby uzyskać więcej informacji.

+ +

{{ languages( { "de": "de/CSS/border-left-style", "en": "en/CSS/border-left-style", "fr": "fr/CSS/border-left-style", "ja": "ja/CSS/border-left-style" } ) }}

diff --git a/files/pl/web/css/border-left-width/index.html b/files/pl/web/css/border-left-width/index.html new file mode 100644 index 0000000000..59ad05cd1a --- /dev/null +++ b/files/pl/web/css/border-left-width/index.html @@ -0,0 +1,19 @@ +--- +title: border-left-width +slug: Web/CSS/border-left-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-left-width +--- +

{{ CSSRef() }} +

+

Podsumowanie

+

border-left-width ustawia szerokość lewego obramowania bloku. +

Zobacz właściwość border-bottom-width, aby uzyskać więcej informacji. +

+
+
+{{ languages( { "en": "en/CSS/border-left-width", "fr": "fr/CSS/border-left-width" } ) }} diff --git a/files/pl/web/css/border-left/index.html b/files/pl/web/css/border-left/index.html new file mode 100644 index 0000000000..0a6ff6563a --- /dev/null +++ b/files/pl/web/css/border-left/index.html @@ -0,0 +1,123 @@ +--- +title: border-left +slug: Web/CSS/border-left +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-left +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność border-left jest skróconą własnością dla ustawienia szerokości stylu i koloru lewej krawędzi elementu. Ta własność może być używana do ustawienia jednej lub kilku wartości: {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }}. Pominięte wartości są ustawiane do ich wartości początkowych.

+ +

{{cssinfo}}

+ +

Składnia

+ +
border-left: [border-width || border-style || border-color | inherit] ;
+
+ +

Wartości

+ +
+
border-width
+
Zobacz {{ Cssxref("border-width") }}.
+
border-style 
+
Zobacz {{ Cssxref("border-style") }}.
+
border-color 
+
Zobacz {{ Cssxref("border-color") }}.
+
+ +

Przykłady

+ +
element {
+    border-left: 1px solid #000;
+}
+
+ +

Notatki

+ +

Jeśli reguła nie określi koloru krawędzi, krawędź będzie miała kolor zdefiniowany przez własność {{ Cssxref("color") }}.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}{{ Spec2('CSS3 Backgrounds') }}No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.
{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}{{ Spec2('CSS2.1') }}No significant changes
{{ SpecName('CSS1', '#border-left', 'border-left') }}{{ Spec2('CSS1') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1.0") }}43.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1.0") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
diff --git a/files/pl/web/css/border-radius/index.html b/files/pl/web/css/border-radius/index.html new file mode 100644 index 0000000000..ee38420619 --- /dev/null +++ b/files/pl/web/css/border-radius/index.html @@ -0,0 +1,69 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-radius +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

W aplikacjach opartych border-radius może być używany do nadawania obramowaniom zaokrąglonych rogów.

+ + + +

border-radius nie stosuje się do elementów tabel, kiedy własność {{ Cssxref("border-collapse") }} ustawiona jest na collapse.

+ +

Składnia

+ +
-moz-border-radius: <border-radius>{1,4} | inherit
+
+ +

Wartości

+ +

<border-radius> reprezentuje jedną z wartości:

+ +
+
<length>
+
szerokość
+
<percentage>
+
procenty, względem długości boksu
+
+ +

Zatem są używane 4 wartości w porządku górny-lewy, górny-prawy, dolny-prawy i dolny-lewy. Jeśli podane są mniej niż 4 wartości, lista wartości jest powtarzana do wypełnienia pozostałych wartości.

+ +

Powiązane własności

+ + + +

Przykłady

+ +
hbox.example {
+  border: 10px solid #000000;
+  width: 500px;
+  height: 500px;
+  /* obramowanie wygnie się w kształt 'D' */
+  -moz-border-radius: 10px 200px 200px 10px;
+}
+
+ +

Znane błędy

+ + diff --git a/files/pl/web/css/border-right-color/index.html b/files/pl/web/css/border-right-color/index.html new file mode 100644 index 0000000000..7b17b50b3b --- /dev/null +++ b/files/pl/web/css/border-right-color/index.html @@ -0,0 +1,16 @@ +--- +title: border-right-color +slug: Web/CSS/border-right-color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-right-color +--- +

{{ CSSRef() }}

+

Podsumowanie

+

border-right-color ustala kolor prawego obramowania elementu.

+

Zobacz również własność border-bottom-color.

+ +

{{ languages( { "de": "de/CSS/border-right-color", "en": "en/CSS/border-right-color", "fr": "fr/CSS/border-right-color", "ja": "ja/CSS/border-right-color" } ) }}

diff --git a/files/pl/web/css/border-right-style/index.html b/files/pl/web/css/border-right-style/index.html new file mode 100644 index 0000000000..eef2e15cdd --- /dev/null +++ b/files/pl/web/css/border-right-style/index.html @@ -0,0 +1,16 @@ +--- +title: border-right-style +slug: Web/CSS/border-right-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-right-style +--- +

{{ CSSRef() }}

+

Podsumowanie

+

border-right-style ustawia styl linii prawego obramowania bloku.

+

Zobacz własność border-bottom-style, aby uzyskać więcej informacji.

+ +

{{ languages( { "de": "de/CSS/border-right-style", "en": "en/CSS/border-right-style", "fr": "fr/CSS/border-right-style", "ja": "ja/CSS/border-right-style" } ) }}

diff --git a/files/pl/web/css/border-right-width/index.html b/files/pl/web/css/border-right-width/index.html new file mode 100644 index 0000000000..ea649dc284 --- /dev/null +++ b/files/pl/web/css/border-right-width/index.html @@ -0,0 +1,17 @@ +--- +title: border-right-width +slug: Web/CSS/border-right-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie + - border width +translation_of: Web/CSS/border-right-width +--- +

{{ CSSRef() }}

+

Podsumowanie

+

border-right-width ustawia szerokość prawego obramowania bloku.

+

Zobacz własność border-bottom-width, aby uzyskać więcej informacji.

+ +

{{ languages( { "de": "de/CSS/border-right-width", "en": "en/CSS/border-right-width", "fr": "fr/CSS/border-right-width", "ja": "ja/CSS/border-right-width" } ) }}

diff --git a/files/pl/web/css/border-right/index.html b/files/pl/web/css/border-right/index.html new file mode 100644 index 0000000000..a4510f4614 --- /dev/null +++ b/files/pl/web/css/border-right/index.html @@ -0,0 +1,123 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-right +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność border-right jest skróconą własnością dla ustawienia szerokości, stylu i koloru prawej krawędzi elementu. Ta własność może być używana do ustawienia jednej lub kilku wartości: {{ Cssxref("border-right-width") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-right-color") }}. Pominięte wartości są ustawiane do ich wartości początkowych.

+ +

{{cssinfo}}

+ +

Składnia

+ +
border-right: [border-width || border-style || border-color | inherit] ;
+
+ +

Wartości

+ +
+
border-width
+
Zobacz {{ Cssxref("border-width") }}.
+
border-style 
+
Zobacz {{ Cssxref("border-style") }}.
+
border-color 
+
Zobacz {{ Cssxref("border-color") }}.
+
+ +

Przykłady

+ +
element {
+    border-right: 1px solid #000;
+}
+
+ +

Notatki

+ +

Jeśli reguła nie określi koloru krawędzi, krawędź będzie miała kolor zdefiniowany przez własność {{ Cssxref("color") }}.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-right', 'border-right') }}{{ Spec2('CSS3 Backgrounds') }}No direct changes, though the modification of values for the {{ cssxref("border-right-color") }} do apply to it.
{{ SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right') }}{{ Spec2('CSS2.1') }}No significant changes
{{ SpecName('CSS1', '#border-right', 'border-right') }}{{ Spec2('CSS1') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1.0") }}43.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1.0") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
diff --git a/files/pl/web/css/border-spacing/index.html b/files/pl/web/css/border-spacing/index.html new file mode 100644 index 0000000000..d9085b8bfc --- /dev/null +++ b/files/pl/web/css/border-spacing/index.html @@ -0,0 +1,101 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-spacing +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność border-spacing określa odległość pomiędzy obramowaniami sąsiadujących komórek (tylko dla rozdzielnych obramowań). Jest to odpowiednik atrybutu cellspacing w HTML-u.

+ + + +

Składnia

+ +

border-spacing: <length> | <length> <length> | inherit

+ +

Wartości

+ + + +

Przykłady

+ +

Zobacz przykład

+ +
table#space {
+  border-collapse: separate;
+  border-spacing: 10px 5px;
+}
+
+ +

Notatki

+ +

Ta własność ma zastosowanie tylko, gdy {{ Cssxref("border-collapse") }} ma wartość "separate".

+ +

Własność border-spacing jest również używana przy zewnętrznej krawędzi tabeli, gdzie odległość pomiędzy obramowaniem tabeli a komórkami pierwszej/ostatniej kolumny lub wiersza jest sumą istotnej (poziomej lub pionowej) odległości od obramowania i istotnej (górnej, lewej, dolnej lub prawej) krawędzi tabeli.

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Netscape6
Internet Explorer7
Firefox1
Mozilla1
Safari1
Opera6
+ +

 

+ +

Zobacz również

+ +

{{ Cssxref("border-collapse") }}

+ +
 
+ +

{{ languages( { "en": "en/CSS/border-spacing", "es": "es/CSS/border-spacing", "fr": "fr/CSS/border-spacing" } ) }}

diff --git a/files/pl/web/css/border-style/index.html b/files/pl/web/css/border-style/index.html new file mode 100644 index 0000000000..948d86d8a3 --- /dev/null +++ b/files/pl/web/css/border-style/index.html @@ -0,0 +1,126 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-style +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność border-style jest skróconą własnością dla ustawienia stylu linii dla wszystkich czterech stron obramowania elementów.

+ + + +

Składnia

+ +
border-style: [ <border-style> ]{1,4} | inherit
+
+ +

Wartości

+ +
+
<border-style>
+
Style linii mogą przyjąć którąś z podanych wartości.
+
+ + + +

Można podać do czterech wartości.
+ Pierwsza wartość ustawia wszystkie cztery krawędzie.
+ Druga ustawia lewą i prawą.
+ Trzecia ustawia dolną.
+ Czwarta ustawia lewą

+ +

Przykłady

+ +

Zobacz przykład

+ +
element {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+
+ +

Notatki

+ +

Domyślnie border-style jest ustawione na none. To oznacza, że, jeśli zmieniasz wartość {{ Cssxref("border-width") }} oraz {{ Cssxref("border-color") }}, nie zobaczysz obramowania, dopóki nie zmienisz tej wartości na inną niż none lub hidden

+ + + +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+ +

Rozszerzenia Mozilli

+ +

Następujące rozszerzenia Mozilli ustawiają poszczególne strony obramowania na wielokrotny kolor dla przeglądarek opartych na silniku Gecko.

+ + + +

Zobacz także

+ +

{{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("-moz-border-radius") }}

+ + + +

{{ languages( { "de": "de/CSS/border-style", "en": "en/CSS/border-style", "es": "es/CSS/border-style", "fr": "fr/CSS/border-style", "ja": "ja/CSS/border-style" } ) }}

diff --git a/files/pl/web/css/border-top-color/index.html b/files/pl/web/css/border-top-color/index.html new file mode 100644 index 0000000000..0f28de470d --- /dev/null +++ b/files/pl/web/css/border-top-color/index.html @@ -0,0 +1,14 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top-color +--- +

{{ CSSRef() }}

+

Podsumowanie

+

border-top-color ustawia kolor górnego obramowania elementu.

+

Zobacz własność border-bottom-color, aby uzyskać więcej informacji.

diff --git a/files/pl/web/css/border-top-left-radius/index.html b/files/pl/web/css/border-top-left-radius/index.html new file mode 100644 index 0000000000..d35e50e7a0 --- /dev/null +++ b/files/pl/web/css/border-top-left-radius/index.html @@ -0,0 +1,20 @@ +--- +title: '-moz-border-radius-topleft' +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top-left-radius +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli -moz-border-radius-topleft ustawia zaokrąglenie górnego lewego rogu obramowania.

+ +

Zobacz więcej informacji we własności -moz-border-radius.

+ +

{{ languages( { "de": "de/CSS/border-top-left-radius", "en": "en/CSS/-moz-border-radius-topleft", "fr": "fr/CSS/border-top-left-radius", "ja": "ja/CSS/border-top-left-radius" } ) }}

diff --git a/files/pl/web/css/border-top-right-radius/index.html b/files/pl/web/css/border-top-right-radius/index.html new file mode 100644 index 0000000000..1bfdcab43d --- /dev/null +++ b/files/pl/web/css/border-top-right-radius/index.html @@ -0,0 +1,14 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - CSS +translation_of: Web/CSS/border-top-right-radius +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

W aplikacjach opartych na Mozilli border-top-right-radius ustawia zaokrąglenie górnego prawego rogu obramowania.

+ +

Zobacz więcej informacji we własności border-radius.

diff --git a/files/pl/web/css/border-top-style/index.html b/files/pl/web/css/border-top-style/index.html new file mode 100644 index 0000000000..a6c65d9776 --- /dev/null +++ b/files/pl/web/css/border-top-style/index.html @@ -0,0 +1,16 @@ +--- +title: border-top-style +slug: Web/CSS/border-top-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top-style +--- +

{{ CSSRef() }}

+

Podsumowanie

+

border-top-style ustawia styl linii górnego obramowania bloku.

+

Zobacz własność border-bottom-style, aby uzyskać więcej informacji.

+ +

{{ languages( { "de": "de/CSS/border-top-style", "en": "en/CSS/border-top-style", "fr": "fr/CSS/border-top-style", "ja": "ja/CSS/border-top-style" } ) }}

diff --git a/files/pl/web/css/border-top-width/index.html b/files/pl/web/css/border-top-width/index.html new file mode 100644 index 0000000000..f1f68284fa --- /dev/null +++ b/files/pl/web/css/border-top-width/index.html @@ -0,0 +1,16 @@ +--- +title: border-top-width +slug: Web/CSS/border-top-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top-width +--- +

{{ CSSRef() }}

+

Podsumowanie

+

border-top-width ustawia szerokość górnego obramowania bloku.

+

Zobacz własciwość border-bottom-width, aby uzyskać więcej informacji.

+ +

{{ languages( { "de": "de/CSS/border-top-width", "en": "en/CSS/border-top-width", "fr": "fr/CSS/border-top-width", "ja": "ja/CSS/border-top-width" } ) }}

diff --git a/files/pl/web/css/border-top/index.html b/files/pl/web/css/border-top/index.html new file mode 100644 index 0000000000..941f0a6821 --- /dev/null +++ b/files/pl/web/css/border-top/index.html @@ -0,0 +1,123 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-top +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność border-top jest skróconą własnością dla ustawienia szerokości, stylu i koloru górnej krawędzi elementu. Ta własność może być używana do ustawienia jednej lub kilku wartości: {{ Cssxref("border-top-width") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-top-color") }}. Pominięte wartości są ustawiane do ich wartości początkowych.

+ +
{{cssinfo}}
+ +

Składnia

+ +
border-top: [border-width || border-style || border-color | inherit] ;
+
+ +

Wartości

+ +
+
border-width
+
Zobacz {{ Cssxref("border-width") }}.
+
border-style 
+
Zobacz {{ Cssxref("border-style") }}.
+
border-color 
+
Zobacz {{ Cssxref("border-color") }}.
+
+ +

Przykłady

+ +
element {
+    border-top: 1px solid #000;
+}
+
+ +

Notatki

+ +

Jeśli reguła nie określi koloru krawędzi, krawędź będzie miała kolor zdefiniowany przez własność {{ Cssxref("color") }}.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}{{Spec2('CSS3 Backgrounds')}}No direct changes, though the modification of values for the {{cssxref("border-top-color")}} do apply to it.
{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}{{Spec2('CSS2.1')}}No significant changes
{{SpecName('CSS1', '#border-top', 'border-top')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1.0")}}43.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/pl/web/css/border-width/index.html b/files/pl/web/css/border-width/index.html new file mode 100644 index 0000000000..ec17638eff --- /dev/null +++ b/files/pl/web/css/border-width/index.html @@ -0,0 +1,113 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/border-width +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

border-width ustawia szerokość obramowania bloku.

+ + + +

Składnia

+ +
border-width: <border-width> {1,4} | inherit
+
+ +

Wartości <border-width>

+ +
+
<border-width-value>
+
thin | medium | thick | {{cssxref("<length>")}} | {{cssxref("<percentage>")}}
+
thin
+
Cienkie obramowanie.
+
medium
+
Średnie obramowanie.
+
thick
+
Grube obramowanie.
+
<length>
+
Grubość obramowania ma sprecyzowaną wartość. Sprecyzowana szerokość obramowania nie może być ujemna.
+
<percentage>
+
Grubość obramowania ma wartość procentową, w procentach szerokości zawierającego bloku. Sprecyzowane szerokości nie mogą być ujemne.
+
+ +

Uwaga: Wartość em jest również dopuszczalna.

+ +

Powiązane własności

+ + + +

 

+ +

Przykłady

+ +

Zobacz przykład

+ +
element {
+    border-width: thin;
+    border-style: solid;
+    border-color: #000;
+}
+
+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer 
Firefox 
Netscape 
Opera 
+ +

 

+ +

Zobacz również

+ +

{{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }},

+ +

{{ languages( { "de": "de/CSS/border-width", "en": "en/CSS/border-width", "es": "es/CSS/border-width", "fr": "fr/CSS/border-width", "ja": "ja/CSS/border-width" } ) }}

diff --git a/files/pl/web/css/border/index.html b/files/pl/web/css/border/index.html new file mode 100644 index 0000000000..21b8f42f9a --- /dev/null +++ b/files/pl/web/css/border/index.html @@ -0,0 +1,123 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS +translation_of: Web/CSS/border +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność border jest skróconą własnością dla ustawienia indywidualnych wartości własności obramowania w jednym miejscu w arkuszu stylów. border może być używane do ustawienia jednej lub więcej z następujących własności: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}.

+ +

{{cssinfo}}

+ +

Składnia

+ +
border: [border-width || border-style || border-color | inherit] ;
+
+ +

Wartości

+ +
+
border-width
+
Zobacz {{ Cssxref("border-width") }}.
+
border-style 
+
Zobacz {{ Cssxref("border-style") }}.
+
border-color 
+
Zobacz {{ Cssxref("border-color") }}.
+
+ +

Przykłady

+ +

Zobacz przykład

+ +
element {
+    border: 1px solid #000;
+}
+
+ +

Notatki

+ +

Podczas, gdy własności {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }} oraz {{ Cssxref("border-color") }} przyjmują do czterech wartości, ta własność przyjmuje tylko jedną wartość dla każdej własności.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}{{Spec2('CSS3 Backgrounds')}}Technically removes the support for transparent as it is now a valid {{cssxref("<color>")}}; this has no practical influence.
+ Though it cannot be set to another value using the shorthand, border does now reset {{cssxref("border-image")}} to its initial value (none).
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}{{Spec2('CSS2.1')}}Accepts the inherit keyword. Also accepts transparent as a valid color.
{{SpecName('CSS1', '#border', 'border')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown()}}{{CompatUnknown()}}1.0
+
diff --git a/files/pl/web/css/bottom/index.html b/files/pl/web/css/bottom/index.html new file mode 100644 index 0000000000..097a323292 --- /dev/null +++ b/files/pl/web/css/bottom/index.html @@ -0,0 +1,149 @@ +--- +title: bottom +slug: Web/CSS/bottom +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/bottom +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Właściwość bottom określa część pozycji elementu pozycjonowanego.

+ +

Dla elementów pozycjonowanych absolutnie (tych z position: absolute lub position: fixed) określa odległość między dolnym marginesem krawędzi elementu a dolną krawędzią zawierającego go bloku.

+ +

Dla elementów pozycjonowanych relatywnie (tych z position: relative) określa wartość, o jaką element jest przesunięty powyżej jego normalnej pozycji. Jednak własność {{ Cssxref("top") }} unieważnia własność bottom, zatem, jeśli top nie jest ustawione na auto, wartość wyliczona bottom jest ujemną wartością wyliczoną top.

+ +

{{cssinfo}}

+ +

Składnia

+ +
   bottom: <length> | <percentage> | auto | inherit
+
+ +

Wartości

+ +
+
<length> 
+
Długość, używana jak w opisano w podsumowaniu. Może mieć wartość ujemną, zero lub dodatnią.
+
<percentage> 
+
Procenty wysokości zawierającego bloku, używane jak opisano w podsumowaniu.
+
auto 
+
Dla elementów pozycjonowanych absolutnie pozycja elementu oparta jest na własności {{ Cssxref("top") }} i przyjmuje height: auto jako wysokość bazującą na zawartości. Dla elementów pozycjonowanych relatywnie przesunięcie elementu z jego oryginalnej pozycji w oparciu o własność {{ Cssxref("top") }} lub, jeśli top jest również ustawione na auto, nie przesuwa wcale.
+
inherit 
+
Dziedziczy wartość wyliczoną od elementu rodzica (który może nie być zawierającym go blokiem). Ta wartość wyliczona jest wtedy traktowana jak to było 'z <length>, <percentage> lub auto.
+
+ +

Przykłady

+ +
element {
+    position: absolute;
+    bottom: 20px;
+    height: 200px;
+    border: 1px solid #000;
+}
+
+ +

Poniższa przykładowa strona porównuje position:absolute z position:fixed. Kiedy normalny tekst staje się wyższy niż wyświetlana część strony (obszar okna przeglądarki), elementy blokowe pozycjonowane przy użyciu position:absolute przesuwają się razem ze stroną, podczas, gdy elementy blokowe pozycjonowane przy użyciu position:fixed nie przesuwają się. Zauważ, że IE6 nie wspiera position:fixed.

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
+<title>Position at bottom, absolute or fixed</title>
+<style type="text/css">
+p {font-size:30px; line-height:3em;}
+div.pos {width:49%; text-align:center; border:2px solid #00f;}
+div#abs {position:absolute; bottom:0; left:0;}
+div#fix {position:fixed; bottom:0; right:0;}
+</style>
+</head>
+<body>
+  <p>This<br>is<br>some<br>tall,<br>tall,
+    <br>tall,<br>tall,<br>tall<br>content.</p>
+  <div id="fix" class="pos"><p>Fixed</p></div>
+  <div id="abs" class="pos"><p>Absolute</p></div>
+</body>
+</html>
+ +

Notatki

+ +

Dla elementów pozycjonowanych absolutnie, których zawierający je blok jest oparty na elemencie blokowym, ta własność jest przesunięciem względem krawędzi dopełnienia tego elementu.

+ +

Dla elementów pozycjonowanych absolutnie własność bottom nie ma widocznych efektów, jeśli wszystkie wartości {{ Cssxref("top") }}, {{ Cssxref("height") }} i {{ Cssxref("margin-top") }}nie są auto (co jest domyślną wartością dla top oraz height).

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1.0")}}5[1]61.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] In Internet Explorer versions before 7.0, when both {{cssxref("top")}} and bottom are specified, the element position is over-constrained and the {{cssxref("top")}} property has precedence. In that case the computed value of bottom is set to -top, while its specified value is ignored.

diff --git a/files/pl/web/css/box-decoration-break/index.html b/files/pl/web/css/box-decoration-break/index.html new file mode 100644 index 0000000000..0bd73ac2a9 --- /dev/null +++ b/files/pl/web/css/box-decoration-break/index.html @@ -0,0 +1,202 @@ +--- +title: box-decoration-break +slug: Web/CSS/box-decoration-break +tags: + - CSS + - CSS Fragmentation + - CSS Property + - Experimental +translation_of: Web/CSS/box-decoration-break +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

Summary

+ +

The box-decoration-break CSS property specifies how the {{ Cssxref("background") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }}, {{ Cssxref("margin") }} and {{ Cssxref("clip") }} of an element is applied when the box for the element is fragmented.  Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed.  Each piece of the rendering for the element is called a fragment.

+ +

{{cssinfo}}

+ +

Syntax

+ +
box-decoration-break: slice;
+box-decoration-break: clone;
+
+box-decoration-break: initial;
+box-decoration-break: inherit;
+box-decoration-break: unset;
+
+ +

Values

+ +
+
slice
+
The element is rendered as if its box were not fragmented, and then the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.
+
clone
+
Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }} and {{ Cssxref("box-shadow") }}, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with {{ Cssxref("background-repeat") }}: no-repeat may be repeated multiple times.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Inline box fragments

+ +

An inline element that contains line-breaks styled with:

+ +
.example {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow:
+    8px 8px 10px 0px deeppink,
+    -5px -5px 5px 0px blue,
+    5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+}
+
+...
+<span class="example">The<br>quick<br>orange fox</span>
+ +

Results in:

+ +

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

+ +

Adding box-decoration-break:clone to the above styles:

+ +
  -webkit-box-decoration-break: clone;
+  -o-box-decoration-break: clone;
+  box-decoration-break: clone;
+
+ +

Results in:

+ +

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

+ +

You can try the two inline examples above in your browser.

+ +

Here's an example of an inline element using a large border-radius value. The second "iM" has a line-break between the "i" and the "M". For comparison, the first "iM" is without line-breaks. Note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.

+ +

A screenshot of the rendering of the second inline element example.

+ +

Try the above example in your browser.

+ +

Block box fragments

+ +

A block element with similar styles as above, first without any fragmentation:

+ +

A screenshot of the rendering of the block element used in the examples without any fragmentation.

+ +

Fragmenting the above block into three columns results in:

+ +

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

+ +

Note that stacking these pieces vertically will result in the non-fragmented rendering.

+ +

Now the same example styled with box-decoration-break:clone

+ +

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

+ +

Note here that each fragment has an identical replicated border, box-shadow and background.

+ +

You can try the block examples above in your browser.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}{{ Spec2('CSS3 Fragmentation') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support on inline elements{{ CompatVersionUnknown() }}{{property_prefix("-webkit")}}{{CompatGeckoDesktop(32.0)}} [1]{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{property_prefix("-o")}}{{ CompatUnknown() }}
Support on non-inline element{{CompatNo}}{{CompatGeckoDesktop(32.0)}} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support on inline elements{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("32.0")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Support on non-inline element{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("32.0")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}
+
+ +

[1] Note that Firefox implemented an non-standard version of this property before Firefox 32 named {{ Cssxref("-moz-background-inline-policy") }}. That property is unsupported since Firefox 32.

+ +

See also

+ + diff --git a/files/pl/web/css/box-direction/index.html b/files/pl/web/css/box-direction/index.html new file mode 100644 index 0000000000..eb85a1dad0 --- /dev/null +++ b/files/pl/web/css/box-direction/index.html @@ -0,0 +1,72 @@ +--- +title: '-moz-box-direction' +slug: Web/CSS/box-direction +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/box-direction +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

{{warning("This property reflects an old version of the specification. The -moz-box-direction will only be used for XUL while the standard box-direction has been replaced by flex-direction (which belongs to the CSS Flexible Box Layout Module currently under the Working Draft status).")}}

+ +

W aplikacjach opartych na Mozilli -moz-box-direction określa, czy pudełko rozkłada swoją zawartość normalnie (od górnej lub lewej krawędzi), czy w odwróceniu (od dolnej lub prawej krawędzi).

+ + + +

Składnia

+ +
-moz-box-direction: normal | reverse
+
+ +

Wartości

+ +
+
normal
+
Pudełko rozkłada swoją zawartość od początku (lewej lub górnej krawędzi).
+
reverse
+
Pudełko rozkłada swoją zawartość od końca (prawej lub dolnej krawędzi).
+
+ +

Przykłady

+ +
vbox.example {
+	-moz-box-direction: reverse; /* układ od dołu do góry */
+}
+
+ +

Notatki

+ +

Krawędź pudełka określona jakostart dla docelowego układu zależy od orientacji pudełka:

+ + + + + + + + + + + + +
Poziomalewa
Pionowagórna
+ +

Krawędź przeciwna do początkowej określana jest jakoend.

+ +

Jeśli kierunek jest ustawiony przy użyciu atrybutu dir elementu, wtedy styl jest ignorowany.

+ +

Zobacz także

+ +

CSS:-moz-box-orient

diff --git a/files/pl/web/css/box-shadow/index.html b/files/pl/web/css/box-shadow/index.html new file mode 100644 index 0000000000..feb07aaf0f --- /dev/null +++ b/files/pl/web/css/box-shadow/index.html @@ -0,0 +1,222 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - Adnotacja + - CSS + - CSS3 + - Grafika + - Referencja + - Tło CSS + - Tło CSS3 + - Układ + - Właściwość CSS + - sieć +translation_of: Web/CSS/box-shadow +--- +

{{CSSRef()}}

+ +

 

+ +
+

Generator box-shadow

+ +

Interaktywne narzędzie pozwalające stworzyć efekt box-shadow.

+
+ +

Właściwość CSS box-shadow określa jeden lub więcej efektów cieniowych jako przecinkowo-rozdzielaną listę. Pozwala na rzucenie cienia z prawie każdego elementu. Jeśli {{ cssxref("-moz-border-radius") }} jest zadeklarowany na elemencie na którym zadeklarowany jest także box-shadow, właściwość przybiera wartość z {{ cssxref("-moz-border-radius") }} i tworzy zaokrąglony cień. Użycie box-shadow wraz z {{ cssxref("z-index") }} daje taki sam efekt jak wielokrotne użycie cienia tekstu (pierwszy zadeklarowany cień jest wyświetlany ponad wszystkimi).

+ + + +

Składnia

+ +
box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
+ +

Wartości

+ +
+
inset
+
Jeśli inset nie zostanie ustalony (domyślnie), cień będzie wyświetlany ponad elementem. Jeśli zostanie użyty inset, cień zawrze się wewnątrz elementu. Cienie wewnętrzne są rysowane wewnątrz elementu (nawet przeźroczyste), ponad tłem, ale poniżej zawartości.
+
<offset-x> <offset-y>
+
Są dwie wartości {{ cssxref("<length>") }}, które określają odległość. <offset-x> oznacza odległość poziomą. Ujemne wartości umieszczają cień na lewo od elementu. <offset-y> wyznacza odległość pionową. Ujemne wartości umiesczają cień ponad elementem. Zobacz {{ cssxref("<length>") }} dla możliwych jednostek.
+ Jeśli obydwie wartości przyjmują 0, cień jest umiejscowiony za elementem (i może swtorzyć efekt rozmycia jeśli <blur-radius> oraz/lub <spread-radius> jest określony).
+
<blur-radius>
+
To jest trzecia wartość {{ cssxref("<length>") }}. Im większa, tym większe jest rozmycie i w efekcie cień jest większy oraz łagodniejszy. Ujemne wartości są niedozwolone. Jeśli nie ustalona, przyjmuje wartość domyślną 0 (krawędź cienia jest ostra).
+
<spread-radius>
+
To jest czwarta wartość {{ cssxref("<length>") }}. Nieujemne wartości będą powodować zwiększanie się cienia, a ujemne jego zmniejszanie. Jeśli nie ustalona, domyślnie przyjmuje wartość 0 (cień będzie tego samego rozmiaru co element).
+
<color>
+
Zobacz {{cssxref("<color>")}} dla możliwych słów kluczowych oraz notacji.
+ Jeśli nie ustalona, przyjmuje kolor zależny od przeglądarki - aktualnie jest to wartość {{ cssxref("color") }}, lecz Safari tworzy przeźroczysty cień w tej sytuacji.
+
+ +

Przykłady

+ + + +
box-shadow: 60px -16px teal;
+ +
box-shadow: 10px 5px 5px black;
+ +
box-shadow: 3px 3px red, -1em 0 0.4em olive;
+ +
box-shadow: inset 5em 1em gold;
+ +
box-shadow: 0 0 1em gold;
+ +
box-shadow: inset 0 0 1em gold;
+ +
box-shadow: inset 0 0 1em gold, 0 0 1em red;
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}{{ Spec2('CSS3 Backgrounds') }} 
+ +

Zgodność z przeglądarkami

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WłaściwośćChromeFirefox (Gecko)Internet ExplorerOperaSafari
Podstawowa obsługa10.0
+ 1.0{{ property_prefix("-webkit") }}		{{ CompatGeckoDesktop("2.0") }}
+ {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}		9.0 (Zobacz notatki)10.55.1 (WebKit 534)
+ 3.0 (WebKit 522){{ property_prefix("-webkit") }}
Wielokrotne cienie10.0
+ 1.0{{ property_prefix("-webkit") }}		{{ CompatGeckoDesktop("2.0") }}
+ {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}		9.010.55.1 (WebKit 534)
+ 3.0 (WebKit 522){{ property_prefix("-webkit") }}
Wartość inset10.0
+ 4.0{{ property_prefix("-webkit") }}		{{ CompatGeckoDesktop("2.0") }}
+ {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}		9.010.55.1 (WebKit 534)
+ 5.0 (WebKit 533){{ property_prefix("-webkit") }}
spread-radius10.0
+ 4.0{{ property_prefix("-webkit") }}		{{ CompatGeckoDesktop("2.0") }}
+ {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}		9.010.55.1 (WebKit 534)
+ 5.0 (WebKit 533){{ property_prefix("-webkit") }}
+ +

 

+ +

 

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WłaściwośćiOS SafariOpera MiniOpera MobileAndroid Browser
Podstawowa obsługa +

5.0
+ {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}

+ 		{{ CompatUnknown }}ObsługujeObsługuje (2.2 tested) {{ property_prefix("-webkit") }}
Wielokrotne cienie5.0
+ {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}		{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}
Wartość inset5.0
+ {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}		{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}
spread-radius5.0
+ {{ CompatVersionUnknown }}{{ property_prefix("-webkit") }}		{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}
+
+ +

Notatki

+ + diff --git a/files/pl/web/css/box-sizing/index.html b/files/pl/web/css/box-sizing/index.html new file mode 100644 index 0000000000..35cb212b99 --- /dev/null +++ b/files/pl/web/css/box-sizing/index.html @@ -0,0 +1,45 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS +translation_of: Web/CSS/box-sizing +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

box-sizing jest używane przez przeglądarki oparte na Mozilli do zmiany domyślnego modelu pudełkowego CSS, używanego do obliczania szerokości i wysokości elementów. Możliwe jest użycie tej własności do zezwolenia Mozilli na naśladowanie zachowania przeglądarek, które nieprawidłowo wspierają specyfikację modelu pudełkowego CSS, chociaż nie jest to zalecane, jako że większość przeglądarek zgodnych ze standardami nie wspiera tej własności.

+ + + +

Składnia

+ +
box-sizing: content-box | border-box | padding-box
+
+ +

Wartości

+ +
+
content-box
+
Jest to domyślny styl, jak określa go standard CSS. Własności width i height są wymierzane zawierając tylko zawartość, ale nie border, margin lub padding.
+
padding-box
+
Własności width i height zawierają rozmiar dopełnienia (padding), ale nie zawierają obramowania (border) ani marginesu (margin).
+
border-box
+
Własności width i height zawierają dopełnienie i obramowanie, ale nie margines. Jest to model pudełkowy używany przez Internet Explorer, kiedy dokument nie jest w trybie zgodności ze standardami .
+
+ +

Przykłady

+ +
.exampleone {
+	box-sizing: padding-box;
+}
+
+ +
 
diff --git a/files/pl/web/css/clear/index.html b/files/pl/web/css/clear/index.html new file mode 100644 index 0000000000..5948d08cc0 --- /dev/null +++ b/files/pl/web/css/clear/index.html @@ -0,0 +1,98 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/clear +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Właściwość clear określa, czy dany element pojawi się obok pływających elementów, które go poprzedzają, czy też ma zostać przesunięty poniżej tychże.

+ + + +

Składnia

+ +
clear: none | left | right | both | inherit
+
+ +

Wartości

+ + + +

Przykłady

+ +

Zobacz przykład

+ +
h1 { clear: none }
+h2 { clear: right }
+ +

Notatki

+ +

Własność clear stosuje się zarówno do pływających, jak i niepływających elementów.

+ +

Kiedy odnosi się do niepływających elementów blokowych, przesuwa ona krawędź obramowania elementu w dół, dopóki nie znajdzie się pod krawędzią marginesu wszystkich danych elementów pływających. To przemieszczenie (kiedy ma miejsce) nie powoduje załamania marginesu.

+ +

Kiedy odnosi się do elementów pływających, przesuwa krawędź marginesu tego elementu poniżej krawędzi marginesu wszystkich danych elementów pływających. Wpływa to na pozycję późniejszych elementów pływających, ponieważ te nie mogą być pozycjonowane wyżej niż poprzednie.

+ +

Elementy pływające, na które wpływa własność clear są wcześniejszymi elementami pływającymi w tym samym bloku formatowania kontekstu.

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer4
Firefox1
Netscape4
Mozilla1
+ +

 

+ +

Zobacz także

+ +

{{ Cssxref("float") }}

+ +
 
+ +

{{ languages( { "en": "en/CSS/clear", "fr": "fr/CSS/clear" } ) }}

diff --git a/files/pl/web/css/clip/index.html b/files/pl/web/css/clip/index.html new file mode 100644 index 0000000000..3ade3a5941 --- /dev/null +++ b/files/pl/web/css/clip/index.html @@ -0,0 +1,92 @@ +--- +title: clip +slug: Web/CSS/clip +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/clip +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność CSS clip określa, jaka część elementu jest widoczna.

+ + + +

Składnia

+ +
clip: <shape> | auto | inherit
+
+ +

Wartości

+ +
+
{{cssxref("<shape>")}}
+
określa kształt w formie rect(<top>, <right>, <bottom>, <left>);
+
{{ Cssxref("auto") }}
+
 
+
{{ Cssxref("inherit") }}
+
 
+
+ +

Przykłady

+ +
  img.clip04 {
+    clip: rect(10px, 20px, 20px, 10px);
+  }
+
+ +

Notatki

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer4
Firefox1
Netscape4
Opera7
Safari1
+ +

Zobacz także

+ +

{{ Cssxref("overflow") }}, {{ Cssxref("position") }}

+ +

{{ languages( { "en": "en/CSS/clip", "fr": "fr/CSS/clip" } ) }}

diff --git a/files/pl/web/css/color/index.html b/files/pl/web/css/color/index.html new file mode 100644 index 0000000000..20f670855e --- /dev/null +++ b/files/pl/web/css/color/index.html @@ -0,0 +1,62 @@ +--- +title: color +slug: Web/CSS/color +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/color +--- +

{{ CSSRef() }} +

+

Podsumowanie

+

color ustawia pierwszoplanowy kolor dla zawartości tekstowej elementu. +

+ +

Składnia

+
color: color | inherit
+
+

Wartości

+
color 
Kolor może być określony zgodnie z poniższymi zasadami: +
+ +

Przykłady

+

Poniżej są wszystkie sposoby na zrobienie czerwonego tekstu w elemencie: +

+
element { color: red }
+element { color: #f00 }
+element { color: #ff0000 }
+element { color: rgb(255,0,0) }
+element { color: rgb(100%, 0%, 0%) }
+element { color: hsl(0, 100%, 50%) } {{ Fx_minversion_inline(3) }}
+
+

Jeśli chcesz uwzględnić wartość kanału alfa by uwzględnić przezroczystość, możesz użyć kolorów w formacie RGBA lub HSLA: +

+
element { color: rgba(255, 0, 0, 0.5) } {{ Fx_minversion_inline(3) }}
+element { color: hsla(0, 100%, 50%, 0.5) } {{ Fx_minversion_inline(3) }}
+
+

Oba powyższe przykłady definiują kolor z przezroczystością ustawioną na 0.5 lub 50%. +

+

Notatki

+ +

Specyfikacje

+ +

Zgodność z przeglądarką

+
+
+{{ languages( { "en": "en/CSS/color", "es": "es/CSS/color", "fr": "fr/CSS/color", "ja": "ja/CSS/color" } ) }} diff --git a/files/pl/web/css/content/index.html b/files/pl/web/css/content/index.html new file mode 100644 index 0000000000..b9d75f21cc --- /dev/null +++ b/files/pl/web/css/content/index.html @@ -0,0 +1,107 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/content +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność content określa, co jest wyświetlane wewnątrz pseudoelementów  :before i :after.

+ + + +

Składnia

+ +
content : normal | none | inherit | no-open-quote | no-close-quote ;
+
+ +
content : [ <string> | <counter> | attr(<identifier>) | <uri>
+                     | open-quote | close-quote]+ ;
+
+ +

Wartości

+ +
+
{{ Cssxref("none") }}
+
{{ Cssxref("normal") }}
+
{{cssxref("<string>")}}
+
{{cssxref("<uri>")}}
+
jeden lub więcej identyfikatorów URI odsyłających do zewnętrznego źródła, takiego jak obrazek.
+
{{cssxref("<counter>")}}
+
open-quote i close-quote
+
będzie to zamienione przez odpowiednie ciągi z własności 'quotes'.
+
no-open-quote i no-close-quote
+
zwiększa (zmniejsza) poziom zagnieżdżeń cytatów, ale nie dodaje żadnej zawartości.
+
attr(attribute-name)
+
będzie to zamienione przez wartość ciągu atrybutu węzła.
+
+ +

Przykłady

+ +
q:lang { quotes: '"' '"' "'" "'" }
+q:before { content: open-quote }
+q:after  { content: close-quote }
+
+ +
h1:before {
+  content: "Chapter: ";
+}
+
+ +

Notatki

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer?
Firefox?
Netscape?
Opera?
Safari?
+ +

Zobacz także

+ +

{{ Cssxref("quotes") }}

diff --git a/files/pl/web/css/counter-increment/index.html b/files/pl/web/css/counter-increment/index.html new file mode 100644 index 0000000000..00cdfff28b --- /dev/null +++ b/files/pl/web/css/counter-increment/index.html @@ -0,0 +1,67 @@ +--- +title: counter-increment +slug: Web/CSS/counter-increment +tags: + - CSS + - CSS List + - CSS Property +translation_of: Web/CSS/counter-increment +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

counter-increment zwiększa wartość liczników CSS o podaną wielkość.

+ + + +

Składnia

+ +
counter-increment: [<identyfikator> <liczba całkowita>?]+ | inherit | none
+
+ +

Wartości

+ +
+
identyfikator
+
Nazwa licznika, którego wartość jest zwiększana.
+
integer
+
Wartość, która ma być dodana do licznika. Domyślnie 1.
+
+ +

Można zwiększyć wartość dowolnej liczby liczników oddzielając wszystkie spacją.

+ +

Powiązane własności

+ + + +

Przykłady

+ +
h1 {
+  counter-increment: rozdzial sekcja 2 strona; /* Zwiększa wartość liczników
+                                                      rozdział i strona o 1,
+                                            oraz wartość licznika sekcja o 2 */
+}
+
+ +

Powyższy zapis jest równoważny z:

+ +
h1 {
+  counter-increment: rozdzial 1 sekcja 2 strona 1;
+}
+
+ +

Zobacz także

+ + diff --git a/files/pl/web/css/counter-reset/index.html b/files/pl/web/css/counter-reset/index.html new file mode 100644 index 0000000000..ff2fcd5b91 --- /dev/null +++ b/files/pl/web/css/counter-reset/index.html @@ -0,0 +1,66 @@ +--- +title: counter-reset +slug: Web/CSS/counter-reset +tags: + - CSS + - CSS List + - CSS Property + - Reference +translation_of: Web/CSS/counter-reset +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

counter-reset ustawia wartość liczników CSS.

+ + + +

Składnia

+ +
counter-reset: [ <identyfikator> <liczba całkowita>? ]+ | inherit | none
+
+ +

Wartości

+ +
+
identyfikator
+
Nazwa licznika, którego wartość jest ustawiana.
+
liczba całkowita
+
Wartość, którą ma przyjąć dany licznik przy każdym pojawieniu się danego elementu. Domyślnie 0.
+
+ +

Można ustawić dowolną liczbę liczników oddzielając wszystkie spacją.

+ +

Powiązane własności

+ + + +

Przykłady

+ +
h1 {
+  counter-reset: rozdzial sekcja 1 strona; /* Ustawia wartość liczników
+                                                rozdział i strona na 0,
+                                      oraz wartość licznika sekcja na 1 */
+}
+
+ +

Powyższy zapis jest równoważny z:

+ +
h1 {
+  counter-reset: rozdzial 0 sekcja 1 strona 0;
+}
+
+ +

Zobacz także

+ +

Liczniki CSS, {{ Cssxref("counter-increment") }}

diff --git a/files/pl/web/css/css_colors/index.html b/files/pl/web/css/css_colors/index.html new file mode 100644 index 0000000000..48b67295d0 --- /dev/null +++ b/files/pl/web/css/css_colors/index.html @@ -0,0 +1,119 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +--- +
{{CSSRef}}
+ +

CSS Colors is a module of CSS that deals with colors, color types and transparency.

+ +

Reference

+ +

Properties

+ +
+ +
+ +

CSS Data Types

+ +

{{cssxref("<color>")}}

+ +

Guides

+ +

None.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

See also

+ + diff --git a/files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html b/files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html new file mode 100644 index 0000000000..7907144f10 --- /dev/null +++ b/files/pl/web/css/css_colors/narzedzie_doboru_kolorow/index.html @@ -0,0 +1,3241 @@ +--- +title: Narzędzie doboru kolorów +slug: Web/CSS/CSS_Colors/Narzedzie_doboru_kolorow +tags: + - CSS + - CSS Kolory + - HTML Kolory + - Narzędzia + - kolor + - kolory + - narzędzie + - narzędzie do wybierania kolorów + - wybieranie kolorów +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML Content

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{CSSRef}}

+ +

To narzędzie ułatwia tworzenie, wybieranie i eksperymentowanie z niestandadrowymi kolorami w sieci. Umożliwia także konwersję pomiędzy różnymi formatami kolorów obsługiwanymi przez CSS, w tym: kolory HEXA, RGB (Red/Green/Blue) i HSL (Hue/Saturation/Lightness). Możliwa jest też kontrola kanału alpha w formatach RGB (rgba) i HSL.

+ +

Każdy wybrany kolor prezentowany jest we wszystkich trzech standardowych formatach CSS . Dodatkowo, bazując na obecnie wybranym kolorze, tworzona jest paleta HSL, HSV oraz alpha. Okno wyboru koloru "zakraplacz" można przełączać pomiędzy formatami HSL i HSV. Przeciągając kolory do pojemnika na dole i poruszając nimi nad sobą możesz przetestować jak wyglądają obok siebie. Zmieniaj względną wartość z-index aby przesunąc kolor na wierzch lub schować za innym.

+ +

To narzędzie pozwoli ci odnależć idealne kolory CSS do wykorzystania w twoim HTML.

+ +
{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}
+ +

Wygenerowane kolory można użyć wszędzie gdzie potrzeba w obrębie CSS i HTML, chyba że stwierdzono inaczej.

+ +

Zobacz też

+ +

Więcej o używaniu kolrów, sprawdź:

+ + diff --git a/files/pl/web/css/css_flexible_box_layout/index.html b/files/pl/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..ae8c92e4d8 --- /dev/null +++ b/files/pl/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,156 @@ +--- +title: Elastyczny model pudełkowy CSS +slug: Web/CSS/CSS_Flexible_Box_Layout +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +
{{CSSRef}}
+ +

Elastyczny model pudełkowy CSS jest modułem CSS definiującym model pudełkowy CSS zoptymalizowany do projektowania interfejsów użytkownika i układania elementów wzdłuż osi. W elastycznym modelu pudełkowym dzieci elastycznego kontenera mogą być ułożone w dowolnym kierunku oraz zmieniać swoje rozmiary albo rosnąc w celu zajęcia nieużytej przestrzeni albo kurcząc się by uniknąć przepełnienia kontenera. Zarówno horyzontalne jak i wertykalne ułożenie dzieci może być łatwo kontrolowane.

+ +

Prosty przykład

+ +

W poniższym przykładzie kontenerowi ustawiono display: flex co oznacza, że trójka dzieci stała się elastycznymi elementami. Wartość justify-content została ustawiona na space-between w celu równego rozproszenia elementów wzdłuż głównej osi. Między elementami umieszczona zostanie jednakowa ilość przestrzeni, a prawy i lewy element zostaną wypchnięte do krawędzi kontenera. Ponadto elementy są rozciągnięte na całą długość osi prostopadłej z powodu domyślnej wartości align-items wynoszącej stretch. Elementy rozciągają się do maksymanlej wysokości elastycznego kontenera sprawiając, że każdy z nich ma wysokość najwyższego.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

+ +

Odnośniki

+ +

Atrybuty CSS

+ +
+ +
+ +

Słownik pojęć

+ +
+ +
+ +

Przewodniki

+ +
+
Podstawowe zagadnienia Flexboksa
+
Przegląd funkcji flexboksa
+
Powiązania flexboksa z innymi sposobami układu
+
Jak flexbox jest powiązany z innymi rodzajami układu i innymi specyfikacjami CSS
+
Rozmieszczanie elementów w elastycznym kontenerze
+
Jak atrybuty ustawiania elementów dziłają z flexboksem.
+
Kolejność elementów elastycznego kontenera
+
Wyjaśnienie różnych sposobów na zmienianie kolejności i kierunku elementów oraz omówienie potencjalnych problemów z tym związanych.
+
Kontrola proporcji elastycznych elementów wzdłuż osi głównej
+
Artykuł wyjaśniający atrybuty flex-grow, flex-shrink oraz flex-basis.
+
Przechodzenie elastycznych elementów do nowego wiersza
+
Tworzenie wielolinijkowych kontenerów flex oraz kontrola wyświetlania elementów w tych linijkach.
+
Typowe zastosowania flexboksa
+
Częste wzorce projektowe będące typowymi zastosowaniami flexboksa.
+
Kompatybilność wsteczna flexboksa
+
Stan flexboksa w przeglądarkach, problemy "interoperability", wsparcie starszych przeglądarek i wersji specyfikacji.
+
+ + + +

Specyfikacje

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.
+ +

Kompatybilność przeglądarek

+ +

{{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")}}
+
+ +

 

+ +

Zobacz również

+ +
+
Flexbugs
+
tworzona przez społeczność lista błędów flexboksa w przeglądarkach i sposoby ich obejścia
+
Cross-browser Flexbox mixins
+
Artykuł zawierający zbiór mixinów dla tych którzy chcą stworzyć wieloprzeglądarkowe rozwiązania typu flexbox działające nawet w starszych przeglądarkach nie wspierających nowoczesnej składni flexbox.
+
+ +

 

diff --git a/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html new file mode 100644 index 0000000000..eb9d550390 --- /dev/null +++ b/files/pl/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -0,0 +1,609 @@ +--- +title: Auto-placement in CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +

Poza możliwością umieszczania elementów

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('placement_1', '500', '230') }}

+
+ +

Default rules for auto-placement

+ +

As you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. The default flow is to arrange items by row. Grid will lay an item out into each cell of row 1. If you have created additional rows using the grid-template-rows property then grid will continue placing items in these rows. If the grid does not have enough rows in the explicit grid to place all of the items new implicit rows will be created.

+ +

Sizing rows in the implicit grid

+ +

The default for automatically created rows in the implicit grid is for them to be auto-sized. This means that they will contain the content added to them without causing an overflow.

+ +

You can however control the size of these rows with the property grid-auto-rows. To cause all created rows to be 100 pixels tall for example you would use:

+ +
+ + +
<div class="wrapper">
+    <div>One</div>
+    <div>Two</div>
+    <div>Three</div>
+    <div>Four</div>
+    <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+ +

{{ EmbedLiveSample('placement_2', '500', '330') }}

+
+ +

You can use {{cssxref("minmax","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.

+ +
+ + +
<div class="wrapper">
+     <div>One</div>
+     <div>Two</div>
+     <div>Three</div>
+     <div>Four
+     <br>This cell
+     <br>Has extra
+     <br>content.
+     <br>Max is auto
+     <br>so the row expands.
+     </div>
+     <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ +

{{ EmbedLiveSample('placement_3', '500', '330') }}

+
+ +

You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as 200px. This will continue for as long as content is added to the implicit grid. Track listings are not supported in Firefox.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px 200px;
+}
+
+ +

{{ EmbedLiveSample('placement_4', '500', '330') }}

+
+ +

Auto-placement by column

+ +

You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of column. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}, this works in the same way as {{cssxref("grid-auto-rows")}}.

+ +

In this next example I have created a grid with three row tracks of 200 pixels height. I am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items.

+ +
+
.wrapper {
+    display: grid;
+    grid-template-rows: repeat(3, 200px);
+    grid-gap: 10px;
+    grid-auto-flow: column;
+    grid-auto-columns: 300px 100px;
+}
+
+ + + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+ +

{{ EmbedLiveSample('placement_5', '500', '640') }}

+
+ +

The order of auto placed items

+ +

A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be auto-placed. This can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the Grid item placement algorithm, however for most of us we just need to remember a few simple rules for our items.

+ +

Order modified document order

+ +

Grid places items that have not been given a grid position in what is described in the specification as “order modified document order”. This means that if you have used the order property at all, the items will be placed by that order, not their DOM order. Otherwise they will stay by default in the order that they are entered in the document source.

+ +

Items with placement properties

+ +

The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don’t start after the position of a placed item that comes before them.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+
+ +

{{ EmbedLiveSample('placement_6', '500', '450') }}

+
+ +

Deal with items that span tracks

+ +

You can use placement properties while still taking advantage of auto-placement. In this next example I have added to the layout by setting odd items to span two tracks both for rows and columns. I do this with the {{cssxref("grid-column-end")}} and {{cssxref("grid-row-end")}} properties and setting the value of this to span 2. What this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks.

+ +

You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn’t fit into a track, it will move to the next row until it finds a space the item can fit in.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+
+ +

{{ EmbedLiveSample('placement_7', '500', '770') }}

+
+ +

Filling in the gaps

+ +

So far, other than items we have specifically placed, grid is always progressing forward and keeping items in DOM order. This is generally what you want, if you are laying out a form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap. However sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it.

+ +

To do this, add the property {{cssxref("grid-auto-flow")}} with a value of dense to the container. This is the same property you use to change the flow order to column, so if you were working in columns you would add both values grid-auto-flow: column dense.

+ +

Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+}
+
+ +

{{ EmbedLiveSample('placement_8', '500', '730') }}

+
+ +

Anonymous grid items

+ +

There is a mention in the specification of anonymous grid items. These are created if you have a string of text inside your grid container, that is not wrapped in any other element. In the example below we have three grid items, assuming you had set the parent with a class of grid to display: grid. The first is an anonymous item as it has no enclosing markup, this item will always be dealt with via the auto-placement rules. The other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid.

+ +
<div class="grid">
+  I am a string and will become an anonymous item
+  <div>A grid item</div>
+  <div>A grid item</div>
+</div>
+
+ +

Anonymous items are always auto-placed because there is no way to target them. Therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules.

+ +

Use cases for auto-placement

+ +

Auto-placement is useful whenever you have a collection of items. That could be items that do not have a logical order such as a gallery of photos, or product listing. In that case you might choose to use the dense packing mode to fill in any holes in your grid. In my image gallery example I have some landscape and some portrait images. I have set landscape images – with a class of landscape to span two column tracks. I then use grid-auto-flow: dense to create a densely packed grid.

+ +
+
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    grid-gap: 10px;
+    grid-auto-flow: dense;
+    list-style: none;
+    margin: 1em auto;
+    padding: 0;
+    max-width: 800px;
+}
+.wrapper li {
+    border: 1px solid #ccc;
+}
+.wrapper li.landscape {
+    grid-column-end: span 2;
+}
+.wrapper li img {
+   display: block;
+   object-fit: cover;
+   width: 100%;
+   height: 100%;
+}
+
+ +
<ul class="wrapper">
+   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
+   <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li>
+   <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li>
+   <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li>
+   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
+   <li class="landscape"><img src="https://placehold.it/350x200" alt="placeholder"></li>
+   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="https://placehold.it/200x300" alt="placeholder"></li>
+</ul>
+
+ +

{{ EmbedLiveSample('placement_9', '500', '1300') }}

+
+ +

Auto-placement can also help you lay out interface items which do have logical order. An example is the definition list in this next example. Definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of dt and dd items. In my example I am allowing auto-placement to place the items, however I have classes that start a dt in column 1, and dd in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.

+ +
+ + +
<div class="wrapper">
+   <dl>
+       <dt>Mammals</dt>
+       <dd>Cat</dd>
+       <dd>Dog</dd>
+       <dd>Mouse</dd>
+       <dt>Fish</dt>
+       <dd>Guppy</dd>
+       <dt>Birds</dt>
+       <dd>Pied Wagtail</dd>
+       <dd>Owl</dd>
+   </dl>
+</div>
+
+ +
dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  max-width: 300px;
+  margin: 1em;
+  line-height: 1.4;
+}
+dt {
+  grid-column: 1;
+  font-weight: bold;
+}
+dd {
+   grid-column: 2;
+ }
+
+ +

{{ EmbedLiveSample('placement_10', '500', '230') }}

+
+ +

What can’t we do with auto-placement (yet)?

+ +

There are a couple of things that often come up as questions. Currently we can’t do things like target every other cell of the grid with our items. A related issue may have already come to mind if you followed the last guide about named lines on the grid. It would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.There is an issue raised about this on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.

+ +

It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.

+ + diff --git a/files/pl/web/css/css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..0894a70679 --- /dev/null +++ b/files/pl/web/css/css_grid_layout/index.html @@ -0,0 +1,245 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS +translation_of: Web/CSS/CSS_Grid_Layout +--- +

CSS Grid Layout jest najlepszą metodą aby podzielić strone na części lub definiowanie relacji takich jak rozmiar, pozycja i warstwa, pomiędzy podstawowymi elementami HTML.

+ +

Podobnie do tabel (ang. "tables"), rozmieszczenie grid (ang. "siatka") pozwala autorowi wyrównać elementy w kolumny i wiersze. Jednakowoż grid pozwala na wiele więcej ułożeń niż tabele. Na przykład kontener grid potrafi spozycjonować elementy wewnątrz siebie w taki sposób aby na siebie nachodziły oraz używały warstw, podobnie jak elementy pozycjonowane przy użyciu CSS.

+ +

Przykład

+ +

Przykład poniżej pokazuje trzy kolumnową ścieżkę siatki z utworzonymi nowymi wierszami z ustawioną własnością minimalną na 100 pikseli i wartością maksymalną ustawioną na auto. Elementy zostały ustawione na siatce przy pomocy miejsc opartych na liniach siatki.

+ +
+ + +

HTML

+ +
<div class="wrapper">
+  <div class="one">Jeden</div>
+  <div class="two">Dwa</div>
+  <div class="three">Trzy</div>
+  <div class="four">Cztery</div>
+  <div class="five">Pięć</div>
+  <div class="six">Sześć</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+
+ +

{{ EmbedLiveSample('example', '500', '440') }}

+
+ +

Reference

+ +

Własności CSS

+ +
+ +
+ +

CSS functions

+ +
+ +
+ +

CSS data types

+ +
+ +
+ +

Glossary entries

+ +
+ +
+ +

Poradniki

+ +
+ +
+ +

Zewnętrzne źródła

+ + + +

Specyfikacja

+ + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.
+ + diff --git a/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html b/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html new file mode 100644 index 0000000000..93ac130fce --- /dev/null +++ b/files/pl/web/css/css_grid_layout/realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_css/index.html @@ -0,0 +1,594 @@ +--- +title: Projektowanie typowych układów za pomocą układu siatki CSS +slug: >- + Web/CSS/CSS_Grid_Layout/Realizacja_typowych_ukladow_za_pomoca_ukladu_siatki_CSS +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +

Na zakończenie tego zestawu poradników do Układów Siatki CSS (ang. CSS Grid Layout), przejdę przez kilka różnych układów, demonstrujących niektóre z  technik, których można użyć podczas projektowania z użyciem tej technologii. Przyjrzymy się przykładowi, korzystającemu z wartości grid-template-areas, typowemu 12-kolumnowemu systemowi elastycznej siatki, a także wykazowi produktów stworzonemu za pomocą automatycznego rozmieszczania. Jak wynika z wyżej przedstawionych przykładów, często istnieje więcej niż jeden sposób, aby osiągnąć pożądany efekt z układem siatki. Wybierz  tę metodę, która jest najbardziej pomocna w rozwiązaniu problemów przed którymi stoisz i  dla projektów, które realizujesz.

+ +

Responsywny układ strony korzystający z 1 do 3 kolumn o zmiennej pozycji elementów przy użyciu grid-template-areas

+ +

Znacząca część stron internetowych jest odmianą tego typu układu; zawierającego treść, panele boczne, nagłówek oraz stopkę. Podczas projektowania responsywnej witryny, możesz zechcieć wyświetlić stronę w układzie pojedynczej kolumny dla małych ekranów, dla  wyświetlacza o wartości granicznej dodać panel boczny, a dla najszerszych ekranów wprowadzić układ w trzech kolumnach.

+ +

Image of the three different layouts created by redefining our grid at two breakpoints.

+ +

Zamierzam stworzyć taki układ korzystając z  nazwanych pól szablonu, o których możecie dowiedzieć się więcej z kursu Grid template areas.

+ +

Mój szkielet  składa się z pojemnika zawierającego elementy z przeznaczeniem na: nagłówek i stopkę, główną zawartość strony, menu, panel boczny oraz blok przeznaczony na reklamę.

+ +
+ + +
<div class="wrapper">
+        <header class="main-head">The header</header>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="">Nav 1</a></li>
+                <li><a href="">Nav 2</a></li>
+                <li><a href="">Nav 3</a></li>
+            </ul>
+        </nav>
+        <article class="content">
+            <h1>Main article area</h1>
+            <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p>
+        </article>
+        <aside class="side">Sidebar</aside>
+        <div class="ad">Advertising</div>
+        <footer class="main-footer">The footer</footer>
+</div>
+
+ +

Używamy cechy {{cssxref("grid-template-areas")}} by stworzyć układ strony. Nie korzystamy jeszcze z zapytań o środki dostępu (ang. media-queries). Musimy teraz nadać odpowiednie nazwy polom. Żeby to zrobić skorzystamy z właściwości {{cssxref("grid-area")}}.

+ +
.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+
+ +

Sama w sobie, operacja ta nie tworzy żadnego układu, aczkolwiek pozwala nam na to, dzięki nadanym nazwom.   Nadal nie korzystając z zapytań o urządzenie dostępu, nadam teraz stronie układ tworzony z myślą o wyświetlaczach mobilnych. W tym wypadku zachowam pierwotną kolejność elementów, taką jak w układzie szkieletu, starając się uniknąć najmniejszego rozdźwięku pomiędzy szablonem znaczników, a ukladem siatki, zgodnie z poradami zawartymi w Grid layout and accessibility. Nie definuję kolumn, ani rzędów, jednak taka stylizacja tworzy nam układ jednokolumnowy, co się zaś tyczy rzędów, zostaną stworzone samoistnie dla każdego elementu wskazanej siatki.

+ +
.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+
+ +

Zdefiniowany mobilny układ strony (jedna kolumna) będzie się teraz wyświetlał jednakowo na każdym urządzeniu, nieleżnie od jego rozmiarów. Żeby to zmienić możemy posłużyć się zapytaniem o środek dostępu i przedefiniować nasz układ na wypadek, gdyby pojawiło się wystarczająco dużo miejsca na ekranie, żeby zmieścić kolejną kolumnę.

+ +
@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

Możesz zaobserwować, jak będzie wyglądał nowy układ przyglądając się wartości cechy {{cssxref("grid-template-areas")}}. Element header  (nagłówek) rozciąga się na dwie kolumny, tak, jak i element nav (menu). Wtrzecim rzędzie sąsiaduje element sidebar (panel boczny) oraz element content (zawartość strony). W czwartym rzędzie umieściłem element ad (blok reklamowy) zamiast panelu bocznego, a na samym końcu element footer (stopkę) rozciągnietą na cały piąty rząd. Użyłem elastycznego bloku (flexbox) dla menu, tak by wyświetliło się w oddalonym rzędzie.

+ +

Mogę teraz dodać ostatnią wartość graniczną, wyznaczającą przejście do układu w trzech kolumnach.

+ +
@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+
+ +

The three-column layout has two 1fr unit side columns and a middle column that has 4fr as the track size. This means that the available space in the container is split into 6 and assigned in proportion to our three tracks – one part each to the side columns and 4 parts to the center.

+ +

In this layout I am displaying the nav in the left column, alongside the content. In the right column we have the sidebar and underneath it the advertisements (ad). The footer now spans right across the bottom of the layout. I then use a flexbox to display the navigation as a column.

+ +

{{ EmbedLiveSample('layout_1', '800', '500') }}

+
+ +

This is a simple example but demonstrates how we can use a grid layout to rearrange our layout for different breakpoints. In particular I am changing the location of that ad block, as appropriate in my different column setups. I find this named areas method very helpful at a prototyping stage, it is easy to play around with the location of elements. You could always begin to use grid in this way for prototyping, even if you can’t rely on it fully in production due to the browsers that visit your site.

+ +

A flexible 12-column layout

+ +

If you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. We can create this type of system using CSS Grid Layout. As a simple example, I am creating a 12-column flexible grid that has 12 1fr-unit column tracks, they all have a start line named col-start. This means that we will have twelve grid lines named col-start.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

To demonstrate how this grid system works I have four child elements inside my wrapper.

+ +
<div class="wrapper">
+  <div class="item1">Start column line 1, span 3 column tracks.</div>
+  <div class="item2">Start column line 6, span 4 column tracks. 2 row tracks.</div>
+  <div class="item3">Start row 2 column line 2, span 2 column tracks.</div>
+  <div class="item4">Start at column line 3, span to the end of the grid (-1).</div>
+</div>
+
+ +

I can then place these on the grid using the named lines, and also the span keyword.

+ +
.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+
+ +

{{ EmbedLiveSample('layout_2', '800', '400') }}

+
+ +

As described in the guide to named lines, we are using the named line to place our item. As we have 12 lines all with the same name we use the name, and then the index of the line. You could also use the line index itself if you prefer and avoid using named lines at all.

+ +

Rather than setting the end line number, I have chosen to say how many tracks this element should span, using the span keyword. I like this approach as when working with a multiple-column layout system we usually think of blocks in terms of the number of tracks of the grid they span, and adjust that for different breakpoints. To see how the blocks align themselves to the tracks, use the Firefox Grid Inspector. It clearly demonstrates how our items are placed.

+ +

Showing the items placed on the grid with grid tracks highlighted.

+ +

There are some key differences with how a grid layout works over the grid systems you may have used previously. As you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. With CSS Grid Layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty. Due to this strict column and row placement we can also easily leave white space in our layout. We also don’t need special classes to pull or push things, to indent them into the grid. All we need to do is specify the start and end line for the item.

+ +

Building a layout using the 12-column system

+ +

To see how this layout method works in practice, we can create the same layout that we created with {{cssxref("grid-template-areas")}}, this time using the 12-column grid system. I am starting with the same markup as used for the grid template areas example.

+ +
+ + +
<div class="wrapper">
+        <header class="main-head">The header</header>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="">Nav 1</a></li>
+                <li><a href="">Nav 2</a></li>
+                <li><a href="">Nav 3</a></li>
+            </ul>
+        </nav>
+        <article class="content"><h1>Main article area</h1>
+        <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p></article>
+        <aside class="side">Sidebar</aside>
+        <div class="ad">Advertising</div>
+        <footer class="main-footer">The footer</footer>
+    </div>
+
+ +

I can then set up our grid, as for the example 12-column layout above.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

We are once again going to make this a responsive layout, this time however using named lines. Every breakpoint will use a 12-column grid, however the number of tracks that items will span changes depending on the size of the screen.

+ +

We start mobile first, and all we want for the narrowest screens is for the items to remain in source order, and all span right across the grid.

+ +
.wrapper > * {
+  grid-column: col-start / span 12;
+}
+
+ +

At the next breakpoint we want to move to a two-column layout. Our header and navigation still span the full grid, so we do not need to specify any positioning for them. The sidebar is starting on the first column line named col-start, spanning 3 lines. It goes after row line 3, as the header and navigation are in the first two row tracks.

+ +

The ad panel is below the sidebar, so starts at grid row line 4. Then we have the content and footer starting at col-start 4 and spanning 9 tracks taking them to the end of the grid.

+ +
@media (min-width: 500px) {
+
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

Finally we go to the three-column version of this layout. The header continues to span right across the grid, but now the navigation moves down to become the first sidebar, with the content and then the sidebar next to it. The footer now also spans across the full layout.

+ +
@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+
+ +

{{ EmbedLiveSample('layout_3', '800', '450') }}

+
+ +

Once again the Grid Inspector is useful to help us see how our layout has taken shape.

+ +

Showing the layout with grid tracks highlighted by the grid inspector.

+ +

Something to note as we create this layout is that we haven’t needed to explicitly position every element on the grid at each breakpoint. We have been able to inherit the placement set up for earlier breakpoints – an advantage of working “mobile first”. We are also able to take advantage of grid auto-placement. By keeping elements in a logical order, auto-placement does quite a lot of work for us in placing items onto the grid. In the final example in this guide we will create a layout that entirely relies on auto-placement.

+ +

A product listing with auto-placement

+ +

Many layouts are essentially sets of “cards” – product listings, image galleries, and so on. A grid can make it very easy to create these listings in a way that is responsive without needing to add media queries to make it so. In this next example I’m combining CSS Grid and Flexbox Layouts to make a simple product listing layout.

+ +

The markup for my listing is an unordered list of items. Each item contains a heading, some text of varying height, and a call to action link.

+ +
+
<ul class="listing">
+  <li>
+    <h2>Item One</h2>
+    <div class="body"><p>The content of this listing item goes here.</p></div>
+    <div class="cta"><a href="">Call to action!</a></div>
+  </li>
+   <li>
+     <h2>Item Two</h2>
+     <div class="body"><p>The content of this listing item goes here.</p></div>
+     <div class="cta"><a href="">Call to action!</a></div>
+   </li>
+   <li class="wide">
+     <h2>Item Three</h2>
+     <div class="body"><p>The content of this listing item goes here.</p>
+     <p>This one has more text than the other items.</p>
+     <p>Quite a lot more</p>
+     <p>Perhaps we could do something different with it?</p></div>
+     <div class="cta"><a href="">Call to action!</a></div>
+    </li>
+    <li>
+     <h2>Item Four</h2>
+     <div class="body"><p>The content of this listing item goes here.</p></div>
+     <div class="cta"><a href="">Call to action!</a></div>
+    </li>
+     <li>
+     <h2>Item Five</h2>
+     <div class="body"><p>The content of this listing item goes here.</p></div>
+      <div class="cta"><a href="">Call to action!</a></div>
+    </li>
+</ul>
+
+ + + +

We are going to create a grid with a flexible number of flexible columns. I want them never to become smaller than 200 pixels, and then to share any available remaining space equally – so we always get equal width column tracks. We achieve this with the minmax() function in our repeat notation for track sizing.

+ +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+
+ +

As soon as I add this CSS, the items start to lay out as a grid. If I make the window smaller or wider the number of column tracks changes – without me needing to add breakpoints using media queries and redefine the grid.

+ +

I can then tidy up the internals of the boxes using a little touch of flexbox. I set the list item to display: flex and the flex-direction to column. I can then use an auto margin on the .cta to push this bar down to the bottom of the box.

+ +
.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+
+ +

This is really one of the key reasons I would use flexbox rather than grid, if I am just aligning or distributing something in a single dimension, that’s a flexbox use case. 

+ +

{{ EmbedLiveSample('layout_4', '800', '900') }}

+
+ +

This is all looking fairly complete now, however we sometimes have these cards which contain far more content than the others. It might be nice to cause those to span two tracks, and then they won’t be so tall. I have a class of wide on my larger item, and I add a rule {{cssxref("grid-column-end")}} with a value of span 2. Now when grid encounters this item, it will assign it two tracks. At some breakpoints, this means that we'll get a gap in the grid – where there isn’t space to lay out a two-track item.

+ +

The layout has gaps as there is not space to layout a two track item.

+ +

I can cause a grid to backfill those gaps by setting {{cssxref("grid-auto-flow")}}: dense on the grid container. Take care when doing this however as it does take items away from their logical source order. You should only do this if your items do not have a set order – and be aware of the issues of the tab order following the source and not your reordered display.

+ +
+ + +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+
+ +

{{ EmbedLiveSample('layout_5', '800', '900') }}

+ +

This technique of using auto-placement with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.

+
+ +

Further exploration

+ +

The best way to learn to use grid layout is to continue to build examples like the ones we have covered here. Pick something that you normally build using your framework of choice, or using floats, and see if you can build it using grid. Don’t forget to find examples that are impossible to build with current methods. That might mean taking inspiration from magazines or other non-web sources. Grid Layout opens up possibilities that we have not had before, we don’t need to be tied to the same old layouts to use it.

+ + + + diff --git a/files/pl/web/css/css_reference/index.html b/files/pl/web/css/css_reference/index.html new file mode 100644 index 0000000000..c6b8ea66c6 --- /dev/null +++ b/files/pl/web/css/css_reference/index.html @@ -0,0 +1,56 @@ +--- +title: Dokumentacja CSS +slug: Web/CSS/CSS_Reference +translation_of: Web/CSS/Reference +--- +

Specyfikacja CSS zawiera wszystkie standardowe właściwości CSS, w tym  pseudo-klas i pseudo-elementow, zasad używania znaku @, i selektorów w porządku alfabetycznym. Taka organizacja specyfikacji pozwala na szybki dostęp do szczegółowych informacji o każdym elemencie specyfikacji.
+
+ Specyfikacja CSS nie tylko opisuje ustandaryzowane właściwości CSS1 i CSS2.1, ale odnosi się również do specyfikacji najnowszej wersji - CSS3, zarówno elementów w fazie koncepcji jak i elementów zatwierdzonych.

+
+ Zobacz także rozszerzenie CSS Mozilli skonstrułowanych dla programów opartych na Gecko, z prefiksem -moz; oraz rozszerzenia CSS WebKit dla programów opartych na tym silniku. Sprawdź zestawienie właściwości wszystko prefiksów CSS autorstwa Petera Beverloo.
+

 

+
+ {{ CSS_Ref() }}
+

Selektory

+ +

diverso

+ +

Pojęcia

+ diff --git a/files/pl/web/css/css_selectors/index.html b/files/pl/web/css/css_selectors/index.html new file mode 100644 index 0000000000..a93359f339 --- /dev/null +++ b/files/pl/web/css/css_selectors/index.html @@ -0,0 +1,133 @@ +--- +title: CSS selectors +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - NeedsTranslation + - Overview + - Reference + - Selectors + - TopicStub +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef("Selectors")}}
+ +

CSS selectors define the elements to which a set of CSS rules apply.

+ +
+

Note: There are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings.

+
+ +

Basic selectors

+ +
+
Universal selector
+
Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.
+ Syntax: * ns|* *|*
+ Example: * will match all the elements of the document.
+
Type selector
+
Selects all elements that have the given node name.
+ Syntax: elementname
+ Example: input will match any {{HTMLElement("input")}} element.
+
Class selector
+
Selects all elements that have the given class attribute.
+ Syntax: .classname
+ Example: .index will match any element that has a class of "index".
+
ID selector
+
Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.
+ Syntax: #idname
+ Example: #toc will match the element that has the ID "toc".
+
Attribute selector
+
Selects all elements that have the given attribute.
+ Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ Example: [autoplay] will match all elements that have the autoplay attribute set (to any value).
+
+ +

Grouping selectors

+ +
+
Selector list
+
The , is a grouping method, it selects all the matching nodes.
+ Syntax: A, B
+ Example: div, span will match both {{HTMLElement("span")}} and {{HTMLElement("div")}} elements.
+
+ +

Combinators

+ +
+
Descendant combinator
+
The   (space) combinator selects nodes that are descendants of the first element.
+ Syntax: A B
+ Example: div span will match all {{HTMLElement("span")}} elements that are inside a {{HTMLElement("div")}} element.
+
Child combinator
+
The > combinator selects nodes that are direct children of the first element.
+ Syntax: A > B
+ Example: ul > li will match all {{HTMLElement("li")}} elements that are nested directly inside a {{HTMLElement("ul")}} element.
+
General sibling combinator
+
The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.
+ Syntax: A ~ B
+ Example: p ~ span will match all {{HTMLElement("span")}} elements that follow a {{HTMLElement("p")}}, immediately or not.
+
Adjacent sibling combinator
+
The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
+ Syntax: A + B
+ Example: h2 + p will match all {{HTMLElement("p")}} elements that directly follow an {{HTMLElement("h2")}}.
+
Column combinator {{Experimental_Inline}}
+
The || combinator selects nodes which belong to a column.
+ Syntax: A || B
+ Example: col || td will match all {{HTMLElement("td")}} elements that belong to the scope of the {{HTMLElement("col")}}.
+
+ +

Pseudo

+ +
+
Pseudo classes
+
The : pseudo allow the selection of elements based on state information that is not contained in the document tree.
+ Example: a:visited will match all {{HTMLElement("a")}} elements that have been visited by the user.
+
Pseudo elements
+
The :: pseudo represent entities that are not included in HTML.
+ Example: p::first-line will match the first line of all {{HTMLElement("p")}} elements.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Added the || column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Added the ~ general sibling combinator and tree-structural pseudo-classes.
+ Made pseudo-elements use a :: double-colon prefix. Additional attribute selectors
{{SpecName("CSS2.1", "selector.html")}}{{Spec2("CSS2.1")}}Added the > child and + adjacent sibling combinators.
+ Added the universal and attribute selectors.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
+ +

See the pseudo-class and pseudo-element specification tables for details on those.

+ +

See also

+ + diff --git "a/files/pl/web/css/css_selectors/u\305\274ycie_pseudoklasy__colon_target_w_selektorach/index.html" "b/files/pl/web/css/css_selectors/u\305\274ycie_pseudoklasy__colon_target_w_selektorach/index.html" new file mode 100644 index 0000000000..ff4ec92e20 --- /dev/null +++ "b/files/pl/web/css/css_selectors/u\305\274ycie_pseudoklasy__colon_target_w_selektorach/index.html" @@ -0,0 +1,64 @@ +--- +title: 'Użycie pseudoklasy :target w selektorach' +slug: 'Web/CSS/CSS_Selectors/Użycie_pseudoklasy_:target_w_selektorach' +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +
{{CSSRef}}
+ +

Czasami adres URL wskazuje na konkretny fragment dokumentu, ale użytkownikowi może być ciężko to zauważyć. Sprawdź, jak można łatwo zwrócić uwagę użytkownika na target naszego adresu URL za pomocą CSS.

+ +

Wybór targetu

+ +

Pseudoklasy {{cssxref(":target")}} używa się, aby ostylować targetowany element adresu URL, który zawiera identyfikator fragmentu.

+ +

Przykładowo, adres URL http://developer.mozilla.org/en/docs/Using_the_:target_selector#example zawiera identyfikator fragmentu o treści #example. W HTML identyfikatory fragmentu to wartości atrybutów id lub name jako że atrybuty te dzielą tę samą przestrzeń na nazwy. A więc adres URL z naszego przykładu wskazywałby nam część strony o tytule "example".

+ +

Przypuśćmy, że chcesz ostylować każdy element h2, który jest targetem URL i nie chcesz, żeby elementy innego rodzaju dostały ostylowane w ten sposób. To proste:

+ +
h2:target { font-weight: bold; }
+ +

Można też stworzyć style, które dotyczą jedynie konkretnego fragmentu naszej strony. Robi się to używając tego samego identyfikatora, który znajduje się w naszym URL. Tak więc aby dodać obramowanie do fragmentu strony zawierającego element #example, napisalibyśmy:

+ +
#example:target { border: 1px solid black; }
+ +

Targetowanie wszystkich elementów

+ +

Jeżeli chcemy stworzyć uniwersalne stylowanie, którego będziemy używać do wszystkich targetowanych elementów, możemy użyć uniwersalnego selektora:

+ +
:target { color: red; }
+
+ +

Przykład

+ +

W poniższym przykładzie jest pięć odnośników, które przenoszą nas do różnych elementów należących do jednego dokumentu. Wybierając link "Pierwszy" sprawi, że <h1 id="one"> zostanie naszym pierwszym targetowanym elementem. Zwróć uwagę, że dokument zostać przewinięty przewinąć do nowej pozycji, jako że targetowane elementy umieszcza się w miarę możliwości na górze okna przeglądarki.

+ +
+
<h4 id="jeden">...</h4> <p id="dwa">...</p>
+<div id="trzy">...</div> <a id="cztery">...</a> <em id="piec">...</em>
+
+<a href="#jeden">Pierwszy</a>
+<a href="#dwa">Drugi</a>
+<a href="#trzy">Trzeci</a>
+<a href="#cztery">Czwarty</a>
+<a href="#piec">Piąty</a>
+
+ +

Podsumowanie

+ +

W przypadkach, gdy identyfikator fragmentu wskazuje na dany kawałek dokumentu, użytkownik może nie być pewny, którą część dokumentu ma czytać. Dzięki ostylowaniu targetu adresu URL można tego uniknąć.

+ + + + + +
+

Original Document Information

+ + +
diff --git a/files/pl/web/css/cursor/index.html b/files/pl/web/css/cursor/index.html new file mode 100644 index 0000000000..74575073a9 --- /dev/null +++ b/files/pl/web/css/cursor/index.html @@ -0,0 +1,156 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/cursor +--- +

{{CSSRef}}

+ +

Podsumowanie

+ +

Własność cursor określa kursor myszy wyświetlany, kiedy wskaźnik myszy jest nad elementem.

+ +

{{cssinfo}}

+ +

Składnia

+ +
cursor: <std-cursor-name> | <url> [<x> <y>]? [, <url> [<x> <y>]?]* | {{ Cssxref("inherit") }} ;
+
+ +
cursor: [<url> [<x> <y>]?,]*  <std-cursor-name> ;
+
+ +

Wartości

+ +
+
<url> {{ mediawiki.external(' ') }}? 
+
URL własnego kursora. Może być podany więcej niż jeden w wypadku, kiedy niektóre typy obrazów nie są obsługiwane. Pozostałe adresy URL muszą być podane jako ostatnie. Zobacz Użycie wartości URL dla własności cursor po więcej informacji.
+
<std-cursor-name>
+
Jedna z nazw kursorów podanych w poniższej tabeli.
+
+ +
+
default 
+
domyślny kursor (zazwyczaj strzałka)
+
auto 
+
odpowiednik text, kiedy jest ponad tekstem i default w innych przypadkach
+
crosshair 
+
kursor w kształcie krzyżyka, często używany do wskazania zaznaczenia w bitmapie
+
pointer 
+
kursor używany nad linkami (zwykle ręka)
+
move 
+
kursor przenoszenia
+
e-resize 
+
kursor do zmiany rozmiaru prawej krawędzi pudełka
+
ne-resize 
+
kursor do zmiany rozmiaru górnego prawego rogu pudełka
+
nw-resize 
+
kursor do zmiany rozmiaru górnego lewego rogu pudełka
+
n-resize 
+
kursor do zmiany rozmiaru górnej krawędzi pudełka
+
se-resize 
+
kursor do zmiany rozmiaru dolnego prawego rogu pudełka
+
sw-resize 
+
kursor do zmiany rozmiaru dolnego lewego rogu pudełka
+
s-resize 
+
kursor do zmiany rozmiaru dolnej krawędzi pudełka
+
w-resize 
+
kursor do zmiany rozmiaru lewej krawędzi pudełka
+
text 
+
kursor wskazujący tekst, który może być zaznaczony (zwykle belka w kształcie I)
+
wait 
+
kursor wskazujący, że program jest zajęty (czasami klepsydra lub zegarek)
+
help 
+
kursor wskazujący, że dostępna jest pomoc
+
progress 
+
kursor wskazujący, że program jest jest zajęty, ale użytkownik może nadal oddziaływać z nim (w przeciwieństwie do busy)
+
copy 
+
kursor pokazujący, że coś może być skopiowane
+
alias 
+
kursor wskazujący, że alias lub skrót jest do utworzenia
+
context-menu 
+
kursor wskazujący, że menu kontekstowe jest dostępne pod kursorem
+
cell 
+
kursor wskazujący, że komórki mogą być zaznaczone
+
not-allowed 
+
kursor pokazujący, że coś nie może być zrobione
+
col-resize 
+
kursor do zmiany rozmiaru kolumn poziomo
+
row-resize 
+
kursor do zmiany rozmiaru wierszy pionowo
+
no-drop 
+
kursor pokazujący, że opuszczenie nie jest dozwolone w aktualnym położeniu
+
vertical-text 
+
kursor wskazujący, że poziomy tekst może być zaznaczony (zwykle boczna belka w kształcie I)
+
all-scroll 
+
kursor pokazujący, że coś może być przewijane w dowolnym kierunku (przesuwane)
+
nesw-resize 
+
kursor do zmiany rozmiaru w kierunkach górny prawy lub dolny lewy
+
nwse-resize 
+
kursor do zmiany rozmiaru w kierunkach górny lewy lub dolny prawy
+
ns-resize 
+
kursor do zmiany rozmiaru w górę lub w dół
+
ew-resize 
+
kursor do zmiany rozmiaru w lewo lub prawo
+
+ +

Przykłady

+ +

Zobacz przykład

+ +
Liniowy:
+
+<span style="cursor: crosshair">Jakiś tekst</span>
+
+Zewnętrzny:
+
+.pointer {
+	cursor: pointer;
+}
+.move {
+	cursor: move;
+}
+
+
+ +

Notatki

+ +

Ta własność działa na starszych przeglądarkach, jednak nie wszystkie wartości są w pełni wspierane.

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer4
Firefox1.5
Netscape6
Opera7
diff --git "a/files/pl/web/css/cursor/u\305\274ycie_warto\305\233ci_url_dla_w\305\202asno\305\233ci_cursor/index.html" "b/files/pl/web/css/cursor/u\305\274ycie_warto\305\233ci_url_dla_w\305\202asno\305\233ci_cursor/index.html" new file mode 100644 index 0000000000..f6e786ee52 --- /dev/null +++ "b/files/pl/web/css/cursor/u\305\274ycie_warto\305\233ci_url_dla_w\305\202asno\305\233ci_cursor/index.html" @@ -0,0 +1,41 @@ +--- +title: Użycie wartości URL dla własności cursor +slug: Web/CSS/cursor/Użycie_wartości_URL_dla_własności_cursor +tags: + - CSS + - CSS_2.1 + - Programowanie_WWW + - Programowanie_dla_wielu_przeglądarek + - Wszystkie_kategorie +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +

 

+

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) wspiera wartości URL dla własności cursor CSS 2/2.1. To pozwala używać zewnętrzne obrazki jako kursory myszy — można użyć każdego formatu wspieranego przez Gecko.

+

Składnia

+

Składnia dla tej własności:

+
cursor: [<url>,]* słowo_kluczowe;
+
+

To oznacza, że można podać zero lub więcej adresów URL (oddzielonych przecinkiem), a na końcu musi pojawić się jedno ze słów kluczowych zdefiniowanych w specyfikacji CSS, takie jak auto czy pointer.

+

Na przykład, taka wartość jest dozwolona:

+
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+
+

Najpierw nastąpi próba pobrania pliku foo.cur. Jeżeli ten plik nie istnieje, lub jest nieprawidłowy z jakiegoś powodu, nastąpi próba pobrania bar.gif, a jeśli to się nie uda, zostanie użyta wartość auto.

+

Wsparcie dla składni CSS3 dla wartości własności cursor zostało dodane w Gecko 1.8beta3 (Deer Partk Alpha 2); zatem działa ono w Firefoksie 1.5. Pozwala to na określanie punktu wiązania kursora, który musi być wewnątrz wymiarów obrazka kursora; koordynaty na zewnątrz obrazka będą przybliżane do krawędzi (n.p. ujemna wartość będzie interpretowana jako 0, a wartości wykraczające poza wymiary obrazka będą przycinane do najbliższego piksela w obrazku). Jeśli nie zostaną podane, dla plików CUR i XBM wartości zostaną pobrane z plików, a dla pozostałych zostanie ustalony lewy górny róg obrazka. Przykładem składni CSS3 jest:

+
cursor: url(foo.png) 4 12, auto;
+
+

Pierwsza liczba to wartość x, a drugi y. W tym przypadku punkt wiązania zostanie ustawiony w pikselu (4,12) licząc od lewego górnego rogu (0,0).

+

Ograniczenia

+

Można używać wszystkich formatów obrazków wspieranych przez Gecko. To oznacza, że możesz użyć BMP, JPG, CUR, GIF, itp. Jednak ANI nie jest wspierane. I nawet, jeżeli zostanie podany animowany GIF, kursor nie będzie animowany. To ograniczenie zostanie usunięte w przyszłych wersjach.

+

Gecko, samo w sobie, nie tworzy żadnych ograniczeń, co do rozmiaru kursora. Jednak powinieneś ograniczyć obrazek do 32x32 dla maksymalnej kompatybilności z różnymi systemami operacyjnymi. W szczególności kursory większe, niż podany rozmiar nie będą działały na Windows 9x (95, 98, ME).

+

Przezroczyste kursory nie są wspierane na systemie Windows w wersjach wcześniejszych niż XP. To ograniczenie systemu operacyjnego. Przezroczystość działa na pozostałych platformach.

+

Tylko wydania Mozilli na platformy Windows, OS/2 i Linux (z GTK+ 2.4 lub nowszym) wspierają wartości URL dla kursorów. Wsparcie dla innych platform może zostać dodane w przyszłości (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, Gtk 2.0/2.2: {{ Bug(308536) }})

+

Kompatybilność z innymi przeglądarkami

+

Microsoft Internet Explorer także wspiera wartości URI dla własności cursor. Jednak wspiera wyłącznie formaty CUR i ANI.

+

Jest także znacznie mniej restrykcyjny w zakresie składni. To oznacza, że wartości takie jak:

+
cursor: url(foo.cur);
+
+

lub:

+
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+

będą działały w MSIE, ale nie będą w Gecko. Dla kompatybilności z Gecko i zgodności ze specyfikacja CSS, zawsze na początku należy podać URI, oraz użyć dokładnie jednego słowa kluczowego na końcu.

+

 

diff --git "a/files/pl/web/css/cz\304\231ste_pytania_o_css/index.html" "b/files/pl/web/css/cz\304\231ste_pytania_o_css/index.html" new file mode 100644 index 0000000000..12a84d8c20 --- /dev/null +++ "b/files/pl/web/css/cz\304\231ste_pytania_o_css/index.html" @@ -0,0 +1,162 @@ +--- +title: Częste pytania o CSS +slug: Web/CSS/Częste_pytania_o_CSS +tags: + - CSS + - Wszystkie_kategorie +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

+

+

Często zadawane pytania

+

Stworzyłem poprawny CSS, ale przeglądarka go źle wyświetla

+

Jeśli chcesz, aby Twoja przeglądarka poprawnie wyświetlała strony stworzone zgodnie ze standardami HTML/CSS, to musisz zadeklarować na początku każdego pliku HTML Deklarację Typu Dokumentu (DTD - Document Type Declaration). +

Nowoczesne przeglądarki obsługują dwa główne tryby wyświetlania: +

+ +

Jeśli Twoja deklaracja (DTD) jest niepełna, przestarzała lub jej brak, to przeglądarki będą wyświetlały strony używając trybu zgodności wstecznej. +

Oto lista najczęściej używanych DTD: +

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+

Różnice między id i class

+

Bloki i elementy HTML-a mogą mieć atrybut id i/lub class. Atrybut id pozwala nadać unikalną nazwę wybranemu elementowi. W jednym dokumencie nie może być dwóch elementów o tej samej nazwie (identyfikatorze). Atrybut class pozwala na grupowanie elementów w określonej klasie. Z założenia identyczny atrybut jest stosowany dla wielu elementów. CSS pozwala zdefiniować style, które mają być użyte do elementów z odpowiednim atrybutem id i/lub class. +

Używaj styli zależnych od id, gdy chcesz ograniczyć ich działanie do konkretnego bloku lub elementu. Dla przykładu - dobrym miejscem na użycie atrybutu id jest blok, w którym umieszczamy menu, ponieważ występuje on tylko raz na stronie. +

Używaj atrybutu class, gdy chcesz aby ten sam styl był stosowany do grupy elementów. +

Zobacz Selektory CSS +

+

Przywracanie domyślnej wartości własności

+

W CSS2 nie ma możliwości ustawienia standardowej wartości dla własności CSS. Jedyna droga, aby przywrócić standardową wartość, to przedeklarowanie (musisz znać standardową wartość, ponieważ CSS nie posiada słowa kluczowego default) +

Musisz zachować szczególną ostrożność pisząc reguły stylów, gdy używasz selektorów (np. selektorów po nazwie znacznika jak na przykład p), które możesz chcieć nadpisać bardziej szczegółowymi regułami (jak te przy użyciu ID lub selektorów klas), ponieważ oryginalna standardowa wartość nie może być automatycznie odzyskana. +

Z powodu kaskadowej natury CSS dobrą praktyką jest definiowanie reguł stylów najszczegółowiej jak się tylko da, żeby wpływały tylko na to, co chcesz. +

+

Style pochodne

+

CSS nie pozwala na definiowanie stylów w regułach innego, głównie z powodu user agents performance issues (Eric Meyer words about it). +

W każdym razie, dobrze zorganizowany dokument HTML nie potrzebuje zagnieżdżonych stylów, dzięki kaskadowej naturze stylów. W rzeczywistości, jeśli potrzebujesz dokonać drobnej zmiany konkretnej reguły, stwórz oddzielną regułę zawierającą tylko zmiany. W HTML-u zastosuj główną regułę, a potem tą ze zmianami (patrz następna sekcja na temat przydzielania kilku klas). +

+

Przydzielanie kilku klas

+

Elementy HTML-a mogą być opisane przez kilka klas. Robi się to wymieniając nazwy kolejnych klas w atrybucie class, oddzielając kolejne nazwy spacjami. +

+
<style type="text/css">
+.firstclass { background: black; color: white; }
+.secondclass { font-weight: bold; }
+</style>
+
+<div class="firstclass secondclass">
+... treść ...
+... treść ...
+... treść ...
+</div>
+
+

Jeśli ta sama własność jest zadeklarowana w dwóch regułach, to konflikt rozwiązywany jest najpierw poprzez ich specyfikę, a później kolejność w arkuszu stylów. Kolejność klas w atrybucie class jest nieistotna. +

+

Własności stylów, które nie działają

+

Często się zdarza, że poprawnie zdefiniowane style są ignorowane. Nie wynika to ani z błędu przeglądarki, ani z błędnej składni w CSS. Zwykle jest to zachowanie jak najbardziej prawidłowe, wynikające bezpośrednio ze składni i kolejności intepretacji reguł CSS. +

Najczęstsze powody ignorowania niektórych styli to: +

+ +

Aby zlokalizować omówiony powyżej problem narzędziem zwanym " Inspektor DOM", w którym będziemy mogli zobaczyć jego lokalizację. +

Hierarchia elementów HTML-a +

Sposób, w jaki style CSS są stosowane do elementów HTML, zależy od hierarchii samych elementów HTML. Ważne jest, aby to zapamiętać, ponieważ reguła potomka jest zawsze ważniejsza od reguły elementu nadrzędnego. +

+
#section { font-weight: bold; }
+.redtext { font-weight: normal; color: red; }
+
+<div id="section">
+   To jest pogrubiony tekst
+   <span class="redtext"> ten ma normalną grubość, lecz jest czerwony,</span>
+   i znów pogrubiony
+</div>
+
+

Wydaje się to dość oczywiste, gdyż wynika z prostoty kaskadowych arkuszy stylów. Gdy w przypadku skomplikowanych hierarchii HTML jakaś reguła wydaje sie być ignorowana, najpierw sprawdź, czy podejrzany element nie jest wewnątrz innego ze zdefiniowanym innym stylem. +


+Przedefiniowywanie reguł stylów +

W arkuszach stylów kolejność jest istotna. W praktyce, jeśli zdefiniujesz regułę, a następnie zmienisz tą definicję w dalszej części arkusza stylów to użyta będzie ostatnia definicja. +

+
#sekcja { font-weight: bold; }
+.czerwony_tekst { color: red; }
+/* inne reguły                         */
+/*             inne reguły             */
+/*                         inne reguły */
+.czerwony_tekst { font-weight: normal; }
+
+<div id="sekcja">
+   Ten tekst jest pogrubiony,
+   <span class="redtext"> ten jest normalny i czerwony,</span>
+   a ten znów pogrubiony.
+</div>
+
+

Aby uniknąć tego typu błędów, spróbuj definiować reguły tylko raz dla konkretnego selektora i należącej do niego grupy reguł. +


+Używanie skrótów własności +

Używanie skrótów własności do definiowania reguł stylów jest dobre, ponieważ używa zwięzłej składni. Używanie ~shorthand~ tylko z niektórymi atrybutami jest możliwe i poprawne, ale trzeba pamiętać, że niezadeklarowane atrybuty są automatycznie resetowane do wartości standardowych. Oznacza to, że poprzednia reguła dla pojedynczego atrybutu może być bezwarunkowo nadpisana. +

+
#sekcja { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.czerwony_tekst { font: 14px Arial; color: red; }
+
+<div id="sekcja">
+   To jest pogrubiona 12-o pikselowa Verdana,
+   <span class="czerwony_tekst">to jest normalny 14-o pikselowy, czerwony Arial,</span>
+   i znów 12-o pikselowa Verdana
+</div>
+
+

W poprzednim przykładnie problem w regułach należących do różnych elementów, ale to samo może się zdarzyć dla tego samego elementu, ponieważ kolejność reguł jest istotna. +

+
#sekcja {
+   font-weight: bold;
+   font: 12px Verdana;  /* skrót nadpisuje pogrubienie i zwraca normalny */
+}
+
+


+Używanie selektora: * +

Selektor gwiazdki (*) pozwala na odniesienie się do dowolnego elementu i powinien być używany ze szczególną ostrożnością, ponieważ może być trudne kontrolowanie elementów, do których reguły są dodawane. +

+
body * { font-weight: normal; }
+#sekcja { font: 12px Verdana; }
+.pogrubiony_tekst { font-weight: bold; }
+.czerwony_tekst { color: red; }
+
+<div id="sekcja">
+   Ten jest normalny,
+   <span class="pogrubiony_tekst">
+      <span class="czerwony_tekst"> ten jest normalny i czerwony,</span>
+   </span>
+   i znów normalny.
+</div>
+
+

W tym przykładzie body * pozwala na zastosowanie reguł do wszystkich elementów wewnątrz body, na każdym poziomie hierarchii - także do czerwony_tekst. Tak więc font-weight: bold; zastosowany do klasy pogrubiony_tekst jest nadpisane przez font-weight: normal; klasy czerwony_tekst. +

Starszeństwo w CSS +

Gdy stosowane są różne reguły dla konkretnego elementu to która z nich zostanie zastosowana zależy od starszeństwa stylów. Style inline (liniowe, takie jak span) są interpretowane na początku, potem te oparte na identyfikatorze (id), następnie klasie (class) i ewentualnie znajdujące się wewnątrz elementu (style=""). +


+

+
div { color: black; }
+#pomaranczowy { color: orange; }
+.zielony { color: green; }
+
+<div id="pomaranczowy" class="zielony" style="color: red;">To jest czerwony tekst</div>
+
+

Więcej informacji na temat działania selektorów można znaleźć w sieci → CSS 2.1 Specification chapter 6.4.3 +

+

Co wykonuje własność -moz-*?

+

Zobacz: Rozszerzenia CSS Mozilli. +

+
+
+{{ languages( { "en": "en/Common_CSS_Questions", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }} diff --git a/files/pl/web/css/direction/index.html b/files/pl/web/css/direction/index.html new file mode 100644 index 0000000000..cc214c0395 --- /dev/null +++ b/files/pl/web/css/direction/index.html @@ -0,0 +1,50 @@ +--- +title: direction +slug: Web/CSS/direction +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/direction +--- +

{{ CSSRef() }} +

+

Podsumowanie

+

Własność direction powinna być ustawiana w celu dobrania kierunku tekstu: rtl dla hebrajskiego lub arabskiego tekstu oraz ltr dla innych pism. Normalnie powinno być to robione raczej jako cześć dokumentu (np. poprzez użycie atrybutu dir w HTML) niż poprzez bezpośrednie użycie CSS. +

Własność ustawia bazowy kierunek tekstu elementów blokowych oraz kierunek osadzonych utworzonych przez własność {{ Cssxref("unicode-bidi") }}. Ustawia również domyślne wyrównanie tekstu i elementów blokowych oraz kierunek, w jakim komórki następują w wierszu tabeli. +

+ +

Składnia

+
direction: [ 'ltr' | 'rtl' | inherit ] ;
+
+

Wartości

+
ltr 
Domyślna wartość direction. Tekst i inne elementy idą od lewej do prawej, +
rtl 
Tekst i inne elementy idą od prawej do lewej. +
+

Aby własność direction miała jakiś efekt w elementach inline, wartością własności {{ Cssxref("unicode-bidi") }} musi być 'embed' lub 'override'. +

+

Przykłady

+
blockquote {
+  direction : rtl ;
+}
+
+

Notatki

+

W odróżnieniu od atrybutu dir w HTML, własność direction nie jest dziedziczona od kolumn tabeli do komórek tabeli, ponieważ dziedziczenie CSS spływa po drzewie dokumentu, a komórki tabeli są wewnątrz wierszy, ale nie wewnątrz kolumn. +

+

Specyfikacje

+ +

Zobacz także

+

{{ Cssxref("unicode-bidi") }} +

+
+
+{{ languages( { "en": "en/CSS/direction", "es": "es/CSS/direction", "fr": "fr/CSS/direction" } ) }} diff --git a/files/pl/web/css/display/index.html b/files/pl/web/css/display/index.html new file mode 100644 index 0000000000..1c85584a65 --- /dev/null +++ b/files/pl/web/css/display/index.html @@ -0,0 +1,168 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/display +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Ta własność określa typ wyświetlania pudełka używanego dla elementu. W języku takim jak HTML, gdzie istniejące elementy mają dobrze określone zachowanie, domyślne wartości własności 'display' są brane z zachowań opisanych w specyfikacji HTML lub z domyślnego arkusza stylu przeglądarki/użytkownika. W językach, gdzie zachowanie 'display' nie jest zdefiniowane (jak XML), domyślną wartością jest 'inline'.

+ +

Oprócz wielu różnych dozwolonych typów wyświetlania pudełka, jedna wartość, "none", pozwala wyłączyć wyświetlanie elementu; wszystkie elementy potomne również mają wyłączone wyświetlanie. Dokument jest wyświetlany jak gdyby element nie istniał w drzewie dokumentu. Ta wartość daje potężne możliwości, ale powinna być używana z ostrożnością.

+ + + +

Składnia

+ +

display: <display-value> | {{ Cssxref("inherit") }}

+ +

Wartości

+ +
+
<display-value> 
+
Wartością 'display' może być jedna z poniższych wartości.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Przykłady

+ +

Zobacz przykład

+ +
Ext/Doc: p  { display: block }
+In-Line:  <p STYLE="display: block">text</p>
+
+ +

Uwagi

+ + + +
Elementy blokowe kontra elementy liniowe
+ + + + + +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + +
BrowserLowest Version
Internet Explorer4
Netscape4
Opera3.5
+ +

Wartości table-* są wspierane w Firefoksie i ???.

+ +

Wartości compact oraz run-in nie są wspierane w Firefoksie. Wspierane są w ???.

+ +

Wartości inline-block oraz inline-table są wstępnie wspierane w Firefoksie 3 / Gecko 1.9. inline-block jest również wspierane w ???, a inline-table jest również wspieranie w ???.

+ +

Zobacz także

+ +

{{ Cssxref("visibility") }}, {{ Cssxref("float") }}, {{ Cssxref("position") }}

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/CSS/display", "es": "es/CSS/display", "fr": "fr/CSS/display", "pt": "pt/CSS/display", "zh-cn": "cn/CSS/display" } ) }}

diff --git a/files/pl/web/css/dziedziczenie/index.html b/files/pl/web/css/dziedziczenie/index.html new file mode 100644 index 0000000000..e8049231f1 --- /dev/null +++ b/files/pl/web/css/dziedziczenie/index.html @@ -0,0 +1,50 @@ +--- +title: Dziedziczenie +slug: Web/CSS/Dziedziczenie +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/inheritance +--- +

+{{ CSSRef() }} +

+

Podsumowanie

+

Podsumowanie każdej definicji własności CSS zawiera informację, czy dana własność jest dziedziczona domyślnie ("Dziedziczona: tak"), czy też nie ("Dziedziczona: nie"). Umożliwia to kontrolę nad tym, co się dzieje, gdy nie została określona żadna wartość własności elementu. +

+

Własności dziedziczone

+

Gdy nie została określona wartość własności dziedziczonej elementu, element otrzymuje wartość wyliczoną własności elementu-rodzica. Tylko element główny dokumentu otrzymuje wartość początkową podaną w podsumowaniu własności. +

Typowym przykładem własności dziedziczonej jest własność {{ Cssxref("color") }}. Mając następujące reguły stylu: +

+
 p { color: green }
+
+

i znaczniki +

+
 <p>Ten akapit zawiera <em>wyróżniony tekst</em> wewnątrz.</p>
+
+

wyrażenie "wyróżniony tekst" będzie miało kolor zielony, ponieważ element em odziedziczył wartość własności {{ Cssxref("color") }} po elemencie p. Nie otrzymuje on początkowej wartości własności (którą jest kolor użyty w elemencie głównym, gdy nie został określony dla strony żaden kolor). +

+

Własności niedziedziczone

+

Gdy nie została określona wartość własności niedziedziczonej (czasami nazywanej własnością reset w kodzie Mozilli) elementu, element otrzymuje wartość początkową tej własności (jak podano w podsumowaniu własności). +

Typowym przykładem własności niedziedziczonej jest własność {{ Cssxref("border") }}. Mając następujące reguły stylu: +

+
 p { border: medium solid }
+
+

i znaczniki +

+
 <p>Ten akapit zawiera <em>wyróżniony tekst</em> wewnątrz.</p>
+
+

wyrażenie "wyróżniony tekst" nie będzie posiadało ramki (ponieważ wartość początkowa własności {{ Cssxref("border-style") }} to none). +

+

Uwagi

+

Słowo kluczowe {{ Cssxref("inherit") }} pozwala na bezpośrednie określenie dziedziczenia. Działa ono zarówno na własnościach dziedziczonych jak i niedziedziczonych. +

+

Zobacz również

+

{{ Cssxref("inherit") }}, wartość początkowa +


+

+
+
+{{ languages( { "en": "en/CSS/inheritance", "es": "es/CSS/inheritance", "fr": "fr/CSS/H\u00e9ritage", "ja": "ja/CSS/inheritance" } ) }} diff --git a/files/pl/web/css/empty-cells/index.html b/files/pl/web/css/empty-cells/index.html new file mode 100644 index 0000000000..7c203acf00 --- /dev/null +++ b/files/pl/web/css/empty-cells/index.html @@ -0,0 +1,77 @@ +--- +title: empty-cells +slug: Web/CSS/empty-cells +tags: + - CSS + - Dokumentacje +translation_of: Web/CSS/empty-cells +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność CSS empty-cells określa, jak program powinien wyświetlać obramowania i tła wokół komórek, które nie mają widocznej zawartości.

+ +

{{cssinfo}}

+ +

Składnia

+ +
empty-cells: show | hide | inherit
+
+
+ +

Wartości

+ +
+
{{ Cssxref("inherit") }}
+
show
+
obramowania i tła powinny być wyświetlane jak normalne komórki
+
hide
+
obramowania i tła nie powinny być wyświetlane
+
+ +

Przykłady

+ +
.contentbox td {
+  empty-cells: show;
+}
+
+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer?
Firefox?
Netscape?
Opera?
Safari?
diff --git a/files/pl/web/css/float/index.html b/files/pl/web/css/float/index.html new file mode 100644 index 0000000000..0c8a73f00d --- /dev/null +++ b/files/pl/web/css/float/index.html @@ -0,0 +1,116 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/float +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność float określa, że element powinien być wyjęty z normalnego przepływu i umieszczony przy lewej lub prawej stronie zawierającego go kontenera, zaś tekst i elementy liniowe będą zawijały się wokół niego.

+ + + +

Element pływający jest jedynym, gdzie wartość wyliczona float nie jest równa none.

+ +

Zauważ, że, jeśli odwołujesz się do tej wartości z JavaScript jako elementu obiektu element.style, musisz oznaczyć to cssFloat (zobacz listę na DOM:CSS). Zwróć też uwagę, że IE nazywa to styleFloat.

+ +

Składnia

+ +

float: left | right | none | inherit

+ +

Wartości

+ + + +

Przykłady

+ +

Zobacz przykład

+ +
<html>
+ <head>
+  <style type="text/css">
+   b
+   {
+     font-size: 25px;
+     float:right;
+   }
+  </style>
+ </head>
+ <body>
+
+  <p>
+    <b>HELLO!</b>
+    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
+    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
+    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
+    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
+    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
+    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
+    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
+    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
+    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
+    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
+  </p>
+
+</body>
+</html>
+
+ +

Notatki

+ +

TODO: Notatka powinna wyjaśniać, jak elementy pływające są pozycjonowane. Wzmianka o block formatting context.

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer4
Netscape4
Opera3.5
+ +

Zobacz także

+ +

{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}

+ +
 
+ +

{{ languages( { "en": "en/CSS/float", "es": "es/CSS/float", "fr": "fr/CSS/float" } ) }}

diff --git a/files/pl/web/css/font-family/index.html b/files/pl/web/css/font-family/index.html new file mode 100644 index 0000000000..7a9bff6328 --- /dev/null +++ b/files/pl/web/css/font-family/index.html @@ -0,0 +1,58 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-family +--- +

{{CSSRef}}

+ +

Podsumowanie

+ +

font-family dopuszcza uszeregowaną pod względem ważności listę nazw rodzin czcionek oraz/lub nazwy rodzajów czcionek do zdefiniowania dla wybranego elementu. W przeciwieństwie do większości innych własności CSS, wartości są oddzielone przecinkiem, by wskazywały, że są alternatywami.

+ +

{{cssinfo}}

+ +

Składnia

+ +
font-family: <family-or-generic-name> [, <family-or-generic-name>]* | inherit
+
+ +

Wartości

+ +
+
<family-generic-name>
+
jest jedną z wartości <family-name> lub <generic-family>
+
family-name 
+
Nazwa rodziny czcionek. Na przykład: "Times" i "Helvetica" są rodzinami czcionek. Nazwy rodziny czcionek, zawierające białe znaki, powinny być ujęte w cudzysłowy.
+
generic-family 
+
Zdefiniowane są następujące rodzaje czcionek: serif, sans-serif, cursive, fantasy, monospace. Nazwy rodzajów są słowami kluczowymi i nie muszą być brane w cudzysłowy.
+
+ +

Przykłady

+ +

Zobacz przykład

+ +
body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }
+
+.receipt { font-family: Courier, "Lucida Console", monospace }
+
+ +

Uwagi

+ +

Powinieneś zawsze określić nazwę rodzaju jako ostatnią wartość we własności font-family.

+ +

Własność font-family wyszczególnia listę czcionek, od najwyższego priorytetu do najniższego. Wybór czcionki nie kończy się po prostu, gdy pierwsza z wymienionych czcionek jest w systemie użytkownika. Wybór czcionki odbywa się raczej jako jeden znak naraz, zatem, jeśli dostępna czcionka nie ma glifu (matrycy), który może wyświetlić potrzebny znak, wypróbowywana jest kolejna dostępna czcionka.

+ +

Jeśli dla czcionki dostępne są tylko niektóre własności styles, variants lub sizes, mogą one również wpływać na to, które rodziny czcionek zostaną wybrane.

+ +

Specyfikacje

+ + diff --git a/files/pl/web/css/font-size-adjust/index.html b/files/pl/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..56561c4285 --- /dev/null +++ b/files/pl/web/css/font-size-adjust/index.html @@ -0,0 +1,60 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-size-adjust +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność {{ Cssxref("font-size-adjust") }} określa, że rozmiar czcionki powinien być wybrany raczej na podstawie wysokości małych liter niż wysokości dużych liter.

+ +

Jest to użyteczne, ponieważ czytelność czcionek, zwłaszcza o małych rozmiarach, jest zdeterminowana bardziej przez rozmiar małych liter niż dużych liter. Może to powodować problemy, kiedy pierwsza czcionka zdefiniowana w {{ Cssxref("font-family") }} jest niedostępna, zaś czcionka ją zamieniająca ma znacząco odmienny stosunek proporcji (proporcję rozmiaru małych liter do rozmiaru czcionki).

+ +

Zrobienie tego w sposób, który jest zgodny z przeglądarkami niewspierającymi {{ Cssxref("font-size-adjust") }}, polega na określeniu liczby, która zwielokrotnia własność {{ Cssxref("font-size") }}. Oznacza to, że wartość określona dla tej własności powinna być zasadniczo stosunkiem proporcji pierwszej deklarowanej czcionki. Na przykład, arkusz stylu, który definiuje font-size: 16px; font-size-adjust: 0.5, w praktyce określa, że rozmiar małych liter czcionki powinien wynosić 8px wysokości (16px razy 0.5).

+ +

{{cssinfo}}

+ +

Składnia

+ +

font-size-adjust: <liczba> | none | {{ Cssxref("inherit") }}

+ +

Wartości

+ +
+
none 
+
Wybiera rozmiar czcionki opierając się jedynie na własności {{ Cssxref("font-size") }}.
+
<liczba> 
+
+

Wybiera rozmiar czcionki w ten sposób, że jej małe litery (jako wyznaczone przez wartość x-height czcionki) są określane liczbą zwielokrotniająca {{ Cssxref("font-size") }}.

+ +

Zdefiniowana liczba powinna być zasadniczo stosunkiem proporcji (proporcja wartości x-height do rozmiaru czcionki) czcionki wybieranej w pierwszej kolejności w {{ Cssxref("font-family") }}. Będzie to oznaczało, że czcionka wybrana w pierwszej kolejności, kiedy jest dostępna, wyświetli się w tym samym rozmiarze w przeglądarkach, niezależnie, czy wspierają własność {{ Cssxref("font-size-adjust") }}.

+
+
+ +

Przykłady

+ +

Zobacz przykład

+ +
p{
+  font: 12px Verdana, sans-serif;
+  font-size-adjust: 0.58;
+}
+
+
+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ +

Wspierana na wszystkich platformach począwszy od Gecko 1.9 / Firefox 3, zaś w Windows wpierana wcześniej.

diff --git a/files/pl/web/css/font-size/index.html b/files/pl/web/css/font-size/index.html new file mode 100644 index 0000000000..a269accdc6 --- /dev/null +++ b/files/pl/web/css/font-size/index.html @@ -0,0 +1,339 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/CSS/font-size +--- +
{{CSSRef}}
+ +

The font-size CSS property specifies the size of the font. Setting this property may change the size of other items, too, since it is used to compute the value of em, ex, and various other relative {{cssxref("<length>")}} units.

+ +
/* <absolute-size> values */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+
+/* <relative-size> values */
+font-size: smaller;
+font-size: larger;
+
+/* <length> values */
+font-size: 12px;
+font-size: 0.8em;
+
+/* <percentage> values */
+font-size: 80%;
+
+/* Global values */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+
+ + + +

{{EmbedLiveSample("font-size", 1200, 180, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

Syntax

+ +

The font-size property is specified in one of the following ways:

+ + + +

Values

+ +
+
xx-small, x-small, small, medium, large, x-large, xx-large
+
Absolute-size keywords, based on the user's default font size (which is medium).
+
larger, smaller
+
Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.
+
{{cssxref("<length>")}}
+
+

A positive {{cssxref("<length>")}} value. For most font-relative units (such as em and ex), the font size is relative to the parent element's font size.

+ +

For font-relative units that are root-based (such as rem), the font size is relative to the size of the font used by the {{HTMLElement("html")}} (root) element.

+
+
{{cssxref("<percentage>")}}
+
+

A positive {{cssxref("<percentage>")}} value, relative to the parent element's font size.

+
+
+ +
+

Note: To maximize accessibility, it is generally best to use values that are relative to the user's default font size.

+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Possible approaches

+ +

There are several ways to specify the font size, including with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.

+ +

Keywords

+ +

Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

+ +

Pixels

+ +

Setting the font size in pixel values (px) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

+ +

Font sizing settings can also be used in combination. For example, if a parent element is set to 16px and its child element is set to larger, the child element displays larger than the parent element in the page.

+ +
Note: Defining font sizes in px is not accessible, because the user cannot change the font size from the browser. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.
+ +

Ems

+ +

Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

+ +

In order to calculate the em equivalent for any pixel value required, you can use this formula:

+ +
em = desired element pixel value / parent element font-size in pixels
+ +

For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

+ +

The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.

+ +

One important fact to keep in mind: em values compound. Take the following HTML and CSS:

+ +
html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6em;
+}
+ +
<div>
+<span>Outer <span>inner</span> outer</span>
+</div>
+
+ +

The result is:

+ +

{{EmbedLiveSample("Ems", 400, 40)}}

+ +

Assuming that the browser's default font-size is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. This is because the inner span's font-size is 1.6 em which is relative to its parent's font-size, which is in turn relative to its parent's font-size. This is often called compounding.

+ +

Rems

+ +

rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

+ +

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to rem.

+ +
html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6rem;
+}
+
+ +

Then we apply this CSS to the same HTML, which looks like this:

+ +
<span>Outer <span>inner</span> outer</span>
+ +

{{EmbedLiveSample("Rems", 400, 40)}}

+ +

In this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 16px).

+ +

Examples

+ +

Example 1

+ +
/* Sets paragraph text to be very large */
+p { font-size: xx-large; }
+
+/* Sets <h1> text to be 2.5 times the size
+   of the text around it */
+h1 { font-size: 250%; }
+
+/* Sets text enclosed within span tag to be 16px */
+span { font-size: 16px; }
+
+ +

Example 2

+ +

CSS

+ +
.small {
+  font-size: xx-small;
+}
+.larger {
+  font-size: larger;
+}
+.point {
+  font-size: 24pt;
+}
+.percent {
+  font-size: 200%;
+}
+
+ +

HTML

+ +
<h1 class="small">Small H1</h1>
+<h1 class="larger">Larger H1</h1>
+<h1 class="point">24 point H1</h1>
+<h1 class="percent">200% H1</h1>
+ +

Result

+ +

{{EmbedLiveSample('Example_2','600','200')}}

+ +

Notes

+ +

em and ex units on the {{Cssxref("font-size")}} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means em units and percentages do the same thing for {{Cssxref("font-size")}}.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}No change.
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}{{Spec2('CSS3 Transitions')}}Defines font-size as animatable.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#font-size', 'font-size')}}{{Spec2('CSS1')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.font-size")}}

diff --git a/files/pl/web/css/font-stretch/index.html b/files/pl/web/css/font-stretch/index.html new file mode 100644 index 0000000000..751195d6e4 --- /dev/null +++ b/files/pl/web/css/font-stretch/index.html @@ -0,0 +1,77 @@ +--- +title: font-stretch +slug: Web/CSS/font-stretch +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-stretch +--- +

{{CSSRef}}

+ +

Podsumowanie

+ +

Własność font-stretch wybiera normalny, zwężony lub poszerzony krój z rodziny czcionek.

+ +

{{cssinfo}}

+ +

Składnia

+ +
+
Wartości bezwględne
+
 
+
font-stretch: normal ;
+
font-stretch: {{ mediawiki.external('ultra-condensed | extra-condensed | condensed | semi-condensed') }} ;
+
font-stretch: {{ mediawiki.external('semi-expanded | expanded | extra-expanded | ultra-expanded') }} ;
+
+ +
+
Wartości względne
+
 
+
font-stretch: {{ mediawiki.external('wider | narrower') }} ;
+
+ +

Wartości

+ +
+
normal
+
Definiuje normalną szerokość kroju czcionki.
+
+ +
+
semi-condensed, condensed, extra-condensed, ultra-condensed
+
Definiuje krój czcionki węższy niż normalny, przy czym ultra-condensed jest najwęższy.
+
+ +
+
semi-expanded, expanded, extra-expanded, ultra-expanded
+
Definiuje krój czcionki szerszy niż normalny, przy czym ultra-expanded jest najszerszy.
+
+ +
+
wider
+
Wartość względna 'wider' ustawia szerszy o jedną wartość krój czcionki niż wartość odziedziczona (lecz nie szerszą niż ultra-expanded).
+
+ +
+
narrower
+
Wartość względna 'narrower' ustawia węższy o jedną wartość krój czcionki niż wartość odziedziczona (lecz nie węższą niż ultra-condensed).
+
+ +

Przykłady

+ +
h1 { font-stretch: extra-expanded }
+p { font-stretch: narrower}
+
+ +

Notatki

+ +

UWAGA: Ta własność CSS NIE JEST JESZCZE ZAIMPLEMENTOWANA, zobacz {{ Bug(3512) }}, by sprawdzić aktualny status prośby o dodanie.

+ +

Specyfikacje

+ + diff --git a/files/pl/web/css/font-style/index.html b/files/pl/web/css/font-style/index.html new file mode 100644 index 0000000000..3c04d0a8ac --- /dev/null +++ b/files/pl/web/css/font-style/index.html @@ -0,0 +1,49 @@ +--- +title: font-style +slug: Web/CSS/font-style +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-style +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność font-style definiuje kroje czcionki normal (określany również jako upright lub roman), italic oraz oblique spośród rodziny czcionek.

+ +

{{cssinfo}}

+ +

Składnia

+ +
{{csssyntax}}
+ +

Wartości

+ +
+
normal, oblique, italic 
+
Określa, że program powinien wybrać krój czcionki normal, oblique lub italic dla czcionki zdefiniowanej w {{ Cssxref("font-family") }}.
+
+ +

Przykłady

+ +

 

+ +

Zobacz przykład

+ +

 

+ +
h1 { font-style: italic }
+p { font-style: oblique }
+
+
+ +

Specyfikacje

+ + diff --git a/files/pl/web/css/font-variant/index.html b/files/pl/web/css/font-variant/index.html new file mode 100644 index 0000000000..e1c3cab355 --- /dev/null +++ b/files/pl/web/css/font-variant/index.html @@ -0,0 +1,79 @@ +--- +title: font-variant +slug: Web/CSS/font-variant +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-variant +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność font-variant wybiera z rodziny czcionek wygląd normalny lub kapitaliki.

+ +

{{cssinfo}}

+ +

Składnia

+ +
+
font-variant: {{ mediawiki.external('normal | small-caps') }} ;
+
+ +

Wartości

+ +
+
normal
+
Definiuje normalny krój czcionki.
+
+ +
+
small-caps
+
Definiuje czcionkę, która jest wyróżniona kapitalikami. Jeśli kapitaliki nie są dostępne, Mozilla będzie symulowała kapitaliki, np. poprzez użycie normalnego kroju czcionki i zamianę małych liter przeskalowanymi wielkimi literami.
+
+ +

Przykłady

+ +
h1 { font-variant: small-caps }
+p { font-variant: small-caps}
+
+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer?
Firefox?
Netscape?
Opera?
Safari?
diff --git a/files/pl/web/css/font-weight/index.html b/files/pl/web/css/font-weight/index.html new file mode 100644 index 0000000000..8e4779355b --- /dev/null +++ b/files/pl/web/css/font-weight/index.html @@ -0,0 +1,107 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font-weight +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność {{ Cssxref("font-weight") }} określa wagę lub grubość czcionki.

+ +

{{cssinfo}}

+ +

Składnia

+ +

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | {{ Cssxref("inherit") }}

+ +

Wartości

+ +
+
normal 
+
Normalna waga czcionki. Identycznie jak 400.
+
bold 
+
Pogrubiona czcionka. Identycznie jak 700.
+
lighter 
+
Waga czcionki lżejsza o jedną wartość niż w elemencie rodzica (spośród dostępnych wag czcionki)
+
bolder 
+
Waga czcionki cięższa o jedną wartość niż w elemencie rodzica (spośród dostępnych wag czcionki)
+
100, 200, 300, 400, 500, 600, 700, 800, 900 
+
Liczbowe wartość wag czcionek dla czcionek, które mają więcej niż tylko waga normalna i pogrubiona. Jeśli wybrana waga jest niedostępna, wtedy dla wartości 600-900 używana jest najbliższa dostępna większa wagi (lub jeśli takiej nie ma, najbliższa dostępna lżejsza waga), a dla wartości 100-500 używana jest najbliższa dostępna mniejsza waga (lub jeśli takiej nie ma, najbliższa dostępna większa waga). Oznacza to, że dla czcionek, które mają tylko wagi normalną i pogrubioną, wartości 100-500 stają się wagą normalną, a 600-900 pogrubioną.
+
+ +

Przykłady

+ +

HTML

+ +
<p>
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+</p>
+
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+
+ +

CSS

+ +
/* Set paragraph text to be bold. */
+p {
+  font-weight: bold;
+}
+
+/* Set div text to two steps darker than
+   normal but less than a standard bold. */
+div {
+ font-weight: 600;
+}
+
+/* Sets text enclosed within span tag
+   to be one step lighter than the parent. */
+span {
+  font-weight: lighter;
+}
+ +

Result

+ +

{{EmbedLiveSample("Przykłady","400","300")}}

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer3
Netscape4
Opera3.5
diff --git a/files/pl/web/css/font/index.html b/files/pl/web/css/font/index.html new file mode 100644 index 0000000000..8e8c668216 --- /dev/null +++ b/files/pl/web/css/font/index.html @@ -0,0 +1,145 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/font +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność font jest skrótową własnością do ustawienia {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} oraz {{ Cssxref("font-family") }} w jednym miejscu w arkuszu stylów.

+ + + +

Składnia

+ +

font: [ <{{ Cssxref("font-style") }}> || <{{ Cssxref("font-variant") }}> || <{{ Cssxref("font-weight") }}> ]? <{{ Cssxref("font-size") }}> [ / <{{ Cssxref("line-height") }}> ]? <{{ Cssxref("font-family") }}>

+ +

font: caption | icon | menu | message-box | small-caption | status-bar | -moz-window | -moz-document | -moz-workspace | -moz-desktop | -moz-info | -moz-dialog | -moz-button | -moz-pull-down-menu | -moz-list | -moz-field

+ +

font: {{ Cssxref("inherit") }}

+ +

Wartości

+ +

Użycie skrótowej własności {{ Cssxref("font") }} ustawia własności pisma jako określone oraz ustawia wszystkie inne własności związane z czcionką do ich wartości początkowych.

+ +

Zobacz {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }} oraz {{ Cssxref("font-family") }}, by sprawdzić prawidłowe wartości każdej własności.

+ +

Również czcionki systemowe mogą być określone przy użyciu własności {{ Cssxref("font") }}zamiast określania indywidualnych własności pisma:

+ +
+
caption 
+
Czcionka używana w opisanych kontrolkach (na przykład w przyciskach, listach rozwijanych itd.).
+
icon 
+
Czcionka używana do podpisywania ikon.
+
menu 
+
Czcionka używana w menu (na przykład menu rozwijanym, listach menu).
+
message-box 
+
Czcionka używana w oknach dialogowych.
+
small-caption 
+
Czcionka używana do opisywania małych kontrolek.
+
status-bar 
+
Czcionka używana w pasku stanu okna.
+
-moz-window 
+
 
+
-moz-document 
+
 
+
-moz-workspace 
+
 
+
-moz-desktop 
+
 
+
-moz-info 
+
 
+
-moz-dialog 
+
 
+
-moz-button 
+
 
+
-moz-pull-down-menu 
+
 
+
-moz-list 
+
 
+
-moz-field 
+
 
+
+ +

Przykłady

+ +

Zobacz przykład

+ +
/* Ustawia rozmiar czcionki na 12pt oraz odstęp między liniami na 14pt.
+Ustawia rodzinę czcionek na bezszeryfowe */
+p { font: 12pt/14pt sans-serif }
+
+ +
/* Ustawia rozmiar czcionki na 80% rozmiaru znacznika-rodzica lub wartości domyślnej
+(jeśli nie ma obecnego znacznika-rodzica) oraz ustawia rodzinę czcionek na bezszeryfowe */
+p { font: 80% sans-serif }
+
+ +
/* Ustawia wagę (grubość) czcionki na pogrubioną, styl czcionki na kursywę,
+rozmiar na duży i rodzinę czcionek na szeryfowe */
+p { font: bold italic large serif }
+
+ +

Uwagi

+ +

Składniki {{ Cssxref("font-size") }} oraz {{ Cssxref("font-family") }} skrótowej własności są obowiązkowe. Pominięcie ich jest błędem składniowym i powoduje, że cała własność zostanie zignorowana.

+ +

Własności, dla których nie ma podanych żadnych wartości, są ustawiane do ich wartości domyślnej, którą jest normal dla wszystkich własności, które mogą być pominięte ({{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, oraz {{ Cssxref("line-height") }}).

+ +

Własność {{ Cssxref("font-size-adjust") }} jest również ustawiana do jej wartości początkowej (none), kiedy określona jest skrótowa własność {{ Cssxref("font") }}.

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer3
Netscape4
Opera3.5
+ +

Zobacz także

+ +

{{ Cssxref("font-family") }}, {{ Cssxref("font-size") }}, {{ Cssxref("font-size-adjust") }}, {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("line-height") }}

+ +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/CSS/font", "es": "es/CSS/font", "fr": "fr/CSS/font", "ja": "ja/CSS/font" } ) }}

diff --git a/files/pl/web/css/grid/index.html b/files/pl/web/css/grid/index.html new file mode 100644 index 0000000000..7510f2db2c --- /dev/null +++ b/files/pl/web/css/grid/index.html @@ -0,0 +1,200 @@ +--- +title: grid +slug: Web/CSS/grid +translation_of: Web/CSS/grid +--- +

grid jest własnością skrótową, która ustawia wszystkie wyraźne oraz domniemane własności grid przy pomocy pojedynczej deklaracji.

+ +
{{EmbedInteractiveExample("pages/css/grid.html")}}
+ + + +
+

Uwaga: Można ustawić jedynie sprecyzowane bądź domniemane wartości w jednej deklaracji własności grid. Podwłasności, których nie określisz zostaną ustawione na wartości początkowe. Własności odstępów nie zostaną zresetowane przez ten zapis skrótowy.

+
+ +

Własności składowe

+ +

Ta własność jest zapisem skrótowym następujących własności

+ + + +

Składnia

+ +
/* <'grid-template'> values */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* <'grid-template-rows'> /
+   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
+   <'grid-template-columns'> values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Global values */
+grid: inherit;
+grid: initial;
+grid: unset;
+
+ +

Wartości

+ +
+
<'grid-template'>
+
Definiuje szablon siatki strony - własności grid-template-columns, grid-template-rows oraz grid-template-areas.
+
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
+
Ustawia auto-wyrównanie przy pomocy jawnych wierszy ustawionych własnością grid-template-rows, ustawieniem wartości grid-template-rows na none oraz określeniem w jaki sposób wykonywać automatyczne powtarzanie kolumn przy pomocy grid-auto-columns i ustawienie wartości grid-auto-rows na auto. grid-auto-flow zostaje ustawione na column, jeśli dense jest określone. Wszystkie inne podwłasności grid są ustawiane na wartości początkowe.
+
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
+
Ustawia auto-wyrównanie przy pomocy jawnych kolumn ustawionych własnością grid-template-columns, ustawieniem wartości własności grid-template-rows na none oraz określeniem w jaki sposób wykonywać automatyczne powtarzanie wierszy przy pomocy grid-auto-rows i ustawienie wartości grid-auto-columns na auto. grid-auto-flow zostaje ustawione na row, jeśli dense jest określon. Wszystkie inne podwłasności grid są ustawiane na wartości początkowe.
+
+ +

Formalna definicja

+ +

{{cssinfo}}

+ +

Formalna składna

+ +
{{csssyntax}}
+ +

Przykłady

+ +

Tworzenie układu grid (układ siatki)

+ +

HTML

+ +
<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}
+ +

Result

+ +

{{EmbedLiveSample("Creating_a_grid_layout", "100%", 150)}}

+ +

Specyfikacje

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

Kompatybilność z wersjami przeglądarek

+ + + +

{{Compat("css.properties.grid")}}

+ +

Zobacz także

+ + + + diff --git a/files/pl/web/css/height/index.html b/files/pl/web/css/height/index.html new file mode 100644 index 0000000000..a17ec96c3f --- /dev/null +++ b/files/pl/web/css/height/index.html @@ -0,0 +1,92 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/height +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność height definiuje w elemencie wysokość obszaru zawartości. Obszar zawartości znajduje sięwewnątrz dopełnienia, obramowania i marginesów elementu.

+ + + +

Składnia

+ +
height: <length> | <percentage> | auto | inherit
+
+ +

Wartości

+ + + +

Przykłady

+ +

Zobacz przykład

+ +
table { height: 100%; }
+
+img { height: 200px; }
+
+form { height: auto; }
+
+ +

Uwagi

+ +

Własności {{ Cssxref("min-height") }} i {{ Cssxref("max-height") }} nadpisują {{ Cssxref("height") }}.

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer4
Netscape4
Opera3.5
+ +

Zobacz także

+ +

box model, {{ Cssxref("width") }}, {{ Cssxref("-moz-box-sizing") }}, {{ Cssxref("min-height") }}, {{ Cssxref("max-height") }}

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/CSS/height", "es": "es/CSS/height", "fr": "fr/CSS/height" } ) }}

diff --git a/files/pl/web/css/id_selectors/index.html b/files/pl/web/css/id_selectors/index.html new file mode 100644 index 0000000000..927d3795be --- /dev/null +++ b/files/pl/web/css/id_selectors/index.html @@ -0,0 +1,77 @@ +--- +title: Selektory ID +slug: Web/CSS/ID_selectors +tags: + - Beginner + - CSS + - CSS Reference + - Selektory +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef("Selectors")}}
+Selektor ID wyszukuje każdy element z atrybutem {{htmlattrxref("ID")}} o takiej samej nazwie w dokumencie HTML.
+ +
 
+ +

Składnia

+ +
#przykladowe_id { właściwości stylu }
+ +

Jest to równoważne z {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[id=przykladowe_id] { właściwości stylu }
+ +

Przykład

+ +
span#mojeid {
+  background-color: DodgerBlue;
+}
+
+ +
<span id="mojeid">Przykładowy tekst.</span>
+<span>Kolejny przykładowy tekst.</span>
+
+ +

Specyfikacje

+ + + +

Kompatybilność z przeglądarkami

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaWsparcie
ChromeTak
EdgeTak
FirefoxTak
Internet ExplorerTak
OperaTak
SafariTak
diff --git a/files/pl/web/css/ime-mode/index.html b/files/pl/web/css/ime-mode/index.html new file mode 100644 index 0000000000..ea3fbd0d3e --- /dev/null +++ b/files/pl/web/css/ime-mode/index.html @@ -0,0 +1,9 @@ +--- +title: ime-mode +slug: Web/CSS/ime-mode +tags: + - CSS +translation_of: Web/CSS/ime-mode +--- +

Ta strona nie ma treści. Możesz stworzyć MDC.

+

test pl

diff --git a/files/pl/web/css/index.html b/files/pl/web/css/index.html new file mode 100644 index 0000000000..eabf6e687b --- /dev/null +++ b/files/pl/web/css/index.html @@ -0,0 +1,95 @@ +--- +title: 'CSS: Kaskadowe arkusze stylów' +slug: Web/CSS +tags: + - CSS + - Kaskadowe arkusze stylów + - arkusze stylów + - szablony + - wygląd +translation_of: Web/CSS +--- +
{{CSSRef}}
+ +

Kaskadowe arkusze stylów (CSS) są językiem stylów używanym do opisania warstwy prezentacji dokumentów napisanych w HTML lub XML (włączając pochodne SVG czy XHTML). CSS opisuje jak elementy powinny być prezentowane na ekranie, przy wydruku, w czytniku ekranowym, albo w innych mediach.

+ +

CSS jest jednym z podstawowych języków otwartej sieci i jest ustandaryzowany pomiędzy przeglądarkami zgodnie ze specyfikacją W3C. Rozwijany stopniowo, CSS1 obecnie przestarzały , CSS2.1 rekomendowany, oraz CSS3, obecnie rozbity na mniejsze moduły w ciągłym procesie standaryzacji.

+ +
+ + +
+
+

Poradniki

+ +

CSS Learning Area zawiera wiele modułów, które pozwolą Ci nauczyć się CSS od podstaw bez potrzeby wcześniejszej znajomości zagadnień.

+ +
+
Wprowadzenie do CSS
+
Ten moduł wprowadza w podstawowe zagadnienia, tłumaczy jak CSS działa, omawia selektory i właściwości, pisanie reguł CSS, dodawanie CSS do HTMLa, jednostki i kolory, kaskadowość i dziedziczenie, podstawy modelu blokowego, a także debugowania.
+
Stylowanie tekstu
+
Ten moduł opisuje podstawy stylowania tekstów, włączając w to ustawienia fontów, grubość, kursywe, interlinie i odstępy między literami, cienie oraz inne właściwości tekstu. Ten moduł kończy się dodaniem niestandardowych fontów na Twoją stronę oraz stylowaniem list i linków.
+
Stylowanie bloków
+
Moduł ten poświęcony jest stylowaniu bloków, jest to krok w przód jeżeli chodzi o ułożenie elementów na stronie. W tym module streścimy czym jest model blokowy (ang. box model), a następnie zajmiemy się kontrolą wyglądu witryny poprzez wewnętrzne i zewnętrzne marginesy, obramowania, kolorowe tła, obrazki i inne właściwści, a także rzeczy bardziej widowiskowe takie jak cienie i filtry.
+
CSS layout
+
Do tej pory poznaliśmy podstawy takie jak stylowanie tekstu czy stylowanie i manipulowanie blokami z treścią. Przyszedł czas przyjrzeć się w jaki sposób umieścić dane bloki w odpowiednich miejscach m.in. w zależności od szerokości ekranu. Dzięki poznaniu niezabędnych podstaw możemy teraz wejść głębiej w tematykę szablonów CSS, omówić różne ustawienia wyświetlania, tradycyjne metody wykorzystujące float i position, a także nowe narzędzia takie jak flexbox.
+
+
+ +
+

Referencje

+ + + +

Narzędzia dla developerów CSS

+ + + +

Meta bugs

+ +
    +
  • Firefox: {{bug(1323667)}}
    • +
+
+
+
+ +

Zobacz też

+ + diff --git a/files/pl/web/css/initial/index.html b/files/pl/web/css/initial/index.html new file mode 100644 index 0000000000..e6d882efe5 --- /dev/null +++ b/files/pl/web/css/initial/index.html @@ -0,0 +1,118 @@ +--- +title: initial +slug: Web/CSS/initial +translation_of: Web/CSS/initial +--- +
{{CSSRef}}
+ +

Słowo kluczowe initial aplikuje w CSSie początkową wartość do właściwości danego elementu. Jest ono dozwolne w każdej właściwości CSS i powoduje ono użycie wartości początkowej.

+ +
+

We właściwościach dziedziczonych wartość początkowa może być zaskakująca i powinieneś się zastanowić nad użyciem słów kluczowych {{cssxref("inherit")}}, {{cssxref("unset")}}, lub {{cssxref("revert")}} zamiast wartości początkowej.

+
+ +

Przykłady

+ +
 /* nagłówek z zieloną ramką */
+ h2 { border: medium solid green }
+
+ /* poniższy kod użyty w sidebarze przywraca kolor początkowy (initial) ramki */
+ #sidebar h2 { border-color: initial; }
+
+ +
 <p style="color:red">
+    ten tekst jest czerwony
+       <em style="color:initial">
+         ten tekst ma kolor początkowy (initial), np. czarny
+       </em>
+    ponownie kolor czerwony
+ </p> 
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{ SpecName('CSS4 Cascade', '#initial', 'initial') }}{{Spec2('CSS4 Cascade')}}No changes from Level 3.
{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}{{Spec2('CSS3 Cascade')}}Defines what an initial value is.
{{ SpecName('CSS3 Values', "#common-keywords", "initial") }}{{Spec2('CSS3 Values')}}Defines the keyword.
+ +

Wsparcie przeglądarek

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Podstawowe wspracie1.0{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("19.0")}}		{{CompatNo}}15.01.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Podstawowe wsparcie1.0{{CompatGeckoMobile("1.9.1")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("19.0")}}		{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +

[1] Od wersji Firefox 1.0 wzwyż, wsparcie dla -moz-initial zostało dodane do każdej wersji, zakończono obsługę{{cssxref("quotes")}} od wersji Firefox 3.5 (Gecko 1.9.1). Wsparie dla niestandardowych prefiksów {{cssxref("-moz-border-top-colors","-moz-border-*-colors")}} w wersji Firefox 3.6 (Gecko 1.9.2). Wsparcie dla prefiksu -moz-initial zostało usunięte w Firefox 24 na korzyść słowa kluczowego initial.

+ +

Zobacz również

+ + diff --git a/files/pl/web/css/inne_zasoby/index.html b/files/pl/web/css/inne_zasoby/index.html new file mode 100644 index 0000000000..8db0f7556b --- /dev/null +++ b/files/pl/web/css/inne_zasoby/index.html @@ -0,0 +1,28 @@ +--- +title: Inne zasoby +slug: Web/CSS/Inne_zasoby +tags: + - CSS + - Wszystkie_kategorie +translation_of: Web/CSS +--- +

+

+

Dokumenty W3C

+ +

Inne zasoby

+ +{{ languages( { "en": "en/CSS/Other_Resources", "fr": "fr/CSS/Autres_ressources", "ja": "ja/CSS/Other_Resources" } ) }} diff --git a/files/pl/web/css/letter-spacing/index.html b/files/pl/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..423f1e2c1d --- /dev/null +++ b/files/pl/web/css/letter-spacing/index.html @@ -0,0 +1,74 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +tags: + - CSS +translation_of: Web/CSS/letter-spacing +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność CSS letter-spacing określa odstępy między literami w tekstowej zawartości elementu. Można zdefiniować od jednej do trzech wartości, by wskazać minimalny, maksymalny oraz optymalny odstęp między literami.

+ +

{{cssinfo}}

+ +

Składnia

+ +
letter-spacing: [ normal | <length> ] {1,3}
+
+ +

Wartości

+ +
+
normal 
+
 
+
{{cssxref("<length>")}}  
+
 
+
+ +

Przykłady

+ +
p {
+  letter-spacing: .3em .6em .4em;
+}
+
+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer?
Firefox?
Netscape?
Opera?
Safari?
diff --git a/files/pl/web/css/list-style-image/index.html b/files/pl/web/css/list-style-image/index.html new file mode 100644 index 0000000000..91d05bc8bf --- /dev/null +++ b/files/pl/web/css/list-style-image/index.html @@ -0,0 +1,70 @@ +--- +title: list-style-image +slug: Web/CSS/list-style-image +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/list-style-image +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

list-style-image określa plik graficzny, który ma zostać użyty jako znacznik elementu listy.

+ + + +

Składnia

+ +
list-style-image: <uri> | none | inherit
+
+ +

Wartości

+ +
+
uri
+
Adres pliku graficznego.
+
+ +

Przykłady

+ +

HTML

+ +
<ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+</ul>
+
+ +

CSS

+ +
ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
+}
+ +

Result

+ +

{{EmbedLiveSample('Przykłady')}}

+ +

Dokumentacja

+ + + +

Kompatybilność z przeglądarkami

+ +

Zobacz także

+ +

{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}

diff --git a/files/pl/web/css/list-style-position/index.html b/files/pl/web/css/list-style-position/index.html new file mode 100644 index 0000000000..62b79481be --- /dev/null +++ b/files/pl/web/css/list-style-position/index.html @@ -0,0 +1,99 @@ +--- +title: list-style-position +slug: Web/CSS/list-style-position +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/list-style-position +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

list-style-position określa pozycję znacznika listy w elemencie listy.

+ + + +

Składnia

+ +
list-style-position: inside | outside | inherit
+
+ +

Wartości

+ +
+
outside
+
Znacznik jest umieszczany poza elementem listy.
+
inside
+
Znacznik jest umieszczany wewnątrz elementu listy. Jest on pierwszym blokiem inline i zawartość elementu go opływa.
+
+ +

Przykłady

+ +

HTML

+ +
<ul class="one"> List 1
+  <li>List Item 1-1</li>
+  <li>List Item 1-2</li>
+  <li>List Item 1-3</li>
+  <li>List Item 1-4</li>
+</ul>
+<ul class="two"> List 2
+  <li>List Item 2-1</li>
+  <li>List Item 2-2</li>
+  <li>List Item 2-3</li>
+  <li>List Item 2-4</li>
+</ul>
+<ul class="three"> List 3
+  <li>List Item 3-1</li>
+  <li>List Item 3-2</li>
+  <li>List Item 3-3</li>
+  <li>List Item 3-4</li>
+</ul>
+ +

CSS

+ +
.one {
+  list-style:square inside;
+}
+
+.two {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.three {
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+  list-style-position: inherit;
+}
+ +

Result

+ +

{{EmbedLiveSample("Przykłady","200","420")}}

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ +

Zobacz także

+ +

{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}

+ +
 
+ +

{{ languages( { "en": "en/CSS/list-style-position", "es": "es/CSS/list-style-position", "fr": "fr/CSS/list-style-position" } ) }}

diff --git a/files/pl/web/css/list-style-type/index.html b/files/pl/web/css/list-style-type/index.html new file mode 100644 index 0000000000..34e55005fe --- /dev/null +++ b/files/pl/web/css/list-style-type/index.html @@ -0,0 +1,108 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/list-style-type +--- +

{{CSSRef}}

+ +

Podsumowanie

+ +

list-style-type określa wygląd znacznika elementu listy.

+ +

{{cssinfo}}

+ +

Składnia

+ +
 list-style-type:  <std-list-style-name> | {{ Cssxref("none") }} | {{ Cssxref("inherit") }} ;
+
+ +

Wartości

+ +
+
<std-list-style-name>
+
Standardowa nazwa stylu listy disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha
+
disc
+
Wypełniony okrąg.
+
circle
+
Pusty okrąg.
+
square
+
Wypełniony kwadrat.
+
decimal
+
Liczby dziesiętne, zaczynając od 1.
+
decimal-leading-zero
+
Liczby dziesiętne poprzedzone początkowym zerem (np. 01, 02, 03, ..., 98, 99).
+
lower-roman
+
Małe cyfry rzymskie (i, ii, iii, iv, v itp.).
+
upper-roman
+
Duże cyfry rzymskie (I, II, III, IV, V itp.).
+
lower-greek
+
Małe litery z klasycznej greki: alpha, beta, gamma, ... (α, β, γ, ...).
+
lower-latin
+
Małe litery ascii (a, b, c, ... z).
+
upper-latin
+
Duże litery ascii (A, B, C, ... Z).
+
armenian
+
Tradycyjna numeracja ormiańska (Armenian) (ayb/ayp, ben/pen, gim/keem, ...).
+
georgian
+
Tradycyjna numeracja gruzińska (Georgian) (an, ban, gan, ..., he, tan, in, in-an, ...).
+
lower-alpha
+
Tak samo jak lower-latin.
+
upper-alpha
+
Tak samo jak upper-latin.
+
none
+
Bez wypunktowania.
+
+ +

Przykłady

+ +

CSS

+ +
ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* or use the shortcut "list-style": */
+ol.shortcut {
+  list-style: upper-alpha;
+}
+ +

HTML

+ +
<ol class="normal">List 1
+  <li>Hello</li>
+  <li>World</li>
+  <li>What's up?</li>
+</ol>
+
+<ol class="shortcut">List 2
+  <li>Looks</li>
+  <li>Like</li>
+  <li>The</li>
+  <li>Same</li>
+</ol>
+
+ +

Result

+ +

{{EmbedLiveSample("Przykłady","200","300")}}

+ +

Uwagi

+ +

Ta specyfikacja nie definiuje, w jaki sposób systemy alfabetyczne zachowują się na końcu alfabetu. Na przykład, po 26 elementach listy numerowanie typu lower-latin jest niezdefiniowane (i będzie kontynuowane jako AA, AB, AC,...). Dlatego też dla długich list jest zalecane, aby autorzy określili prawidłowe numery.

+ +

Specyfikacje

+ + + +

Zobacz także

+ +

{{ Cssxref("list-style") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position") }}

diff --git a/files/pl/web/css/margin/index.html b/files/pl/web/css/margin/index.html new file mode 100644 index 0000000000..b5710503ad --- /dev/null +++ b/files/pl/web/css/margin/index.html @@ -0,0 +1,112 @@ +--- +title: margin +slug: Web/CSS/Margin +translation_of: Web/CSS/margin +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność margin określa marginesy elementu. Jest ona również sposobem na ustawienie wszystkich marginesów jednocześnie. Negatywne wartosci są dozwolone.

+ +

{{cssinfo}}

+ +

Składnia

+ +
margin: <length> {1,4} | <percentage> {1,4} | inherit | auto;
+
+ +

Wartości

+ +
+
<length>
+
przyjmuje konkretną odległość.
+
<percentage>
+
procentowa wartość szerokości zawierającego bloku
+
auto
+
przeglądarka obliczy i wybierze margines dla określonego elementu
+
+ +

Jeśli podano:

+ + + +

Przykłady

+ +
  .content {
+    margin: 5%;  /* wszystkie strony margines 5% */
+  }
+
+  .sidebox {
+    margin: 10px;  /* wszystkie strony margines 10px */
+  }
+
+  .rightbox {
+    margin: 10px 20px;  /*  górny i dolny margines 10px */
+  }                     /*  lewy i prawy margines 20px */
+
+
+  .leftbox {               /*  górny margines 10px */
+    margin: 10px 3% 20px;  /*  lewy i prawy margines 3% */
+  }                        /*  dolny margines 20px */
+
+
+  .mainbox {                    /*  górny margines 10px */
+     margin: 10px 3px 30px 5px; /*  prawy margines 3px */
+  }                             /*  dolny margines 30px */
+                                /*  lewy margines 5px */
+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}No significant change
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}Defines margin as animatable.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.margin")}}

+ +

 

+ +

 

+ +
 
diff --git a/files/pl/web/css/media_queries/index.html b/files/pl/web/css/media_queries/index.html new file mode 100644 index 0000000000..a7a793852e --- /dev/null +++ b/files/pl/web/css/media_queries/index.html @@ -0,0 +1,122 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +tags: + - CSS + - Media Queries + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/Media_Queries +--- +

{{CSSRef}}

+ +

Media Queries is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.

+ +

Reference

+ +

At-rules

+ +
+ +
+ +

Guides

+ +
+
Using media queries
+
Presents what media queries are doing and explains the possible expressions.
+
Testing media queries
+
Explains how to test a media query programmatically, from JavaScript.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} +


+  

+
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}} 
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{ CompatGeckoDesktop(1.7) }}9.09.21.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile(1.7) }}9.09.03.1
+
diff --git a/files/pl/web/css/media_queries/using_media_queries/index.html b/files/pl/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..8944867c66 --- /dev/null +++ b/files/pl/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,643 @@ +--- +title: Using media queries +slug: Web/CSS/Media_Queries/Using_media_queries +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +

Media query składa się z jej typu oraz przynajmniej jednego wyrażenia, zadaniem którego jest określenie zakresu działania kodu css, poprzez użycie takich wartości jak szerokość, wysokość czy kolor. Media queries zostały dodane w specyfikacji CSS3, pozwalając na przygotowanie określonego stylu zawartości strony, w zależności od urządzenia docelowego dla kodu, bez potrzeby zmiany samej treści w każdym z przypadków. 

+ +

Składnia

+ +

Każda Media query składa się z typu medium docelowego, a także, zgodnie ze specyfikacją CSS3, zawiera jedno lub więcej wyrażeń logicznych (ang. media features), które zwracają wartość true lub false. Wynik query jest prawdziwy, jeżeli typ medium jest zgodny z aktualnym urządzaniem (np. gdy rozdzielczość ekranu jest zgodna z podanymi warunkami). Media query zostanie wykonana, tylko jeśli wszystkie jej wyrażenia będą prawdziwe. 

+ +
<!-- Media query użyta na elemencie link -->
+<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
+
+<!-- Media query w środku arkusza stylów  -->
+<style>
+@media (max-width: 600px) {
+  .facet_sidebar {
+    display: none;
+  }
+}
+</style>
+
+ +

Jeżeli warunki zostaną spełnione, wskazane arkusze stylów, lub zasady CSS w przypadku stylu osadzonego, zostaną załadowane, zgodnie z zasadą kaskadowości css. Należy zaznaczyć, że załączone style za pomocą znacznika link będą pobierane niezależnie od tego czy media query zostanie wykonana.

+ +

Dopóki nie użyjesz operatorów not lub optional, typ medium nie jest wymagany i dla danej query nadany zostanie typ all.

+ +

Operatory logiczne

+ +

Możesz tworzyć zaawansowane media queries za pomocą operatorów logicznych - not, and oraz only. Operator and używany jest do łączenia wielu wyrażeń logicznych, w jedną media query. Nakładają one wymaganie, aby każda zeleżność była prawdziwa, wykonując przez to podany zestaw styli. Operator not używany jest do zanegowanie całej media query. Celem operatora only jest zaaplikowanie CSS'a tylko w przypadku, gdy wszystkie warunki są spełnione ( użyteczne gdy chcemy zapobiec użyciu znacznika media przez starsze przeglądarki. Jak już wspomnieliśmy, używając operatorów only oraz not musisz określić typ medium.

+ +

Możesz również połączyć wiele media queries w listę, oddzielając kolejne wyrażenia media średnikiem. Jeżeli jakakolwiek query jest prawdziwa, całe wyrażenie zwróci true. Takie wyrażenie jest równoznaczne z logicznym operatorem or

+ +

and

+ +

The and keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied all media type, could look like this:

+ +
@media (min-width: 700px) { ... }
+ +

If, however, you wanted this to apply only if the display is in landscape, you could use an and operator to chain the media features together.

+ +
@media (min-width: 700px) and (orientation: landscape) { ... }
+ +

Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an and operator.

+ +
@media tv and (min-width: 700px) and (orientation: landscape) { ...  }
+ +

Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.

+ +

comma-separated lists

+ +

Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.

+ +

For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:

+ +
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
+ +

Above, if I were on a screen device with a viewport width of 800px, the media statement would return true because the first part, interpreted as @media all and (min-width: 700px) would apply to my device and therefore return true, despite the fact that my screen device would fail the handheld media type check in the second media query. Likewise, if I were on a handheld device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.

+ +

not

+ +

The not keyword applies to the whole media query and returns true if the media query would otherwise return false (such as monochrome on a color display or a screen width of 600px with a min-width: 700px feature query). A not will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The not keyword cannot be used to negate an individual feature query, only an entire media query. For example, the not is evaluated last in the following query:

+ +
@media not all and (monochrome) { ... }
+
+ +

This means that the query is evaluated like this:

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... rather than like this:

+ +
@media (not all) and (monochrome) { ... }
+ +

As another example, look at the following media query:

+ +
@media not screen and (color), print and (color)
+
+ +

It is evaluated like this:

+ +
@media (not (screen and (color))), print and (color)
+ +

only

+ +

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles:

+ +
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
+
+ +

Pseudo-BNF (for those of you that like that kind of thing)

+ +
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid
+ +

Media queries are case insensitive.  Media queries involving unknown media types are always false.

+ +
Note: Parentheses are required around expressions; failing to use them is an error.
+ +

Media features

+ +

Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints.  This avoids using the "<" and ">" symbols, which would conflict with HTML and XML.  If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.

+ +
Note: If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false.  For example, querying the aspect ratio of an aural device always results in false.
+ +

color

+ +

Value: {{cssxref("<color>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: yes

+ +

Indicates the number of bits per color component of the output device.  If the device is not a color device, this value is zero.

+ +
Note: If the color components have different numbers of bits per color component, the smallest number is used.  For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component.  If the device uses indexed colors, the minimum number of bits per color component in the color table is used.
+ +

Examples

+ +

To apply a style sheet to all color devices:

+ +
@media all and (color) { ... }
+
+ +

To apply a style sheet to devices with at least 4 bits per color component:

+ +
@media all and (min-color: 4) { ... }
+
+ +

color-index

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: yes

+ +

Indicates the number of entries in the color look-up table for the output device.

+ +

Examples

+ +

To indicate that a style sheet should apply to all devices using indexed color, you can do:

+ +
@media all and (color-index) { ... }
+
+ +

To apply a style sheet to indexed color devices with at least 256 colors:

+ +
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+
+ +

aspect-ratio

+ +

Value: {{cssxref("<ratio>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Accepts min/max prefixes: yes

+ +

Describes the aspect ratio of the targeted display area of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).

+ +

Example

+ +

The following selects a special style sheet to use for when the display area is at least as wide as it is high.

+ +
@media screen and (min-aspect-ratio: 1/1) { ... }
+ +

This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.

+ +

device-aspect-ratio

+ +

Value: {{cssxref("<ratio>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Accepts min/max prefixes: yes

+ +

Describes the aspect ratio of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).

+ +

Example

+ +

The following selects a special style sheet to use for widescreen displays.

+ +
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
+ +

This selects the style when the aspect ratio is either 16:9 or 16:10.

+ +

device-height

+ +

Value: {{cssxref("<length>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Accepts min/max prefixes: yes

+ +

Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

+ +

Example

+ +

To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:

+ +
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
+
+ +

device-width

+ +

Value: {{cssxref("<length>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Accepts min/max prefixes: yes

+ +

Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

+ +

Example

+ +

To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
+ +

grid

+ +

Value: <mq-boolean> which is an {{cssxref("<integer>")}} that can only have the 0 and 1 value.
+ Media: all
+ Accepts min/max prefixes: no

+ +

Determines whether the output device is a grid device or a bitmap device.  If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1.  Otherwise it is zero.

+ +

Example

+ +

To apply a style to handheld devices with a 15-character or narrower display:

+ +
@media handheld and (grid) and (max-width: 15em) { ... }
+
+ +
Note: The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.
+ +

height

+ +

Value: {{cssxref("<length>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Accepts min/max prefixes: yes

+ +

The height media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).

+ +
Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.
+ +

monochrome

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: yes

+ +

Indicates the number of bits per pixel on a monochrome (greyscale) device.  If the device isn't monochrome, the device's value is 0.

+ +

Examples

+ +

To apply a style sheet to all monochrome devices:

+ +
@media all and (monochrome) { ... }
+
+ +

To apply a style sheet to monochrome devices with at least 8 bits per pixel:

+ +
@media all and (min-monochrome: 8) { ... }
+
+ +

orientation

+ +

Value: landscape | portrait
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.

+ +

Example

+ +

To apply a style sheet only in portrait orientation:

+ +
@media all and (orientation: portrait) { ... }
+ +
Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.
+ +

resolution

+ +

Value: {{cssxref("<resolution>")}}
+ Media: {{cssxref("Media/Bitmap", "bitmap")}}
+ Accepts min/max prefixes: yes

+ +

Indicates the resolution (pixel density) of the output device.  The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).

+ +

Example

+ +

To apply a style sheet to devices with at least 300 dots per inch of resolution:

+ +
@media print and (min-resolution: 300dpi) { ... }
+
+ +

To replace the old (min-device-pixel-ratio: 2) syntax:

+ +
@media screen and (min-resolution: 2dppx) { ... }
+ +

scan

+ +

Value: progressive | interlace
+ Media: {{cssxref("Media/TV")}}
+ Accepts min/max prefixes: no

+ +

Describes the scanning process of television output devices.

+ +

Example

+ +

To apply a style sheet only to progressive scanning televisions:

+ +
@media tv and (scan: progressive) { ... }
+
+ +

width

+ +

Value: {{cssxref("<length>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Accepts min/max prefixes: yes

+ +

The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

+ +
Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.
+ +

Examples

+ +

If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:

+ +
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+
+ +

This media query specifies a style sheet that applies to printed media wider than 8.5 inches:

+ +
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+
+ +

This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:

+ +
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+ +

Mozilla-specific media features

+ +

Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.

+ +

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

+ +

Value: {{cssxref("<number>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: yes

+ +

Gives the number of device pixels per CSS pixel.

+ +
+

Do not use this feature.

+ +

Use the resolution feature with the dppx unit instead.
+
+ -moz-device-pixel-ratio may be used for compatibility with Firefox older than 16 and -webkit-device-pixel-ratio with WebKit-based browsers that do not support dppx.

+ +

Example:

+ +
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
+       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
+       (min-resolution: 2dppx),             /* The standard way */
+       (min-resolution: 192dpi)             /* dppx fallback */
+ +

See this CSSWG article for compatibility good practices regarding resolution and dppx.

+
+ +
Note: This media feature is also implemented by Webkit and by IE 11 for Windows Phone 8.1 as -webkit-device-pixel-ratio. The min and max prefixes as implemented by Gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by Webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio.
+ +

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

+ +

Value: windows-xp | windows-vista | windows-win7 | windows-win8 | windows-win10
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:

+ + + +

This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

+ +

Example

+ +

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

+ +

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

+ +

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

+ +

Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

+ + + +

This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
grid{{ CompatUnknown() }}{{ CompatNo() }} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
resolution{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} [2]
+ {{ CompatGeckoDesktop("8.0") }} [3]		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
scan{{ CompatUnknown() }}{{ CompatNo() }} [4]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[1] grid media type is not supported

+ +

[2] Supports {{cssxref("<integer>")}} values;

+ +

[3] Supports {{cssxref("<number>")}} values, as per the spec.

+ +

[4] tv media type is not supported

+ +

 

+ +

See also

+ + diff --git a/files/pl/web/css/mozilla_extensions/index.html b/files/pl/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..7bdbe05032 --- /dev/null +++ b/files/pl/web/css/mozilla_extensions/index.html @@ -0,0 +1,679 @@ +--- +title: Rozszerzenia Mozilli +slug: Web/CSS/Mozilla_Extensions +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dodatki + - Dokumentacje + - Rozszerzenia + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/CSS/Mozilla_Extensions +--- +
{{CSSRef}}
+ +

Mozilla applications such as Firefox support a number of special Mozilla extensions to CSS, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries. These extensions are prefixed with -moz.

+ +

Mozilla-only properties and pseudo-classes (avoid using on websites)

+ +
+

Note: These properties and pseudo-classes will only work in Mozilla applications such as Firefox, and are not on a standards track. Some of them apply only to XUL elements.

+
+ +
+

B

+ + + +

C – I

+ + + +

O

+ + + +

S – Z

+ + +
+ +

Formerly proprietary properties that are now standard

+ +
+

Note: To maximize the compatibility of your CSS, you should use the unprefixed standard properties instead of the prefixed ones listed below. Once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after a while.

+
+ +
+ +
+ +

Values

+ +

Global values

+ +
+ +
+ +

{{Cssxref("-moz-appearance")}}

+ +
+ +
+ +

{{cssxref("background-image")}}

+ +
+ +
+ +

{{Cssxref("border-color")}}

+ +
+ +
+ +

{{Cssxref("border-style")}} and {{Cssxref("outline-style")}}

+ +
+ +
+ +

{{cssxref("<color>")}} keywords

+ +
+ +
+ +

{{Cssxref("display")}}

+ +
+ +
+ +

{{cssxref("empty-cells")}}

+ +
+ +
+ +

{{Cssxref("font")}}

+ +
+ +
+ +

{{Cssxref("font-family")}}

+ +
+ +
+ +

{{Cssxref("image-rendering")}}

+ +
+ +
+ +

{{cssxref("<length>")}}

+ +
+ +
+ +

{{Cssxref("list-style-type")}}

+ +
+ +
+ +

{{Cssxref("overflow")}}

+ +
+ +
+ +

{{Cssxref("text-align")}}

+ +
+ +
+ +

{{Cssxref("text-decoration")}}

+ +
+ +
+ +

{{Cssxref("-moz-user-select")}}

+ +
+ +
+ +

{{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}

+ +
+ +
+ +

Pseudo-elements and pseudo-classes

+ +
+ +
+ +

At-rules

+ +
+ +
+ +

Media features

+ +
+ +
+ +

Other

+ +
+ +
+ +

See also

+ + diff --git "a/files/pl/web/css/na_pocz\304\205tek/bloki/index.html" "b/files/pl/web/css/na_pocz\304\205tek/bloki/index.html" new file mode 100644 index 0000000000..0835e0b145 --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/bloki/index.html" @@ -0,0 +1,70 @@ +--- +title: Bloki +slug: Web/CSS/Na_początek/Bloki +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks +--- +

 

+

Ta strona opisuje jak możesz użyć CSS do kontroli przestrzeni, którą zajmuje wyświetlany element.

+

W swoim przykładowym dokumencie będziesz zmieniać odstępy i dodawać reguły dekoracyjne.

+

Informacja: Bloki

+

Kiedy Twoja przeglądarka wyświetla element, zajmuje on miejsce. Przestrzeń, którą zajmuje element, dzieli się na cztery części.

+

W środku istnieje przestrzeń, której element potrzebuje do wyświetlenia swojej zawartości. Wokół tego jest margines wewnętrzny. Wokół tego jest ramka. Wokół tego jest margines zewnętrzny.

+ +

margines zewnętrzny

ramka

margines wewnętrzny

element

Jasny szary wskazuje części układu strony.

 

 

 

element

Tak wygląda to w przeglądarce.
+

Marginesy wewnętrzne, zewnętrzne i ramka mogą mieć różne wielkości na górze, na dole, po prawej i po lewej stronie elementu. Każdy z nich może mieć wartość zero.

+

Margines wewnętrzny ma zawsze ten sam kolor, co tło elementu. Zatem kiedy określasz kolo tła, widzisz ten kolor w tle elementu i jego marginesu wewnętrznego. Margines jest zawsze przezroczysty.

+ +

margines zewnętrzny

ramka

margines wewnętrzny

element

Ten element ma zielone tło.

 

 

 

element

Tak wygląda to w przeglądarce.
+

Ramki

+

Możesz użyć ramek do dekoracji elementów liniami lub blokami.

+

Aby utworzyć jednakową ramkę wokół całego elementu, użyj własności border. Określ szerokość (zwykle w pikselach), styl i kolor.

+

Istnieją następujące style:

+ +
solid
dotted
dashed
double
inset
outset
ridge
groove
+

Możesz także ustawić styl na none lub hidden, aby usunąć ramkę, lub ustawić kolor na transparent, aby ustawić przezroczystą ramkę bez dotykania układu.

+

Aby określić osobno każdą krawędź ramki, użyj własności: border-top (góra), border-right (prawo), border-bottom (dół), border-left (lewo). Możesz ich użyć do określenia ramki tylko po jednej stronie lub różnych ramek dla każdej krawędzi.

+ +
Przykłady
Ta reguła ustawia kolor tła i górną ramkę dla elementów nagłówka:

h3 {

 border-top: 4px solid #7c7; /* mid green */
+ background-color: #efe;     /* pale green */
+ color: #050;                /* dark green */
+ }
+

Wygląda to tak:

Nagłówek w dobrym stylu

Dzięki tej regule obrazki są lepiej widoczne dzięki lekko szarej ramce wokół każdego z nich:

img {border: 2px solid #ccc;}

Rezultat jest następujący:

Obrazek: Image:Blue-rule.png
+

Marginesy zewnętrzne i wewnętrzne

+

Użyj marginesów zewnętrznych i wewnętrznych, aby dopasować pozycję elementów i stworzyć przestrzeń wokół nich.

+

Użyj własności margin lub padding, aby ustawić szerokość marginesu wewnętrznego lub zewnętrznego.

+

Jeżeli podasz tylko jedną wartość, zostanie ona zastosowana wokół całego elementu (góra, prawo, dół i lewo).

+

Jeżeli określisz dwie wartości, pierwsza zostanie używa do określenia wymiarów góry i dołu, druga do prawa i lewa.

+

Możesz też określić wszystkie cztery szerokości w kolejności: góra, prawo, dół, lewo.

+ +
Przykład
Ta reguła oznacza akapity z klasą remark poprzez dodanie czerwonej ramki wokół nich.

Marginesy wewnętrzne ustawione dla wszystkie boków odsuną trochę ramki od tekstu.

Lewy margines zewnętrzny odsuwa akapit od reszty tekstu:

p.remark {

 border: 2px solid red;
+ padding: 4px;
+ margin-left: 24px;
+ }
+

Wynik wygląda tak:

Oto zwykły akapit.

A to akapit z klasą remark.
+ +
Więcej szczegółów
Kiedy używasz marginesów zewnętrznych i wewnętrznych do określania, jak układane są elementu, Twoje reguły stylu wpływają na domyślne wartości przeglądarki w sposób, który może być bardzo skomplikowany.

Różne przeglądarki układają elementy na różne sposoby. Wynik może wyglądać podobnie, póki Twój arkusz stylów nic nie zmienia. Czasem może to dać dość zaskakujące rezultaty.

Aby uzyskać spodziewany rezultat, możesz chcieć zmienić znaczniki dokumentu. Następna strona tego kursu tłumaczy, jak to zrobić.

Aby dowiedzieć się więcej o marginesach i ramkach, zajrzyj do specyfikacji CSS do rozdziału model blokowy.
+

Zadanie: Dodawanie ramek

+

Wyedytuj swój plik CSS. Dodaj poniższą regułę, aby rysować linię nad każdym nagłówkiem:

+
+

h3 {border-top: 1px solid gray;}

+
+

Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony, zmodyfikuj stworzoną regułę; w przeciwnym wypadku dodaj nową regułę, która doda przestrzeń pod każdym elementem listy:

+
+

li {

+
 list-style: lower-roman;
+ margin-bottom: 8px;
+ }
+
+
+

Odśwież okno przeglądarki, aby zobaczyć wynik:

+ +

(A) Oceany

  • Arktyczny
  • Atlantycki
  • Spokojny
  • Indyjski
  • Południowy

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum
+

 

+ +
Wyzwanie
Dodaj regułę do swojego arkusza stylów, która stworzy szeroką ramkę wokół wszystkich oceanów w kolorze, który kojarzy Ci się z morzem — coś w stylu:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

. . .

(Nie musisz uzyskać identycznej szerokości ani koloru jak tutaj.)
+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

+

Poprzez określenie marginesów modyfikujesz układ dokumentu. Na następnej stronie nauczysz się zmieniać układ w inny sposób: Układ

+

{{ languages( { "en": "en/CSS/Getting_Started/Boxes", "fr": "fr/CSS/Premiers_pas/Bo\u00eetes", "pt": "pt/CSS/Como_come\u00e7ar/Caixas" } ) }}

diff --git "a/files/pl/web/css/na_pocz\304\205tek/czym_jest_css/index.html" "b/files/pl/web/css/na_pocz\304\205tek/czym_jest_css/index.html" new file mode 100644 index 0000000000..2472a575c4 --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/czym_jest_css/index.html" @@ -0,0 +1,132 @@ +--- +title: Czym jest CSS +slug: Web/CSS/Na_początek/Czym_jest_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

 

+ +

Ta strona opisuje, czym jest CSS.

+ +

Informacja: Czym jest CSS?

+ +

CSS jest językiem określającym, jak dokumenty mają być prezentowane użytkownikowi.

+ +

Dokumentjest to kolekcja informacji ułożona w strukturę przy użyciujęzyka znaczników.

+ + + + + + + + +
Przykłady
+
    +
  • Strona, taka jak ta, jest dokumentem.
    + Informacje, które widzisz na stronie, zazwyczaj są ułożone w strukturę przy użyciu języka znaczników HTML (HyperText Markup Language).
    • +
+ +
    +
  • Okienko dialogowe w aplikacji Mozilli jest dokumentem.
    + Kontrolki interfejsu użytkownika, które widzisz w okienku dialogowym Mozilli, są ułożone w strukturę przy użyciu języka znaczników XUL (XML User-interface Language).
    • +
+
+ +

W tym kursie bloki oznaczone Więcej szczegółów, jak poniższy, zawierają informacje, których znajomość nie jest wymagana do dalszego korzystania z kursu. Jeżeli się spieszysz, możesz spokojnie pominąć te bloki i na przykład wrócić do nich później.

+ + + + + + + + +
Więcej szczegółów
+

Dokument nie jest tym samym co plik. Dokument może, ale nie musi być składowany w pliku.

+ +

Na przykład dokument, który w tym momencie czytasz, nie jest zapisany w pliku. Kiedy Twoja przeglądarka prosi o stronę, serwer odpytuje bazę danych i generuje dokument, składając jego części z wielu plików i fragmentów z bazy danych. Jednak w trakcie tego kursu będziesz pracować z dokumentami składowanymi w plikach.

+ +

Więcej informacji na temat dokumentów i języków znaczników znajdziesz w innych częściach tej strony — na przykład:

+ + + + + + + + + + + + + + + + + + + + +
HTMLo stronach internetowych
XMLo strukturalnych dokumentach
SVGo grafice
XULo interfejsie użytkownika w Mozilli
+
+ +

Prezentowaniedokumentu użytkownikowi oznacza skonwertowanie go do postaci, w jakiej będzie on przydatny użytkownikowi. Mozilla prezentuje dokumenty wizualnie — na przykład na ekranie komputera, obrazie wyświetlanym przez projektor lub wydruku.

+ + + + + + + + +
Więcej szczegółów
CSS jest przeznaczony nie tylko dla przeglądarek i prezentacji graficznych. W formalnej terminologii CSS program, który prezentuje dokumenty użytkownikowi, nazywany jestagentem (ang. User Agent - UA). Przeglądarka jest tylko jednym z wielu rodzajów UA. Jednakże część pierwsza tego kursu skupia się na pracy z językiem CSS w przeglądarce. +

Formalne definicje terminologii związanej z CSS znajdziesz w Specyfikacji CSS w dziale Definicje.

+
+ +

Zadanie: Tworzenie dokumentu

+ +

Stwórz nowy katalog, a w nim nowy plik. Ten plik będzie Twoim dokumentem.

+ +

Skopiuj i wklej poniższy kod HTML. Zapisz plik pod nazwą 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>
+
+ +

Otwórz nowy panel lub nowe okno w Twojej przeglądarce i otwórz ten plik.

+ +

Powinieneś zobaczyć tekst zaczynający się od pogrubionych liter:

+ + + + + + + +
Cascading Style Sheets
+ +

To, co widzisz w przeglądarce, może się trochę różnić z powodu ustawień przeglądarki oraz tego wiki. Jeżeli istnieją jakieś różnice w kroju pisma, odstępach i kolorach, które widzisz, nie jest to żaden problem.

+ +

Co dalej?

+ +

Jeżeli masz problemy ze zrozumieniem tej strony lub chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

+ +

Twój dokument nie używa jeszcze CSS. Na następnej stronie zaczniesz używać CSS do określania stylów: Po co używać CSS

+ +

{{ languages( { "en": "en/CSS/Getting_Started/What_is_CSS", "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS" } ) }}

diff --git "a/files/pl/web/css/na_pocz\304\205tek/czytelny_css/index.html" "b/files/pl/web/css/na_pocz\304\205tek/czytelny_css/index.html" new file mode 100644 index 0000000000..ca79229c4c --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/czytelny_css/index.html" @@ -0,0 +1,153 @@ +--- +title: Czytelny CSS +slug: Web/CSS/Na_początek/Czytelny_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +

+

Ta strona opisuje styl i gramatykę języka CSS. +

Zmienisz wygląd swojego pliku CSS, aby był bardziej czytelny. +

+

Informacja: Czytelny CSS

+

Możesz dodać białe znaki i komentarze do swojego arkusza stylów, aby uczynić go bardziej czytelnym. +Możesz też grupować selektory razem, kiedy te same reguły stylów dotyczą wybranych elementów w różny sposób. +

+

Białe znaki

+

Białe znaki to spacje, tabulatory i nowe linie. +Dzięki białym znakom arkusz stylów będzie bardzie czytelny. +

Twój przykładowy plik CSS zawiera w tej chwili jedną regułę na linię i prawie minimalną liczbę białych znaków. W złożonych arkuszach stylów taki układ byłby bardzo trudny do czytania, utrudniając zarządzanie arkuszem. +

Styl, który wybierzesz, zazwyczaj zależy od prywatnych przyzwyczajeń, ale Twój arkusz stylów może być częścią projektu, którym zajmuje się więcej osób. W takiej sytuacji przyjmuje się pewne konwencje. +

+ + +
Przykłady +
Niektórzy ludzie lubią zwięzły układ, którego używaliśmy do tej pory, dzieląc linię jedynie wtedy, kiedy staje się ona bardzo długa: +
+.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+

Inni wolą układać jedną własność-wartość na linię: +

+
+

.carrot +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +

+
+

Inni używają wcięć — często używane są dwie spacje, cztery spacje lub tabulator: +

+
+

.carrot { +

+
 color: orange;
+ text-decoration: underline;
+ font-style: italic;
+
+

} +

+
+

Inni wolą ustawiać wszystko względem pionowej osi (jednak taki układ jest trudny w zarządzaniu): +

+
+

.carrot +

+
   {
+   color           : orange;
+   text-decoration : underline;
+   font-style      : italic;
+   }
+
+
+

Tworząc wcięcia jedni wolą używać tabulatorów, inni zaś tylko spacji. +

+
+

Komentarze

+

Komentarze w CSS zaczynają się od /*, a kończą się na */. +

Możesz używać komentarzy, aby komentować elementy swojego arkusza stylów oraz do wykomentowywania części aktualnie nieużywanych. +

Aby wykomentować części arkusza stylów, umieść tę część w komentarzu, a przeglądarka ją zignoruje. +Należy uważać, gdzie zaczyna, a gdzie kończy się komentarz. +Dalsza część arkusza stylów musi mieć poprawną składnię. +

+ + +
Przykład +
+

/* styl dla początkowej litery C w pierwszym paragrafie */ +.carrot { +

+
 color:            orange;
+ text-decoration:  underline;
+ font-style:       italic;
+ }
+
+
+
+

Grupy Selektorów

+

Kiedy wiele selektorów ma ten sam styl, możesz określić grupę selektorów, oddzielając je przecinkami. +Deklaracja zostanie zastosowana do wszystkich wybranych elementów. +

W innych miejscach arkusza stylów możesz określić te same selektory ponownie, aby nadać im indywidualne reguły. +

+ + +
Przykład +
Ta reguła sprawia, że elementy H1, H2 oraz H3 są tego samego koloru. +

Wygodnie jest określić kolor tylko w jednym miejscu, na wypadek, gdyby miał być zmieniany. +

+
+

/* kolory nagłówków */ +h1, h2, h3 {color: navy;} +

+
+
+

Zadanie: Dodawanie komentarzy i poprawianie układu

+

Wyedytuj swój plik CSS i upewnij się, że posiada on te reguły (w dowolnej kolejności): +

+
+

strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +

+
  1. first {font-style: italic;} +
+

p {color: blue;} +

+
+

Spraw, aby stał się bardziej czytelny, zmieniając kolejność w sposób, który uznasz za logiczny oraz dodając białe znaki i komentarze w taki sposób, jaki uznasz za najlepszy. +

Zapisz ten plik i odśwież stronę w przeglądarce, aby upewnić się, że Twoje zmiany nie wpłynęły na działanie arkusza stylów: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+


+

+ + +
Wyzwanie +
Wykomentuj część arkusza stylów bez zmieniania czegokolwiek poza tym, aby pierwsza litera dokumentu była czerwona: + + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+

(Jest więcej niż jeden sposób, aby to zrobić.) +

+
+


+

+

Co dalej?

+

Twój przykładowy dokument używa kursywy oraz podkreślenia. +Następna strona omawia kolejne sposoby na określanie wyglądu tekstu w dokumencie: +Style tekstowe +

+
+
+{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "it": "it/Conoscere_i_CSS/CSS_leggibili", "ja": "ja/CSS/Getting_Started/Readable_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/dane_xml/index.html" "b/files/pl/web/css/na_pocz\304\205tek/dane_xml/index.html" new file mode 100644 index 0000000000..3352d21184 --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/dane_xml/index.html" @@ -0,0 +1,191 @@ +--- +title: Dane XML +slug: Web/CSS/Na_początek/Dane_XML +tags: + - 'CSS:Na_początek' +translation_of: Archive/Beginner_tutorials/XML_data +--- +

+

Ta strona zawiera przykład tego, jak możesz używać CSS z danymi XML. +

Stworzysz przykładowy dokument XML oraz arkusz stylów, którego możesz użyć do wyświetlenia tego dokumentu w przeglądarce. +

+

Informacja: Dane XML

+

XML (Rozszerzalny Język Znaczników) jest językiem ogólnego przeznaczenia dla wszelkiego typu danych strukturalnych. +

Domyślnie, Twoja przeglądarka Mozilla wyświetla XML w formacie bardzo podobnym do ułożenia danych w oryginalnym pliku XML. +Dzięki temu możesz obejrzeć znaczniki, które określają strukturę danych. +

Przez podpięcie arkusza stylów CSS do dokumentu XML, może określić inne sposoby wyświetlenia go. +Aby to zrobić, Twój arkusz stylów używa reguł, które mapuje znaczniki w dokumencie XML, aby były wyświetlane w typach znanych HTML-owi. +

+ + +
Przykład +
Dane w dokumencie XML używają tagu <INFO>. Chcesz, aby wszystkie elementy INFO w dokumencie były wyświetlane jak HTML-owe akapity. +

W arkuszu stylów dokumentu, określasz jak wyświetlane będą elementy INFO: +

+
+
INFO {
+ display: block;
+ margin: 1em 0;
+ }
+
+
+
+

Najczęstszymi wartościami własności display są: +

+ + + + +
blockWyświetlane jak HTML-owy DIV (nagłówki, akapity itp.) +
inlineWyświetlany jak HTML-owy SPAN (dla typów tekstowych) +
+

Dodaj własne reguły stylów, które określą krój, odstępy i inne szczegóły w taki sam sposób, jak dla HTML-a. +

+ + +
Więcej szczegółów +
Inne wartości własności display pozwalają wyświetlać element jako punkt listy lub jako komponent tabeli. +

Pełną listę typów wyświetlania można znaleźć w specyfikacji CSS na stronie The display property. +

Jeśli korzystasz wyłącznie z CSS, struktura wyświetlania musi być taka sama jak struktura dokumentu. +Inne technologie pozwalają modyfikować strukturę wyświetlania—na przykład XBL może dodawać treść, a JavaScript może modyfikować DOM. +

Aby dowiedzieć się więcej o XML-u w Mozilli, zajrzyj na stronę XML w tym wiki. +

+
+

Zadanie: Demonstracja XML-a

+

Stwórz nowy plik XML, doc9.xml. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
<?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>
+
+

Stwórz nowy plik CSS, style9.css. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
/*** 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";
+  }
+
+

Otwórz dokument w swojej przeglądarce: +

+ + +
+

Oceans

+

Arctic
+Area: 13,000 million km²
+Mean depth: 1,200 m

+

Atlantic
+Area: 87,000 million km²
+Mean depth: 3,900 m

+

. . .

+
+
+


+Uwagi dotyczące tej demonstracji: +

+ +


+

+ + +
Wyzwanie +
Zmień arkusz stylów, aby wyświetlał dokument jako tabelę. +

(Zajrzyj na stronę Tables w specyfikacji CSS, aby znaleźć przykłady.) +

+
+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie Dyskusji. +

To jest ostatnia strona tego kursu. +Więcej informacji na temat CSS w Mozilli możesz znaleźć na głównej stronie CSS-a na tym wiki. +

{{ languages( { "en": "en/CSS/Getting_Started/XML_data", "fr": "fr/CSS/Premiers_pas/Donn\u00e9es_XML", "pt": "pt/CSS/Como_come\u00e7ar/Dados_XML", "ko": "ko/CSS/Getting_Started/XML_data" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/grafika_svg/index.html" "b/files/pl/web/css/na_pocz\304\205tek/grafika_svg/index.html" new file mode 100644 index 0000000000..1581fbdcd8 --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/grafika_svg/index.html" @@ -0,0 +1,195 @@ +--- +title: Grafika SVG +slug: Web/CSS/Na_początek/Grafika_SVG +tags: + - 'CSS:Na_początek' +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +

+

Ta strona ilustruje specjalny język do tworzenia grafiki: SVG. +

Stworzysz prostą demonstrację, która działa w przeglądarce Mozilli z obsługą SVG.

+

Informacja: SVG

+

SVG (Skalowalna Grafika Wektorowa) jest bazującym na XML-u językiem do tworzenia grafiki. +

Może być używana do tworzenia statycznych obrazków, ale także animacji i interfejsów użytkownika. +

Podobnie jak inne bazujące na XML-u języki, SVG obsługuje arkusze stylów CSS, dzięki czemu możesz oddzielić styl grafiki od jej zawartości. +

Ponadto, arkusz stylów, którego używasz w innych językach znaczników dokumentu, może wskazywać adres grafiki SVG tam, gdzie potrzebny jest obrazek. +Na przykład, arkusz stylów, którego używasz w dokumencie HTML może wskazywać na adres URL grafiki SVG jako wartość własności background. +

+ + +
Więcej szczegółów +
W trakcie pisania tego kursu (połowa 2005) tylko najnowsze wydania przeglądarek Mozilli posiadają wbudowaną obsługę SVG. +

Możesz dodać wsparcie dla SVG do innych wersji instalując wtyczkę taką, jak ta wydana przez Adobe. +

Aby dowiedzieć się więcej o SVG w Mozilli, zajrzyj na stronę SVG w tym wiki. +

+
+

Zadanie: Demonstracja SVG

+

Stwórz nowy dokument SVG jako czysty plik tekstowy, doc8.svg. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
<?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>
+
+

Stwórz nowy plik CSS, style8.css. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
/*** 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;
+  }
+
+

Otwórz ten dokument w swojej przeglądarce z obsługą SVG. Przesuwaj kursor myszy nad grafiką. +

To wiki nie obsługuję SVG na stronach, więc nie jest możliwe pokazanie demonstracji. +Grafika wygląda mniej więcej tak: +

+ + +
Demonstracja SVG +
+

Uwagi dotyczące tej demonstracji: +

+ +


+

+ + +
Wyzwanie +
Zmień ten arkusz stylów, aby wewnętrzne płatki zmieniały się wszystkie na różowy, kiedy wskaźnik myszy znajduje się nad jednym z nich, bez zmiany działania zewnętrznych płatków. +
+


+

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie Dyskusji. +

W tej demonstracji Twoja przeglądarka, obsługująca SVG, umie już wyświetlić elementy SVG. +Arkusz stylów modyfikuje tylko sposób wyświetlania elementów. +Tak samo dzieje się z dokumentami HTML i XUL. +Możesz też używać CSS-a w dokumentach XML ogólnego przeznaczenia, gdzie nie istnieje domyślny sposób wyświetlania elementów. +Następna strona omawia ten temat: +Dane XML +

{{ languages( { "en": "en/CSS/Getting_Started/SVG_graphics", "fr": "fr/CSS/Premiers_pas/Graphiques_SVG", "pt": "pt/CSS/Como_come\u00e7ar/Gr\u00e1ficos_SVG" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/index.html" "b/files/pl/web/css/na_pocz\304\205tek/index.html" new file mode 100644 index 0000000000..dd8cd83dcb --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/index.html" @@ -0,0 +1,63 @@ +--- +title: Na początek +slug: Web/CSS/Na_początek +tags: + - CSS + - 'CSS:Na_początek' + - Wszystkie_kategorie +translation_of: Learn/CSS/First_steps +--- +

 

+

Wprowadzenie

+

Ten kurs wprowadza użytkownika w świat kaskadowych arkuszy stylów (CSS).

+

Pokaże Ci on, jak korzystać z podstawowych funkcji CSS przy użyciu praktycznych przykładów, które możesz sprawdzić na swoim komputerze. Kurs składa się z dwóch części.

+ + +

Ten kurs bazuje na specyfikacji CSS 2.1.

+

Kto może skorzystać z tego kursu?

+

Kurs jest przeznaczony dla początkujących, ale może być też przydatny dla osób mających już pewną wiedzę o CSS.

+

Jeżeli jesteś początkujący, skorzystaj z pierwszej części tego kursu, by zrozumieć działanie CSS i nauczyć się go używać. Potem przeczytaj część drugą, aby zrozumieć zakres wykorzystania CSS w produktach Mozilli.

+

Jeżeli znasz już trochę CSS, możesz pominąć części kursu, które omawiają znane Ci tematy i skupić się na tych, które są dla Ciebie nowe.

+

Jeżeli znasz dobrze CSS, ale nie w Mozilli, przejdź do części drugiej.

+

Czego potrzebujesz, zanim zaczniesz?

+

Aby móc swobodnie korzystać z tego kursu, potrzebujesz edytora plików tekstowych oraz przeglądarkę Mozilla (Firefox lub Mozilla Suite) i powinieneś umieć korzystać z obu tych produktów w podstawowym zakresie.

+

Jeżeli nie chcesz edytować plików, możesz po prostu czytać kurs i patrzeć na obrazki, ale taka metoda nauki jest znacznie mniej efektywna.

+

Niektóre części tego kursu mogą wymagać innych aplikacji Mozilli. Części te są opcjonalne. Jeżeli nie chcesz pobierać innych aplikacji Mozilli, po prostu pomiń je.

+

Uwaga:  CSS umożliwia pracę z kolorami, więc niektóre części kursu zależą od kolorów. Możesz z nich wygodnie korzystać, jeśli posiadasz kolorowy wyświetlacz i prawidłowo rozróżniasz kolory.

+

Jak korzystać z tego kursu

+

Aby korzystać z tego kursu, przeczytaj uważnie wszystkie strony po kolei. Jeżeli pominiesz jedną stronę, możesz mieć trudności z rozumieniem dalszych.

+

Na każdej stronie sekcja Informacja opisuje, jak działa CSS. Dzięki sekcji Zadanie będziesz mógł wypróbować użycie CSS na swoim komputerze.

+

Aby sprawdzić, jak dobrze rozumiesz treść, podejmij wyzwanie znajdujące się na dole każdej strony. Rozwiązania niektórych wyzwań są prezentowane na późniejszych stronach kursu.

+

Aby lepiej zrozumieć CSS, przeczytaj informacje znajdujące się w boksach oznaczonych Więcej szczegółów. Użyj znajdujących się tam odnośników, aby dowiedzieć się więcej ze specyfikacji CSS.

+

Kurs – część pierwsza

+

Podstawowy kurs CSS, krok po kroku.

+
    +
  1. Czym jest CSS
    2. +
  2. Po co używać CSS
    3. +
  3. Jak działa CSS
    4. +
  4. Kaskadowość i dziedziczenie
    5. +
  5. Selektory
    6. +
  6. Czytelny CSS
    7. +
  7. Style tekstowe
    8. +
  8. Kolor
    9. +
  9. Treść
    10. +
  10. Listy
    11. +
  11. Bloki
    12. +
  12. Układ
    13. +
  13. Tabele
    14. +
  14. Media
    15. +
+

Kurs – część druga

+

Przykłady wykorzystania CSS w Mozilli.

+
    +
  1. JavaScript
    2. +
  2. Wiązania XBL
    3. +
  3. XUL-owe interfejsy użytkownika
    4. +
  4. Grafika SVG
    5. +
  5. Dane XML
    6. +
+

{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "zh-cn": "cn/CSS/\u5f00\u59cb", "pt": "pt/CSS/Como_come\u00e7ar" } ) }}

diff --git "a/files/pl/web/css/na_pocz\304\205tek/jak_dzia\305\202a_css/index.html" "b/files/pl/web/css/na_pocz\304\205tek/jak_dzia\305\202a_css/index.html" new file mode 100644 index 0000000000..f660589f31 --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/jak_dzia\305\202a_css/index.html" @@ -0,0 +1,113 @@ +--- +title: Jak działa CSS +slug: Web/CSS/Na_początek/Jak_działa_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

+

Ta strona wyjaśnia, jak działa CSS w przeglądarce. +Przeanalizujesz przykładowy dokument, poznając szczegóły jego stylów. +

+

Informacja: Jak działa CSS

+

Kiedy Mozilla wyświetla dokument, musi połączyć treść dokumentu z jego informacjami o stylu. Tak więc dzieli ona proces na dwa etapy: +

+ + +

Język znaczników używa znaczników do opisywania struktury dokumentu. Znacznik może być kontenerem, zawierającym inne znaczniki. +

DOM posiada strukturę drzewiastą. Każdy znacznik i fragment tekstowy w języku znaczników staje się węzłem w strukturze drzewiastej. Węzły DOM nie są kontenerami. W zamian za to mogą posiadać węzły rodziców i dzieci. +

Węzły, które odpowiadają znacznikom, znane są także jako elementy. +

+ + +
Przykład +
W Twoim przykładowym dokumencie znacznik <P> i jego znacznik </P> tworzą kontener: +
+
<P>
+  <STRONG>C</STRONG>ascading
+  <STRONG>S</STRONG>tyle
+  <STRONG>S</STRONG>heets
+</P>
+
+
+

W DOM odpowiadający węzeł P jest rodzicem. +Jego dzieci to węzły STRONG oraz węzły tekstowe. +Węzły STRONG same są rodzicami posiadającymi węzły tekstowe jako swoje dzieci: +

+
+

P +├─STRONG +│ │ +│ └─"C" +│ +├─"ascading" +│ +├─STRONG +│ │ +│ └─"S" +│ +├─"tyle" +│ +├─STRONG +│ │ +│ └─"S" +│ +└─"heets" +

+
+
+

Zrozumienie DOM pomaga w tworzeniu, debugowaniu i zarządzaniu CSS, ponieważ DOM jest punktem, w którym łączona jest treść dokumentu ze stylami CSS. +

+

Zadanie: Analiza DOM

+

Do analizy DOM potrzebny jest specjalny program. +Służy do tego na przykład Inspektor DOM Mozilli. +

Użyj przeglądarki Mozilla do otworzenia przykładowego dokumentu. +

Z paska menu przeglądarki wybierz Narzędzia – Inspektor DOM lub Narzędzia – Programowanie WWW – Inspektor DOM. +

+ + +
Więcej szczegółów +
Jeżeli Twoja przeglądarka Mozilli nie posiada Inspektora DOM, możesz zainstalować przeglądarkę ponownie, zaznaczając przy instalacji komponent narzędzi programistycznych. Potem wróć do tego kursu. +

DevmoPL: Możesz też zainstalować DOMi jako rozszerzenie +

Jeżeli nie chcesz instalować Inspektora DOM, możesz pominąć ten rozdział i przejść do następnej strony. Pominięcie tej sekcji nie wpłynie na resztę kursu. +

+
+

W Inspektorze DOM rozwiń węzły dokumentu, klikając na strzałki. +

Notka:  Formatowanie spacjami dokumentu HTML spowoduje, że pojawią się puste węzły, które możesz zignorować. +

Część wyniku może wyglądać tak: +

+ + +
+

│ +▼╴P +│ │ +│ ▼╴STRONG +│ │ └#text +│ ├╴#text +│ ▶╴STRONG +│ │ +

+
+
+

Kiedy wybierasz jakikolwiek węzeł, możesz dowiedzieć się o nim więcej, używając prawej kolumny Inspektora DOM. +Na przykład po wybraniu węzła tekstowego Inspektor DOM pokazuje jego zawartość w prawej kolumnie. +

Kiedy zaznaczasz węzeł elementu, Inspektor DOM analizuje go i podaje w prawym panelu ogromną liczbę informacji. Informacje o stylu są tylko częścią informacji, jakie można tam znaleźć. +

+ + +
Wyzwanie +
W Inspektorze DOM wybierz węzeł STRONG. +

Skorzystaj z prawego panelu Inspektora, aby dowiedzieć się, gdzie kolor węzła ustawiony został na czerwony i gdzie jego wygląd jest ustawiany na grubszy niż normalny tekst. +

+
+


+

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

Jeżeli podjąłeś(podjęłaś) wyzwanie, widzisz, że informacje o stylu z wielu miejsc wiążą się, tworząc końcowy styl elementu. +

Następna strona wyjaśnia więcej na temat tych interakcji: +Kaskadowość i dziedziczenie +

{{ languages( { "en": "en/CSS/Getting_Started/How_CSS_works", "fr": "fr/CSS/Premiers_pas/Fonctionnement_de_CSS", "it": "it/Conoscere_i_CSS/Come_funzionano_i_CSS", "ja": "ja/CSS/Getting_Started/How_CSS_works", "pt": "pt/CSS/Como_come\u00e7ar/Como_o_CSS_trabalha", "zh-cn": "cn/CSS/Getting_Started/How_CSS_works" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/javascript/index.html" "b/files/pl/web/css/na_pocz\304\205tek/javascript/index.html" new file mode 100644 index 0000000000..68a2900407 --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/javascript/index.html" @@ -0,0 +1,126 @@ +--- +title: JavaScript +slug: Web/CSS/Na_początek/JavaScript +tags: + - 'CSS:Na_początek' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +

+

Jest to druga część tego kursu. Część II zawiera trochę przykładów pokazujących zakres użycia CSS w Mozilli. +

Każda strona Części II ilustruje jak CSS współpracuje z innymi technologiami. +Te strony nie zostały stworzone po to, aby nauczyć Cię korzystać z tych technologii. +Jeśli chcesz je poznać, skorzystaj z innych kursów. +

Natomiast, te strony zostały stworzone po to, aby pokazać wiele możliwości wykorzystania CSS. +Aby używać tych stron, powinieneś(aś) znać CSS, ale nie musisz znać innych technologii. +

+

Informacja: JavaScript

+

JavaScript jest językiem programowania. +Duża część kodu aplikacji Mozilla (na przykład przeglądarki) jest napisana w JavaScripcie. +

JavaScript może współpracować z arkuszami stylów, pozwalając Ci pisać aplikacje, które dynamicznie zmieniają styl dokumentu. +

Istnieją na to trzy sposoby: +

+ + + +
Więcej szczegółów +
Aby dowiedzieć się więcej o JavaScripcie w Mozilli, zajrzyj na stronę JavaScript na tym wiki. +
+

Zadanie: Demonstracja wykorzystania Javascript-u

+

Stwórz nowy dokument HTML, doc5.html. +Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<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 type="button" onclick="doDemo(this);">Click Me</BUTTON>
+
+</BODY>
+</HTML>
+
+

Stwórz nowy plik CSS, style5.css. +Skopiuj i wklej do niego poniższy kod: +

+
/*** JavaScript demonstration ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+  }
+
+button {
+  padding: .5em 2em;
+  }
+
+

Stwórz nowy plik tekstowy, script5.js. +Skopiuj i wklej do niego poniższy kod: +

+
// JavaScript demonstration
+function doDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "#fa4"
+  button.setAttribute("disabled", "true")
+  setTimeout(clearDemo, 2000, button)
+  }
+
+function clearDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "transparent"
+  button.removeAttribute("disabled")
+  }
+
+

Otwórz dokument w swojej przeglądarce i naciśnij przycisk. +

To wiki nie obsługuje JavaScriptu na stronach, więc nie jest możliwe zademonstrowanie działania tego kodu tutaj. +Wygląda to mniej więcej jak poniżej, przed i po naciśnięciu przycisku: +

+ + +
+ + +

JavaScript demonstration

+
+
+
+		 + + +

JavaScript demonstration

+
+
+
+
+

Uwagi dotyczące demonstracji: +

+ + + +
Wyzwanie +
Zmień skrypt tak, aby obiekt square skakał w prawo o 20 em, kiedy jego kolor się zmienia, i skakał z powrotem, kiedy kolor wraca do podstawowego. +
+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

W tej demonstracji dokument HTML posiada odnośnik do skryptu, mimo że używa go tylko element przycisku. +Mozilla rozszerza CSS, aby umożliwić wiązanie kodu JavaScript (oraz treści i innych arkuszy stylów) z wybranymi elementami. +Następna strona opisuje to: +Wiązania XBL +

{{ languages( { "en": "en/CSS/Getting_Started/JavaScript", "fr": "fr/CSS/Premiers_pas/JavaScript", "pt": "pt/CSS/Como_come\u00e7ar/JavaScript" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/kaskadowo\305\233\304\207_i_dziedziczenie/index.html" "b/files/pl/web/css/na_pocz\304\205tek/kaskadowo\305\233\304\207_i_dziedziczenie/index.html" new file mode 100644 index 0000000000..dbf53074b0 --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/kaskadowo\305\233\304\207_i_dziedziczenie/index.html" @@ -0,0 +1,96 @@ +--- +title: Kaskadowość i dziedziczenie +slug: Web/CSS/Na_początek/Kaskadowość_i_dziedziczenie +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +

+

Ta strona tłumaczy jak arkusze stylów oddziaływują w kaskadzie, oraz jak elementy dziedziczą style od swoich rodziców. +

Nauczysz się zmieniać styl wielu elementów dokumentu jednym ruchem dzięki dziedziczeniu. +

+

Informacja: Kaskadowość i dziedziczenie

+

Ostateczny styl elementu może być określony w wielu różnych miejscach, które mogą na siebie oddziaływać w złożony sposób. +Złożone interakcje czynią CSS potężnym, ale także mogą uczynić go niezrozumiałym i trudnym do debugowania. +

Trzy główne źródła informacji o stylu tworzą kaskadę. +Są to: +

+ +

Styl użytkownika modyfikuje domyślny styl przeglądarki. +Styl autora dokumentu modyfikuje ten styl jeszcze bardziej. +W tym kursie Ty jesteś autorem przykładowego dokumentu i pracujesz tylko ze stylem autora. +

+ + +
Przykład +
Kiedy czytasz ten dokument w przeglądarce Mozilla, część stylu, który widzisz, pochodzi z domyślnego stylu przeglądarki dla HTML-a. +

Część tego stylu pochodzi z Twoich ustawień przeglądarki w Opcjach lub z pliku userContent.css w profilu przeglądarki. +

Część tego stylu pochodzi z arkusza stylów podpiętego do tego dokumentu przez serwer wiki. +

+
+

Kiedy otwierasz przykładowy dokument w swojej przeglądarce, elementy STRONG są pogrubione w stosunku do reszty tekstu. Dzieje się tak, ponieważ zostało to ustawione w domyślnym stylu przeglądarki dla HTML-a. +

Elementy STRONG są czerwone. To ustawienie pochodzi z Twojego arkusza stylów. +

Elementy STRONG dziedziczą też większość ustawień stylu elementu P, ponieważ są jego dziećmi. W ten sam sposób element P dziedziczy wiele ustawień ze stylu elementu BODY. +

Dla stylów w kaskadzie najważniejsze są style autora strony, potem czytelnika, a na końcu ustawienia domyślne przeglądarki. +

Dla dziedziczonych stylów własne style ich dzieci mają wyższy priorytet od stylu dziedziczonego po rodzicu. +

Nie są to jedyne istniejące priorytety. Dalsze strony tego kursu wyjaśnią więcej. +

+ + +
Więcej szczegółów +
CSS daje też czytelnikowi możliwość nadpisania stylów autora dokumentu przez użycie słowa kluczowego !important. +

Oznacza to, że jako autor dokumentu, nie możesz nigdy dokładnie przewidzieć, co czytelnicy zobaczą. +

Jeżeli chcesz poznać wszystkie szczegóły kaskadowości i dziedziczenia, zobacz Przypisywanie wartości własności, Kaskadowość oraz dziedziczenie w specyfikacji CSS. +

+
+

Zadanie: Używanie dziedziczenia

+

Wyedytuj Twój przykładowy plik CSS. +

Dodaj tę linię poprzez skopiowanie i wklejenie jej. +Nie ma żadnego znaczenia, czy dodasz ją pod czy nad linią, która już tam jest. +Jednakże dodawanie jej na górze jest bardziej logiczne, ponieważ w Twoim dokumencie element P jest rodzicem elementu STRONG: +

+
p {color: blue; text-decoration: underline;}
+
+

Teraz odśwież okno przeglądarki, aby obejrzeć efekt na przykładowym dokumencie. +Podkreślenie wpłynęło na cały tekst paragrafu, włączając w to początkowe litery. +Elementy STRONG dziedziczyły styl podkreślenia po swoim rodzicu, elemencie P. +

Ale elementy STRONG nadal są czerwone. Kolor czerwony jest ich własnym stylem, ma zatem wyższy priorytet niż niebieski kolor ich rodzica, elementu P. +

+ + +
+ + +
Przed +
Cascading Style Sheets +
+		 + + +
Po +
Cascading Style Sheets +
+
+


+

+ + +
Wyzwanie +
Zmień swój arkusz stylów, aby tylko czerwone litery były podkreślone: + + +
Cascading Style Sheets +
+
+


+

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

Twój przykładowy arkusz stylów opisuje style dla znaczników P oraz STRONG, +zmieniając styl odpowiednich elementów w Twoim dokumencie. +Następna strona opisuje, jak określić styl w bardziej selektywny sposób: +Selektory +

{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "it": "it/Conoscere_i_CSS/Cascata_ed_ereditariet\u00e0", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a", "zh-cn": "cn/CSS/Getting_Started/Cascading_and_inheritance" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/kolor/index.html" "b/files/pl/web/css/na_pocz\304\205tek/kolor/index.html" new file mode 100644 index 0000000000..2edc0a662c --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/kolor/index.html" @@ -0,0 +1,208 @@ +--- +title: Kolor +slug: Web/CSS/Na_początek/Kolor +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +

+

Ta strona dokładniej opisuje sposoby pracy z kolorami w CSS-ie. +

W swoim przykładowym arkuszu stylów, dodasz kolory tła. +

+

Informacja: Kolor

+

Do tej pory w tym kursie używałeś(aś) ograniczonej liczby nazwanych kolorów. +CSS 2 definiuje 17 nazwanych kolorów. +Niektóre z nazw mogą nie być tym, czego się spodziewasz: +

+ + + + + + + + +
  black   gray   silver   white +
podstawowe red   lime   blue +
drugorzędne yellow   aqua   fuchsia +
 maroon  orange  olive  purple  green  navy  teal +
+


+

+ + +
Więcej szczegółów +
Twoja przeglądarka może obsługiwać znacznie więcej nazwanych kolorów, na przykład: + + +
dodgerblue  peachpuff   tan   firebrick   aquamarine +
+

Szczegółową listę znajdziesz w dokumentacji CSS 3, w module Kolor, sekcji +słowa kluczowe kolorów w SVG. Unikaj używania nazwanych kolorów, których przeglądarka osoby czytającej Twój dokument może nie obsługiwać. +

+
+

Aby móc korzystać w większej palety kolorów, określ czerwony, zielony i niebieski komponent koloru, z którego chcesz skorzystać, używając znaku "hash" oraz trzech heksadecymalnych liczb w zakresie od 0 – 9, a – f. Litery a – f reprezentują wartości 10 – 15. +

+ + + + + + + + + + +
black  #000 +
pure red   #f00 +
pure green   #0f0 +
pure blue   #00f +
white   #fff +
+

Aby skorzystać z pełnej palety, określ dwie heksadecymalne liczby na każdy komponent: +

+ + + + + + + + + + +
black   #000000 +
pure red   #ff0000 +
pure green   #00ff00 +
pure blue   #0000ff +
white   #ffffff +
+

Zazwyczaj te sześcioliczbowe, heksadecymalne kody możesz pobrać z Twojego programu graficznego lub innego narzędzia. +

+ + + + +
Przykłady +
Odrobina praktyki i w większości wypadków możesz modyfikować trzyliczbowe kolory ręcznie: + + + + + + + + + + + + +
Zacznij od czystej czerwieni:  #f00 +
Aby ją rozjaśnić, dodaj trochę zielonego i niebieskiego:  #f77 +
Aby kolor był bardziej pomarańczowy, dodaj trochę zielonego:  #fa7 +
Aby kolor był ciemniejszy, zmniejsz wartość wszystkich komponentów:  #c74 +
Aby zmniejszyć nasycenie, zmniejsz różnice między wartościami komponentów:  #c98 +
Jeśli ustawisz jednakową wartość wszystkich komponentów, uzyskasz kolor szary:  #ccc +
+
Aby uzyskać pastelowy odcień, taki jak blady niebieski: + + + + +
Zacznij od białego:  #fff +
Zredukuj trochę wartości komponentów innych, niż niebieski:  #eef +
+
+


+

+ + +
Więcej szczegółów +
Możesz także określić kolor, używając decymalnych wartości RGB w zakresie 0 – 255, lub procentów. +

Na przykład to jest kasztanowaty (ciemnoczerwony): +

+
+rgb(128, 0, 0)
+
+

Więcej szczegółów na temat określania kolorów znajdziesz w sekcji +Kolory w specyfikacji CSS. +

Więcej informacji na temat dopasowania kolorów do kolorów systemowych, jak Menu czy ThreeDFace, znajdziesz w: +CSS2 Kolory Systemowe specyfikacji CSS. +

+
+


+

+

Własności kolorów

+

Korzystałeś(aś) już z własności color dla tekstu. +

Możesz też użyć własności background-color, aby zmienić tła elementów. +

Jeżeli ustawisz wartość tła na transparent, będzie ono przezroczyste i pokaże tło elementu rodzica. +

+ + +
Przykład +
Boksy Przykład w tym kursie używają bladożółtego tła: +
+background-color: #fffff4;
+
+

Boksy Więcej szczegółów używają bladoszarego: +

+
+background-color: #f4f4f4;
+
+
+

Zadanie: Korzystanie z kodów kolorów

+

Wyedytuj swój plik CSS. +

Wykonaj zmiany oznaczone tutaj pogrubieniem, aby nadać pierwszym literom bladoniebieskie tło. +(Styl i komentarze w Twoim pliku będą prawdopodobnie inne niż pokazane tutaj. +Zachowaj styl i komentarze w stylu jaki wybrałeś(aś)). +

+
+
/*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphs */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* initial letters */
+strong {
+ color: red;
+ background-color: #ddf;
+ font: 200% serif;
+ }
+
+.carrot {color: red;}
+.spinach {color: green;}
+
+
+

Odśwież okno przeglądarki, aby zobaczyć wynik: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+


+

+ + +
Wyzwanie +
W swoim pliku CSS zmień wszystkie nazwy kolorów na 3-cyfrowe kody kolorów, tak, żeby rezultat pozostał taki sam. +

(To nie jest do końca możliwe, ale możesz być blisko ideału. +Aby uzyskać dokładnie taki efekt, potrzebujesz 6-cyfrowych kodów oraz musisz zajrzeć do specyfikacji CSS lub użyć narzędzia graficznego, aby znaleźć odpowiednie kody). +

+
+


+

+

Co dalej?

+

Twój przykładowy dokument i przykładowy arkusz stylów ściśle rozdzielają treść od stylu. +

Następna strona wyjaśnia, jak robić wyjątki od tego rozdziału: +Treść +

+
+
+{{ languages( { "en": "en/CSS/Getting_Started/Color", "fr": "fr/CSS/Premiers_pas/Couleurs", "it": "it/Conoscere_i_CSS/Colori", "ja": "ja/CSS/Getting_Started/Color", "pt": "pt/CSS/Como_come\u00e7ar/Cor" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/listy/index.html" "b/files/pl/web/css/na_pocz\304\205tek/listy/index.html" new file mode 100644 index 0000000000..18c61f4bce --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/listy/index.html" @@ -0,0 +1,268 @@ +--- +title: Listy +slug: Web/CSS/Na_początek/Listy +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +

+

Ta strona opisuje jak możesz użyć CSS-a do określania wyglądu list. +

Stworzysz nowy dokument zawierający listę, oraz nowy arkusz stylów ze stylami dla niej. +

+

Informacja: Listy

+

Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony (Treść), widziałeś(aś), jak można dodać treść przed jakimś elementem, aby wyglądało to jak elementy listy. +

CSS posiada specjalne własności stworzone dla list. +Staraj się z nich korzystać, jeśli masz możliwość. +

Aby określić styl dla listy, użyj własności list-style do określenia typu znacznika. +

Selektor w regule CSS może określać elementy listy (np. LI) lub element rodzica list (np. UL), z którego elementy listy będą dziedziczyły te style. +

+

Listy nieuporządkowane (unordered lists)

+

W liście nieuporządkowanej każdy element jest oznaczony w ten sam sposób. +

W CSS występują trzy typy oznaczeń. +Wyświetlane są w następujący sposób: +

+ +

Alternatywnie możesz określić URL do obrazka. +

+ + +
Przykład +
Te reguły określają różne oznaczenia dla różnych klas elementów listy: +
+

li.open {list-style: circle;} +li.closed {list-style: disc;} +

+
+

Kiedy użyjesz tych klas w liście, rozdzielisz elementy otwarte i zamknięte: +

+
+

<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> +

+
+

Wynik może wyglądać na przykład tak: +

+ + +
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+

Listy uporządkowane (ordered lists)

+

W przypadku list uporządkowanych każdy element listy jest osobno oznaczony, aby zaznaczyć jego pozycję w sekwencji. +

Użyj własności list-style, aby określić typ oznaczenia: +

+ + + +
Przykład +
Ta reguła określa, że w bloku OL z klasą info elementy są oznaczane dużymi literami. +
+

ol.info {list-style: upper-latin;} +

+
+

Elementy LI dziedziczą ten styl: +

+ + +
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+ + +
Więcej szczegółów +
Własność list-style jest własnością skrótową. W złożonych arkuszach stylów raczej będziesz wolał(a) używać osobnych własności dla osobnych wartości. Aby dowiedzieć się więcej na temat osobnych własności oraz jak CSS określa listy, zajrzyj do sekcji Listy w dokumentacji CSS. +

Jeżeli używasz języka znaczników, jak HTML, który korzysta z własnych znaczników dla list nieuporządkowanych (UL) i uporządkowanych (OL), wówczas dobrym zwyczajem jest korzystanie z nich zgodnie z przeznaczeniem. Jednakże możesz użyć CSS, aby wyświetlić UL jako posortowaną, a OL jako nieposortowaną, jeśli wolisz. +

Różne przeglądarki w różny sposób obsługują te style dla list. +Nie oczekuj, że Twój arkusz stylów zostanie wyświetlony identycznie we wszystkich. +

+
+

Liczniki

+
+

Notatka:  Niektóre przeglądarki nie obsługują liczników.

+
+

Możesz używać liczników do różnych elementów, nie tylko list. +Na przykład w niektórych dokumentacjach możesz chcieć numerować nagłówki lub paragrafy. +

Aby określić numerację, musisz zadeklarować counter z określoną nazwą. +

W którymś z elementów, zanim rozpocznie się naliczanie, zresetuj licznik, używając właściwości counter-reset i nazwą Twojego licznika. +Rodzic elementów, które liczysz, jest dobrym miejscem na reset, ale możesz użyć dowolnego elementu, który pojawia się przed elementami listy. +

W każdym elemencie, w którym licznik jest inkrementowany, dodaj właściwość counter-increment. Jako wartość podaj nazwę licznika. +

Aby wyświetlić wartość licznika, dodaj :before lub :after do selektora i użyj własności content (tak jak na poprzedniej stronie Treść). +

Jako wartość własności content wstaw counter() z nazwą swojego licznika. +Opcjonalnie określ typ. +Typy są takie same jak w sekcji 'listy uporządkowane. +

Zwykle element, który wyświetla licznik, inkrementuje go. +

+ + +
Przykład +
Ta reguła inicjalizuje licznik w każdym elemencie H3 z klasą numbered: +
+

h3.numbered {counter-reset: mynum;} +

+
+

Ta reguła wyświetla i inkrementuje licznik dla każdego elementu P z klasą numbered: +

+
+

p.numbered:before { +

+
 content: counter(mynum) ": ";
+ counter-increment: mynum;
+ font-weight: bold;}
+
+
+

Wynik wygląda tak: +

+ + +
Heading
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+ + +
Więcej szczegółów +
Nie należy używać liczników, jeśli nie masz pewności, że każdy, kto czyta Twój dokument, posiada obsługującą je przeglądarkę. +

Jeżeli możesz używać liczników, mają one tę zaletę, że określasz ich styl niezależnie od elementów listy. W powyższym przykładzie liczniki są pogrubione, a elementu listy nie. +

Możesz też używać liczników w bardziej złożony sposób — na przykład do numerowania sekcji, nagłówków, podnagłówków i paragrafów w dokumentach. +Aby dowiedzieć się więcej, zajrzyj do specyfikacji CSS do sekcji Automatyczne liczniki i numerowanie. +

+
+

Zadanie: Style list

+

Stwórz nowy dokument HTML, doc2.html. +Skopiuj i wklej poniższą treść, upewniając się, że zaznaczyłeś(aś) cały: +

+
+

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Sample document 2</TITLE> +<LINK rel="stylesheet" type="text/css" 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> +

+
+

Stwórz nowy arkusz stylów, style2.css. +Skopiuj i wklej poniższą treść: +

+
+

/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { +

+
 content: counter(mynum) ": ";
+ counter-increment: mynum;
+ font-weight: bold;}
+
+
+

Jeżeli układ i komentarze Ci nie odpowiadają, zmień je. +

Otwórz ten dokument w swojej przeglądarce. +Jeżeli Twoja przeglądarka obsługuje liczniki, zobaczysz coś takiego, jak poniżej. +Jeżeli Twoja przeglądarka nie obsługuje stylów, wówczas nie zobaczysz liczb (i prawdopodobnie także dwukropków): +

+ + +

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+

Numbered paragraphs

+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+


+

+ + +
Wyzwania +
Dodaj jedną regułę do swojego arkusza stylów, aby ponumerować oceany, używając rzymskich liczb od i do v: + + +

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

Jeżeli Twoja przeglądarka obsługuje liczniki, zmień swój arkusz stylów, aby identyfikował nagłówki dużymi literami w takim stylu: +

+ + +

(A) The oceans

+

. . . +

+

(B) Numbered paragraphs

+

. . . +

+
+
+


+

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

Kiedy Twoja przeglądarka wyświetla przykładowy dokument, tworzy przy okazji przestrzeń dookoła elementów, które określają ich rozkład na stronie. +

Następna strona opisuje, jak można użyć CSS do pracy z przestrzenią wokół elementów: +Bloki +

{{ languages( { "en": "en/CSS/Getting_Started/Lists", "fr": "fr/CSS/Premiers_pas/Listes", "pt": "pt/CSS/Como_come\u00e7ar/Listas" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/media/index.html" "b/files/pl/web/css/na_pocz\304\205tek/media/index.html" new file mode 100644 index 0000000000..ef6c87f8cf --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/media/index.html" @@ -0,0 +1,318 @@ +--- +title: Media +slug: Web/CSS/Na_początek/Media +tags: + - 'CSS:Na_początek' +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +

+

Wiele stron tego kursu skupiało się na własnościach i wartościach CSS, których możesz użyć do określania wyglądu dokumentu. +

Ta strona wraca do tematu przeznaczenia i struktury arkuszy stylów. +

+

Informacja: Media

+

Przeznaczeniem CSS-u jest określanie jak dokumentu mają być prezentowane użytkownikowi. +Prezentacja może przyjąć wiele różnych form. +

Na przykład prawdopodobnie czytasz tę stronę na jakimś urządzeniu wyświetlającym. Ale możesz również chcieć wyświetlić ją na ekranie dla większego grona odbiorców lub wydrukować ją. +To są różne media o różnych charakterystykach. +CSS daje możliwość prezentowania dokumentu w różny sposób dla różnych mediów. +

Aby zdefiniować regułę, która będzie dotyczyła tylko określonego typu mediów, użyj @media z typem mediów oraz klamrami obejmującymi reguły, których ma to dotyczyć. +

+ + +
Przykład +
Dokument na stronie WWW posiada pole nawigacyjne pozwalające użytkownikowi poruszać się po stronie. +

W języku znaczników element rodzica pola nawigacyjnego ma id nav-area. +

Kiedy dokument jest drukowany, pole nawigacyjne nie ma żadnego zastosowania, więc arkusz stylów usuwa je w całości: +

+
+

@media print { +

+
 #nav-area {display: none;}
+ }
+
+
+
+

Niektóre z popularnych typów mediów: +

+ + + + + + + + +
screenKolorowy wyświetlacz komputera +
printWyświetlanie na stronach +
projectionWyświetlane podczas projekcji +
allWszystkie media (domyślne) +
+


+

+ + +
Więcej szczegółów +
Istnieją też inne sposoby określenia docelowych mediów. +

Język znaczników dokumentu może pozwalać na określenie typu mediów w odnośniku wiążącym arkusz stylów z dokumentem. Na przykład w HTML-u możesz opcjonalnie określić typ mediów w atrybucie media w znaczniku LINK. +

W CSS możesz użyć @import na początku arkusza stylów, aby zaimportować inny arkusz stylów z podanego adresu URL, opcjonalnie podając też typ mediów. +

Dzięki wykorzystaniu tych technik możesz rozdzielić reguły stylów dla różnych typów mediów do różnych plików. Może to być czasem przydane do ułożenia struktury Twojego dokumentu. +

Aby dowiedzieć się więcej na temat typów mediów, zajrzyj na stronę Media w specyfikacji CSS. +

Istnieje więcej przykładów wykorzystania własności display na dalszej stronie kursu: Dane XML. +

+
+

Drukowanie

+

CSS posiada specyficzne własności przeznaczone dla mediów stronicowych. +

Reguła @page może ustawiać marginesy strony. +Aby ustawić drukowanie dwustronne, możesz określić marginesy osobno dla @page:left oraz @page:right. +

Dla mediów stronicowych zazwyczaj należy używać odpowiednich jednostek długości takich jak cale (in), punkty (pt) = 1/72 cala), centymetry (cm) lub milimetry (mm). Równie dobrze możesz używać ems (em), aby dopasować się do rozmiaru czcionki, oraz procentów (%). +

Możesz kontrolować, jak zawartość dokumentu jest przełamywana na strony, przy użyciu własności page-break-before, page-break-after i page-break-inside. +

+ + +
Przykład +
Ta reguła ustawia margines strony na jeden cal dla każdej strony: +
+

@page {margin: 1in;} +

+
+

Ta reguła zapewnia, że każdy element H! zaczyna się na nowej stronie: +

+
+

h1 {page-break-before: always;} +

+
+
+


+

+ + +
Więcej szczegółów +
Aby dowiedzieć się więcej o obsłudze mediów stronicowych, zajrzyj na stronę Media stronicowe w specyfikacji CSS. +

Drukowanie, podobnie jak inne funkcje CSS, zależy od Twojej przeglądarki i jej ustawień. +Na przykład przeglądarka Mozilla ustawia domyślne marginesy, nagłówki i stopkę podczas druku. +Raczej nie będziesz w stanie przewidzieć ustawień przeglądarek innych użytkowników drukujących Twój dokument &mbdash; nie masz możliwości w pełni kontrolować wyniku. +

+
+

Interfejsy użytkownika

+

CSS ma pewne specjalne własności przeznaczone dla urządzeń obsługujących interfejs użytkownika, takich jak wyświetlacz komputera. To sprawia, że widok dokumentu zmienia się dynamicznie w trakcie pracy użytkownika z interfejsem. +

Nie istnieje osobny typ mediów dla urządzeń z interfejsem użytkownika. +

Istnieje pięć specjalnych selektorów: +

+ + + + + + + + + + + + +
SelektorWybiera +
E:hoverDowolny element E, nad którym znajduje się wskaźnik +
E:focusDowolny element E, który jest w danym momencie aktywny dla interfejsu +
E:activeElement E, który jest wykorzystywany w aktualnie wykonywanej akcji użytkownika +
E:linkDowolny element E, który jest odnośnikiem do strony której użytkownik nie odwiedzał ostatnio +
E:visitedDowolny element E, który jest odnośnikiem do adresu URL, który użytkownik odwiedził niedawno +
+

Własność cursor określa kształt wskaźnika; niektóre z podstawowych kształtów podane są poniżej. Umieść kursor myszy nad elementami na tej liście, aby zobaczyć jak wygląda podany kursor: +

+ + + + + + + + + + +
SelektorWybiera +
pointerWskazuje odnośnik +
waitWskazuje, że program nie może przyjmować danych +
progressWskazuje, że program w tej chwili pracuje, ale może przyjmować dane od użytkownika +
defaultDomyślny (zazwyczaj strzałka) +
+

Własność outline tworzy zewnętrzną linię, która zazwyczaj jest używana do oznaczenia pola aktywnego dla klawiatury. +Jej wartości są podobne do własności border, poza tym, że nie możesz określać osobno wartości dla poszczególnych boków. +

Kilka innych funkcji interfejsu użytkownika zostało zaimplementowanych przy użyciu atrybutów w tradycyjny sposób. Na przykład elementy, które są nieaktywne albo w trybie tylko do odczytu posiadają atrybut disabled lub readonly. +Selektory mogą określać takie atrybuty podobnie jak każde inne — poprzez użycie prostokątnych nawiasów: {{ mediawiki.external('disabled') }} lub {{ mediawiki.external('readonly') }}. +


+

+ + +
Przykład +
Te reguły określają style dla przycisku, który zmienia się dynamicznie, kiedy użytkownik na nim operuje: +
+.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;
+  }
+
+

To wiki nie obsługuje interfejsu użytkownika na tej stronie, zatem przyciski nie mogą być *klikalne*. Poniżej znajdują się statyczne obrazki ilustrujące ideę: +

+ + +
+ + + + + + +
Click Me +Click Me +Click Me +
+
disablednormalactive +
+
+

W pełni funkcjonalny przycisk posiada dodatkowo ciemną linię wokół całego przycisku, kiedy jest on domyślny, oraz kropkowaną linię na przycisku, kiedy jest on aktywny dla klawiatury. Może także posiadać efekt aktywizacji, kiedy wskaźnik znajduje się nad nim. +

+
+ + +
Więcej szczegółów +
Aby dowiedzieć się więcej o interfejsach użytkownika w CSS, zobacz stronę User interface w specyfikacji CSS. +

Istnieje też przykład napisany w języku znaczników Mozilli, XUL-u, w drugiej części tego kursu. +

+
+

Zadanie: Drukowanie dokumentu

+

Stwórz nowy dokument HTML, doc4.html. +Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+
+<HEAD>
+<TITLE>Print sample</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
+</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>
+
+

Stwórz nowy arkusz stylów, style4.css. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
/*** 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 */
+
+

Kiedy oglądasz ten dokument w swojej przeglądarce, używa on domyślnego stylu przeglądarki. +

Kiedy drukujesz go (lub oglądasz podgląd wydruku), arkusz stylów umieszcza każdą sekcję na osobnej stronie oraz dodaje nagłówek i stopkę do każdej strony. Jeżeli Twoja przeglądarka obsługuje także liczniki, dodaje numer strony w stopce. +

+ + +
+ + +
+ + +
Heading
+
Section A
+
This is the first section...
+
Page: 1
+
+
+		 + + +
+ + +
Heading
+
Section B
+
This is the second section...
+
Page: 2
+
+
+
+


+

+ + +
Wyzwanie +
Przesuń reguły stylu dotyczące drukowania do osobnego pliku CSS. +

Użyj wcześniejszych odnośników na tej stronie, aby znaleźć informacje w specyfikacji CSS. Znajdź szczegóły na temat, jak importować nowy plik CSS do swojego arkusza stylów. +

Spraw, aby nagłówek stawał się niebieski, kiedy kursor myszy znajdzie się nad nim. +

+
+


+

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

Na razie wszystkie reguły stylów w tym kursie znajdowały się w plikach. Reguły i ich wartości są stałe. Następna strona opisuje, jak można modyfikować reguły dynamicznie, używając języka programowania: JavaScript +

{{ languages( { "en": "en/CSS/Getting_Started/Media", "fr": "fr/CSS/Premiers_pas/M\u00e9dias", "pt": "pt/CSS/Como_come\u00e7ar/M\u00eddia" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/po_co_u\305\274ywa\304\207_css/index.html" "b/files/pl/web/css/na_pocz\304\205tek/po_co_u\305\274ywa\304\207_css/index.html" new file mode 100644 index 0000000000..73fb92e4cb --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/po_co_u\305\274ywa\304\207_css/index.html" @@ -0,0 +1,85 @@ +--- +title: Po co używać CSS +slug: Web/CSS/Na_początek/Po_co_używać_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

+

Ta strona tłumaczy, do czego dokumenty wykorzystują CSS. +Używając CSS dodasz do swojego dokumentu arkusz stylów. +

+

Informacja: Po co używać CSS?

+

CSS pomaga utrzymać treść dokumentu oddzieloną od informacji o tym, jak należy ją wyświetlać. Szczegóły opisujące, jak należy wyświetlać dokument, są znane jako styl. Utrzymywanie rozdzielenia treści od wyglądu: +

+ + + +
Przykład +
Twoja strona WWW może mieć wiele dokumentów wyglądających podobnie. Korzystając z CSS, przechowujesz informacje o wyglądzie w osobnych plikach używanych we wszystkich dokumentach. +

Kiedy użytkownik ogląda stronę WWW, przeglądarka pobiera informacje o stylach równolegle z treścią strony. +

Kiedy użytkownik drukuje stronę, można mu dostarczyć inne informacje o stylu, które sprawią, że wydrukowany dokument będzie bardziej czytelny. +

+
+

Ogólnie rzecz biorąc, dzięki CSS język znaczników jest wykorzystywany wyłącznie do opisu treści dokumentu, a nie jego stylu. CSS jest zaś używany do opisu stylu, nie treści. (Dalej w tym kursie będzie można zobaczyć pewne wyjątki od tej reguły.) +

+ + +
Więcej szczegółów +
Język znaczników, taki jak HTML, również dostarcza pewnych mechanizmów opisu stylów. Na przykład w HTML-u można użyć znacznika <B>, aby pogrubić tekst albo określić kolor tła strony w znaczniku <BODY>. +

Kiedy używasz CSS, zazwyczaj unikasz stosowania tych funkcji języka znaczników, aby trzymać wszystkie informacje o stylu dokumentu w jednym miejscu. +

+
+

Zadanie: Tworzenia arkusza stylów

+

Stwórz inny plik tekstowy w tym samym katalogu, co poprzednio. +Ten plik będzie arkuszem stylów. +Nazwij go: style1.css +

Skopiuj poniższą linię i wklej ją do pliku CSS, a następnie zapisz ten plik: +

+
+

strong {color: red;} +

+
+

Wiązanie arkusza stylów do dokumentu

+

Aby powiązać swój dokument z arkuszem stylów, wyedytuj plik HTML. +Dodaj pogrubioną linię: +

+
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+  <HEAD>
+  <TITLE>Sample document</TITLE>
+  <LINK rel="stylesheet" type="text/css" href="style1.css">
+  </HEAD>
+  <BODY>
+    <P>
+      <STRONG>C</STRONG>ascading
+      <STRONG>S</STRONG>tyle
+      <STRONG>S</STRONG>heets
+    </P>
+  </BODY>
+</HTML>
+
+
+

Zapisz ten plik i odśwież widok w swojej przeglądarce. +Ten arkusz stylów sprawia, że pierwsze litery są czerwone: +

+ + +
Cascading Style Sheets +
+ + +
Wyzwanie +
Poza czerwonym, CSS pozwala używać innych nazw kolorów. +

Bez patrzenia w dokumentację znajdź pięć innych nazw kolorów, które działają w Twoim arkuszu stylów. +

+
+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

Teraz masz już przykładowy dokument powiązany z osobnym arkuszem stylów, jesteś zatem gotów do zrozumienia, jak przeglądarka wiąże je podczas wyświetlania dokumentu: +Jak działa CSS +

{{ languages( { "en": "en/CSS/Getting_Started/Why_use_CSS", "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "it": "it/Conoscere_i_CSS/Perch\u00e9_usare_i_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS", "zh-cn": "cn/CSS/Getting_Started/Why_use_CSS" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/selektory/index.html" "b/files/pl/web/css/na_pocz\304\205tek/selektory/index.html" new file mode 100644 index 0000000000..521a92b641 --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/selektory/index.html" @@ -0,0 +1,259 @@ +--- +title: Selektory +slug: Web/CSS/Na_początek/Selektory +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks/Selectors +--- +

Ta strona jest częścią piątą kursu CSS Getting Started. Wyjaśnia ona jak możesz używać stylów selektywnie, i jak różne typy selektorów mają różne priorytety. Dodasz pewne atrybuty do znaczników w swoim przykładowym dokumencie oraz użyjesz w nim tych atrybutów.

+ +

Informacja: Selektory

+ +

CSS posiada własną terminologię do opisania języka CSS. Poprzednio w trakcie tego kursu stworzyłeś(aś) linię w swoim arkuszu stylów w ten sposób:

+ +
+
strong {
+   color: red;
+}
+
+
+ +

W terminologii CSS cała ta linia jest regułą. Ta reguła zaczyna się od strong, który jest selektorem. Wybiera, które elementy w drzewie DOM będą używały tej reguły.

+ + + + + + + +
+

Więcej szczegółów
+ Część wewnątrz nawiasów klamrowych nazywamy się deklaracją.

+ +

Słowo kluczowe color jest własnością, a red jest wartością.

+ +

Średnik po parze własność-wartość oddziela ją od innych par własność-wartość w tym samym opisie.

+ +

Ten kurs odwołuje się do selektorów takich jak strong jako selektorów znaczników. Specyfikacja CSS odwołuje się do nich jako selektorów typu.

+
+ +

Ta strona kursu wyjaśnia więcej na temat selektorów, których możesz używać w regułach CSS.

+ +

Dodatkowo do nazw znaczników możesz używać wartości atrybutów w selektorach. To pozwala sprecyzować Twoje reguły.

+ +

Dwa atrybuty posiadają specjalny status w CSS. Są to class oraz id.

+ +

Selektor class

+ +

Użycie atrybutu class w znaczniku przypisuje znacznikowi nazwaną klasę. Ty decydujesz jak ją nazwiesz.

+ +

W swoim arkuszu stylów wpisz kropkę przed nazwą klasy, kiedy używasz jej w selektorze.

+ +

Selektor ID

+ +

Użycie atrybutu id w znaczniku przypisuje id do znacznika. Ty decydujesz, jakie id mu nadasz. Nazwa id musi być unikalna w dokumencie.

+ +

W swoim arkuszu stylów wpisz znak numeru ("płotek" (ang. hash)) przed tym id, kiedy używasz go w selektorze.

+ + + + + + + +
+

Przykłady
+ Ten znacznik HTML posiada zarówno atrybut class, jak i id:

+ +
+ 
+<p class="key" id="principal">
+
+
+ +

Id, principal, musi być unikalne w dokumencie, lecz inne znaczniki mogą używać tej samej nazwy klasy key.

+ +

W arkuszu stylów CSS ta reguła powoduje, że wszystkie elementy klasy key staną się zielone. (Nie wszystkie muszą być elementami P.)

+ +
+ 
+.key {
+   color: green;
+}
+
+
+ +

Ta reguła powoduje, że jeden element o id principal zostanie pogrubiony:

+ +
+ 
+#principal {
+   font-weight: bolder;
+}
+
+
+
+ +

Jeżeli więcej niż jedna reguła odnosi się do elementu i określa tę samą własność, wtedy CSS nadaje priorytet regule, która posiada bardziej szczegółowy selektor. Selektor id jest bardziej szczegółowy od selektora klasy, który z kolei jest bardziej szczegółowy od selektora znacznika.

+ + + + + + + + +
Więcej szczegółów
Możesz też mieszać selektory, czyniąc je bardziej szczegółowymi. +

Na przykład selektor .key wybiera wszystkie elementy, które mają klasę o nazwie key. Selektor p.key wybiera tylko elementy P, które mają klasę o nazwie key.

+ +

Nie jesteś ograniczony(a) do dwóch specjalnych atrybutów, class i id. Możesz określać inne atrybuty poprzez użycie nawiasów kwadratowych. Na przykład selektor {{ mediawiki.external('type=button') }} wybiera wszystkie elementy, które mają atrybut type o wartości button.

+ +

W dalszej części kursu (Tabele) można znaleźć informacje na temat złożonych selektorów opartych na wzajemnych relacjach.

+ +

Aby dowiedzieć się więcej o selektorach, zajrzyj na stronę Selektory w specyfikacji CSS.

+
+ +

Jeżeli arkusz stylów posiada sprzeczne reguły i są one równie szczegółowe, wtedy CSS nadaje wyższy priorytet regule, która występuje później w arkuszu stylów.

+ +

Gdy napotkasz problem ze sprzecznymi regułami, spróbuj rozwiązać go poprzez ustawienie jednej z reguł jako bardziej szczegółowej, aby można im było nadać priorytety. Jeżeli nie możesz tego zrobić, spróbuj przesunąć jedną z reguł bliżej końca arkusza stylów, aby nadać jej wyższy priorytet.

+ +

Zadanie: Używanie selektorów class i id

+ +

1. Wyedytuj swój plik HTML i zduplikuj akapit poprzez skopiowanie i wklejenie go.
+ 2. Następnie dodaj atrybuty id i class do pierwszej kopii, a potem id do drugiej:

+ +
+
<!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
+
+ +

Teraz wyedytuj swój plik CSS. Zamień całą treść na:

+ +
+
strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
+ +

Odśwież okno przeglądarki, aby zobaczyć wynik:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

Możesz zmieniać kolejność linii w pliku CSS, aby zobaczyć, że kolejność nie ma wpływu na wynik.

+ +

Selektory klas .carrot oraz .spinach mają priorytety nad selektorem znaczników strong.

+ +

Selektor id #first ma priorytet nad selektorami klas i znaczników.

+ + + + + + + + +
Wyzwanie
Bez zmieniania pliku HTML dodaj do pliku CSS pojedyncze reguły, które sprawią, że wszystkie początkowe litery będą nadal tego samego koloru, ale cały pozostały tekst w drugim akapicie stanie się niebieski: + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

Teraz zmień regułę, którą właśnie dodałeś(aś) (bez zmieniania czegokolwiek innego), aby pierwszy akapit też był niebieski:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+
+ +

Zadanie: użycie pseudo selectorów

+ +
    +
  1. Utwórz plik HTML z następują treścią: + 
    <!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. Edytuj plik CSS. Zamień jego treść na: + 
    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. Zapisz pliki i odśwież przeglądarkę aby zobaczyć rezultat (przeciągnij muszkę nad przycisk, aby zobaczyć efekt): + + + + + + +
    Go to our Home page
    +
    4. +
+ +

Co dalej?

+ +

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

+ +

Twój przykładowy arkusz stylów zaczyna wyglądać na zbity i skomplikowany. W następnej części opiszemy jak sprawić, by CSS był łatwiejszy w czytaniu: Czytelny CSS

+ +

{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "it": "it/Conoscere_i_CSS/I_Selettori", "ja": "ja/CSS/Getting_Started/Selectors", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }}

diff --git "a/files/pl/web/css/na_pocz\304\205tek/style_tekstowe/index.html" "b/files/pl/web/css/na_pocz\304\205tek/style_tekstowe/index.html" new file mode 100644 index 0000000000..170f28ef88 --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/style_tekstowe/index.html" @@ -0,0 +1,115 @@ +--- +title: Style tekstowe +slug: Web/CSS/Na_początek/Style_tekstowe +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +

+

Na tej stronie znajdziesz więcej przykładów stylów tekstowych. +

Zmodyfikujesz przykładowy arkusz stylów, aby używał różnych krojów pisma. +

+

Informacja: Style tekstowe

+

CSS posiada kilka własności do określania stylu tekstu. +

Istnieje wygodna, krótka własność font, której można użyć do określenia kilku cech na raz — na przykład: +

+ + + +
Przykład +
+

p {font: italic 75%/125% "Comic Sans MS", cursive;} +

+
+

Ta reguła określa kilka własności fontu, sprawiając, że wszystkie akapity będą pisane kursywą. +

Rozmiar fontu jest określony jako trzy czwarte rozmiaru każdego nadrzędnego akapitu, a wysokość linii jest określona na 125% (co da trochę więcej przestrzeni). +

Typ fontu jest określony jako Comic Sans MS, lecz jeśli ten font nie jest dostępny, wówczas przeglądarka użyje domyślnego fontu kursywy (a'la ręczne pismo). +

Ta reguła dodatkowo wyłącza pogrubienie i małe litery (ustawiając je na normal): +

+
+

Typy fontów

+

Nie da się przewidzieć, jakie fonty będzie posiadał czytelnik dokumentu. +Zatem kiedy określasz typy fontów, dobrym pomysłem jest podanie listy alternatywnych. +

Listę należy zakończyć jednym z domyślnych, wbudowanych fontów: serif, sans-serif, cursive, fantasy lub monospace, (niektóre z nich pasują do ustawień w opcjach Twojej przeglądarki). +

Jeżeli dany typ fontu nie wspiera jakiejś funkcji w dokumencie, wówczas przeglądarka może zmienić go na inny. Na przykład, dokument może posiadać specjalne znaki, których font podstawowy nie obsługuje. Jeżeli przeglądarka znajdzie inny font, który obsługuje te znaki, wówczas zostanie on użyty. +

Aby określić wyłącznie typ fontu, użyj własności font-family. +

+

Rozmiary fontów

+

Czytelnik używający przeglądarki Mozilla może w opcjach ustawić domyślne rozmiary fontów i zmienić rozmiar tekstu podczas czytania stron, zatem dobrym pomysłem jest używanie relatywnych rozmiarów tam, gdzie tylko się da. +

Możesz wykorzystać różne wbudowane wartości dla rozmiarów fontów, jak small, medium czy large. Możesz też użyć wartości relatywnych względem rozmiaru fontu nadrzędnego elementu, na przykład: smaller, larger, 150% lub 1.5. +

Jeżeli trzeba, możesz określić bezpośredni rozmiar: 12px (12 pikseli) dla urządzenia wyświetlającego, lub 12pt (12 punktów) dla drukarki. Ten rozmiar jest nominalnie szerokością litery m, ale różne fonty mogą mieć różne rozmiary i możesz inaczej widzieć je względem rozmiaru, który określisz. +

Aby określić sam rozmiary fontu, użyj własności font-size. +

+

Wysokość linii

+

Wysokość linii określa odstępy między liniami. +Jeżeli Twój dokument posiada długie akapity z wieloma liniami, większe niż normalnie odstępy sprawią, że będzie go łatwiej czytać, zwłaszcza, jeśli rozmiary fontu są małe. +

Aby określić samą wysokość linii, użyj własności line-height. +

+

Ozdobniki

+

Odrębna własność text-decoration może określać inne style, jak underline (podkreślenie) lub line-through (przekreślenie). +Ustawiając tę własność na normal, usuniesz wszystkie ozdobniki. +

+

Inne własności

+

Aby ustawić kursywę, użyj font-style: italic;
+Aby ustawić pogrubienie, użyj font-weight: bold;
+Aby określić, że wszystkie litery mają być małymi literami, użyj font-variant: small-caps; +

Aby ustawić dowolną z nich indywidualnie, możesz ustawić wartość na normal lub +inherit (dziedzicz). +

+ + +
Więcej szczegółów +
Możesz określić style tekstowe na kilka innych sposobów. +

Na przykład, niektóre własności wymienione w tym rozdziale mają inne wartości, których możesz użyć. +

W złożonym arkuszu stylów unikaj używania skrótowej własności font, ponieważ ma to efekty uboczne (resetuje inne własności danego fontu). +

Aby zapoznać się ze szczegółami własności fontów, zajrzyj do rozdziału Fonty w specyfikacji CSS. +Aby zapoznać się ze szczegółami odnośnie dekoracji tekstu, zajrzyj Tutaj. +

+
+

Zadanie: Określanie fontu

+

W prostych dokumentach możesz określić font elementu BODY, a reszta dokumentu będzie dziedziczyć jego ustawienia. +

Wyedytuj swój plik CSS. +Dodaj regułę, która zmieni font. +Logicznie byłoby umieścić tę regułę na górze pliku CSS, ale będzie ona miała taki sam efekt niezależnie od miejsca położenia: +

+
+

body {font: 16px "Comic Sans MS", cursive;} +

+
+

Dodaj komentarz wyjaśniający regułę oraz dodaj białe znaki, aby całość pasowała do Twojego ulubionego schematu. +

Odśwież okno przeglądarki, aby zobaczyć efekt. +Jeżeli Twój system zawiera Comic Sans MS lub inny font kursywy, który nie obsługuje pochylenia, wtedy Twoja przeglądarka wybierze inny typ fontu dla pochylonego tekstu w pierwszej linii: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+

Z paska menu przeglądarki wybierz Widok – Rozmiar tekstu – Powiększ. Nawet jeśli określiłeś(aś) w stylu rozmiar 16 pikseli, użytkownik czytający dokument może zmienić jego rozmiar. +

+ + +
Wyzwanie +
Nie zmieniając nic innego, powiększ dwukrotnie wszystkie sześć pierwszych liter w domyślnym foncie szeryfowym przeglądarki: + + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+
+

Co dalej?

+

Twój przykładowy dokument korzysta już z kilku nazwanych kolorów. +Na następnej stronie znajdziesz listę nazwanych, standardowych kolorów oraz opis, jak można określić inne: +Kolor +

+
+
+{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "fr": "fr/CSS/Premiers_pas/Styles_de_texte", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/tables/index.html" "b/files/pl/web/css/na_pocz\304\205tek/tables/index.html" new file mode 100644 index 0000000000..78f9c67236 --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/tables/index.html" @@ -0,0 +1,596 @@ +--- +title: Tabele +slug: Web/CSS/Na_początek/Tables +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +

 

+

Ta strona bardziej szczegółowo opisuje selektory oraz sposoby tworzenia stylów dla tabel.

+

Stworzysz nowy dokument zawierający tabelę oraz nadasz mu styl.

+

Informacja: Więcej o selektorach

+

CSS daje wiele sposobów na wybranie elementów, bazując na ich wzajemnych relacjach. Możesz ich użyć, aby stworzyć bardziej dokładne selektory.

+

Poniżej znajduje się podsumowanie selektorów bazujące na ich wzajemnych relacjach:

+ + + + + + + + + + + + + + + + + + + + + + + +
SelektorWybiera
A EDowolny element E, który jest potomkiem elementu A (to znaczy jest dzieckiem albo dzieckiem dziecka, itp.))
A > EDowolny element E, który jest dzieckiem elementu A
E:first-childDowolny element E, który jest pierwszym dzieckiem swojego rodzica
B + EDowolny element E, który jest następnym z rodzeństwa elementu B (to znaczy: następnym dzieckiem tego samego rodzica)
+

Możesz łączyć te selektory w złożone relacje.

+

Możesz też użyć symbolu * (gwiazdka), który znaczy "dowolny element".

+ + + + + + + +
+ Przykład
Tabela HTML posiada atrybut id, ale jej wiersze i komórki nie posiadają własnych identyfikatorów: +
+

<TABLE id="data-table-1"> ... <TR> <TD>Prefiks</TD> <TD>0001</TD> <TD>domyślnie</TD> </TR> ...

+
+

Poniższe reguły powodują, że pierwsza komórka w każdym wierszu jest pogrubiona, natomiast druga używa kroju monospace. Dotyczą one tylko jednej, określonej tabeli w dokumencie:

+
+
    +
  1. data-table-1 td:first-child {font-weight: bolder;}
    2. +
  2. data-table-1 td:first-child + td {font-family: monospace;}
    3. +
+
+

Wygląda to tak:

+ + + + + + +
+ + + + + + + + +
Prefiks<tt>0001</tt>domyślnie
+
+
+ + + + + + + +
+ Więcej szczegółów
Kiedy stworzysz bardziej szczegółowy selektor, zazwyczaj wzrośnie jego priorytet. +

Jeżeli korzystasz z opisanych tu technik, unikasz potrzeby określania atrybutu class lub id w wielu znacznikach dokumentu. Zamiast tego logika zostaje przeniesiona na CSS.

+

W dużych projektach, gdzie prędkość ma duże znaczenie, możesz sprawić, że twój arkusz stylów będzie działał szybciej, poprzez unikanie złożonych reguł, które zależą od relacji między elementami.

+

Aby dowiedzieć się więcej o selektorach, zajrzyj do specyfikacji CSS na stronę Selektory.

+
+

Informacja: Tabele

+

Tabela układa informacje w prostokątną siatkę. Niektóre tabele mogą być skomplikowane, a różne przeglądarki mogą pokazywać różne wyniki.

+

Kiedy tworzysz swój dokument, użyj tabel do wyrażenia relacji między elementami informacji. Wówczas nie ma znaczenia, jeśli różne przeglądarki wyświetlą je w trochę inny sposób, ponieważ przekaz pozostanie jasny.

+

Nie używaj tabel w sposób, do którego nie zostały przeznaczone, na przykład aby tworzyć przy ich pomocy układ wizualny. Techniki opisane na poprzedniej stronie tego kursu (Układ) nadają się do tego znacznie lepiej.

+

Struktura tabeli

+

W tabeli każdy kawałek informacji jest wyświetlany w komórce.

+

Komórki wyświetlane w jednej linii tworzą wiersz.

+

W niektórych tabelach wiersze mogą być grupowane. Specjalna grupa wierszy, która znajduje się na górze tabeli, nazywa się nagłówkiem. Specjalna grupa wierszy znajdująca się na dole tabeli nazywa się stopką. Główne wiersze w tabeli tworzą jej ciało i one również mogą być łączone w grupy.

+

Komórki ułożone w pionowej linii tworzą kolumnę, ale użyteczność kolumn w tabelach CSS jest ograniczona.

+ + + + + + + +
+ Przykład
Tabela selektorów znajdująca się na górze tej strony posiada dziesięć komórek i pięć wierszy. +

Pierwszy wiersz jest nagłówkiem. Kolejne cztery są ciałem tabeli. Nie posiada ona stopki.

+

Ma natomiast dwie kolumny.

+
+


+ Ten kurs omawia tylko proste tabele, dla których wynik jest przewidywalny. W prostej tabeli każda komórka zajmuje miejsce w jednym wierszu i jednej kolumnie. Możesz skorzystać z CSS-u do złożonych tabel, gdzie komórki rozciągają się na więcej niż jeden wiersz lub kolumnę, ale tego typu tabele wykraczają poza zakres tego kursu.

+

Ramki

+

Komórki nie posiadają marginesów zewnętrznych.

+

Komórki posiadają ramki oraz marginesy wewnętrzne. Domyślnie ramki są oddzielone o wartość własności border-spacing tabeli. Możesz usunąć całkowicie odstępy przez ustawienie własności border-collapse tabeli na wartość collapse.

+ + + + + + + +
+ Przykład
Poniżej widać trzy tabele. +

Tabela po lewej ma ustawione odstępy ramek na 0.5 em. Tabela w środku ma ustawione odstępy ramek na zero. Tabela po prawej ma zwinięte ramki:

+ + + + + + + + +
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+

Opis

+

Opis jest etykietą opisującą całą tabelę. Domyślnie jest wyświetlana nad tabelą.

+

Aby przesunąć opis na dół, ustaw jego własność caption-side na bottom. Ta własność jest dziedziczona, więc możesz ją ustawić dla całej tabeli lub innego rodzica.

+

Aby ustawić styl tekstu opisu, użyj normalnych własności tekstowych.

+ + + + + + + +
+ Przykład
Ta tabela posiada opis na dole: +
+
    +
  1. demo-table > caption {
    2. +
+ 
+ caption-side: bottom;
+ font-style: italic;
+ text-align: right;
+ }
+
+
+ + + + + + +
+ + + + + + + +
+ Suits
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+
+

Puste komórki

+

Możesz wyświetlić puste komórki (czyli ich ramki oraz tło) przez określenie empty-cells: show; dla elementu tabeli.

+

Możesz je ukryć, określając empty-cells: hide;. Wtedy jeżeli element rodzic komórki posiada tło, zostanie ono pokazane w miejscu pustej komórki.

+ + + + + + + +
+ Przykład
Poniższe tabele mają jasnozielone tło. Ich komórki mają tło jasnoszare i ciemnoszare ramki. +

W lewej tabeli puste komórki są wyświetlane, w prawej ukrywane:

+ + + + + + + +
+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+
+
+

 

+ + + + + + + +
+ Więcej szczegółów
Aby dowiedzieć się więcej o tabelach, zajrzyj do rozdziału Tabele w specyfikacji CSS. +

Informacje tam zawarte wykraczają poza ten kurs, ale nie opisują różnic miedzy przeglądarkami, które mogą wpływać na wyświetlanie złożonych tabel.

+
+

Zadanie: Ustawianie stylów dla tabeli

+

Stwórz nowy dokument HTML, doc3.html. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz całą zawartość:

+
+ 
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+<HEAD>
+<TITLE>Przykładowy dokument 3</TITLE>
+<LINK rel="stylesheet" type="text/css" 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>
+
+
+

Stwórz nowy arkusz stylów, style3.css. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz cały:

+
+ 
/*** Styl dla doc3.html (Tabele) ***/
+
+#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;
+  }
+
+
+

Otwórz dokument w swojej przeglądarce. Powinien wyglądać mniej więcej tak:

+ + + + + + +
+
+

Oceans

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 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
+
+
+
+

Porównaj reguły ze swojego arkusza stylów z wyświetloną tabelą, aby upewnić się, że rozumiesz działanie każdej reguły. Jeżeli napotkasz regułę, której nie rozumiesz, wykomentuj ją i odśwież okno przeglądarki, aby zobaczyć, co się stanie.

+

Poniżej znajduje się kilka uwag dotyczących tej tabeli:

+ +

 

+ + + + + + + +
+ Wyzwania
Zmień arkusz stylów tak, aby tabela wyglądała jak poniżej: + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 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

+
+
+
+

 

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

+

Jest to ostatnia strona tego kursu, która opisuje własności i wartości CSS. Aby dowiedzieć się więcej o własnościach i wartościach w CSS, zajrzyj na stronę Full property table w specyfikacji CSS.

+

Następna strona znowu wraca do tematu przeznaczenia i struktury arkuszy stylów CSS: Media

diff --git "a/files/pl/web/css/na_pocz\304\205tek/uk\305\202ad/index.html" "b/files/pl/web/css/na_pocz\304\205tek/uk\305\202ad/index.html" new file mode 100644 index 0000000000..9499cdcdcd --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/uk\305\202ad/index.html" @@ -0,0 +1,274 @@ +--- +title: Układ +slug: Web/CSS/Na_początek/Układ +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/CSS_layout +--- +

+

Ta strona opisuje kilka sposobów na modyfikację układu dokumentu. +

Nauczysz się zmieniać układ przykładowego dokumentu... +

+

Informacja: Układ

+

Możesz użyć CSS-u do określenia wielu efektów wizualnych, które zmieniają układ Twojego dokumentu. +Niektóre z technik tworzenia układu są bardziej zaawansowane, wykraczające poza zakres podstawowego kursu. +

Kiedy modelujesz układ strony, który ma wyglądać podobnie w wielu przeglądarkach, Twój arkusz stylów łączy się z domyślnym arkuszem stylów przeglądarki oraz silnikiem układu stron w sposób, który może być bardzo złożony. +To także wykracza poza zakres tego kursu. +

Ta strona opisuje proste techniki, których możesz spróbować. +

+

Struktura dokumentu

+

Jeżeli chcesz kontrolować układ dokumentu, być może będziesz musiał(a) zmienić jego strukturę. +

Język składni Twojego dokumentu może posiadać znaczniki ogólnego przeznaczenia do tworzenia struktury. +Na przykład w HTML-u możesz użyć znacznika DIV do tworzenia struktury. +

+ + +
Przykład +
W Twoim przykładowym dokumencie ponumerowane paragrafy pod drugim nagłówkiem nie mają własnego kontenera. +

Twój arkusz stylów nie może narysować ramki wokół tych paragrafów, ponieważ nie istnieje element, dla którego można stworzyć selektor. +

Aby poprawić ten problem strukturalny, możesz dodać znacznik DIV wokół paragrafów. +Ten znacznik jest unikalny, zatem można go identyfikować przez atrybut id. +

+
+
 <H3 class="numbered">Numbered paragraphs</H3>
+ <DIV id="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>
+ </DIV>
+
+
+

Teraz Twój arkusz stylów może używać jednej reguły do określania ramek wokół obu list: +

+
+
 ul, #numbered {
+ border: 1em solid #69b;
+ padding-left:1em;
+ }
+
+
+

Wynik wygląda tak: +

+ + +

(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

+
+
+
+

Jednostki rozmiaru

+

Dotychczas w tym kursie określałeś(aś) rozmiary w pikselach (px). +Jest to rozsądny wybór w pewnych przypadkach, dla wyświetlaczy takich jak monitor komputera. +Jednak jeżeli użytkownik zmieni rozmiar kroju, Twój układ może przestać wyglądać dobrze. +

W wielu wypadkach lepiej jest określać rozmiary w procentach lub jednostkach ems (em). +Em jest nominalnym rozmiarem aktualnego kroju (szerokość litery m). +Kiedy użytkownik zmienia rozmiar kroju, Twój układ dostosuje się automatycznie. +

+ + +
Przykład +
Ramka po lewej stronie tego tekstu ma rozmiary określony w pikselach. +

Ramka po prawej ma rozmiar określony w ems. +

Zmień teraz rozmiary kroju w swojej przeglądarce, aby zobaczyć, jak ramka po prawej dopasowuje się do rozmiaru, a jak zachowa się ramka po lewej: +

+ + +
ZMIEŃ MÓJ ROZMIAR
+
+
+ + +
Więcej szczegółów +
Dla innych urządzeń najlepiej stosować inne jednostki miar. +

Więcej informacji na ten temat znajdziesz na dalszych stronach tego kursu. +

Aby dowiedzieć się więcej na temat wartości i jednostek, których możesz użyć, zobacz stronę Wartości na stronach specyfikacji CSS. +

+
+

Układ tekstu

+

Układ treści dokumentu jest określany przez dwie własności. +Możesz ich użyć, aby wstępnie określić układ: +

+ +
Określa położenie treści. Wybierz jedną z wartości: left, right, center, justify +
+ +
Tworzy odstęp dla treści o określoną wartość. +
+

Te własności dotyczą wszelkiej treści tekstowej w elemencie, nie tylko tekstu. +Pamiętaj też, że są one dziedziczone przez elementy dzieci, zatem będzie trzeba bezpośrednio wyłączyć je dla dzieci, aby uniknąć dziwnych rezultatów. +

+ + +
Przykład +
Aby wycentrować nagłówki: +
+
 h3 {
+ border-top: 1px solid gray;
+ text-align: center;
+ }
+
+
+

Wynik: +

+ + +

(A) The oceans

+
+

W dokumencie HTML treść wyświetlana pod nagłówkiem nie jest strukturalnie przynależna do nagłówka. +Zatem kiedy określasz nagłówek w taki sposób, znaczniki poniżej nagłówka nie dziedziczą stylu. +

+
+

Pływanie (Floats)

+

Własność float wymusza umieszczenie elementu po lewej lub prawej. +Jest to prosty sposób, aby kontrolować jego położenie i rozmiar. +

Reszta dokumentu opływa wybrany element. +Możesz to kontrolować, używając własności clear na innych elementach, aby sprawić, by nie opływały elementów posiadających określony float. +

+ + +
Przykład +
W Twoim przykładowym dokumencie listy są rozciągnięte na szerokość okna. Możesz tego uniknąć, przyklejając je do lewej strony. +

Aby zachować nagłówki w jednym miejscu, musisz też określić, że mają ignorować opływanie po lewej: +

+
+
 ul, #numbered {float: left;}
+ h3 {clear: left;}
+
+
+

Rezultat wygląda tak: +

+ + +

(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

+
+
+

(Mały margines wewnętrzny jest potrzebny po prawej stronie bloków, gdzie ramka jest za blisko tekstu.) +

+
+

Pozycjonowanie

+

Możesz określić pozycję elementu na cztery sposoby poprzez określenie własności position oraz podanie jednej z następujących wartości. +

Są to własności zaawansowane. +Można ich używać w prosty sposób — dlatego są tutaj wymienione. +Jednak korzystanie z nich w bardziej złożony sposób może być skomplikowane. +

+ +
Pozycja elementu jest określona relatywnie do jego normalnej pozycji. +
Użyj tej wartości, aby przesunąć element o określoną wartość. Czasem możesz użyć marginesu zewnętrznego, aby osiągnąć ten sam efekt. +
+ +
Element będzie przyczepiony. +
Określa pozycję elementu relatywnie do okna dokumentu. Nawet kiedy reszta dokumentu jest przewijana, element pozostaje w tym samym miejscu. +
+ +
Pozycja elementu jest ustawiana relatywnie do elementu rodzica. +
Zadziała to tylko wobec elementów, które są pozycjonowane z użyciem relative, fixed lub absolute. +
+
Możesz też sprawić, by dowolny element-rodzic mógł zostać zastosowany poprzez określenie mu position: relative; bez podawania wartości przesunięcia. +
+ +
Domyślne. Użyj tej wartości, aby wyłączyć pozycjonowanie. +
+

Razem z tymi wartościami własności position (poza static) podaj jedną lub więcej własności: top, right, bottom, left, width, height, aby określić, gdzie chcesz, aby element się pojawił, oraz jego rozmiar. +

+ + +
Przykład +
Aby umieścić dwa elementy na górze, stwórz kontener rodzica w swoim dokumencie z dwoma elementami w środku: +
+
 <DIV id="parent-div">
+ <P id="forward">/</P>
+ <P id="back">\</P>
+ </DIV>
+
+
+

W swoim arkuszu stylów nadaj rodzicowi wartość relative własności position. +Nie musisz podawać żadnego przesunięcia. +Określ wartość własności position jego dzieci jako absolute: +

+
+  #parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+  }
+
+  #forward, #back {
+  position: absolute;
+  margin:0px;
+  top: 0px;
+  left: 0px;
+  }
+
+  #forward {
+  color: blue;
+  }
+
+  #back {
+  color: red;
+  }
+
+

Rezultat wygląda tak, z odwrotnym ukośnikiem nad ukośnikiem: +

+

/

\

+
+ +
+


+

+
+ + +
Więcej szczegółów +
Cały temat pozycjonowania zajmuje dwa skomplikowane rozdziały w specyfikacji CSS: Visual formatting model oraz Visual formatting model details. +

Jeżeli tworzysz arkusze stylów, które mają działać w wielu przeglądarkach, musisz także wziąć pod uwagę różnice w sposobie interpretacji standardów oraz prawdopodobne błędy w obsłudze standardów występujące w różnych przeglądarkach. +

+
+

Zadanie: Definiowanie układu

+

Zmień swój przykładowy dokument i arkusz stylów, korzystając z przykładów z sekcji Struktura dokumentu i Pływanie. +

W przykładzie z Pływanie dodaj margines wewnętrzny, aby oddzielić tekst od prawej ramki o 0.5 em. +

+ + +
Wyzwanie +
Zmień swój przykładowy dokument, dodając ten znacznik blisko końca, tuż przed +

</BODY> +

+
+  <IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
+
+

Jeżeli wcześniej nie pobrałeś(aś) pliku obrazka z tego kursu, zrób to teraz: +

+ + +
Image:Yellow-pin.png +
+

Spróbuj przewidzieć, gdzie ten obrazek pojawi się w dokumencie. +Potem odśwież okno przeglądarki i sprawdź czy miałeś(aś) rację. +

Dodaj regułę do arkusza stylów, która umieści obrazek na stałe w prawym górnym rogu dokumentu. +

Odśwież okno przeglądarki i zmniejsz rozmiar okna. +Sprawdź, czy obrazek nadal pozostaje w górnym prawym rogu, nawet kiedy przewijasz dokument. +

+

(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
+
+
+


+

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

Właśnie poznałeś(aś) wszystkie zagadnienia należące do podstawowego kursu CSS. +Następna strona dokładniej opisze zaawansowane selektory dla reguł CSS oraz trochę szczegółów dotyczących tabel: Tabele +

{{ languages( { "en": "en/CSS/Getting_Started/Layout", "fr": "fr/CSS/Premiers_pas/Mise_en_page", "pt": "pt/CSS/Como_come\u00e7ar/Disposi\u00e7\u00e3o" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/wi\304\205zania_xbl/index.html" "b/files/pl/web/css/na_pocz\304\205tek/wi\304\205zania_xbl/index.html" new file mode 100644 index 0000000000..9218b33797 --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/wi\304\205zania_xbl/index.html" @@ -0,0 +1,176 @@ +--- +title: Wiązania XBL +slug: Web/CSS/Na_początek/Wiązania_XBL +tags: + - 'CSS:Na_początek' +translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets +--- +

+

Ta strona opisuje jak możesz używać CSS-u w Mozilli, aby poprawić strukturę złożonych aplikacji, sprawiając, że kod i zasoby stają się wygodniejsze do zarządzania i ponownego użycia. +

Wykorzystasz te techniki w przykładowej demonstracji. +

+

Informacja: Wiązania XBL

+

Struktura dostarczana przez język znaczników i CSS nie jest idealna dla złożonych aplikacji, gdzie fragmentu muszą być kompletne i umożliwiać ponowne wykorzystanie. Możesz umieścić arkusze stylów w osobnych plikach, możesz umieścić skrypty w osobnych plikach. Ale musisz dodawać odnośniki do tych plików z dokumentu. +

Inne ograniczenie strukturalne dotyczy zawartości. Możesz użyć CSS, aby dodać zawartość do wybranych elementów, ale ta zawartość jest ograniczona do tekstu i obrazków, a ich pozycjonowanie jest ograniczone do przed i za wybranym elementem. +

Mozilla dodaje mechanizm, który pozwala pokonać te ograniczenia: XBL (Język Wiązań XML). +Możesz używać XBL-a do wiązania wybranych elementów: +

+ +

Ponieważ unikasz umieszczania odnośników do tego wszystkiego w dokumencie, możesz stworzyć elementy kompletne, którymi łatwo można zarządzać i które można wielokrotnie wykorzystywać. +

+ + +
Więcej szczegółów +
Aby dowiedzieć się więcej o wiązaniach XBL, zajrzyj na stronę o XBL na tym wiki. +
+

Zadanie: Demonstracja XBL-a

+

Stwórz nowy dokument HTML, doc6.html. +Skopiuj i wklej do niego poniższy kod: +

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+
+<HEAD>
+<TITLE>Mozilla CSS Getting Started - XBL demonstration</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style6.css"></strong>
+</HEAD>
+
+<BODY>
+<H1>XBL demonstration</H1>
+<DIV id="square">Click Me</DIV>
+</BODY>
+
+</HTML>
+
+

Stwórz nowy plik CSS, style6.css. +Ten arkusz stylów zawiera style dokumentu. +Skopiuj i wklej do niego poniższy kod: +

+
/*** XBL demonstration ***/
+#square {
+  -moz-binding: url("square.xbl#square");
+  }
+
+

Stwórz nowy plik tekstowy, square.xbl. +Ten plik zawiera wiązanie XBL. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
<?xml version="1.0"?>
+<!DOCTYPE bindings>
+<bindings xmlns="http://www.mozilla.org/xbl">
+
+<binding id="square">
+
+  <resources>
+    <stylesheet src="bind6.css"/>
+    </resources>
+
+  <content xmlns="http://www.w3.org/1999/xhtml">
+    <div anonid="square"/>
+    <button anonid="button" type="button">
+      <xbl:children/>
+      </button>
+    </content>
+
+  <implementation>
+
+    <field name="square"><![CDATA[
+      document.getAnonymousElementByAttribute(this, "anonid", "square")
+      ]]></field>
+
+    <field name="button"><![CDATA[
+      document.getAnonymousElementByAttribute(this, "anonid", "button")
+      ]]></field>
+
+    <method name="doDemo">
+      <body><![CDATA[
+        this.square.style.backgroundColor = "#cf4"
+        this.square.style.marginLeft = "20em"
+        this.button.setAttribute("disabled", "true")
+        setTimeout(this.clearDemo, 2000, this)
+        ]]></body>
+      </method>
+
+    <method name="clearDemo">
+      <parameter name="me"/>
+      <body><![CDATA[
+        me.square.style.backgroundColor = "transparent"
+        me.square.style.marginLeft = "0"
+        me.button.removeAttribute("disabled")
+        ]]></body>
+      </method>
+
+    </implementation>
+
+  <handlers>
+    <handler event="click" button="0"><![CDATA[
+     if (event.originalTarget == this.button) this.doDemo()
+     ]]></handler>
+    </handlers>
+
+  </binding>
+
+</bindings>
+
+

Stwórz nowy plik CSS, bind6.css. +Ten arkusz stylów zawiera style do wiązań. +Skopiuj i wklej do niego poniższy kod: +

+
/*** XBL demonstration ***/
+[anonid="square"] {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  }
+
+[anonid="button"] {
+  margin-top: 1em;
+  padding: .5em 2em;"
+  }
+
+

Otwórz dokument w swojej przeglądarce i naciśnij przycisk. +

To wiki nie obsługuje JavaScript-u na stronach, więc nie jest możliwe pokazanie demonstracji. +Wygląda to mniej więcej tak jak poniżej, przed i po naciśnięciu przycisku: +

+ + +
+ + +

XBL demonstration

+
+
+
+		 + + +

XBL demonstration

+
+
+
+
+

Uwagi dotyczące demonstracji: +

+ + + +
Wyzwanie +
Zmień plik XBL tak, aby obiekt square poszerzał się dwukrotnie, zamiast przeskakiwania w prawo, kiedy zmienia kolor. +

Użyj Inspektora DOM, aby zbadać dokument, analizując dodaną zawartość. +

+
+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

W tej demonstracji obiekt square oraz przycisk tworzą kompletną kontrolkę, która działa wewnątrz dokumentu HTML. +

Mozilla posiada wyspecjalizowany język znaczników do tworzenia interfejsów użytkownika. +Demonstruje to następna strona: +XUL-owe interfejsy użytkownika +

{{ languages( { "en": "en/CSS/Getting_Started/XBL_bindings", "fr": "fr/CSS/Premiers_pas/Liaisons_XBL", "pt": "pt/CSS/Como_come\u00e7ar/XBL_bindings" } ) }} diff --git "a/files/pl/web/css/na_pocz\304\205tek/xul-owe_interfejsy_u\305\274ytkownika/index.html" "b/files/pl/web/css/na_pocz\304\205tek/xul-owe_interfejsy_u\305\274ytkownika/index.html" new file mode 100644 index 0000000000..c185657258 --- /dev/null +++ "b/files/pl/web/css/na_pocz\304\205tek/xul-owe_interfejsy_u\305\274ytkownika/index.html" @@ -0,0 +1,299 @@ +--- +title: XUL-owe interfejsy użytkownika +slug: Web/CSS/Na_początek/XUL-owe_interfejsy_użytkownika +tags: + - 'CSS:Na_początek' +translation_of: Archive/Beginner_tutorials/XUL_user_interfaces +--- +

+

Ta strona opisuje specjalny język Mozilli do tworzenia interfejsów. +

Stworzysz przykładowy dokument demonstracyjny dla przeglądarek Gecko. +

+

Informacja: Interfejsy użytkownika

+

Mimo, że HTML posiada pewne wsparcie dla interfejsów użytkownika, to jest ono niewystarczające do stworzenia samodzielnej aplikacji. +

Mozilla pozwala pokonać te ograniczenia poprzez użycie specjalnego języka do tworzenia interfejsów użytkownika: XUL (XML User-interface Language, XML-owy Język Interfejsu Użytkownika, zazwyczaj wymawiany jak "zool"). +

W XUL-u, wiele często używanych funkcji interfejsu użytkownika jest wbudowanych. Na przykład, XUL dostarcza wyspecjalizowane typy okien jak okna dialogowe czy kreatory (wizards), oraz paski statusu, menu, paski narzędziowe, a nawet przeglądarki. +

Bardziej wyspecjalizowane funkcje, mogą zostać zbudowane z elementów przy użyciu XUL-a i innych technologii, które poznałeś(aś) w tym kursie: stylów CSS, kodu JavaScript, wiązań XBL. +

Jak inne języki XML-owe, XUL używa arkuszy stylów CSS. +

+ + +
Więcej szczegółów +
Aby dowiedzieć się więcej o XUL-owych interfejsach użytkownika, zajrzyj na stroną o XUL-u na tym wiki. +
+

Zadanie: Demonstracja XUL-a

+

Stwórz nowy dokument XUL jako czysty plik tekstowy, doc7.xul. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="style7.css"?>
+<!DOCTYPE window>
+
+<window
+  xmlns="http&58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  title="CSS Getting Started - XUL demonstration"
+  onload="init();">
+
+<script type="application/x-javascript" src="script7.js"/>
+
+<label class="head-1" value="XUL demonstration"/>
+
+<vbox>
+
+  <groupbox class="demo-group">
+    <caption label="Day of week calculator"/>
+    <grid>
+      <columns>
+        <column/>
+        <column/>
+        </columns>
+      <rows>
+        <row>
+          <label class="text-prompt" value="Date:"
+            accesskey="D" control="date-text"/>
+          <textbox id="date-text" type="timed"
+            timeout="750" oncommand="refresh();"/>
+          </row>
+        <row>
+          <label value="Day:"/>
+          <hbox id="day-box">
+            <label class="day" value="Sunday" disabled="true"/>
+            <label class="day" value="Monday" disabled="true"/>
+            <label class="day" value="Tuesday" disabled="true"/>
+            <label class="day" value="Wednesday" disabled="true"/>
+            <label class="day" value="Thursday" disabled="true"/>
+            <label class="day" value="Friday" disabled="true"/>
+            <label class="day" value="Saturday" disabled="true"/>
+            </hbox>
+          </row>
+        </rows>
+      </grid>
+    <hbox class="buttons">
+      <button id="clear" label="Clear" accesskey="C"
+        oncommand="clearDate();"/>
+      <button id="today" label="Today" accesskey="T"
+        oncommand="setToday();"/>
+      </hbox>
+    </groupbox>
+
+  <statusbar>
+    <statusbarpanel id="status"/>
+    </statusbar>
+
+</vbox>
+
+</window>
+
+

Stwórz nowy plik CSS, style7.css. +Skopiuj i wklej do niego poniższy kod, upewniając się, że wkleiłeś(aś) cały: +

+
/*** XUL demonstration ***/
+window {
+  -moz-box-align: start;
+  background-color: -moz-dialog;
+  font: -moz-dialog;
+  padding: 2em;
+  }
+
+.head-1 {
+  font-weight: bold;
+  font-size: 200%;
+  padding-left: 5px;
+  }
+
+
+/* the group box */
+.demo-group {
+  padding: 1em;
+  }
+
+.demo-group grid {
+  margin-bottom: 1em;
+  }
+
+.demo-group column {
+  margin-right: .5em;
+  }
+
+.demo-group row {
+  margin-bottom: .5em;
+  }
+
+.demo-group .buttons {
+  -moz-box-pack: end;
+  }
+
+
+/* the day-of-week labels */
+.day {
+  margin-left: 1em;
+  }
+
+.day[disabled] {
+  color: #777;
+  }
+
+.day:first-child {
+  margin-left: 4px;
+  }
+
+
+/* the left column labels */
+.text-prompt {
+  padding-top: .25em;
+  }
+
+
+/* the date input box */
+#date-text {
+  max-width: 8em;
+  }
+
+
+/* the status bar */
+statusbar {
+  width: 100%;
+  border: 1px inset -moz-dialog;
+  margin: 4px;
+  padding: 0px 4px;
+  }
+
+#status {
+  padding: 4px;
+  }
+
+#status[warning] {
+  color: red;
+  }
+
+

Stwórz nowy plik tekstowy, script7.js. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
// XUL demonstration
+
+var dateBox, dayBox, currentDay, status; // elements
+
+// called by window onLoad
+function init() {
+  dateBox = document.getElementById("date-text")
+  dayBox = document.getElementById("day-box")
+  status = document.getElementById("status")
+  setToday();
+  }
+
+// called by Clear button
+function clearDate() {
+  dateBox.value = ""
+  refresh()
+  }
+
+// called by Today button
+function setToday() {
+  var d = new Date()
+  dateBox.value = (d.getMonth() + 1)
+    + "/" + d.getDate()
+    + "/" + d.getFullYear()
+  refresh()
+  }
+
+// called by Date textbox
+function refresh() {
+  var d = dateBox.value
+  var theDate = null
+
+  showStatus(null)
+  if (d != "") {
+    try {
+      var a = d.split("/")
+      var theDate = new Date(a[2], a[0] - 1, a[1])
+      showStatus(theDate)
+      }
+    catch (ex) {}
+    }
+  setDay(theDate)
+  }
+
+// internal
+function setDay(aDate) {
+  if (currentDay) currentDay.setAttribute("disabled", "true")
+  if (aDate == null) currentDay = null
+  else {
+    var d = aDate.getDay()
+    currentDay = dayBox.firstChild
+    while (d-- > 0) currentDay = currentDay.nextSibling
+    currentDay.removeAttribute("disabled")
+    }
+  dateBox.focus()
+  }
+
+function showStatus(aDate) {
+  if (aDate == null) {
+    status.removeAttribute("warning")
+    status.setAttribute("label", "")
+    }
+  else if (aDate === false || isNaN(aDate.getTime())) {
+    status.setAttribute("warning", "true")
+    status.setAttribute("label", "Date is not valid")
+    }
+  else {
+    status.removeAttribute("warning")
+    status.setAttribute("label", aDate.toLocaleDateString())
+    }
+  }
+
+

Aby zobaczyć właściwy wynik, użyj domyślnego motywu w swojej przeglądarce. +Jeżeli użyjesz innego, może on zmieniać trochę style interfejsu użytkownika i demonstracja może wyglądać dziwnie. +

Otwórz ten dokument w przeglądarce Mozilli i skorzystaj z interfejsu. +

To wiki nie obsługuje XUL-a ani JavaScript-u na stronach, nie jest więc możliwe pokazanie demonstracji tutaj. +Wygląda ona mniej więcej tak: +

+ + +

XUL demonstration

+
+

+Day of week calculator

+ + + + + + +
Date: +6/27/2005 +
Day:Sunday Monday Tuesday Wednesday Thurdsay Friday Saturday +
+
+

Clear +Today +

+
+
+
+
+

June 27, 2005

+
+
+

Uwagi dotyczące demonstracji: +

+ +

Sprawdź arkusz stylów dokumentu, aby upewnić się, że rozumiesz wszystkie reguły w nim zawarte. +Jeżeli jest jakaś reguła, której nie rozumiesz, wykomentuj ją i odśwież przeglądarkę, aby zobaczyć różnicę. +

+ + +
Wyzwanie +
Korzystając z Inspektora DOM sprawdź kontrolkę bloku tekstowego Date. Jest ona złożona z elementów stworzonych przez jej wiązanie XBL. +

Znajdź klasę elementu html:input. To jest element, który przyjmuje dane od użytkownika. +

Korzystając z tej wiedzy, dodaj regułę do arkusza stylów, która sprawia, że tło pola Date będzie jasno niebieskie kiedy jest ono aktywne dla klawiatury (ale białe kiedy jest nieaktywne). +

+
+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie Dyskusji. +

W tej demonstracji, widzisz standardowe, prostokątne kształty, które są wspólne dla większości interfejsów użytkownika. +Mozilla wspiera także specjalny język graficzny do tworzenia kształtów, którego styl tworzy się w CSS-ie. +

Demonstruje to następna strona: Grafika SVG +

{{ languages( { "en": "en/CSS/Getting_Started/XUL_user_interfaces", "fr": "fr/CSS/Premiers_pas/Interfaces_utilisateur_XUL", "pt": "pt/CSS/Como_come\u00e7ar/Interfaces_de_usu\u00e1rio_XUL" } ) }} diff --git a/files/pl/web/css/opacity/index.html b/files/pl/web/css/opacity/index.html new file mode 100644 index 0000000000..9b3e1504ff --- /dev/null +++ b/files/pl/web/css/opacity/index.html @@ -0,0 +1,180 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/opacity +--- +
{{ CSSRef() }}
+ +

Podsumowanie

+ +

Parametr opacity ustala przezroczystość elementu, czyli stopień, w jakim są widoczne elementy za określonym elementem.

+ + + +

Składnia

+ +
opacity: number | inherit ;
+
+ +

Wartości

+ +
+
0 (lub mniej)
+
Element jest w pełni przezroczysty (niewidoczny)
+
0 < liczba < 1
+
Element jest półprzezroczysty (tło może być widoczne)
+
1 (lub więcej)
+
Element jest w pełni nieprzezroczysty (jednolity)
+
+ +

Przykłady

+ +
hbox.example {
+  opacity: 0.5; /* zobacz tło poprzez hbox */
+}
+
+ +

Przykład kompatybilny z różnymi przeglądarkami

+ +
pre {                               /* make the box translucent (20% nieprzezroczystości) */
+   border: solid red;
+   opacity: 0.2;
+   filter: alpha(opacity=20);       /* IE8 i starsze */
+   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
+}
+
+ +
pre {                               /* make the box translucent (50% nieprzezroczystości) */
+   border: solid red;
+   opacity: 0.5;
+   filter: alpha(opacity=50);       /* IE8 i starsze */
+   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
+}
+
+ +
pre {                               /* make the box translucent (80% nieprzezroczystości) */
+   border: solid red;
+   opacity: 0.8;
+   filter: alpha(opacity=80);       /* IE8 i starsze */
+   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
+}
+
+ +

Różna nieprzezroczystość z :hover

+ +
<html>
+<head>
+<style>
+img.opacity {
+   opacity: 1;
+   filter: alpha(opacity=50);
+   zoom: 1;
+ }
+
+img.opacity:hover {
+   opacity: 0.5;
+   filter: alpha(opacity=100);
+   zoom: 1;
+ }
+</style>
+</head>
+
+<body>
+<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity" />
+</body>
+</html>
+
+ +

Kompatybilność z przeglądarkami

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
ElementChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Podstawowe wsparcie1.0{{ CompatGeckoDesktop("1.7") }}9.09.01.2 (125)
8.0
+ filter: alpha(opacity=xx)
+ filter: "alpha(opacity=xx)"
+ (oba to synonimy)
4.0
+ filter: alpha(opacity=xx)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
ElementAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Podstawowe wsparcie1.0{{ CompatGeckoMobile("1.7") }}9.09.03.2
8.0
+ filter: alpha(opacity=xx)
+ filter: "alpha(opacity=xx)"
+ (oba to synonimy)
4.0
+ filter: alpha(opacity=xx)
+
+ + + +

Specyfikacje

+ + diff --git a/files/pl/web/css/outline-offset/index.html b/files/pl/web/css/outline-offset/index.html new file mode 100644 index 0000000000..025d8295a1 --- /dev/null +++ b/files/pl/web/css/outline-offset/index.html @@ -0,0 +1,42 @@ +--- +title: outline-offset +slug: Web/CSS/outline-offset +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/outline-offset +--- +
{{CSSRef}}
+ +

Podsumowanie

+ +

W aplikacjach Mozilli -moz-outline-offset jest używane do ustawienia odstępu między konturem a krawędzią lub obramowaniem elementu. Kontur jest linią rysowaną wokół elementów, na zewnątrz krawędzi obramowania w celu wyróżnienia elementu.

+ +

{{cssinfo}}

+ +

Odstęp będzie przezroczysty (rodzic określi tło).

+ +

Składnia

+ +
-moz-outline-offset: <liczba> | inherit
+
+ +

Wartości

+ +
+
<number>
+
Szerokość odstępu.
+
+ +

Przykłady

+ +
hbox.example {
+  /* Odsuwa kontur 2px od obramowania */
+  -moz-outline-offset: 2px;
+}
+
+ +

 

diff --git a/files/pl/web/css/outline/index.html b/files/pl/web/css/outline/index.html new file mode 100644 index 0000000000..42bf295b72 --- /dev/null +++ b/files/pl/web/css/outline/index.html @@ -0,0 +1,57 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - CSS + - 'CSS:Dokumentacje' + - 'CSS:Rozszerzenia_Mozilli' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/outline +--- +
+
{{CSSRef}}
+
+ +

Podsumowanie

+ +

W aplikacjach opartych na Gecko -moz-outline jest używany do ustawiania konturu elementu. Kontur jest linią rysowaną na zewnątrz krawędzi obramowania w celu wyróżnienia elementu.

+ +
{{cssinfo}}
+ +

Składnia

+ +
-moz-outline: [-moz-outline-color || -moz-outline-style || -moz-outline-width | inherit];
+
+ +

Wartości

+ +
+
-moz-outline-color
+
Ustawia kolor konturu. Zobacz {{ Cssxref("-moz-outline-color") }}.
+
-moz-outline-style
+
Ustawia styl konturu. Zobacz {{ Cssxref("-moz-outline-style") }}.
+
-moz-outline-width
+
Ustawia szerokość konturu. Zobacz {{ Cssxref("-moz-outline-width") }}.
+
+ +

Powiązane własności

+ + + +

Przykłady

+ +
hbox.example {
+  /* ciągły czerwony kontur o szerokości 10px */
+  -moz-outline: red solid 10px;
+}
diff --git a/files/pl/web/css/page-break-after/index.html b/files/pl/web/css/page-break-after/index.html new file mode 100644 index 0000000000..b8b3dbbb63 --- /dev/null +++ b/files/pl/web/css/page-break-after/index.html @@ -0,0 +1,101 @@ +--- +title: page-break-after +slug: Web/CSS/page-break-after +tags: + - CSS + - druk +translation_of: Web/CSS/page-break-after +--- +
{{ CSSRef() }}
+ +

Podsumowanie

+ +

Akapit podsumowania.  Właściwość CSS page-break-after dostosowuje łamanie stron CSS po bieżącym elemencie.

+ + + +

Składnia

+ +
page-break-after: auto | always | avoid | left | right | inherit
+
+ +

Wartości

+ +
+
auto
+
{{ Xref_cssinitial() }}.  Samoczynne łamanie stron (dozwolone ale nie wymuszone).
+
always
+
Zawsze wymusza łamanie strony po elemencie.
+
avoid {{ Unimplemented_inline() }}
+
Unika łamania stron po elemencie.
+
left {{ Unimplemented_inline() }}
+
Wymusza takie łamanie strony po elemencie, że następna strona złoży się jako lewa.
+
right {{ Unimplemented_inline() }}
+
Wymusza takie łamanie strony po elemencie, że następna strona złoży się jako prawa.
+
+ +

Przykłady

+ +
/* przejdź do następnej strony po przypisach */
+DIV.footnotes { page-break-after:always; }
+ +

Uwagi

+ +

---

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ +

(Próbna tabela kompatybilności)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer4.0
Firefox?
Netscape?
Opera7.0
Safari1.2
Konqueror4.7.2
+ +

Zobacz także

+ + diff --git a/files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html b/files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html new file mode 100644 index 0000000000..fad2ac55d1 --- /dev/null +++ b/files/pl/web/css/prywatnosc_i_znacznik__colon_visited/index.html @@ -0,0 +1,68 @@ +--- +title: 'Prywatność i znacznik :visited' +slug: 'Web/CSS/Prywatnosc_i_znacznik_:visited' +translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' +--- +
{{cssref}}
+ +

Przed mniej więcej rokiem 2010, CSS-owy znacznik {{ cssxref(":visited") }} pozwalał stronom WWW na ujawnianie historii przeglądania użytkownika i które ze stron odwiedził. Było to możliwe przez {{domxref("window.getComputedStyle")}} i inne techniki. Proces ten działał błyskawicznie i pozwalał nie tylko na ujawnienie, co użytkownik robił w sieci, ale również pozwalał na dowiedzenie się wielu informacji o jego tożsamości.

+ +

By załagodzić ten problem, w {{ Gecko("2") }} zaimplementowano aktualizacje dot. prywatności celem ograniczenia ilości informacji zbieranych przez odwiedzone linki. W przypadku innych przeglądarek dokonano podobnych zmian.

+ +

Małe, białe kłamstewka

+ +

By chronić prywatność użytkowników, Firefox i inne przeglądarki będą kłamać aplikacjom webowym w przypadku zaistnienia poniższych okoliczności:

+ + + + + +

You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:

+ + + +

In addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using rgba(), hsla(), or the transparent keyword.

+ +

Here is an example of how to use styles with the aforementioned restrictions:

+ +
:link {
+  outline: 1px dotted blue;
+  background-color: white;
+  /* The default value of background-color is `transparent`. You need to
+     specify a different value, otherwise changes on :visited won't apply. */
+}
+
+:visited {
+  outline-color: orange;    /* Visited links have an orange outline */
+  background-color: green;  /* Visited links have a green background */
+  color: yellow;            /* Visited links have yellow colored text */
+}
+
+ +

Impact on web developers

+ +

Overall, these restrictions shouldn't affect web developers too significantly. They may, however, require the following changes to existing sites:

+ + + +

See also

+ + diff --git a/files/pl/web/css/right/index.html b/files/pl/web/css/right/index.html new file mode 100644 index 0000000000..8ba4fb3b11 --- /dev/null +++ b/files/pl/web/css/right/index.html @@ -0,0 +1,148 @@ +--- +title: right +slug: Web/CSS/right +tags: + - CSS + - CSS Property + - Własność CSS + - border +translation_of: Web/CSS/right +--- +
{{CSSRef}}
+ +

Własność CSS right pełni ważną rolę w określaniu pionowej pozycji pozycjonowanego elementu. Nie ma wpływu na elementy z nieokreślonym położeniem.

+ +

{{EmbedInteractiveExample("pages/css/right.html")}}

+ + + +

Efekt right jest zależny od pozycji elementu (czyli od własności position elementu).

+ + + +

When both {{cssxref("left")}} and right are defined, and the element cannot stretch to satisfy both, the position of the element is overspecified. When this is the case, the left value has precedence when the container is left-to-right; the right value has precedence when the container is right-to-left.

+ +

Składnia

+ +
/* Wartość liczbowa (długość) */
+right: 3px;
+right: 2.4em;
+
+/* Wartość procentowa */
+right: 10%;
+
+/* Wartość kluczowa */
+right: auto;
+
+/* Wartości globalne */
+right: inherit;
+right: initial;
+right: unset;
+
+ +

Values

+ +
+
{{cssxref("<length>")}}
+
Negatywna, pozytywna lub o wartości null długość, która dla:
+
+
    +
  • elementów z position: absolute, określa odległość do prawej krawędzi rodzica
    • +
  • elementów z position: relative, określa czy element jest przeniesiony do lewej krawędzi jej normalnej (domyślnej) pozycji
    • +
+
+
{{cssxref("<percentage>")}}
+
Wartość procentowa określa procentową odległość  w stosunku do szerokości rodzica. 
+
+
auto
+
Specifies that: +
    +
  • for absolutely positioned elements, the position of the element is based on the {{Cssxref("left")}} property, while width: auto is treated as a width based on the content; or if left is also auto, the element is positioned where it should horizontally be positioned if it were a static element.
    • +
  • for relatively positioned elements, the distance of the element from its normal position is based on the {{Cssxref("left")}} property; or if left is also auto, the element is not moved horizontally at all.
    • +
+
+
inherit
+
Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or the auto keyword.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Przykłady

+ +
#example_3 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFC7E4;
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+
+#example_4 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFD7C2;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}
+ +
<div id="example_3">Example 3</div>
+<div id="example_4">Example 4</div>
+
+ +

{{ EmbedLiveSample('Examples', 500, 220) }}

+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}{{Spec2('CSS3 Transitions')}}Definiuje right jako animatable (możliwy do animowania)
{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}{{Spec2('CSS3 Positioning')}} +

Określa zachowanie dla sticky position.

+
{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}{{Spec2('CSS2.1')}} +

Initial definition.

+
+ +

{{cssinfo}}

+ +

Zgodność z przeglądarkami

+ + + +

{{Compat("css.properties.right")}}

+ +

Zobacz jeszcze

+ + diff --git a/files/pl/web/css/rozszerzenia_webkit/index.html b/files/pl/web/css/rozszerzenia_webkit/index.html new file mode 100644 index 0000000000..0b60bd4475 --- /dev/null +++ b/files/pl/web/css/rozszerzenia_webkit/index.html @@ -0,0 +1,358 @@ +--- +title: Rozszerzenia WebKit +slug: Web/CSS/Rozszerzenia_WebKit +tags: + - CSS + - Referencje CSS +translation_of: Web/CSS/WebKit_Extensions +--- +
{{CSSRef}}
+ +

Webkit wspiera wiele rozszerzeń dedykowanych CSS opatrzonych prefiksem -webkit. Wszystkie właściwości opatrzone prefiksem -webkit działają również z prefiksem -apple.

+ +

Niektóre z tych właściwości zostały zawarte w szkicu specyfikacji CSS w celu włączenia do ostatecznej rekomendacji, ale są one jeszcze eksperymentalne. Niektóre z tych niestandardowych właściwości nie wchodzą w skład linii standardowo obowiązującej.

+ +

Jednostki z prefiksem WebKit obowiązującego standardu

+ +
+

A – C

+ + + +

F

+ + + +

G

+ + + +

H – O

+ + + +

M

+ + + +

P

+ + + +

Q – Z

+ + +
+ +

Jednostki z prefiksem WebKit z odpowiednikiem bez prefiksu

+ +

W celu maksymalizacji kompatybilności z Twoim CSS powinienneś/powinnaś stosować właściwości standardu bez prefiksu zamiast opcji z prefiksem. Poniżej znajduje się lista wszystkich wariantów:

+ +
+

A

+ + + +

B

+ + + +

C – N

+ + + +

O – S

+ + + +

T – Z

+ + +
+ +

Firmowe jednostki z prefiksem WebKit (nie do używania na stronach internetowych)

+ +
+

A

+ + + +

B

+ + + +

C

+ + + +

D E

+ + + +

F

+ + + +

G

+ + + +

H – K

+ + + +

L

+ + + +

M

+ + + +

N

+ + + +

O

+ + + +

P Q

+ + + +

R

+ + + +

S

+ + + +

T – Z

+ + +
+ +

Zobacz również

+ + diff --git a/files/pl/web/css/selektor_klasy/index.html b/files/pl/web/css/selektor_klasy/index.html new file mode 100644 index 0000000000..12f8d4f5c8 --- /dev/null +++ b/files/pl/web/css/selektor_klasy/index.html @@ -0,0 +1,86 @@ +--- +title: Selektor klasy +slug: Web/CSS/Selektor_klasy +tags: + - CSS + - Klasy + - Reference + - Selektory +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef("Selectors")}}
+ +
 
+ +
Selektor klasy wyszukuje każdy element z atrybutem {{htmlattrxref("class")}} w dokumencie HTML. Atrybut {{htmlattrxref("class")}} jest zdefiniowany jako lista przedmiotów oddzielonych ze sobą spacją, jeden z nich musi zgadzać się z podaną klasą w selektorze (CSS).
+ +
 
+ +

Składnia

+ +
.nazwaklasy { właściwości stylu }
+ +

Jest to równoważne z {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[class~=nazwaklasy] { właściwości stylu }
+ +

Przykład

+ +

CSS

+ +
span.classy {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<span class="classy">Przykładowy tekst.</span>
+<span>Kolejny przykładowy tekst.</span>
+
+ +

Specyfikacje

+ + + +

Kompatybilność z przeglądarkami

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaWsparcie
ChromeTak
EdgeTak
FirefoxTak
Internet ExplorerTak
OperaTak
SafariTak
+ +

 

diff --git a/files/pl/web/css/selektor_uniwersalny/index.html b/files/pl/web/css/selektor_uniwersalny/index.html new file mode 100644 index 0000000000..c3c4952f06 --- /dev/null +++ b/files/pl/web/css/selektor_uniwersalny/index.html @@ -0,0 +1,104 @@ +--- +title: Selektor uniwersalny +slug: Web/CSS/Selektor_uniwersalny +tags: + - CSS + - Selektory +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef}}
+ +

Selektor uniwersalny (*) dopasowuje elementy wszystkich typów.

+ +
/* Wybierz wszystkie elementy */
+* {
+  color: green;
+}
+ +

Począwszy od CSS3, gwiazdka może być używana w połączeniu z {{cssxref("CSS_Namespaces", "namespaces")}}:

+ + + +

Składnia

+ +
* { własności }
+ +

Gwiazdka jest opcjonalna w przypadku prostych selektorów. Np.: *.warning i .warning są równoważne.

+ +

Przykłady

+ +

CSS

+ +
* [lang^=pl] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* automatycznie czyści opływanie dla rodzeństwa znajdującego się bezpośrednio po elemencie z klasą .floating */
+.floating + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="warning">
+  <span lang="pl">Zielony span</span> w czerwonym akapicie.
+</p>
+<p id="maincontent" lang="pl">
+  <span class="warning">czerwony span</span> w zielonym akapicie.
+</p>
+ +

Rezultat

+ +

{{EmbedLiveSample('Przykłady')}}

+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Defines behavior regarding namespaces and adds hint that omitting the selector is allowed within pseudo-elements
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

diff --git a/files/pl/web/css/selektory_typu/index.html b/files/pl/web/css/selektory_typu/index.html new file mode 100644 index 0000000000..13dc191bb1 --- /dev/null +++ b/files/pl/web/css/selektory_typu/index.html @@ -0,0 +1,80 @@ +--- +title: Selektory typu +slug: Web/CSS/Selektory_typu +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef}}
+ +

Selektory typu dopasowują wszystkie elementy mające taką samą nazwę jak dany selektor. Własności zostaną zastosowane do każdego elementu danego typu niezależnie od tego, gdzie znajduje się w drzewie dokumentu.

+ +

Składnia

+ +
selektor {własności }
+
+ +

selektor jest do dowolnym elementem np. p, div, a, table.

+ +

Przykład

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>Span z tekstem.</span>
+<p>Akapit z tekstem.</p>
+<span>Span z większą ilością tekstu.</span>
+
+ +

Rezultat

+ +

{{EmbedLiveSample('Przykład', '100%', 150)}}

+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}No changes
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Initial definition
+ +

Kompatybilność przeglądarek

+ + + +

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

diff --git "a/files/pl/web/css/skr\303\263cone_deklaracje_css/index.html" "b/files/pl/web/css/skr\303\263cone_deklaracje_css/index.html" new file mode 100644 index 0000000000..fa244eb571 --- /dev/null +++ "b/files/pl/web/css/skr\303\263cone_deklaracje_css/index.html" @@ -0,0 +1,56 @@ +--- +title: Skrócone deklaracje CSS +slug: Web/CSS/Skrócone_deklaracje_CSS +tags: + - CSS + - Wszystkie_kategorie +translation_of: Web/CSS/Shorthand_properties +--- +

+

+

Dlaczego skracamy deklaracje CSS?

+

Wielu programistów CSS stosuje skrócone wersje często stosowanych własności w celu zaoszczędzenia czasu i energii. Chociaż skracanie deklaracji może wydawać się nie intuicyjnie i prawdopodobnie będzie wymagało trochę zapamiętywania, to z całą pewnością zaoszczędzi nam pisania na klawiaturze, podczas tworzenia dużych lub kompleksowych arkuszy stylów. +

+

Własności tła

+

Tło określone za pomocą następujących własności: +

+
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;
+

Można zapisać w jednej deklaracji jako: +

+
background: #000 url(images/bg.gif) no-repeat top right;
+

(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus background-attachment: scroll oraz kilku dodatkowych własności w CSS3) +

+

Własności czcionki

+

Następujące deklaracje: +

+
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;
+

Mogą zostać skrócone do następującej deklaracji:

+
font: italic bold .8em/1.2 Arial, sans-serif;
+

(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus font-variant: normal i font-size-adjust: none (CSS2.0 / css3), font-stretch: normal (css3).) +

+

Własności obramowania

+

Obramowanie, szerokość, kolor i styl możemy uprościć do jednej deklaracji. Na przykład: +

+
border-width: 1px;
+border-style: solid;
+border-color: #000;
+

Możemy zapisać jako: +

+
border: 1px solid #000;
+

Własności margin/padding

+

Skrócona wersja wartości margin i padding działa w ten sam sposób. Następujące deklaracje CSS:

+
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;
+

Są tym samym, co poniższa deklaracja (ważne jest, aby wartości były rozmieszczone zgodnie z kierunkiem ruchu wskazówek zegara, zaczynając od wartości top: top, right, bottom i left (TRBL, spółgłoski w słowie "trouble")) +

+
margin: 10px 5px 10px 5px;
+{{ languages( { "en": "en/Guide_to_Shorthand_CSS" } ) }} diff --git a/files/pl/web/css/text-transform/index.html b/files/pl/web/css/text-transform/index.html new file mode 100644 index 0000000000..1e3bcc1ac1 --- /dev/null +++ b/files/pl/web/css/text-transform/index.html @@ -0,0 +1,81 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/text-transform +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność CSS 'text-transform' definiuje, czy tekst w elemencie powinien być wyświetlony kapitalikami lub wielkimi literami.

+ +

{{cssinfo}}

+ +

Składnia

+ +
text-transform : capitalize | uppercase | lowercase| none
+
+ +

Wartości

+ +
+
capitalize
+
Pierwsza litera każdego słowa jest zmieniana na wielką, inne zostają bez zmian.
+
uppercase
+
Wszystkie litery są przekształcane na wielkie.
+
lowercase
+
Wszystkie litery są przekształcane na małe.
+
none
+
Żadne zmiany wielkości liter nie są dokonywane.
+
+ +

Examples

+ +
p::first-line {
+  text-transform: uppercase;
+}
+
+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer?
Firefox?
Netscape?
Opera?
Safari?
diff --git a/files/pl/web/css/transform-function/index.html b/files/pl/web/css/transform-function/index.html new file mode 100644 index 0000000000..9a384bb869 --- /dev/null +++ b/files/pl/web/css/transform-function/index.html @@ -0,0 +1,201 @@ +--- +title: +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Reference + - CSS Transforms + - Layout + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/transform-function +--- +
{{CSSRef}}
+ +

The <transform-function> CSS data type denotes a function applied to an element's representation in order to modify it. Usually such transform may be expressed by matrices and the resulting images can be determined using matrix multiplication on each point.

+ +

Coordinates for 2D graphics

+ +

There are several coordinate models used when describing transformation. The most common are the Cartesian coordinate system and homogeneous coordinates.

+ +

Cartesian coordinates

+ +

+ +

In Cartesian coordinates each point of the Euclidian space is described using two values, the abscissa and the ordinate. The origin, the (0, 0) is the top-left corner of the element. Unlike the usual geometric convention, and like most cases in computer graphics, the y-axis goes to the bottom. Each point is mathematically described using the vector notation (x,y).

+ +

Each linear function is described using a 2x2 matrix like:

+ +
+

ac bd

+
+ +

Applying the transformation consists in doing, for each point, the matrix multiplication between both:

+ +
.
+ +

It is possible to apply several transformations in a row:

+ +
.
+ +

With this notation, it is possible to describe, and therefore composite, most usual transformations: rotations, scaling, or skewing. In fact all transformations that are linear functions can be described. Composite transforms are effectively applied in order from right to left. One major transformation is not linear and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two more parameters.

+ +

Möbius' homogeneous coordinates in projective geometry leading to 3x3 transformation matrices, though more complex and unusual for non-specialists, doesn't suffer from the translation limitation as these can be expressed as linear functions in this algebra, removing the need for special cases.

+ +

Functions defining transformations

+ +

Several functions are available to describe transformations in CSS. Each one applies a geometric operation, in 2D or 3D:

+ +
+
{{cssxref("transform-function/matrix","matrix()")}}
+
The matrix() CSS function specifies a homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order.
+
matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).
+
{{cssxref("transform-function/matrix3d","matrix3d()")}}
+
The matrix3d() CSS function describes a 3D transform as a 4x4 homogeneous matrix. The 16 parameters are described in the column-major order.
+
{{cssxref("transform-function/perspective","perspective()")}}
+
The perspective() CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
+
{{cssxref("transform-function/rotate","rotate()")}}
+
The rotate() CSS function defines a transformation that moves the element around a fixed point (as specified by the {{ Cssxref("transform-origin") }} property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180° is called point reflection.
+
{{cssxref("transform-function/rotate3d","rotate3d()")}}
+
The rotate3d()CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.
+
{{cssxref("transform-function/rotateX","rotateX()")}}
+
The rotateX()CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.
+
rotateX(a)is a shorthand for rotate3D(1, 0, 0, a).
+
{{cssxref("transform-function/rotateY","rotateY()")}}
+
The rotateY()CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.
+
rotateY(a)is a shorthand for rotate3D(0, 1, 0, a).
+
{{cssxref("transform-function/rotateZ","rotateZ()")}}
+
The rotateZ()CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.
+
rotateZ(a)is a shorthand for rotate3D(0, 0, 1, a).
+
{{cssxref("transform-function/scale","scale()")}}
+
The scale() CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If both coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.
+
{{cssxref("transform-function/scale3d","scale3d()")}}
+
The scale3d() CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If all three coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.
+
{{cssxref("transform-function/scaleX","scaleX()")}}
+
The scaleX() CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. scaleX(-1) defines an axial symmetry with a vertical axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).
+
scaleX(sx) is a shorthand for scale(sx, 1) or for scale3d(sx, 1, 1).
+
{{cssxref("transform-function/scaleY","scaleY()")}}
+
The scaleY() CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. scaleY(-1) defines an axial symmetry with a horizontal axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).
+
scaleY(sy) is a shorthand for scale(1, sy) or for scale3d(1, sy, 1).
+
{{cssxref("transform-function/scaleZ","scaleZ()")}}
+
The scaleZ() CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved. scaleZ(-1) defines an axial symmetry along the z-axis passing by the origin (as specified by the {{cssxref("transform-origin")}} property).
+
scaleZ(sz) is a shorthand for scale3d(1, 1, sz).
+
{{cssxref("transform-function/skew","skew()")}}
+
The skew() CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.
+
{{cssxref("transform-function/skewX","skewX()")}}
+
The skewX() CSS function is a horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.
+
{{cssxref("transform-function/skewY","skewY()")}}
+
The skewY() CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.
+
{{cssxref("transform-function/translate","translate()")}}
+
The translate() CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.
+
{{cssxref("transform-function/translate3d","translate3d()")}}
+
The translate3d() CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.
+
{{cssxref("transform-function/translateX","translateX()")}}
+
The translateX() CSS function moves the element horizontally on the plane. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves horizontally.
+
translateX(tx) is a shortcut for translate(tx, 0).
+
{{cssxref("transform-function/translateY","translateY()")}}
+
The translateY() CSS function moves the element vertically on the plane. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves vertically.
+
translateY(ty) is a shortcut for translate(0, ty).
+
{{cssxref("transform-function/translateZ","translateZ()")}}
+
The translateZ() CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a {{cssxref("<length>")}} defining how much it moves.
+
translateZ(tz) is a shorthand for translate3d(0, 0, tz).
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}[1]9.0[2]10.53.1
3D Support12.0{{CompatGeckoDesktop("10.0")}}10.015.04.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatAndroid(2.1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}11.53.2
3D Support{{CompatAndroid(3.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}223.2
+
+ +

[1] Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.

+ +

Before Firefox 16, the translation values of matrix() and matrix3d() could be {{cssxref("length")}} in addition to the standard {{cssxref("number")}}.

+ +

[2] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

+ +

Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as -ms-transform: rotate(10deg) translateZ(0);, will prevent the entire property from being applied.

diff --git a/files/pl/web/css/transform-function/matrix()/index.html b/files/pl/web/css/transform-function/matrix()/index.html new file mode 100644 index 0000000000..85a951052a --- /dev/null +++ b/files/pl/web/css/transform-function/matrix()/index.html @@ -0,0 +1,58 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix() +tags: + - CSS + - Funkcje CSS + - Referencje + - Transformacje CSS + - wymagaPrzykładu +translation_of: Web/CSS/transform-function/matrix() +--- +
{{CSSRef}}
+ +

CSS-owa funkcja matrix() określa jednolitą macierz (matrix) transformacji 2D i składa się z sześciu określonych wartości. Wartości stałe tych macierzy są implementowane oraz nie działają jak parametry; pozostałe parametry są opisywane w porządku głównej kolumny.

+ +

matrix(a, b, c, d, tx, ty) to shorthand dla matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

+ +
Adnotacja: Od Firefoxa 16, Gecko akceptuje wartośc {{cssxref("<length>")}} dla tx oraz ty.
+ +

Składnia

+ +
matrix(a, b, c, d, tx, ty)
+
+ +

Wartości

+ +
+
a b c d
+
{{cssxref("<number>")}} opisują transformacje linearne.
+
tx ty
+
{{cssxref("<number>")}} opisują transformacje do zastosowania.
+
+ + + + + + + + + + + + + + + + + + + + + +
Współrzędne kartezjańskie na ℝ2Współrzędne jednorodne na ℝℙ2Współrzędne kartezjańskie na ℝ3Współrzędne jednorodne na ℝℙ3
ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
[a b c d tx ty]
+ +

Przykłady

+ +

TBD

diff --git a/files/pl/web/css/using_css_custom_properties/index.html b/files/pl/web/css/using_css_custom_properties/index.html new file mode 100644 index 0000000000..c9b7089b07 --- /dev/null +++ b/files/pl/web/css/using_css_custom_properties/index.html @@ -0,0 +1,244 @@ +--- +title: Użycie zmiennych CSS +slug: Web/CSS/Using_CSS_custom_properties +translation_of: Web/CSS/Using_CSS_custom_properties +--- +
{{SeeCompatTable}}
+ +
+ +

Zmienne CSS to zdefiniowane jednostki zawierające specyficzne wartości, reużywalne w całym dokumencie. Zmienne są ustawiane przy użyciu notacji właściwości niestandardowych (np. --kolor-glowny: black;) i mają dostęp do funkcji var() (np. kolor: var(--kolor-glowny);) .

+ +

Skomplikowane strony internetowe mają bardzo dużo powtarzającego się kodu CSS. Dla przykładu, taki sam kolor może być użyty setki razy w różnych miejscach, co w przypadku zmiany wymana globalnego wyszukiwania i zmian w wielu miejsach. Zmienne CSS pozwalają na przechowywanie wartości w jednym miejscu, zmiast wielu. Używają one również semantycznych identyfikatorów. Na przykład --glowny-kolor-tekstu jest łatwiejszy do zrozumienia niż #00ff00 szczególnie gdy taki sam kolor jest użyty w różnych kontekstach.

+ +

Zmienne CSS podlegają kaskadowości i dziedziczą wartości po rodzicach.

+ +

Podstawowe użycie

+ +

Deklarowanie zmiennych:

+ +
element {
+  --glowny-kolor-tla: brown;
+}
+
+ +

Użycie zmiennych:

+ +
element {
+  background-color: var(--glowny-kolor-tla);
+}
+
+ +
+

Notatka: Niestandardowy prefix var- istniał we wcześniejszych wersjach, jednak później został zmieniony na --. Firefox 31 i wyższy posiada nową specyfikację. ({{bug(985838)}})

+
+ +

Zmienne CSS - pierwsze kroki

+ +

Zacznijmy od prostego kodu CSS z różnymi klasami, których elementy posiadają różne kolory:

+ +
+
.jeden {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.dwa {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.trzy {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 75px;
+}
+.cztery {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 100px;
+}
+
+.piec {
+  background-color: brown;
+}
+
+
+ +

Implementujemy to w HTML'u:

+ +
<div>
+    <div class="jeden"></div>
+    <div class="dwa">Tekst <span class="cztery">- wiecej tekstu</span></div>
+    <input class="trzy">
+    <textarea class="piec">Lorem Ipsum</textarea>
+</div>
+
+ +

co w efekcie daje nam:

+ +

{{EmbedLiveSample("sample1",600,180)}}

+ +


+ Zauważ powtarzalność kodu CSS. Kolor tła jest ustawiony na brązowy w kilku miejscach.W niektórych przypadkach możemy zadeklarować kolor do wszystkich elementów, co rozwiązuje problem. Jednak w przypadku złożonych projektów, nie zawsze jest to możliwe. Deklarując zmienną przy pomocy pseudo-klasy :root, możemy przechowywać zmienną i używać jej według potrzeb.

+
+ +
+
:root {
+  --glowny-kolor-tla: brown;
+}
+
+.jeden {
+  color: white;
+  background-color: var(--glowny-kolor-tla);
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.dwa {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.trzy {
+  color: white;
+  background-color: var(--glowny-kolor-tla);
+  margin: 10px;
+  width: 75px;
+}
+.cztery {
+  color: white;
+  background-color: var(--glowny-kolor-tla);
+  margin: 10px;
+  width: 100px;
+}
+
+.piec {
+  background-color: var(--glowny-kolor-tla);
+}
+
+
+ +
+
<div>
+    <div class="one"></div>
+    <div class="two">Text <span class="five">- more text</span></div>
+    <input class="three">
+    <textarea class="four">Lorem Ipsum</textarea>
+</div>
+
+
+ +

Powyższy kod daje taki sam rezultat jak we wcześniejszym przykładzie. 

+ +

Dziedziczenie zmiennych CSS

+ +

Niestandardowe właściwości mogą być dziedziczone. Oznacza to, że jeśli dany element nie ma wartości, może użyć tej odziedziczonej od rodzica:

+ +
<div class="jeden">
+  <div class="dwa">
+    <div class="trzy">
+    </div>
+    <div class="cztery">
+    </div>
+  <div>
+</div>
+
+ +

z następującym kodem CSS:

+ +
.dwa {
+  --test: 10px;
+}
+
+.trzy {
+  --test: 2em;
+}
+
+ +

W tym przykładzie wynikiem dla var(--test) jest:

+ + + +

Zgodność z przeglądarkami

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ 33.0
+ {{CompatNo}} 34.0[2]
+ {{CompatChrome(49.0)}}		{{CompatGeckoDesktop("29")}}[3]
+ {{CompatGeckoDesktop("31")}}		{{CompatNo}}{{CompatOpera(36.0)}}9.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(49.0)}}{{CompatGeckoDesktop("29")}}{{CompatUnknown}}{{CompatUnknown}}9.1{{CompatChrome(49.0)}}
+
+ +

[1] Przeglądarka Chrome początkowo zaimplementowała zmienne CSS ze zmienioną składną, która wymagała niestandardowego prefixu przed nazwą zmiennej -webkit-var-. Można jej było następnie użyć przy pomocy funkcji -webkit-var(). Dodatkowo implementacja została ukryta pod flagą Eksperymentalne funkcje platformy internetowej  pod chrome://flags.

+ +

[2] Chrome 34.0 usunął zmienne CSS ze względu na problemy z wydajnością.

+ +

[3] Zmienne CSS są zaimplementowane w preferencjach layout.css.variables.enabled, standardowo ustawione na false i używające stare składnia var-variablename w Gecko 29. Rozpoczynając od Gecko 31 implementacja jest włączona i używa nowej składni --variablename.

diff --git a/files/pl/web/css/vertical-align/index.html b/files/pl/web/css/vertical-align/index.html new file mode 100644 index 0000000000..8e34977446 --- /dev/null +++ b/files/pl/web/css/vertical-align/index.html @@ -0,0 +1,66 @@ +--- +title: vertical-align +slug: Web/CSS/vertical-align +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/vertical-align +--- +

{{ CSSRef() }} +

+

Podsumowanie

+

Własność vertical-align określa wyrównanie pionowe elementów inline lub komórek tabeli. +

+ +

Składnia

+

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> | {{ Cssxref("inherit") }} +

+

Wartości (dla elementów inline)

+

Większość wartości wyrównuje element w pionie w stosunku do jego rodzica: +

+
baseline 
Wyrównuje linię bazową elementu z linią bazową jego rodzica. +
sub 
Wyrównuje linię bazową elementu z linią bazową indeksu dolnego jego rodzica. +
super 
Wyrównuje linię bazową elementu z linią bazową indeksu górnego jego rodzica. +
text-top 
Wyrównuje górę elementu z górą czcionki elementu rodzica. +
text-bottom 
Wyrównuje dół elementu z dołem czcionki elementu rodzica. +
middle 
Wyrównuje środek elementu ze środkiem małych liter rodzica. +
<length> 
Ustawia linię bazową elementu o daną wartość powyżej linii bazowej jego rodzica. +
<percentage> 
podobnie jak wartość <length> z procentami będącymi procentem własności {{ Cssxref("line-height") }} +
+

Dla elementów, które nie mają linii bazowej, używana jest w zamian dolna krawędź marginesu. +

Natomiast dwie wartości wyrównują element w pionie raczej względem całkowitej linii niż względem jego rodzica: +

+
top 
Wyrównuje górę elementu i jego potomków z górą całkowitej linii. +
bottom 
Wyrównuje dół elementu i jego potomków z dołem całkowitej linii. +
+

Wartości ujemne są dozwolone. +

+

Wartości (dla komórek tabeli)

+
baseline (oraz sub, super, text-top, text-bottom, <length>, i <percentage>) 
Wyrównuje linię bazową komórki z linią bazową wszystkich innych komórek w wierszu, które są wyrównane względem linii bazowej. +
top
Wyrównuje górną krawędź dopełnienia komórki z górą wiersza. +
middle
Centruje obszar dopełnienia komórki względem wiersza. +
bottom
Wyrównuje dolną krawędź dopełnienia komórki z dołem wiersza. +
+

Wartości ujemne są dozwolone. +

+

Przykłady

+
img {
+	vertical-align: bottom;
+}
+
+

Uwagi

+

Specyfikacje

+ +

Zgodność z przeglądarką

+

Zobacz także

+

{{ Cssxref("line-height") }}, {{ Cssxref("text-align") }}, {{ Cssxref("margin") }} (auto) +

{{ languages( { "en": "en/CSS/vertical-align", "fr": "fr/CSS/vertical-align" } ) }} diff --git "a/files/pl/web/css/warto\305\233\304\207_pocz\304\205tkowa/index.html" "b/files/pl/web/css/warto\305\233\304\207_pocz\304\205tkowa/index.html" new file mode 100644 index 0000000000..8144cb37ba --- /dev/null +++ "b/files/pl/web/css/warto\305\233\304\207_pocz\304\205tkowa/index.html" @@ -0,0 +1,25 @@ +--- +title: Wartość początkowa +slug: Web/CSS/Wartość_początkowa +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/initial_value +--- +

{{ CSSRef() }} +

+

Podsumowanie

+

Wartość początkowa podana w podsumowaniu każdej własności CSS ma odmienne znaczenie własności dziedziczonych i własności niedziedziczonych. +

Dla własności dziedziczonych wartość początkowa używana jest tylko dla elementu źródłowego, gdy nie określono wartości elementu. +

Dla własności niedziedziczonych wartość początkowa używana jest dla każdego elementu, gdy nie określono wartości elementu. +

W CSS3 dodano wartość initial, by pozwolić autorom na wyraźne określenie wartości początkowej. +

+

Zobacz również

+

Własności dziedziczone i niedziedziczone, initial +


+

+
+
+{{ languages( { "en": "en/CSS/initial_value", "es": "es/CSS/Valor_inicial", "fr": "fr/CSS/Valeur_initiale", "ja": "ja/CSS/initial_value", "ko": "ko/CSS/initial_value" } ) }} diff --git a/files/pl/web/css/white-space/index.html b/files/pl/web/css/white-space/index.html new file mode 100644 index 0000000000..fc891b4ce1 --- /dev/null +++ b/files/pl/web/css/white-space/index.html @@ -0,0 +1,93 @@ +--- +title: white-space +slug: Web/CSS/white-space +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/white-space +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność CSS white-space jest używana do opisu sposobu, w jaki białe znaki są traktowane wewnątrz elementu.

+ +

{{cssinfo}}

+ +

Składnia

+ +
white-space: normal | pre | nowrap | pre-wrap | -moz-pre-wrap | pre-line | inherit ;
+
+ +

Wartości

+ +
+
{{ Cssxref("normal") }}
+
wszystkie sekwencje białych znaków i zakończenia linii będą skracane. Zakończenia linii nie likwidują zawijania zawartości.
+
{{ Cssxref("pre") }}
+
wszystkie białe znaki w źródle będą zachowane, linie są przełamane tylko na znakach nowej linii w źródle.
+
{{ Cssxref("nowrap") }}
+
wszystkie sekwencje białych znaków i zakończenia linii będą skracane, również przełamania linii (zawijanie tekstu) są zlikwidowane wewnątrz zawartości.
+
{{ Cssxref("pre-wrap") }} {{ Fx_minversion_inline(3) }}
+
wszystkie białe znaki w źródle będą zachowane, linie są przełamane na znakach nowej linii i w razie konieczności zawijają zawartość.
+
{{ Cssxref("-moz-pre-wrap") }} {{ Deprecated_inline() }}
+
identyczne jak pre-wrap, jest to rozszerzenie Mozilli, które stało się własnością CSS 2.1 pre-wrap, która powinna być używana zamiast niego.
+
{{ Cssxref("pre-line") }}
+
wszystkie sekwencje białych znaków będą skrócone, linie są przełamane na znakach nowej linii i również w razie potrzeby zawartość jest zawijana.
+
{{ Cssxref("inherit") }}
+
dziedziczy po rodzicu.
+
+ +

Przykłady

+ +
code {
+  white-space: pre;
+}
+
+ +

Notatki

+ +

pre-line nie jest jeszcze zaimplementowane w Mozilli.

+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ +

(Próbna tabela zgodności)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer0
Firefox0
Netscape0
Opera0
Safari?
diff --git a/files/pl/web/css/width/index.html b/files/pl/web/css/width/index.html new file mode 100644 index 0000000000..0e5abadd9f --- /dev/null +++ b/files/pl/web/css/width/index.html @@ -0,0 +1,207 @@ +--- +title: width +slug: Web/CSS/width +translation_of: Web/CSS/width +--- +
{{CSSRef}}
+ +

Właściwość widthCSS ustawia szerokość elementu. Domyślnie ustawia szerokość obszaru zawartości , ale jeśli {{cssxref ("box-sizing")}} jest ustawione na border-box, ustawia szerokość obszaru border .

+ +
{{EmbedInteractiveExample("pages/css/width.html")}}
+ + + +

Właściwości {{cssxref ("min-width")}} i {{cssxref ("max-width")}} przesłaniają {{cssxref ("width")}}.

+ +

Składnia

+ +
/ * <length> wartości * /
+szerokość: 300px;
+szerokość: 25em;
+
+/ * <wartość procentowa> * /
+szerokość: 75%;
+
+/ * Wartości słów kluczowych * /
+width: 25em border-box;
+width: 75% content-box;
+width: max-content;
+width: min-content;
+width: available;
+width: fit-content;
+width: auto;
+
+/* Global values */
+width: inherit;
+width: initial;
+width: unset;
+
+ +

Właściwość width przyjmuje wartości:

+ + + +

Wartości

+ +
+
{{cssxref("<length>")}}
+
Ustala absolutną wartość szerokości.
+
{{cssxref("<percentage>")}}
+
Określa szerokość jako procentową wartość względem szerokości obejmującego bloku. Jeśli szerokość bloku obejmującego zależy od szerokości elementu, układ końcowy jest niezdefiniowany.
+
border-box {{experimental_inline}}
+
Jeśli występuje, wartość {{cssxref("<length>")}} lub {{cssxref("<percentage>")}} są aplikowane do obszaru border elementu.
+
content-box {{experimental_inline}}
+
Jeśli występuje, wartość {{cssxref("<length>")}} lub {{cssxref("<percentage>")}} jest aplikowana do obszaru zawartości elementu.
+
auto
+
Przeglądarka sama wylicza i wybiera szerokość elementu.
+
fill {{experimental_inline}}
+
Używa liniowej wielkości fill-available lub blokowej wielkości fill-available, odpowiednio do trybu pisania (writing mode).
+
max-content {{experimental_inline}}
+
Naturalna preferowana szerokość zawartości (gdy nie zostanie zastosowane miękkie zawijanie soft wrap).
+
min-content {{experimental_inline}}
+
Naturalna minimalna szerokość zawartości (gdy zastosowane zostanie miękkie zawijanie soft wrap).
+
available {{experimental_inline}}
+
Dostępna szerokość - blok obejmujący minus poziome marginesy, border i padding.
+
fit-content {{experimental_inline}}
+
Większa z wartości: +
    +
  • naturalna minimalna szerokości (min-content)
    • +
  • mniejsza z wartości: naturalna preferowana szerokość (max-content) i dostępna szerokość (available)
    • +
+
+
+ +

Formalna składnia

+ +
{{csssyntax}}
+ +

Examples

+ +

Domyślna szerokość

+ +
p.goldie {
+  background: gold;
+}
+ +
<p class="goldie">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('Default_width', '500px', '64px')}}

+ +

Piksele i emy

+ +
.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')}}

+ +

Procentowo

+ +
.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 */
+}
+ +
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('max-content_2', '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_2', '500px', '155px')}}

+ +

Dostępność

+ +

Upewnij się, że elementy z ustaloną szerokością width nie są przycinane ani nie zasłaniają pozostałej zawartości, kiedy strona jest przybliżana (zoom) aby zwiększyć rozmiar tekstu. 

+ + + +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecifikacjaStatusKomentarz
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}{{Spec2('CSS3 Box')}}Dodanie słów kluczowych max-content, min-content, available, fit-content, border-box, content-box.
{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}{{Spec2('CSS3 Transitions')}}Dodanie width jako animowanego.
{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}{{Spec2('CSS2.1')}}Doprecyzowanie  do jakich elementów własność jest stosowana.
{{SpecName('CSS1', '#width', 'width')}}{{Spec2('CSS1')}}Oryginalna definicja.
+ +
{{cssinfo}}
+ +

Działanie w przeglądarkach

+ + + +

{{Compat ("css.properties.width")}}

+ +

Zobacz też

+ + diff --git a/files/pl/web/css/word-spacing/index.html b/files/pl/web/css/word-spacing/index.html new file mode 100644 index 0000000000..0c8e87b786 --- /dev/null +++ b/files/pl/web/css/word-spacing/index.html @@ -0,0 +1,78 @@ +--- +title: word-spacing +slug: Web/CSS/word-spacing +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje +translation_of: Web/CSS/word-spacing +--- +

{{ CSSRef() }}

+ +

Podsumowanie

+ +

Własność CSS 'word spacing' określa odstęp pomiędzy słowami w tekstowej zawartości elementu. Można zdefiniować od jednej do trzech wartości, by wskazać minimalny, maksymalny oraz optymalny odstęp między słowami.

+ +

{{cssinfo}}

+ +

Składnia

+ +
word-spacing: [ normal | <length>  | <percentage> ] {1,3}
+
+ +

Wartości

+ +
+
normal 
+
 
+
{{cssxref("<length>")}}  
+
 
+
{{cssxref("<percentage>")}}  
+
 
+
+ +

Przykłady

+ +
p {
+  word-spacing: 1em 3em 2em;
+}
+
+ +

Specyfikacje

+ + + +

Zgodność z przeglądarką

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrzeglądarkaNajniższa wersja
Internet Explorer?
Firefox?
Netscape?
Opera?
Safari?
diff --git a/files/pl/web/css/z-index/index.html b/files/pl/web/css/z-index/index.html new file mode 100644 index 0000000000..fd454242be --- /dev/null +++ b/files/pl/web/css/z-index/index.html @@ -0,0 +1,128 @@ +--- +title: z-index +slug: Web/CSS/z-index +tags: + - CSS + - 'CSS:Dokumentacje' + - Dokumentacje + - Wszystkie_kategorie +translation_of: Web/CSS/z-index +--- +
{{CSSRef}}
+ +

Własność z-index określa kolejność elementów wzdłuż osi z. Kiedy elementy nachodzą na siebie, kolejność osi z decyduje, który element przykrywa inny. Element z większym indeksem z zazwyczaj przykrywa element z mniejszym.

+ +
{{EmbedInteractiveExample("pages/css/z-index.html")}}
+ + + +

Składnia

+ +
/* Właściwość wartość */
+z-index: auto;
+
+/* wartość jako liczba */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* wartość ujemna w celu zmniejszenia priorytetu */
+
+/* globalne wartości */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+
+ +

Wartość z-index jest określona słowem kluczowym auto lub jako <liczba>.

+ +

Wartości

+ +
+
auto 
+
Element jest rysowany w takiej samej kolejności względem osi z jak element z z-index: 0.Nie tworzy nowego kontekstu nakładania.
+
<liczba>
+
Element jest rysowany w podanej kolejności względem osi z. Tworzy również nowy kontekst nakładania, co oznacza, że wszystkie jego elementy potomne również są rysowane z takim samym indeksem z. Oznacza to również, że indeksy z elementów potomnych nie są porównywane do indeksów z elementów na zewnątrz danego elementu.
+
+ +

Przykład

+ +

HTML

+ +
<div class="dashed-box">Dashed box
+  <span class="gold-box">Gold box</span>
+  <span class="green-box">Green box</span>
+</div>
+
+ +

CSS

+ +
.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* put .green-box above .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+
+ +

Wynik

+ +

{{ EmbedLiveSample('Examples', '550', '200', '') }}

+ +

Specifikacja

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}{{Spec2('CSS3 Transitions')}}Defines z-index as animatable.
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Zgodność z przeglądarką

+

{{Compat("css.properties.z-index")}}

+ +

Zobacz także

+ +

{{ Cssxref("position") }}

+ +

{{ languages( { "en": "en/CSS/z-index", "fr": "fr/CSS/z-index" } ) }}

diff --git "a/files/pl/web/dost\304\231pno\305\233\304\207/an_overview_of_accessible_web_applications_and_widgets/index.html" "b/files/pl/web/dost\304\231pno\305\233\304\207/an_overview_of_accessible_web_applications_and_widgets/index.html" new file mode 100644 index 0000000000..06d9978f8a --- /dev/null +++ "b/files/pl/web/dost\304\231pno\305\233\304\207/an_overview_of_accessible_web_applications_and_widgets/index.html" @@ -0,0 +1,165 @@ +--- +title: An overview of accessible web applications and widgets +slug: Web/Dostępność/An_overview_of_accessible_web_applications_and_widgets +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +--- +

Sieć się zmienia. Statyczne witryny oparte na stronach są coraz częściej zastępowane dynamicznymi aplikacjami internetowymi w stylu aplikacji pulpitowych, które intensywnie wykorzystują JavaScript i AJAX. Projektanci tworzą niesamowite nowe widżety i kontrolki całkowicie za pomocą kombinacji JavaScript, HTML i CSS. Ta zmiana może znacznie poprawić responsywność i użyteczność internetu, ale wielu użytkowników jest zagrożonych wykluczeniem z powodu luk w dostępności. JavaScript tradycyjnie cieszy się reputacją niedostępności dla użytkowników technologii pomocniczych, takich jak czytniki ekranu, ale istnieją teraz sposoby na tworzenie dynamicznych interfejsów internetowych, które są dostępne dla szerokiego grona użytkowników.

+ +

Problem

+ +

Większość zestawów narzędzi JavaScript oferuje bibliotekę widżetów po stronie klienta, które naśladują zachowanie znanych interfejsów pulpitu. Suwaki, paski menu, widoki list plików i wiele więcej można zbudować za pomocą kombinacji JavaScript, CSS i HTML. Ponieważ specyfikacja HTML 4 nie zapewnia wbudowanych znaczników, które semantycznie opisują tego rodzaju widżety, programiści zazwyczaj używają ogólnych elementów, takich jak <div> i <span>. Skutkuje to widżetem, który wygląda jak jego odpowiednik na pulpicie, jednak zwykle nie ma wystarczającej ilości znaczników semantycznych do wykorzystania przez technologię wspomagającą. Dynamiczne treści na stronie internetowej mogą być szczególnie problematyczne dla użytkowników, którzy z jakiegoś powodu nie są w stanie wyświetlić ekranu. Informacje giełdowe, aktualizacje kanałów live twitter, wskaźniki postępu i podobne treści modyfikują DOM w taki sposób, że technologia wspomagająca (AT) może nie być świadoma. Wtedy z pomocą wkracza ARIA.

+ +

Przykład 1: Znaczniki dla widżetów kart zbudowanych bez etykietowania ARIA. W znacznikach nie ma informacji opisujących formę i funkcję widżetu.

+ +
<!-- To jest widget zakładek. Jak możesz to rozpoznać, patrząc tylko na znaczniki? -->
+<ol>
+  <li id="ch1Tab">
+    <a href="#cz1Panel">Część 1</a>
+  </li>
+  <li id="ch2Tab">
+    <a href="#cz2Panel">Część 2</a>
+  </li>
+  <li id="quizTab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <div id="ch1Panel">Zawartość części nr 1 </div>
+  <div id="ch2Panel">Zawartość częśći nr 2</div>
+  <div id="quizPanel">Zawartość Quizu</div>
+</div>
+ +

Przykład 2: Sposób wizualnego przedstawienia widżetów karty. Użytkownicy mogą rozpoznać to wizualnie, jednak nie ma semantyki do odczytu maszynowego dla technologii wspomagającej.
+ Screenshot of the tabs widget

+ +

ARIA

+ +

WAI-ARIA, Accessible Rich Internet Applications specyfikacja wywodząca się od W3C Web Accessibility Initiative, umożliwia dodanie brakującej semantyki potrzebnej w przypadku technologii pomocniczych, takich jak czytniki ekranu. ARIA umożliwia programiście bardziej szczegółowe opisywanie tych widżetów poprzez dodawanie specjalnych atrybutów do znaczników. Zaprojektowany, aby wypełnić lukę pomiędzy standardowymi znacznikami HTML a formantami w stylu pulpitu znajdującymi się w dynamicznych aplikacjach internetowych, ARIA udostępnia role i stany, które opisują zachowanie najbardziej znanych widgetów interfejsu użytkownika.

+ +

Specyfikacja ARIA jest podzielona na trzy różne typy atrybutów: role, stany i właściwości. Role opisują widżety, które nie są w inny sposób dostępne w HTML 4, takie jak suwaki, paski menu, karty i okna dialogowe. Właściwości opisują charakterystykę tych widgetów, na przykład, czy są one przeciągalne, mają wymagany element lub czy powiązane jest z nim wyskakujące okienko. Stany opisują bieżący stan interakcji elementu, informując technologię asystującą, jeśli jest zajęta, wyłączona, wybrana lub ukryta.

+ +

Atrybuty ARIA mają być interpretowane automatycznie przez przeglądarkę i tłumaczone na natywne API systemu operacyjnego. Kiedy ARIA jest obecna, technologie asystujące są w stanie rozpoznać i sterować niestandardowymi kontrolkami JavaScript w taki sam sposób, jak robią to z odpowiednikami komputerów. Może to zapewnić znacznie bardziej spójny interfejs użytkownika, niż było to możliwe w poprzedniej generacji aplikacji internetowych, ponieważ użytkownicy technologii pomocniczych mogą wykorzystać całą swoją wiedzę na temat działania aplikacji komputerowych podczas korzystania z aplikacji internetowych.

+ +

Przykład 3: Znaczniki dla widżetów kart z dodanymi atrybutami ARIA.

+ +
<!-- Dodaliśmy atrybut "role" aby opisać listę kart i poszczególne karty. -->
+<ol role="tablist">
+  <li id="ch1Tab" role="tab">
+    <a href="#ch1Panel">Część 1</a>
+  </li>
+  <li id="ch2Tab" role="tab">
+    <a href="#ch2Panel">Część 2</a>
+  </li>
+  <li id="quizTab" role="tab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <!-- Zwróć uwagę na rolę i atrybuty "aria-labelledby", które dodaliśmy do opisu tych paneli. -->
+  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Zawartość części nr 1</div>
+  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Zawartość części nr 2</div>
+  <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Zawartość Quizu</div>
+</div>
+
+ +

ARIA jest obsługiwana w najnowszych wersjach wszystkich głównych przeglądarek, w tym Firefox, Safari, Opera, Chrome i Internet Explorer. Wiele technologii wspomagających, takich jak open source NVDA i czytniki ekranu Orca, również obsługuje ARIA. Coraz częściej biblioteki widgetów JavaScript, takie jak jQuery UI, YUI, Google Closure i Dojo Dijit, również zawierają znaczniki ARIA.

+ +

Zmiany prezentacyjne

+ +

Dynamiczne zmiany prezentacyjne obejmują używanie CSS do zmiany wyglądu treści (np. Czerwone obramowanie wokół nieprawidłowych danych lub zmiana koloru tła zaznaczonego pola wyboru), a także pokazywanie lub ukrywanie treści.

+ +

Zmiany stanu

+ +

ARIA udostępnia atrybuty do deklarowania bieżącego stanu widgetu interfejsu użytkownika. Przykłady obejmują (ale z pewnością nie są ograniczone do):

+ + + +

(Pełna lista stanów: ARIA list of states and properties.)

+ +

Programiści powinni używać stanów ARIA do wskazania stanu elementów widgetu interfejsu użytkownika i używać selektorów atrybutów CSS do zmiany wyglądu wizualnego na podstawie zmian stanu (zamiast używania skryptu do zmiany nazwy klasy na elemencie).

+ +

Zmiany widoczności

+ +

Gdy zmieni się widoczność zawartości (tzn. Element jest ukryty lub pokazany), programiści powinni zmienić wartość właściwości aria-hidden. Opisane powyżej techniki powinny być używane do deklarowania CSS do wizualnego ukrywania elementu za pomocą display:none.

+ +

Przykład przedstawia prosty formularz internetowy z etykietami narzędzi zawierającymi instrukcje powiązane z polami wprowadzania.

+ +

Przykład kodu HTML z atrybutem aria-hidden ustawionym na wartość true.

+ +
<div class="text">
+    <label id="tp1-label" for="first">Pierwsze imię:</label>
+    <input type="text" id="first" name="first" size="20"
+           aria-labelledby="tp1-label"
+           aria-describedby="tp1"
+           aria-required="false" />
+    <div id="tp1" class="tooltip"
+         role="tooltip"
+         aria-hidden="true">Twoje pierwsze imię jest opcjonalne</div>
+</div>
+
+ +

Poniżej kod CSS dla powyższego przykładu.
+ Zwróć uwagę na to że nie użyto typowego selektora klasy, lecz selektora atrybutu  aria-hidden ustawionego na wartość "true".

+ +
div.tooltip[aria-hidden="true"] {
+  display: none;
+}
+
+ +

Kod JavaScript dla powyższego przykładu, aktualizujący atrybut  aria-hidden.

+ +
var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}
+ +

Zmiany ról

+ +
W budowie
+ +

ARIA pozwala programistom zadeklarować rolę semantyczną dla elementu, który w przeciwnym razie oferuje niepoprawną lub brak semantyki. Na przykład, gdy do utworzenia menu jest używana lista nie numerowana {{ HTMLElement("ul") }} powinien otrzymać atrybut role zdefiniowany jako menubar a każdy element listy {{ HTMLElement("li") }} powinien otrzymać atrybut role o wartości menuitem.

+ +

Atrybut role nie powinien być zmieniany. Zamiast tego usuń oryginalny element i zastąp go elementem z nową wartością atrybutu role.

+ +

Rozważmy przykład widgetu "edycji bezpośredniej": komponent który pozwala użytkownikom edytować fragment tekstu na miejscu, bez przełączania kontekstów . Ten komponent ma tryb "widok", gdzie tekst nie jest edytowalny, ale można go aktywować, oraz tryb "edycja", w którym tekst jest edytowalny. Deweloper może ulec pokusie, aby zaimplementować tryb "widok" używając elementu  {{ HTMLElement("input") }} tylko do odczytu, i ustawić jego ARIA atrybut role na wartość button, następnie po przęłączeniu w tryb "edycja" uczynić element zapisywalnym i usunąć atrybut w tym trybie atrybut role (ponieważ element {{ HTMLElement("input") }} ma własną semantykę ról).

+ +

Nie rób tego. Zaimplementuj tryb widoku przy użyciu zupełnie innego elementu, takiego jak {{ HTMLElement("div") }} albo {{ HTMLElement("span") }} z atrybutem role o wartości button, a tryb « edycja »  z użyciem elementu  {{ HTMLElement("input") }}.

+ +

Asynchroniczna zmiana trści

+ +
W budowie. Zobacz też Live Regions
+ +

Nawigacja klawiaturą

+ +

Często programiści pomijają obsługę klawiatury podczas tworzenia niestandardowych widżetów. Aby być dostępnym dla wielu użytkowników, wszystkie funkcje aplikacji internetowej lub widżetu powinny być sterowane za pomocą klawiatury, bez potrzeby korzystania z myszy. W praktyce zwykle wiąże się to z konwencjami obsługiwanymi przez podobne widżety na pulpicie, w pełni korzystając z klawiszy Tab, Enter, Spacja i klawiszy strzałek.

+ +

Tradycyjnie nawigacja po klawiaturze w sieci została ograniczona do klawisza Tab. Użytkownik naciśnie klawisz Tab, aby skupić się na każdym łączu, przycisku lub formularzu na stronie w liniowej kolejności, używając Shift-Tab, aby nawigować wstecz. Jest to jednowymiarowa forma nawigacji do przodu i do tyłu, jeden element na raz. Na dość gęstych stronach użytkownik klawiatury często musi kilkakrotnie nacisnąć klawisz Tab przed uzyskaniem dostępu do potrzebnej sekcji. Wdrożenie konwencji klawiatury w stylu komputera w Internecie może znacząco przyspieszyć nawigację dla wielu użytkowników.

+ +

Oto podsumowanie, jak powinna działać nawigacja klawiaturowa w aplikacji internetowej obsługującej ARIA:

+ + + +

Tak więc, dla przykładu widżetów zakładki powyżej, użytkownik powinien móc nawigować do kontenera widgetu (<ol> w naszym znaczniku) i wychodzić za pomocą klawiszy Tab i Shift-Tab. Po ustawieniu nawigacji klawiaturą w kontenerze klawisze strzałek powinny umożliwiać użytkownikowi nawigację między kartami (elementy <li>). Konwencje różnią się w zależności od platformy. W systemie Windows następna karta powinna być automatycznie aktywowana, gdy użytkownik naciśnie klawisze strzałek. W systemie Mac OS X użytkownik może nacisnąć klawisz Enter lub klawisz spacji, aby aktywować następną kartę. Szczegółowy samouczek do tworzenia Keyboard-navigable JavaScript widgets opisuje sposób implementacji tego zachowania za pomocą JavaScript.

+ +

Aby uzyskać więcej informacji na temat konwencji nawigacyjnych na klawiaturze w stylu komputerowym, należy zapoznać się z obszernym opisem DHTML style guide. Opis zawiera przegląd nawigacji klawiaturowej dla każdego typu widżetu obsługiwanego przez ARIA. W3C oferuje również pomocne ARIA Best Practices dokument zawiera nawigację klawiaturową i konwencje skrótów dla różnych widżetów. 

+ +

Zobacz także

+ + diff --git "a/files/pl/web/dost\304\231pno\305\233\304\207/index.html" "b/files/pl/web/dost\304\231pno\305\233\304\207/index.html" new file mode 100644 index 0000000000..801f0d62ac --- /dev/null +++ "b/files/pl/web/dost\304\231pno\305\233\304\207/index.html" @@ -0,0 +1,94 @@ +--- +title: Dostępność +slug: Web/Dostępność +tags: + - Dostępność +translation_of: Web/Accessibility +--- +
+

"Dostępność (ang. accessibility) - nauka oraz zbiór standardów opisujących metody i wytyczne tworzenia serwisów WWW w sposób umożliwiający wygodny dostęp jak najszerszemu gronu odbiorców. Dostępne serwisy mogą być bez trudu wykorzystywane przez osoby niewidzące, niedowidzące, użytkowników mniej popularnych wyszukiwarek czy platform mobilnych." Artykuł o Dostępności na Wikipedii

+
+ + + + + + + + +
+

Przewodniki

+ +
+
Czym jest dostępność?
+
Niniejszy artykuł stanowi wstęp do modułu i jednocześnie obszerną odpowiedź na pytanie, czym właściwie jest dostępność - w tym jakie grupy ludzi powinniśmy brać pod uwagę i dlaczego, jakich narzędzi używają oni do interakcji z siecią oraz jak uczynić dostęność częścią naszej organizacji zadań.
+
+ +

Dokumentacja

+ +
+
Kurs Usability
+
Materiały opisujące zagadnienia związane z użytecznością, dostępnością oraz efektywnością serwisów WWW.
+
+ +
+
W głąb dostępności
+
Niniejsza książka odpowiada na dwa pytania. Pierwsze brzmi: "Dlaczego powinienem uczynić swoją stronę WWW bardziej dostępną?" Jeżeli nie masz strony w sieci, ta książka nie jest dla Ciebie. Drugie pytanie to "Jak mogę uczynić moją stronę bardziej dostępną?" Jeżeli nie zostaniesz przekonany przez odpowiedź na pierwsze pytanie, nie będziesz zainteresowany odpowiedzią na drugie.
+
+ +
+
Web Accessibility po polsku
+
Dostępność w projektowaniu stron internetowych oznacza tworzenie takich dokumentów, które są czytelne i funkcjonalne dla wszystkich użytkowników niezależnie od ich fizycznych ograniczeń, sytuacji w jakiej się znajdują, a także używanego oprogramowania oraz sprzętu.
+
+ +
+
Software Accessibility Today
+
The accessibility of computer software has seen drastic improvements over the past two decades. This article reviews the progress and technology as it has developed.
+
+ +
+
Key-navigable custom DHTML widgets, in Mozilla and IE
+
Until now, web developers who want to make their styled <div> and <span> based widgets keyboard accessible have lacked the proper techniques. Keyboard accessibility is part of the minimum accessibility requirements of which any web developer should be aware.
+
+ +
+
Accessible Web Page Authoring
+
A handy web accessibility checklist, from IBM.
+
+ +


+ Pokaż wszystkie...

+ 		+

Społeczność

+ + + +

Narzędzia

+ + + +

Pokaż wszystkie...

+ +

Powiązane tematy

+ +
+
Programowanie WWW, Standardy WWW, XUL
+
+ + +
+ +

 

+ +

+

Categories

+ + +

Interwiki Language Links

diff --git "a/files/pl/web/dost\304\231pno\305\233\304\207/keyboard-navigable_javascript_widgets/index.html" "b/files/pl/web/dost\304\231pno\305\233\304\207/keyboard-navigable_javascript_widgets/index.html" new file mode 100644 index 0000000000..3dd7d0f983 --- /dev/null +++ "b/files/pl/web/dost\304\231pno\305\233\304\207/keyboard-navigable_javascript_widgets/index.html" @@ -0,0 +1,171 @@ +--- +title: Keyboard-navigable JavaScript widgets +slug: Web/Dostępność/Keyboard-navigable_JavaScript_widgets +tags: + - Accessibility + - DOM + - Navigation +translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +--- +

Overview

+ +

Web applications often use JavaScript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. These widgets are typically composed of {{ HTMLElement("div") }} and {{ HTMLElement("span") }} elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. This document describes techniques to make JavaScript widgets accessible with the keyboard.

+ +

Using tabindex

+ +

By default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get focused. With the tabindex global attribute, authors can make other elements focusable, too. When set to 0, the element becomes focusable by keyboard and script. When set to -1, the element becomes focusable by script, but it does not become part of the keyboard focus order.

+ +

The order in which elements gain focus when using a keyboard, is the source order by default. In exceptional circumstances, authors may want to redefine the order. To do this, authors can set tabindex to any positive number.

+ +
+

Warning: avoid using positive values for tabindex.  Elements with a positive tabindex are put before the default interactive elements on the page, which means page authors will have to set (and maintain) tabindex values for all focusable elements on the page whenever they use one or more positive values for tabindex.

+
+ +

The following table describes tabindex behavior in modern browsers:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
tabindex attributeFocusable with mouse or JavaScript via element.focus()Tab navigable
not presentFollows the platform convention of the element (yes for form controls, links, etc.).Follows the platform convention of the element.
Negative (i.e. tabindex="-1")YesNo; author must focus the element with focus() in response to arrow or other key presses.
Zero (i.e. tabindex="0")YesIn tab order relative to element's position in document (note that interactive elements like {{ HTMLElement("a") }} have this behavior by default, they don't need the attribute).
Positive (e.g. tabindex="33")Yestabindex value determines where this element is positioned in the tab order: smaller values will position elements earlier in the tab order than larger values (for example, tabindex="7" will be positioned before tabindex="11").
+ +

Non-native controls

+ +

Native HTML elements that are interactive, like {{ HTMLElement("a") }}, {{ HTMLElement("input") }} and {{ HTMLElement("select") }}, are already accessible by keyboards, so to use one of them is the fastest path to make components work with keyboards.

+ +

Authors can also make a {{ HTMLElement("div") }} or {{ HTMLElement("span") }} keyboard accessible by adding a tabindex of 0. This is particularly useful for components that use interactive elements that do not exist in HTML.

+ +

Grouping controls

+ +

For grouping widgets such as menus, tablists, grids, or tree views, the parent element should be in the tab order (tabindex="0"), and each descendent choice/tab/cell/row should be removed from the tab order (tabindex="-1"). Users should be able to navigate the descendent elements using arrow keys. (For a full description of the keyboard support that is normally expected for typical widgets, see the WAI-ARIA Authoring Practices.)

+ +

The example below shows this technique used with a nested menu control. Once keyboard focus lands on the containing {{ HTMLElement("ul") }} element, the JavaScript developer must programmatically manage focus and respond to arrow keys. For techniques for managing focus within widgets, see "Managing focus inside groups" below.

+ +

Example 2: A menu control using tabindex to control keyboard access

+ +
<ul id="mb1" tabindex="0">
+  <li id="mb1_menu1" tabindex="-1"> Font
+    <ul id="fontMenu" title="Font" tabindex="-1">
+      <li id="sans-serif" tabindex="-1">Sans-serif</li>
+      <li id="serif" tabindex="-1">Serif</li>
+      <li id="monospace" tabindex="-1">Monospace</li>
+      <li id="fantasy" tabindex="-1">Fantasy</li>
+    </ul>
+  </li>
+  <li id="mb1_menu2" tabindex="-1"> Style
+    <ul id="styleMenu" title="Style" tabindex="-1">
+      <li id="italic" tabindex="-1">Italics</li>
+      <li id="bold" tabindex="-1">Bold</li>
+      <li id="underline" tabindex="-1">Underlined</li>
+    </ul>
+  </li>
+  <li id="mb1_menu3" tabindex="-1"> Justification
+    <ul id="justificationMenu" title="Justication" tabindex="-1">
+      <li id="left" tabindex="-1">Left</li>
+      <li id="center" tabindex="-1">Centered</li>
+      <li id="right" tabindex="-1">Right</li>
+      <li id="justify" tabindex="-1">Justify</li>
+    </ul>
+  </li>
+</ul>
+ +

Disabled controls

+ +

When a custom control becomes disabled, remove it from the tab order by setting tabindex="-1". Note that disabled items within a grouped widget (such as menu items in a menu) should remain navigable using arrow keys.

+ +

Managing focus inside groups

+ +

When a user tabs away from a widget and returns, focus should return to the specific element that had focus, for example, the tree item or grid cell. There are two techniques for accomplishing this:

+ +
    +
  1. Roving tabindex: programmatically moving focus
    2. +
  2. aria-activedescendant: managing a 'virtual' focus
    3. +
+ +

Technique 1: Roving tabindex

+ +

Setting the tabindex of the focused element to "0" ensures that if the user tabs away from the widget and then returns, the selected item within the group retains focus. Note that updating the tabindex to "0" requires also updating the previously selected item to tabindex="-1". This technique involves programmatically moving focus in response to key events and updating the tabindex to reflect the currently focused item. To do this:

+ +

Bind a key down handler to each element in the group, and when an arrow key is used to move to another element:

+ +
    +
  1. programmatically apply focus to the new element,
    2. +
  2. update the tabindex of the focused element to "0", and
    3. +
  3. update the tabindex of the previously focused element to "-1".
    4. +
+ +

Here's an example of a WAI-ARIA tree view using this technique.

+ +
Tips
+ +
Use element.focus() to set focus
+ +

Do not use createEvent(), initEvent() and dispatchEvent() to send focus to an element. DOM focus events are considered informational only: generated by the system after something is focused, but not actually used to set focus. Use element.focus() instead.

+ +
Use onfocus to track the current focus
+ +

Don't assume that all focus changes will come via key and mouse events: assistive technologies such as screen readers can set the focus to any focusable element. Track focus using onfocus and onblur instead.

+ +

onfocus and onblur can now be used with every element. There is no standard DOM interface to get the current document focus. If you want to track the focus status, you can use the document.activeElement to get the active element. You can also use document.hasFocus to make sure if the current document focus. 

+ +

Technique 2: aria-activedescendant

+ +

This technique involves binding a single event handler to the container widget and using the aria-activedescendant to track a "virtual" focus. (For more information about ARIA, see this overview of accessible web applications and widgets.)

+ +

The aria-activedescendant property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this ARIA radiogroup example for a direct illustration of how this works.

+ +

General Guidelines

+ +

Use onkeydown to trap key events, not onkeypress

+ +

IE will not fire keypress events for non-alphanumeric keys. Use onkeydown instead.

+ +

Ensure that keyboard and mouse produce the same experience

+ +

To ensure that the user experience is consistent regardless of input device, keyboard and mouse event handlers should share code where appropriate. For example, the code that updates the tabindex or the styling when users navigate using the arrow keys should also be used by mouse click handlers to produce the same changes.

+ +

Ensure that the keyboard can be used to activate element

+ +

To ensure that the keyboard can be used to activate elements, any handlers bound to mouse events should also be bound to keyboard events. For example, to ensure that the Enter key will activate an element, if you have an onclick="doSomething()", you should bind doSomething() to the key down event as well: onkeydown="return event.keyCode != 13 || doSomething();".

+ +

Always draw the focus for tabindex="-1" items and elements that receive focus programatically

+ +

IE will not automatically draw the focus outline for items that programatically receive focus. Choose between changing the background color via something like this.style.backgroundColor = "gray"; or add a dotted border via this.style.border = "1px dotted invert". In the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and IE doesn't implement CSS outlines).

+ +

Prevent used key events from performing browser functions

+ +

If your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. If your event handler returns false, the event will not be propagated beyond your handler.

+ +

For example:

+ +
<span tabindex="-1" onkeydown="return handleKeyDown();">
+ +

If handleKeyDown() returns false, the event will be consumed, preventing the browser from performing any action based on the keystroke.

+ +

Don't rely on consistent behavior for key repeat, at this point

+ +

Unfortunately onkeydown may or may not repeat depending on what browser and OS you're running on.

diff --git a/files/pl/web/exslt/index.html b/files/pl/web/exslt/index.html new file mode 100644 index 0000000000..5fde08b5d5 --- /dev/null +++ b/files/pl/web/exslt/index.html @@ -0,0 +1,93 @@ +--- +title: EXSLT +slug: Web/EXSLT +tags: + - Dokumentacje + - EXSLT + - Wszystkie_kategorie + - XSLT + - 'XSLT:Dokumentacje' +translation_of: Web/EXSLT +--- +

+{{ XsltRef() }} +{{ Fx_minversion_header(3) }} +EXSLT to zestaw rozszerzeń języka XSLT. Program Firefox obsługuje następujące spośród wielu istniejących modułów: +

+
Pakiet podstawowy (exsl) +
Podstawowe elementy i funkcje rozszerzeń. +
Pakiet matematyczny (math) +
Procedury służące do porównywania węzłów. +
Wyrażenia regularne (regexp) +
Mechanizmy wspomagające korzystanie z wyrażeń regularnych w składni języka JavaScript. +
Zestawy (set) +
Procedury do obsługi zestawów. +
Ciągi znaków (str) +
Funkcje służące do manipulowania ciągami znaków. +
+

Korzystanie z EXSLT

+

Aby skorzystać z rozszerzenia EXSLT, należy zadeklarować jego przestrzeń nazw jako przestrzeń nazw rozszerzenia w arkuszu stylów. W poniższym przykładzie używany jest pakiet wyrażeń regularnych: +

+
<xsl:stylesheet version="1.0"
+                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                xmlns:regexp="http://exslt.org/regular-expressions"
+                extension-element-prefixes="regexp">
+
+<xsl:import href="regexp.xsl" />
+
+...
+
+</xsl:stylesheet>
+
+

Pakiet podstawowy

+

Pakiet podstawowy EXSLT zawiera główne funkcje rozszerzające możliwości języka XSLT. Przestrzeń nazw pakietu podstawowego to http://exslt.org/common. +

+

Funkcje

+ +

Pakiet matematyczny

+

Pakiet matematyczny EXSLT zawiera funkcje służące do operacji na wartościach numerycznych oraz do porównywania węzłów. Przestrzeń nazw pakietu matematycznego to http://exslt.org/math. +

+

Funkcje

+ +

Wyrażenia regularne

+

Pakiet wyrażeń regularnych EXSLT zawiera funkcje umożliwiające sprawdzanie, dopasowywanie i zastępowanie tekstu za pomocą wyrażeń regularnych w formie stosowanej w języku JavaScript. +

Przestrzeń nazw pakietu wyrażeń regularnych EXSLT to http://exslt.org/regular-expressions. +

+

Funkcje

+ +

Zestawy

+

Pakiet zestawów EXSLT zawiera funkcje pozwalające na manipulowanie zestawami. Przestrzeń nazw dla tych funkcji to http://exslt.org/sets. +

+

Funkcje

+ +

Ciągi znaków

+

Pakiet ciągów znaków EXSLT zawiera funkcje służące do manipulowania ciągami znaków. Przestrzeń nazw tego pakietu to http://exslt.org/strings. +

+

Funkcje

+ +

Zobacz także

+ +


+

+
+
+{{ languages( { "en": "en/EXSLT", "es": "es/EXSLT", "fr": "fr/EXSLT", "ja": "ja/EXSLT" } ) }} diff --git a/files/pl/web/guide/ajax/index.html b/files/pl/web/guide/ajax/index.html new file mode 100644 index 0000000000..c8f03c5f20 --- /dev/null +++ b/files/pl/web/guide/ajax/index.html @@ -0,0 +1,23 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - Wszystkie_kategorie +translation_of: Web/Guide/AJAX +--- +

 

+

"Getting Started" box, if there is no "Getting Started" article yet written, should be populated with another featurearticle or tutorial.

+
Na początek
+Wprowadzenie do AJAX-a.
+
+

AJAX (ang. Asynchronous JavaScript and XML, asynchroniczny JavaScript i XML) nie jest technologią sam w sobie, lecz terminem określającym "nowe" podejście do jednoczesnego wykorzystania takich istniejących technologii razem, jak: HTML lub XHTML, kaskadowe arkusze stylów, JavaScript, obiektowy model dokumentu, XML, XSLT oraz obiekt XMLHttpRequest. Dzięki modelowi AJAX, aplikacje sieciowe są w stanie dokonywać szybkich, przyrostowych aktualizacji w interfejsie użytkownika bez potrzeby przeładowywania całej strony WWW. W efekcie aplikacja wydaje się szybsza i lepiej reaguje na akcje użytkownika.

+
+ +

Dokumentacja

Na początek
Ten artykuł prowadzi czytelnika przez podstawy AJAX-u i podaje dwa proste przykłady, na początek.
Ajax: Nowe podejście do aplikacji sieciowych
Jesse James Garrett z adaptive path napisał ten artykuł w lutym 2005 roku. Przedstawia w nim AJAX i jemu pokrewne koncepcje.
A Simpler Ajax Path
"Okazuje się że, wykorzystanie obiektu XMLHttpRequest w celu uczynienia aplikacji sieciowej bardziej interaktywną bez rezygnowania z tradycyjnych rozwiązań, takich jak formularze służące pobieraniu danych od użytkownika, nie musi być wcale takie trudne."
Fixing the Back Button and Enabling Bookmarking for AJAX Apps
Mike Stenhouse opisuje kilka sposobów na poradzenie sobie podczas tworzenia aplikacji AJAX z problemamami dotyczącymi przycisku Wstecz i zakładek.
Ajax Mistakes
Alex Bosworth pisze o błędach popełnianych przez programistów tworzących aplikacje w AJAX-ie.

Pokaż wszystkie...

Społeczność

  • Obejrzyj fora Mozilli...

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}

Narzędzia

Pokaż wszystkie...

Przykłady

Powiązane tematy

HTML, XHTML, CSS, DOM, JavaScript, XML, XMLHttpRequest, XSLT, DHTML

Wybrane tematy
+

Categories

+

Interwiki Language Links

+

 

+

 

+ +

{{ languages( { "ca": "ca/AJAX", "cs": "cs/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "it": "it/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pt": "pt/AJAX", "ru": "ru/AJAX", "zh-cn": "cn/AJAX", "zh-tw": "zh_tw/AJAX" } ) }}

diff --git "a/files/pl/web/guide/ajax/na_pocz\304\205tek/index.html" "b/files/pl/web/guide/ajax/na_pocz\304\205tek/index.html" new file mode 100644 index 0000000000..1e4a4ec491 --- /dev/null +++ "b/files/pl/web/guide/ajax/na_pocz\304\205tek/index.html" @@ -0,0 +1,221 @@ +--- +title: Na początek +slug: Web/Guide/AJAX/Na_początek +tags: + - AJAX + - Wszystkie_kategorie +translation_of: Web/Guide/AJAX/Getting_Started +--- +

+

Ten artykuł pozwoli Ci poznać podstawy technologii AJAX oraz poda dwa proste, gotowe do użycia przykłady. +

+

Czym jest AJAX?

+

AJAX (Asynchronous JavaScript and XML) jest niedawno ukutą nazwą na dwie potężne cechy przeglądarek WWW, które, choć dostępne od lat, były pomijane przez wielu autorów stron, aż do niedawna, gdy na rynku ukazały się takie aplikacje, jak Gmail, Google Suggest i Google Maps. +

Dzięki tym cechom możesz: +

+ +

Termin AJAX jest akronimem. A pochodzi od "asynchroniczny", co znaczy, że możesz wysyłać zapytania HTTP do serwera i robić inne rzeczy w trakcie oczekiwania na odpowiedź. JA pochodzi od "JavaScript", a X pochodzi od "XML". +

+

Krok 1 – powiedz "Poproszę!", czyli jak wykonać zapytanie HTTP

+

W celu stworzenia zapytania HTTP przy użyciu JavaScriptu, potrzebujesz instancji klasy, która posiada żądaną funkcjonalność. Taka klasa została po raz pierwszy wprowadzona w Internet Explorerze, jako obiekt ActiveX, pod nazwą XMLHTTP. Później Mozilla, Safari i inne przeglądarki również dodały taki obiekt, implementując klasę XMLHttpRequest, która obsługuje metody i właściwości oryginalnego obiektu ActiveX. +

W rezultacie, w celu stworzenia międzyprzeglądarkowej instancji (obiektu) potrzebnej nam klasy, należy wpisać: +

+
if (window.XMLHttpRequest) { // Mozilla, Safari, Opera ...
+    http_request = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+

(Na potrzeby przykładu powyższy fragment jest lekko uproszczoną wersją kodu używanego do stworzenia instancji XMLHTTP. Bardziej "życiowy" przykład można znaleźć w punkcie 3. tego artykułu). +

Niektóre wersje przeglądarek opartych na technologii Mozilli nie zadziałają poprawnie, jeżeli odpowiedź z serwera nie będzie opisana XML-owym nagłówkiem mime-type. Aby rozwiązać ten problem, można użyć dodatkowej metody do nadpisania nagłówka wysyłanego przez serwer, jeśli nie jest to text/xml. +

+
http_request = new XMLHttpRequest();
+http_request.overrideMimeType('text/xml');
+
+

Następnie należy się zdecydować, co chcesz zrobić po otrzymaniu od serwera odpowiedzi na Twoje zapytanie. Na tym etapie wystarczy powiedzieć obiektowi zapytania HTTP, która funkcja JavaScript będzie opracowywała wynik. Można to uzyskać poprzez ustawienie właściwości onreadystatechange obiektu funkcji JavaScript, której będziesz używał, na przykład: +

http_request.onreadystatechange = nameOfTheFunction; +

Zwróć uwagę, że nie ma żadnych nawiasów za nazwą funkcji i nie są przekazywane żadne parametry, ponieważ chcemy przypisać referencję do tej funkcji, a nie wywołać ją. Można także, zamiast podawać nazwę funkcji, użyć techniki JavaScript do definiowania funkcji w locie (zwanej "funkcją anonimową") i określić akcje, które przetworzą wynik natychmiast, jak na przykład: +

+
http_request.onreadystatechange = function(){
+    // instrukcje
+};
+
+

Następnie, kiedy już zostało zadeklarowane, co będzie się działo zaraz po odebraniu odpowiedzi, należy wykonać zapytanie. W tym celu należy wywołać metody open() i send() klasy zapytania HTTP, tak jak na poniższym przykładzie: +

+
http_request.open('GET', 'http://www.example.org/some.file', true);
+http_request.send(null);
+
+ + + +

Parametr metody send() może być dowolną daną, którą chcesz wysłać do serwera w przypadku użycia metody POST. Dane powinny być umieszczone w formie używanej przez ciągi zapytań, czyli: +

name=value&anothername=othervalue&so=on +

Należy pamiętać o zakodowaniu każdej wysyłanej wartości funkcją encodeURIComponent. Na przykład jeśli w środku, jakiegoś przesyłanego łańcucha znajdzie się znak & to "obetnie" nasz łańcuch. Opis tej funkcji w dokumentcji zawiera bardziej szczegółowe informacje. +

Zwróć uwagę na to, że jeśli chcesz wysłać dane metodą POST, musisz zmienić typ MIME swojego zapytania, używając składni: +

+
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+

W przeciwnym wypadku, serwer odrzuci dane wysłane metodą POST. +

+

Krok 2 – "Voilà!", czyli obsługa odpowiedzi serwera

+

Pamiętasz, że w trakcie wysyłania zapytania została podana nazwa funkcji JavaScript, która została przygotowana do obsługi odpowiedzi? +

http_request.onreadystatechange = nazwaFunkcji; +

Zobaczmy, co ta funkcja powinna zrobić. Najpierw musi ona sprawdzić stan zapytania. Jeżeli status ma wartość 4, oznacza to, że udało się pobrać pełną odpowiedź z serwera i można kontynuować jej przetwarzanie. +

+
if (http_request.readyState == 4) {
+    // wszystko jest OK, odpowiedź została odebrana
+} else {
+    // ciągle nie gotowe
+}
+
+

Możliwe są następujące wartości readyState: +

+ +

(Źródło) +

Następnie należy sprawdzić kod odpowiedzi serwera HTTP. Wszystkie możliwe kody są opisane na stronie W3C. W tym przypadku interesuje nas tylko odpowiedź 200 OK. +

+
if (http_request.status == 200) {
+    // świetnie!!
+} else {
+    // wystąpił jakiś problem z zapytaniem,
+    // na przykład odpowiedzią mogło być 404 (Nie odnaleziono)
+    // lub 500 (Wewnętrzny błąd serwera)
+}
+
+

Teraz, kiedy został już sprawdzony stan zapytania i kod statusu odpowiedzi, możesz zrobić co zechcesz z danymi otrzymanymi z serwera. Masz dwie możliwości dostania się do danych: +

+ +

Krok 3 – "Do dzieła!" - Prosty przykład

+

Stwórzmy teraz proste zapytanie HTTP. JavaScript odpyta serwer o dokument HTML test.html, który zawiera tekst "Jestem testem.", a następnie wyświetlimy ten tekst przy użyciu funkcji alert(). +

+
<script type="text/javascript" language="javascript">
+
+    var http_request = false;
+
+    function makeRequest(url) {
+
+        http_request = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            http_request = new XMLHttpRequest();
+            if (http_request.overrideMimeType) {
+                http_request.overrideMimeType('text/xml');
+                // Przeczytaj o tym wierszu poniżej
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                http_request = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!http_request) {
+            alert('Poddaję się :( Nie mogę stworzyć instancji obiektu XMLHTTP');
+            return false;
+        }
+        http_request.onreadystatechange = function() { alertContents(http_request); };
+        http_request.open('GET', url, true);
+        http_request.send(null);
+
+    }
+
+    function alertContents(http_request) {
+
+        if (http_request.readyState == 4) {
+            if (http_request.status == 200) {
+                alert(http_request.responseText);
+            } else {
+                alert('Wystąpił problem z zapytaniem.');
+            }
+        }
+
+    }
+</script>
+<span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="makeRequest('test.html')">
+        Odpytaj
+</span>
+
+

W tym przykładzie: +

+ +

Możesz przetestować ten przykład tutaj i zobaczyć testowy plik tutaj. +

Uwaga: Jeżeli strona wywołana przez XMLHttpRequest nie jest poprawionym XML-em (np. kiedy jest plikiem tekstowym), linia http_request.overrideMimeType('text/xml'); spowoduje pojawienie się błędów w konsoli JavaScript w Firefoksie 1.5 i późniejszych. Zostało to opisane na stronie: https://bugzilla.mozilla.org/show_bug.cgi?id=311724. Jest to zachowanie właściwe; ten artykuł zostanie niedługo poprawiony, aby dostosować się do tej zmiany. +

Uwaga 2: jeżeli wysyłasz zapytanie do skryptu, który ma zwrócić XML, zamiast do statycznego pliku XML, musisz ustawić nagłówki odpowiedzi, jeśli chcesz, aby zadziałało to także w Internet Explorerze. Jeżeli nie ustawisz nagłówka Content-Type: application/xml, IE zwróci błąd JavaScript "Object Expected" po wierszu, w którym próbujesz dostać się do XML-owego elementu. Jeżeli nie ustawisz nagłówka Cache-Control: no-cache, przeglądarka doda odpowiedź do pamięci podręcznej i nigdy nie wyśle żądania ponownie, sprawiając, że praca nad skryptem może być "kłopotliwa". +

Uwaga 3: jeżeli zmienna http_request jest używana globalnie, konkurujące funkcje wywołujące makeRequest() mogą nadpisywać siebie nawzajem, tworząc problemy. Określenie zmiennej http_request lokalnie dla funkcji i przekazywanie jej do funkcji alertContent() pozwala uniknąć takiej sytuacji. +

Uwaga 4: Aby zarejestrować funkcję zwrotną (callback function) onreadystatechange, nie możesz użyć argumentów. Dlatego też poniższy kod nie zadziała: +

+
http_request.onreadystatechange = alertContents(http_request); // (nie działa)
+
+

Z tego względu, aby zarejestrować tę funkcję pomyślnie, należy albo przekazać argumenty pośrednio poprzez funkcję anonimową, albo użyć http_request jako zmiennej globalnej. Oto przykłady: +

+
http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (simultaneous request)
+http_request.onreadystatechange = alertContents;  //2 (global variable)
+
+

Metoda pierwsza pozwala mieć wiele zapytań przetwarzanych jednocześnie, a metoda trzecia może być używana jeśli http_request jest zmienną globalną. +

Uwaga 5: W przypadku błędu połączenia (na przykład kiedy serwer WWW został wyłączony), zostanie wyrzucony wyjątek w metodzie onreadystatechange podczas próby odczytania zmiennej .status. Z tego względu dobrze jest opakować wyrażenie if...then w try...catch. (Zobacz: https://bugzilla.mozilla.org/show_bug.cgi?id=238559). +

+
function alertContents(http_request) {
+
+        try {
+            if (http_request.readyState == 4) {
+                if (http_request.status == 200) {
+                    alert(http_request.responseText);
+                } else {
+                    alert('Wystąpił problem z tym żądaniem.');
+                }
+            }
+        }
+        catch( e ) {
+            alert('Złapany wyjątek: ' + e.description);
+        }
+
+    }
+
+

Krok 4 – "Z archiwum X" czyli praca z odpowiedzią XML

+

W poprzednim przykładzie, po otrzymaniu odpowiedzi z serwera, użyliśmy właściwości responseText obiektu zapytania i zawierała ona treść pliku <tt>test.html</tt>. Teraz spróbujmy użyć właściwości responseXML. +

Przede wszystkim stwórzmy prawidłowy dokument XML, o który odpytamy potem serwer. Taki dokument (<tt>test.xml</tt>) może wyglądać tak: +

+
<?xml version="1.0" ?>
+<root>
+    Jestem testem.
+</root>
+
+

W skrypcie musimy tylko zmienić linię zapytania na: +

+
...
+onclick="makeRequest('test.xml')">
+...
+
+

Potem w alertContents() musimy zmienić linię alert(http_request.responseText); na: +

+
var xmldoc = http_request.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+

W ten sposób pobraliśmy obiekt XMLDocument, zwrócony przez responseXML i skorzystaliśmy z metod DOM, aby dostać się do danych zawartych w dokumencie XML. Możesz zajrzeć do dokumentu XML test.xml tutaj oraz do zaktualizowanego skryptu tutaj. +

Aby dowiedzieć się więcej o metodach DOM, zajrzyj do dokumentów Mozilla's DOM implementation. +

+
+
+{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pt": "pt/AJAX/Como_come\u00e7ar", "ru": "ru/AJAX/\u0421_\u0447\u0435\u0433\u043e_\u043d\u0430\u0447\u0430\u0442\u044c", "zh-cn": "cn/AJAX/\u5f00\u59cb", "zh-tw": "zh_tw/AJAX/\u4e0a\u624b\u7bc7" } ) }} diff --git a/files/pl/web/guide/api/index.html b/files/pl/web/guide/api/index.html new file mode 100644 index 0000000000..0d56f6ab30 --- /dev/null +++ b/files/pl/web/guide/api/index.html @@ -0,0 +1,25 @@ +--- +title: Przewodnik po internetowych interfejsach API +slug: Web/Guide/API +tags: + - API + - Landing + - Przewodnik + - TopicStub + - Web +translation_of: Web/Guide/API +--- +

Współczesne technologie tworzenia aplikacji internetowych przy użyciu JavaScript wykorzystuje całą gamę interfejsów API, dzięki którym można tworzyć zaawansowane i wydajne aplikacje, uruchamiane w sieci web, lokalnie albo na serwerach za pośrednictwem takich technologii jak Node.js. Na tej stronie można znaleźć kompletną listę wszystkich interfejsów API dostarczanych przez cały stos współczesnych technologii internetowej.

+ +

Interfejsy API od A do Z

+ +

{{ListGroups}}

+ +

Zobacz też

+ + diff --git a/files/pl/web/guide/css/kolumny_css3/index.html b/files/pl/web/guide/css/kolumny_css3/index.html new file mode 100644 index 0000000000..19d3c4285a --- /dev/null +++ b/files/pl/web/guide/css/kolumny_css3/index.html @@ -0,0 +1,65 @@ +--- +title: Kolumny CSS3 +slug: Web/Guide/CSS/Kolumny_CSS3 +tags: + - CSS + - CSS_3 + - Wszystkie_kategorie +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +

+

+

Wprowadzenie

+

Czytanie tekstu wyświetlanego w długich wierszach jest trudne i męczące dla oczu - jeśli przenoszenie wzroku z końca jednej linii na początek drugiej zajmuje zbyt wiele czasu, łatwo jest zgubić się w tekście i rozpocząć czytanie niewłaściwego wiersza. Z tego powodu i aby w pełni wykorzystać szerokość ekranu, tekst na stronach internetowych - tak samo jak w gazetach - powinien być układany w sąsiadujących kolumnach o stałej szerokości. Niestety osiągnięcie tego efektu nie jest możliwe przy użyciu języków HTML i obecnego CSS bez wymuszania sztywnej wysokości kolumn, znacznego ograniczania dozwolonej składni wewnątrz tekstu bądź też bez stosowania skomplikowanych skryptów. +

Szkic specyfikacji CSS3 proponuje kilka nowych własności CSS, które rozwiązałyby ten problem. W Firefoksie 1.5 i następnych zaimplementowana została część tych własności i zachowują się one w sposób opisany przez szkic specyfikacji (z jednym wyjątkiem opisanym niżej).

Aby zobaczyć, jak działają kolumny CSS, odwiedź (korzystając z Firefoksa 1.5) blog Roberta O'Callahana. +

+

Stosowanie kolumn

+

Liczba i szerokość kolumn

+

Własności CSS pozwalają okreslić liczbę i szerokość kolumn, w jakich zostanie wyświetlony tekst na stronie: -moz-column-count oraz -moz-column-width. +

-moz-column-count pozwala ustalić liczbę kolumn. Na przykład: +

+
<div style="-moz-column-count:2">Z powodu trwających przygotowań do wydania Mozilli
+Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00).
+Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1,
+którego wydanie zaplanowane jest na czwartek.</div>
+
+

Powyższy tekst powinien zostać w Firefoksie 1.5 wyświetlony w dwu kolumnach: +

+
Z powodu trwających przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.
+

-moz-column-width pozwala natomiast określić minimalną pożądaną szerokość kolumn. Jeśli przy okazji własność -moz-column-count nie jest ustalona, przeglądarka automatycznie wyświetli tyle kolumn, ile zmieści się w jej oknie. Na przykład tekst: +

+
<div style="-moz-column-width:20em;">Z powodu trwających przygotowań do wydania Mozilli
+Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00).
+Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1,
+którego wydanie zaplanowane jest na czwartek.</div>
+
+

przeglądarka wyświetli następująco: +

+
Z powodu trwających przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.
+

Szczegóły dotyczące kolumn CSS opisano w szkicu specyfikacji CSS3. +

W przypadku wyświetlania wielokolumnowego, treść automatycznie przepływa do następnych kolumn, jeśli zachodzi taka potrzeba. Cała funkcjonalność HTML, CSS oraz DOM jest zachowana, podobnie jak możliwość edycji i drukowania. +


+

+

Wyrówywanie wysokości kolumn

+

Szkic specyfikacji CSS3 zakłada, że wysokości kolumn powinny być wyrównywane przez przeglądarkę w taki sposób, by wysokości treści w każdej kolumnie były możliwie najbardziej zbliżone. I to właśnie robi Firefox. +

Czasami jednak pojawia się potrzeba jednoznacznego zdefiniowania wysokości kolumn. W takim przypadku treść - w zależności od długości - wyświetlana powinna być w różnej, nieznanej projektantowi liczbie kolumn. Efekt ten zastosowano na stronach International Herald Tribune, gdzie jednak użyto w tym celu odpowiednich skryptów. Firefox rozszerza szkic specyfikacji CSS w taki sposób, że nadanie blokowi kolumn własności height powoduje wydłużanie się kolumn do określonej wysokości, a po osiągnięciu tejże - utworzeniu nowej kolumny. Zachowanie to jest bardzo przydatne przy tworzeniu układów stron WWW. +

+

Odstęp między kolumnami

+

Domyślnie, przeglądarka wyświetla kolumny jedna tuż obok drugiej, przylegające do siebie. Zazwyczaj jednak nie jest to zachowanie pożądane. Aby poprawić tę sytuację, można za pomocą CSS ustawić dla kolumn odpowiednie wartości marginesów wewnętrznych, często jednak o wiele łatwiej zastosować jest własność -moz-column-gap ustawianą dla bloku kolumn: +

+
<div style="-moz-column-width:20em; -moz-column-gap:2em;">Z powodu trwających
+przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś
+w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą
+przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.</div>
+
+
Z powodu trwających przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.
+

Czytelność w starszych przeglądarkach

+

Starsze przeglądarki ignorują własności -moz-column, dzięki czemu stosunkowo łatwo jest utworzyć stronę, której treść będzie wyświetlana w pojedynczej kolumnie w starszych przeglądarkach, a w wielu kolumnach w Firefoksie 1.5. +

+

Zakończenie

+

Kolumny w CSS3 to nowe narzędzie, które pomoże projektantom stron internetowych w najlepszy możliwy sposób wykorzystywać cenną powierzchnię ekranów uzytkowników. Dzięki takim opcjom jak automatycze wyrównywanie wysokości, kolumny na pewno znajdą wiele zastosowań w tworzeniu stron internetowych. +

+

Dodatkowe zasoby

+ +{{ languages( { "en": "en/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns" } ) }} diff --git a/files/pl/web/guide/css/sprawdzanie_media_queries/index.html b/files/pl/web/guide/css/sprawdzanie_media_queries/index.html new file mode 100644 index 0000000000..140d3a1796 --- /dev/null +++ b/files/pl/web/guide/css/sprawdzanie_media_queries/index.html @@ -0,0 +1,116 @@ +--- +title: Sprawdzanie media queries +slug: Web/Guide/CSS/Sprawdzanie_media_queries +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +

{{SeeCompatTable}}

+ +

DOM dostarcza funkcje, dzięki którym możliwym jest sprawdzenie wyników media query. Jest to możliwe przy użyciu interfejsu {{domxref("MediaQueryList") }} i jego funkcji oraz właściwości. Po utworzeniu obiektu {{domxref("MediaQueryList") }} możesz zbadać wynik zapytania (query) lub (dodatkowo) otrzymywać powiadomienie, gdy rezultat się zmieni.

+ +

Tworzenie listy media query

+ +

Zanim będziesz mógł ocenić wynik zapytania, musisz utworzyć obiekt {{domxref("MediaQueryList") }}, reprezentujący media query. Aby to uczynić użyj metody {{domxref("window.matchMedia") }}.

+ +

Na przykład, jeśli chcesz ustalić czy orientacja urządzenia jest pionowa czy pozioma, możesz skorzystać z takiego zapytania jak poniżej:

+ +
var mql = window.matchMedia("(orientation: portrait)"); /* sprawdzamy czy orientacja obiektu, jest pionowa; zwraca obiekt MediaQueryList */
+
+ +

Sprawdzanie rezultatu zapytania (query)

+ +

Po wykonaniu powyższej metody, mamy dostęp do obiektu {{domxref("MediaQueryList") }}, który ma kilka przydatnych metod i właściwości. Jedną z nich jest cecha matches, która zwraca prawdę lub fałsz.

+ +
if (mql.matches) {
+  /* wykryta orientacja pionowa */
+} else {
+  /* wykryta orientacja pozioma */
+}
+
+ +

Otrzymywanie powiadomień

+ +

W przypadku, gdy chciałbyś na bieżąco dostawać alerty o stanie zapytania (query), skorzystaj z funkcji addListener(), która jest zdecydowanie wydajniejsza aniżeli sprawdzanie "ręcznie" co jakiś czas. By skorzystać z tego ułatwienia, wywołaj tę funkcję na obiekcie {{domxref("MediaQueryList") }}, określając obserwator, który implementuje interfejs {{domxref("MediaQueryListListener") }}:

+ +
var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(zmianaOrientacji);
+zmianaOrientacji(mql);
+
+ +

Powyższy kod tworzy media query list, a następnie dołącza listener. Zauważ, że po dodaniu listenera, przywołaliśmy listenera bezpośrednio - trzecia linijka. To pozwala nam określić aktualną orientację urządzenia.

+ +

Zaimplementowana metoda zmianaOrientacji() pozwala nam wykonać pewne czynności, gdy zmieni się położenie urządzenia.

+ +
function zmianaOrientacji(mql) {
+  if (mql.matches) {
+    /* wykryta orientacja pionowa */
+  } else {
+    /* wykryta orientacja pozioma */
+  }
+}
+
+ +

Wyłączenie powiadomień

+ +

Gdy nie potrzebujesz już powiadomień dotyczących zmiany wartości zapytania, możesz wywołać metodę removeListener() dostępną w obiekcie {{domxref("MediaQueryList") }}:

+ +
mql.removeListener(zmianaOrientacji);
+
+ +

Zgodność z przeglądarką

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatGeckoDesktop("6.0") }}1012.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0{{CompatUnknown}}1012.15
+
+ +

Zobacz także

+ + diff --git a/files/pl/web/guide/graphics/index.html b/files/pl/web/guide/graphics/index.html new file mode 100644 index 0000000000..17edfe14d1 --- /dev/null +++ b/files/pl/web/guide/graphics/index.html @@ -0,0 +1,41 @@ +--- +title: Grafiki na stronach +slug: Web/Guide/Graphics +tags: + - 2D + - 3D + - Canvas + - Graphics + - NeedsTranslation + - TopicStub + - Web + - WebGL +translation_of: Web/Guide/Graphics +--- +

Nowoczesne strony czy też aplikacje internetowe często muszą prezentować pewne grafiki. Dopóki proste wyświetlenie obrazka można wykonać za pomocą elementu {{HTMLElement("img")}}, albo ustawiając tło elementu HTML poprzez atrybut {{cssxref("background-image")}}, to często i tak zachodzi potrzeba generowania grafiki w locie albo manipulowania wyświetlonymi już obrazami. Poniże artykuły wprowadzą Ciebie głębiej w realizowanie tych czynności.

+
+
+

Grafika 2D

+
+
+ Rysowanie grafiki z elementem canvas
+
+ Przewodnik wprowadzający do użycia elementu {{HTMLElement("canvas")}}, by rysować grafikę 2D w przeglądarce.
+
+ SVG
+
+ Scalable Vector Graphics (SVG) pozwala używać linii, krzywych oraz innych kształtów by wyświetlać grafikę. Unikając bitmap możesz generować obrazki, które bez problemów przeskalujesz do dowolnego rozmiaru.
+
+

Wyświetl wszystko...

+
+
+

Grafika 3D

+
+
+ WebGL
+
+ Przewodnik, który ułatwi Tobie zaczęcie pracy z WebGL. Technologia ta umożliwia użycie standardu OpenGL ES prosto w przeglądarce.
+
+
+
+

 

diff --git a/files/pl/web/guide/html/editable_content/index.html b/files/pl/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..77abe792b7 --- /dev/null +++ b/files/pl/web/guide/html/editable_content/index.html @@ -0,0 +1,216 @@ +--- +title: Making content editable +slug: Web/Guide/HTML/Editable_content +translation_of: Web/Guide/HTML/Editable_content +--- +

In progress. In HTML, any element can be editable. By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor. This article provides some information about this functionality.

+ +

How does it work?

+ +

All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.

+ +

Here's a simple example which creates a {{HTMLElement("div")}} element whose contents the user can edit.

+ +
<div contenteditable="true">
+  This text can be edited by the user.
+</div>
+ +

Here's the above HTML in action:

+ +

{{ EmbedLiveSample('How_does_it_work') }}

+ +

Executing commands

+ +

When an HTML element has contenteditable set to true, the {{ domxref("document.execCommand()") }} method is made available. This lets you run commands to manipulate the contents of the editable region. Most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). When using contentEditable, calling execCommand() will affect the currently active editable element.

+ +

Differences in markup generation

+ +

Use of contenteditable across different browsers has been painful for a long time because of the differences in generated markup between browsers. For example, even something as simple as what happens when you press Enter/Return to create a new line of text inside an editable element was handled differently across the major browsers (Firefox inserted {{htmlelement("br")}} elements, IE/Opera used {{htmlelement("p")}}, Chrome/Safari used {{htmlelement("div")}}).

+ +

Fortunately, in modern browsers things are somewhat more consistent. As of Firefox 55, Firefox has been updated to wrap the separate lines in {{htmlelement("div")}} elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.

+ +

Try it out in the above example.

+ +
+

Note: Internet Explorer, which is no longer being developed, uses {{htmlelement("p")}} elements instead of <div>.

+
+ +

If you want to use a different paragraph separator, the above browsers all support {{domxref("document.execCommand")}}, which provides a DefaultParagraphSeparator command to allow you to change it. For example, to use {{htmlelement("p")}} elements:

+ +
document.execCommand("DefaultParagraphSeparator", false, "p");
+ +

Security

+ +

For security reasons, Firefox doesn't let JavaScript code use clipboard related features (copy, paste, etc.) by default. You can enable them by setting the preferences shown below using about:config:

+ +
user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+ +

Example: A simple but complete rich text editor

+ +
+
<!doctype html>
+<html>
+<head>
+<title>Rich Text Editor</title>
+<script type="text/javascript">
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
+  oPrntWin.document.close();
+}
+</script>
+<style type="text/css">
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+</style>
+</head>
+<body onload="initDoc();">
+<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
+<input type="hidden" name="myDoc">
+<div id="toolBar1">
+<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option selected>- formatting -</option>
+<option value="h1">Title 1 &lt;h1&gt;</option>
+<option value="h2">Title 2 &lt;h2&gt;</option>
+<option value="h3">Title 3 &lt;h3&gt;</option>
+<option value="h4">Title 4 &lt;h4&gt;</option>
+<option value="h5">Title 5 &lt;h5&gt;</option>
+<option value="h6">Subtitle &lt;h6&gt;</option>
+<option value="p">Paragraph &lt;p&gt;</option>
+<option value="pre">Preformatted &lt;pre&gt;</option>
+</select>
+<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- font -</option>
+<option>Arial</option>
+<option>Arial Black</option>
+<option>Courier New</option>
+<option>Times New Roman</option>
+</select>
+<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- size -</option>
+<option value="1">Very small</option>
+<option value="2">A bit small</option>
+<option value="3">Normal</option>
+<option value="4">Medium-large</option>
+<option value="5">Big</option>
+<option value="6">Very big</option>
+<option value="7">Maximum</option>
+</select>
+<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- color -</option>
+<option value="red">Red</option>
+<option value="blue">Blue</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- background -</option>
+<option value="red">Red</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+</div>
+<div id="toolBar2">
+<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
+<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
+<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
+<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
+<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">
+<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
+<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
+<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
+<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
+<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
+<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
+<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
+<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
+<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" />
+<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" />
+<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" />
+<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
+<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
+<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
+<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
+</div>
+<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
+<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
+<p><input type="submit" value="Send" /></p>
+</form>
+</body>
+</html>
+
+
+ +
Note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
+ +

See also

+ + diff --git a/files/pl/web/guide/index.html b/files/pl/web/guide/index.html new file mode 100644 index 0000000000..33786c5980 --- /dev/null +++ b/files/pl/web/guide/index.html @@ -0,0 +1,55 @@ +--- +title: Podręcznik web developera +slug: Web/Guide +tags: + - podręcznik + - sieć +translation_of: Web/Guide +--- +

W tym artykule przedstawiono informacje o sposobie korzystania z określonych technologii i interfejsów API.

+ +
+
+
+
HTML
+
Hipertekstowy język znaczników (ang. HyperText Markup Language - HTML) jest podstawowym językiem niemal wszystkich treści internetowych. Większość tego, co widzisz w przeglądarce jest opisane zasadniczo przy użyciu HTML.
+
CSS
+
Kaskadowe arkusze stylów (ang. Cascading Style Sheets - CSS) to język używany do opisu prezentacji dokumetu napisanego w HTML.
+
Zdarzenia
+
Zdarzenia odnoszą się zarówno do wzorców projektowych używanych do asynchronicznej obsługi różnych incydentów występujących w czasie życia strony internetowej jak i do nazywania, charakteryzowania  i stosowania dużej ilości incydentów różnego rodzaju.
+
AJAX
+
AJAX jest pojęciem odnoszącym się do grupy technologii, umożliwiającym aplikacjom szybkie, stopniowe aktualizowanie interfejsu użytkownika, bez przeładowywania całej strony przegladarki. Czyni to aplikacje szybszymi i lepiej reagującymi na działania użytkownika.
+
Grafika internetowa
+
Nowoczesne strony internetowe i aplikacje często muszą prezentować grafike o różnym wyrafinowaniu.
+
Przewodnik po internetowych interfejsach API
+
Wykaz wszystkich internetowych internfejsów API i wyjaśnienie do czego służą.
+
JavaScript
+
JavaScript to potężny język skryptowy używany do tworzenia aplikacji internetowych.
+
Lokalizacje i kodowanie znaków
+
Przeglądarki przetwarzają wewnętrznie tekst jako Unicode. Jednak, dla transferu tekstu przez sieć do przegladarki stosuje się różne kodowanie znaków, polegajace na reprezentacji znaków w postaci bajtów, co jest uwarunkowane językiem treści (lokalizacją).  Specyfikacja HTML zaleca używanie kodowania UTF-8 (które reprezentuje cały Unicode) i niezależnie od użytego kodowania, deklarowanie kodowania w metadanych dokumentu HTML.
+
Tworznie mobilnych stron i aplikacji
+
Ta strona omawia kilka głównych technik stosowanych przy tworzeniu stron internetowych , które dobrze wyglądają i działają na urzadzeniach mobilnych. Jeżeli szukasz informacji o projekcie Firefox OS Mozillii, zobacz stronę Firefox OS . Interesująca może być też dla Ciebie strona o Firefox dla Android.
+
+
+ +
+
+
Optymalizacja i wydajność
+
Podczas tworzenia nowoczesnych aplikacji internetowych i stron jest ważne, aby działały one szybko i sprawnie. Pozwala to na efektywność zarówno na systemach dektopowych jak i urządzeniach przenośnych.
+
Parsowanie i serializowanie XML
+
Ta platforma internetowa opisuje różne metody parsowania i serializowania dokumentów XML, z których każd ma swoje zalety i wady.
+
Otwarty internetowy format czcionki (Web Open Font Format - WOFF)
+
WOFF (Web Open Font Format) to format czcionki, który jest bezpłatny dla każdego uzytkownika internetu.
+
Stosowanie obiektów FormData
+
Obiekt FormData pozwala skompilować zestaw par klucz-wartość do wysłania przy użyciu XMLHttpRequest. Jest przeznaczony głównie do wysyłania danych formularzy, ale można go wykorzystać również do transmisji danych z kluczami poza formularzami. Transmisja odbywa się w tym samym formacie co metoda submit()  formularzy, stosowaną gdy typ kodowania w formularza jest ustawiony na "multipart/form-data".
+
Słownik
+
Podaje definicje wielu pojęć związanych z siecią web i Internetem.
+
+
+
+ +

See also

+ + diff --git a/files/pl/web/guide/liczniki_css/index.html b/files/pl/web/guide/liczniki_css/index.html new file mode 100644 index 0000000000..3c494e6af3 --- /dev/null +++ b/files/pl/web/guide/liczniki_css/index.html @@ -0,0 +1,86 @@ +--- +title: Liczniki CSS +slug: Web/Guide/Liczniki_CSS +tags: + - CSS + - Wszystkie_kategorie +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +

 

+ +

Podsumowanie

+ +

Liczniki w CSS zostały opisane w sekcji Automatic counters and numbering dokumentacji CSS 2.1. Wartość licznika jest ustawiana poprzez użycie własności counter-reset oraz counter-increment, natomiast wyświetlana jest przy wykorzystaniu funkcji counter() lub counters() należących do własności content.

+ +

Zastosowanie liczników

+ +

Aby użyć licznika CSS, należy najpierw ustawić mu wartość (domyślnie jest to 0) przy pomocy własności reset. Aby wyświetlić wartość licznika w danym elemencie należy skorzystać z funkcji counter(). Poniższy przykład dodaje na początku każdego elementu h1 "Sekcja wartość licznika:".

+ +
  body {
+    counter-reset: sekcja;           /* Ustawienie licznika sekcja na 0 */
+  }
+  h1::before {
+    counter-increment: sekcja;               /* Zwiększa licznik sekcja */
+    content: "Sekcja " counter(sekcja) ": ";       /* Wyświetla licznik */
+  }
+
+ +

Zagnieżdżanie liczników

+ +

Liczniki CSS mogą być szczególnie użyteczne przy listach uporządkowanych (ol), ponieważ nowa instancja licznika CSS jest automatycznie tworzona dla potomków danego elementu. Użycie funkcji counters() pozwala na dodanie ciągu znaków, który będzie oddzielał kolejne poziomy zagnieżdżonych liczników:

+ +
  ol {
+    counter-reset: sekcja;                /* Tworzy nową instancję licznika
+                                             sekcja w każdym elemencie ol */
+    list-style-type: none;                /* Usuwa domyślnie wyświetlany licznik */
+  }
+  li::before {
+    counter-increment: sekcja;            /* Zwiększa tylko tę instancję
+                                             licznika sekcja */
+    content: counters(sekcja, ".") " ";   /* Wyświetla wartości wszystkich
+                                             instancji licznika sekcja,
+                                             oddzielając je ciągiem ".". */
+  }
+
+ +

Przykładowy HTML (w komentarzach podano wartość wygenerowanego licznika):

+ +
<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item               <!-- 2     -->
+    <ol>
+      <li>item</li>      <!-- 2.1   -->
+      <li>item</li>      <!-- 2.2   -->
+      <li>item           <!-- 2.3   -->
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+          <li>item</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>item</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>item</li>          <!-- 3     -->
+  <li>item</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item</li>          <!-- 2     -->
+</ol>
+
+ +

Zobacz także

+ + + +

potrzebna treść do artykułu

+ +

{{ languages( { "en": "en/CSS_Counters", "fr": "fr/Compteurs_CSS" } ) }}

diff --git a/files/pl/web/guide/performance/index.html b/files/pl/web/guide/performance/index.html new file mode 100644 index 0000000000..00c4b9d7fe --- /dev/null +++ b/files/pl/web/guide/performance/index.html @@ -0,0 +1,14 @@ +--- +title: Optimization and performance +slug: Web/Guide/Performance +tags: + - Landing + - NeedsTranslation + - Optimization + - Performance + - TopicStub + - Web +translation_of: Web/Guide/Performance +--- +

When building modern Web apps and sites, it's important to make your content perform well. That is, to make it work quickly and efficiently. This lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power.

+

{{LandingPageListSubpages}}

diff --git a/files/pl/web/html(pl)/index.html b/files/pl/web/html(pl)/index.html new file mode 100644 index 0000000000..2bc10ea70b --- /dev/null +++ b/files/pl/web/html(pl)/index.html @@ -0,0 +1,108 @@ +--- +title: 'HTML: Hipertekstowy Język Znaczników' +slug: Web/HTML(PL) +tags: + - HTML + - HTML5 + - Landing + - Web + - 'l10n:priority' +translation_of: Web/HTML +--- +
{{HTMLSidebar}}
+ +

HTML (HyperText Markup Language) jest najbardziej podstawowym elementem składowym sieci Web. Definiuje on znaczenie i strukturę treści stron internetowych. Inne technologie poza HTML są używane do opisu wyglądu/prezentacji strony internetowej (CSS) lub funkcjonalności/zachowania (JavaScript).

+ +

"Hipertekst" (HyperText) odnosi się do linków łączących ze sobą strony internetowe, zarówno w obrębie jednej strony internetowej, jak i pomiędzy różnymi stronami internetowymi. Linki są podstawowym aspektem sieci Web. Umieszczając treści w Internecie i linkując je do stron stworzonych przez inne osoby, stajesz się aktywnym uczestnikiem sieci World Wide Web.

+ +

HTML używa "znaczników" do opisywania tekstu, obrazów i innych treści do wyświetlania w przeglądarce internetowej. Znacznik HTML zawiera specjalne "elementy", takie jak {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} i wiele innych.

+ +

Element HTML jest odróżniany od zwykłego tekstu w dokumencie za pomocą "tagów", które składają się z nazwy elementu otoczonego przez "<" oraz ">". Nazwa elementu wewnątrz znacznika nie rozróżnia wielkości liter. Oznacza to, że może być napisana wielkimi, małymi lub zmieszanymi literami. Na przykład tag <title> może być zapisany jako <Title>,<TITLE> lub w inny sposób.

+ +

Poniższe artykuły pomogą Ci dowiedzieć się więcej o HTML.

+ +
+
    +
  • Wprowadzenie do HTML + +

    Jeśli dopiero rozpoczynasz tworzenie stron internetowych, zapoznaj się z naszym artykułem Podstawy HTML, aby dowiedzieć się czym jest HTML i jak go używać.

    +
    • +
  • Poradniki HTML +

    Aby zapoznać się z artykułami o tym jak korzystać z HTML, jak również z samouczkami i kompletnymi przykładami, sprawdź naszą Strefę Nauki HTML.

    +
    • +
  • Odniesienia HTML +

    W naszej obszernej sekcji Odniesienia HTML, znajdziesz szczegóły dotyczące każdego elementu i atrybutu w HTML.

    +
    • +
+ +
+
+

Poradniki dla początkujących

+ +

Nasza Strefa Nauki HTML zawiera wiele modułów, które uczą HTML od podstaw - nie jest wymagana wcześniejsza wiedza.

+ +
+
Wprowadzenie do HTML
+
Ten moduł jest etapem, który pozwala przyzwyczaić się do ważnych pojęć i składni, takich jak spojrzenie na zastosowanie HTML dla tekstu, jak tworzyć hiperłącza i jak używać HTML do strukturyzacji strony internetowej.
+
+ +
+
Multimedia i osadzanie
+
Moduł ten wyjaśnia jak używać HTML do umieszczania multimediów na stronach internetowych, w tym różnych sposobów na dodawanie obrazów oraz osadzanie wideo, audio, a nawet całych innych stron internetowych.
+
Tabele HTML
+
Przedstawienie danych tabelarycznych na stronie internetowej w zrozumiały i dostępny sposób może być wyzwaniem. Moduł ten obejmuje podstawowe znaczniki tabelaryczne wraz z bardziej złożonymi funkcjami, takimi jak implementacja podpisów i podsumowań.
+
Formularze HTML
+
Formularze są bardzo ważną częścią sieci Web — zapewniają one wiele funkcji potrzebnych do interakcji z witrynami internetowymi, np. rejestracja i logowanie, wysyłanie opinii, kupowanie produktów i wiele więcej. Ten moduł przygotuje Cię do rozpoczęcia tworzenia części formularzy po stronie klienta/front-end.
+
Użyj HTML do rozwiązywania częstych problemów
+
Zawiera linki do sekcji wyjaśniających, jak używać HTML do rozwiązywania bardzo powszechnych problemów przy tworzeniu strony internetowej: radzenie sobie z tytułami, dodawanie zdjęć lub filmów, podkreślanie treści, tworzenie podstawowej formy, itp.
+
+ +

Zaawansowane zagadnienia

+ +
+
CORS z włączoną funkcją obrazów
+
Atrybut {{htmlattrxref("crossorigin", "img")}}, w połączeniu z odpowiednim nagłówkiem {{glossary("CORS")}}, pozwala na ładowanie obrazów zdefiniowanych przez element {{HTMLElement("img")}} z innych źródeł i używanie ich w elemencie {{HTMLElement("canvas")}} tak, jakby były ładowane z lokalnego źródła.
+
Ustawienia atrybutów CORS
+
Niektóre elementy HTML, które zapewniają wsparcie dla CORS, takie jak {{HTMLElement("img")}} lub {{HTMLElement("video")}}, posiadają atrybut crossorigin (właściwość crossOrigin), który umożliwia konfigurację żądań CORS dla wczytywanych przez ten element danych.
+
Zarządzanie metodą focus w HTML
+
Atrybut activeElement w DOM i metoda hasFocus() w DOM pomagają śledzić i kontrolować interakcje użytkownika z elementami na stronie internetowej.
+
Korzystanie z pamięci podręcznej aplikacji
+
Buforowanie aplikacji umożliwia uruchamianie aplikacji internetowych w trybie offline. Możesz użyć interfejsu Application Cache (AppCache) aby określić zasoby, które przeglądarka powinna buforować i udostępniać użytkownikom offline. Aplikacje, które są buforowane i działają poprawnie, nawet jeśli użytkownicy kliknęli przycisk odświeżania, gdy są w trybie offline.
+
Wstępne ładowanie treści z rel="preload"
+
Wartość preload atrybutu {{htmlattrxref("rel", "link")}} elementu {{htmlelement("link")}} pozwala na pisanie deklaratywnych żądań pobrania w sekcji {{htmlelement("head")}} dokumentu HTML, określając zasoby, które strony będą potrzebowały bardzo szybko po załadowaniu, których w związku z tym chcesz rozpocząć ładowanie od razu na początku cyklu życia strony, zanim uruchomi się główna maszyna renderująca w przeglądarce. Dzięki temu są one dostępne wcześniej i istnieje mniejsze ryzyko zablokowania pierwszego renderu strony, co prowadzi do poprawy wydajności. Ten artykuł zawiera podstawowy przewodnik po tym, jak działa ładowanie wstępne.
+
+
+ +
+

Odniesienia

+ +
+
Odniesienia HTML
+
HTML składa się z elementów, z których każdy może być modyfikowany przez pewną liczbę atrybutów. Dokumenty HTML są ze sobą połączone linkami.
+
Odniesienia do elementów HTML
+
Przeglądaj listę wszystkich {{glossary("Element", "elementów")}} {{glossary("HTML")}}.
+
Odniesienia do atrybutów HTML
+
Elementy w HTML mają atrybuty. Są to dodatkowe wartości, które konfigurują elementy lub dostosowują ich zachowanie na różne sposoby.
+
Atrybuty globalne
+
Atrybuty globalne mogą być definiowane na wszystkich elementach HTML, nawet tych, które nie zostały określone w standardzie. Oznacza to, że wszelkie niestandardowe elementy muszą nadal zezwalać na te atrybuty, nawet jeśli elementy te sprawiają, że dokument jest niezgodny z HTML5.
+
Elementy inline oraz Elementy block-level
+
Elementy HTML są zazwyczaj elementami "inline" lub "block-level". Element inline zajmuje tylko przestrzeń ograniczoną znacznikami, które go definiują. Element block-level zajmuje całą przestrzeń elementu nadrzędnego (kontenera), tworząc w ten sposób "blok".
+
Rodzaje odnośników
+
W HTML, różne typy linków mogą być użyte do nawiązania i zdefiniowania relacji pomiędzy dwoma dokumentami. Elementy odnośników, na których można ustawiać typy to {{HTMLElement("a")}}, {{HTMLElement("area")}} oraz {{HTMLElement("link")}}.
+
Formaty multimedialne obsługiwane przez elementy audio i wideo
+
Elementy {{HTMLElement("audio")}} oraz {{HTMLElement("video")}} umożliwiają odtwarzanie multimediów audio i wideo. Elementy te stanowią alternatywę dla podobnych funkcji w Adobe Flash i innych wtyczkach.
+
Rodzaje treści w HTML
+
HTML składa się z kilku rodzajów treści, z których każda może być używana w określonych kontekstach, a w innych jest niedozwolona. Podobnie, każda z nich posiada zestaw innych kategorii zawartości, które mogą zawierać oraz elementy, które mogą lub nie mogą być w nich użyte. To jest przewodnik po tych kategoriach.
+
Tryb Quirks oraz tryb standardów
+
Historyczne informacje o trybie quirks i trybie standardów.
+
+ +

Tematy powiązane

+ +
+
Zastosowanie koloru do elementów HTML przy użyciu CSS
+
W tym artykule omówiono większość sposobów na użycie CSS w celu dodania kolorów do zawartości HTML, wymieniając które części dokumentów HTML mogą być kolorowane i jakie właściwości CSS mogą być do tego użyte. Zawiera przykłady, odnośniki do narzędzi do budowania palet i wiele innych.
+
+
+
+Zobacz wszystkie...
diff --git a/files/pl/web/html(pl)/tryb_zgodnosci_oraz_tryb_standardow/index.html b/files/pl/web/html(pl)/tryb_zgodnosci_oraz_tryb_standardow/index.html new file mode 100644 index 0000000000..72018a6571 --- /dev/null +++ b/files/pl/web/html(pl)/tryb_zgodnosci_oraz_tryb_standardow/index.html @@ -0,0 +1,54 @@ +--- +title: Tryb Zgodności (Quirks Mode) i Tryb Standardów +slug: Web/HTML(PL)/Tryb_Zgodnosci_oraz_Tryb_Standardow +tags: + - Gecko + - Guide + - HTML + - NeedsUpdate + - Web Development + - Web Standards + - XHTML +translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode +--- +

W dawnych czasach strony internetowe zwykle pisane były w dwóch wersjach: Jedna dla Netscape Navigator i jedna dla Microsoft Internet Explorer. Kiedy standardy sieciowe były tworzone w W3C, przeglądarki nie mogły po prostu zacząć z nich korzystać, ponieważ w ten sposób zniszczyłyby większość istniejących stron internetowych. W związku z tym przeglądarki wprowadziły dwa tryby traktowania nowych witryn zgodnych ze standardami w inny sposób niż witryn starej generacji.

+ +

Obecnie w przeglądarkach internetowych stosowane są trzy tryby pracy silników układu graficznego: tryb zgodności (tryb quirks), tryb prawie standardowy oraz tryb pełnego standardu. W trybie zgodności układ emuluje niestandardowe zachowanie w Navigator 4 i Internet Explorer 5. Jest to niezbędne do obsługi stron internetowych, które powstały przed powszechnym przyjęciem standardów internetowych. W trybie pełnych standardów, zachowanie jest (miejmy nadzieję) zachowaniem opisanym przez specyfikacje HTML i CSS. W trybie prawie standardowym zaimplementowana jest bardzo mała liczba kompatybilności.

+ +

Jak przeglądarki decydują, z którego trybu korzystać?

+ +

W przypadku dokumentów HTML, przeglądarki używają DOCTYPE na początku dokumentu, aby zdecydować, czy obsługiwać go w trybie zgodności, czy też w trybie standardów. Aby zagwarantować, że strona korzysta z trybu pełnego standardu, upewnij się że strona ma DOCTYPE, tak jak w tym przykładzie:

+ +
<!DOCTYPE html>
+<html lang="pl">
+  <head>
+    <meta charset="UTF-8">
+    <title>Witaj, Świecie!</title>
+  </head>
+  <body>
+  </body>
+</html>
+ +

DOCTYPE pokazany w przykładzie, <!DOCTYPE html>, jest najprostrzy z możliwych i zalecany przez HTML5. Wcześniejsze wersje standardu HTML zalecały inne warianty, ale wszystkie istniejące obecnie przeglądarki będą korzystały z trybu pełnego standardu dla DOCTYPE, nawet z przestarzałego Internet Explorera 6. Nie ma uzasadnionych powodów, aby używać bardziej skomplikowanego DOCTYPE. Jeśli używasz innego DOCTYPE, możesz być narażony na ryzyko wybrania takiego, który uruchamia prawie standardowy tryb lub tryb zgodności.

+ +

Upewnij się, że umieścisz DOCTYPE bezpośrednio na początku dokumentu HTML. Wszystko przed DOCTYPE, takie jak komentarz czy deklaracja XML, wyzwoli tryb zgodnści w Internet Explorerze 9 i starszych.

+ +

W HTML5, jedynym celem DOCTYPE jest aktywowanie trybu pełnego standardu. Starsze wersje standardu HTML nadawały dodatkowe znaczenie DOCTYPE, ale żadna przeglądarka nie używała DOCTYPE do innych celów niż przełączanie pomiędzy trybem zgodności a trybem standardów.

+ +

Zobacz również szczegółowy opis tego, kiedy różne przeglądarki wybierają różne tryby pracy.

+ +

XHTML

+ +

Jeśli podajesz swoją stronę jako XHTML używając application/xhtml+xml MIME type w Content-Type HTTP header, nie potrzebujesz DOCTYPE, aby włączyć tryb standardów. Należy jednak pamiętać, że podawanie stron jako application/xhtml+xml spowoduje, że Internet Explorer 8 wyświetli okno dialogowe pobierania nieznanego formatu zamiast wyświetlania strony, ponieważ pierwszą wersją Internet Explorera z obsługą XHTML jest Internet Explorer 9.

+ +

Jeśli tworzysz treści w formacie XHTML używając text/html MIME type, przeglądarki przeczytają je jako HTML i będziesz potrzebował DOCTYPE do korzystania z trybu standardów.

+ +

Jak sprawdzić, który tryb jest używany?

+ +

W Firefoksie wybierz opcję View Page Info z menu kontekstowego i poszukaj trybu Render Mode.

+ +

W Internet Explorerze naciśnij F12 i poszukaj Document Mode.

+ +

Jakie są różnice pomiędzy trybami?

+ +

Zobacz listę zgodności oraz tryb prawie standardowy, aby poznać różnice pomiędzy trybami.

diff --git a/files/pl/web/html/canvas/index.html b/files/pl/web/html/canvas/index.html new file mode 100644 index 0000000000..e4bf56c5e7 --- /dev/null +++ b/files/pl/web/html/canvas/index.html @@ -0,0 +1,55 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +translation_of: Web/API/Canvas_API +--- +
+ {{outdated()}}
+
+

Canvas (<canvas>) jest nowym elementem HTML, który może być użyty do rysowania grafik przy użyciu skryptów (zazwyczaj JavaScript). Na przykład może być użyty do rysowania wykresów, tworzenia kompozycji fotografii lub do prostych (i nie tylko prostych) animacji.

+

Po raz pierwszy <canvas> został przedstawiony przez Apple dla Mac OS X Dashboard i później zaimplementowany w Safari. Przeglądarki oparte o silnik Gecko począwszy od wersji 1.8 (tj. Firefox 1.5 oraz późniejsze) obsługują ten nowy element. Również Opera 9 go wspiera. Czynione są starania, aby <canvas> był obsługiwany przez Internet Explorera (zobacz ).

+

Element <canvas> jest częścią specyfikacji WhatWG Web applications 1.0 znanej także jako HTML 5.

+
+ + + + + + + +
+

Dokumentacja

+
+
+ Rysowanie grafik za pomocą Canvas
+
+ Wprowadzenie do <canvas>.
+
+ Przewodnik po canvas
+
+ <canvas> jest nowym elementem HTML, który może być użyty do rysowania grafik przy użyciu skryptów (zazwyczaj JavaScript). Na przykład może być użyty do rysowania wykresów, tworzenia kompozycji fotografii lub do prostych (i nie tylko prostych) animacji.
+
+ Fragmenty kodu:Canvas
+
+ Fragmenty kodu z użyciem <canvas>.
+
+ Przykłady Canvas
+
+ Lista różnych przykładów stosujących <canvas>.
+
+ Rysowanie tekstu za pomocą Canvas
+
+ Dokumentacja nowych własności <canvas> dostępnych począwszy od Firefoksa 3
+
+ 		+

Społeczność

+ + + +
+

 

diff --git a/files/pl/web/html/element/a/index.html b/files/pl/web/html/element/a/index.html new file mode 100644 index 0000000000..fbf1e19205 --- /dev/null +++ b/files/pl/web/html/element/a/index.html @@ -0,0 +1,384 @@ +--- +title: ': Element Kotwicy' +slug: Web/HTML/Element/a +tags: + - Element + - HTML + - HTML semantyka na poziomie tekstu + - Reference + - Treść + - Web +translation_of: Web/HTML/Element/a +--- +

{{HTMLRef}}

+ +

Element <a> w HTML (lub element kotwicy) tworzy hiperłącze do innych stron internetowych, plików, miejsc na tej samej stronie, adresów e-mail lub innych adresów URL.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Kategorie treściTreść płynna, Treść frazowania, Treść interaktywna, zawartość zdzieralna.
Dozwolona zawartośćTransparent, zawierający albo treści płynne (z wyłączeniem treści interaktywnych), albo treści frazowania.
Pominięcie znacznikaBrak, zarówno znacznik początkowy jak i końcowy są obowiązkowe.
Dozwoleni rodziceKażdy element, który akceptuje zawartość frazowania, lub każdy element, który akceptuje treści przepływu, ale zawsze z wyłączeniem elementów <a> (zgodnie z logiczną zasadą symetrii, jeśli znacznik <a>, jako rodzic, nie może mieć interaktywnej zawartości, to ta sama zawartość <a> nie może mieć znacznika <a> jako rodzica).
Dozwolone role ARIA{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}
Interfejs DOM{{DOMxRef("HTMLAnchorElement")}}
+ +

Atrybuty

+ +

Ten element uwzględnia atrybuty globalne.

+ +
+
{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}
+
Ten atrybut nakazuje przeglądarkom pobieranie adresu URL zamiast nawigowania do niego, więc użytkownik zostanie poproszony o zapisanie go w postaci pliku lokalnego. Jeśli atrybut ma wartość, jest używany jako wstępnie wypełniona nazwa pliku w oknie dialogowym Zapisz (użytkownik nadal może zmienić nazwę, jeśli chce). Nie ma ograniczeń co do dozwolonych wartości, choć / oraz \ są konwertowane na podkreślenia. Większość systemów plików ogranicza interpunkcję w nazwach plików, a przeglądarki odpowiednio dostosują sugerowaną nazwę. +
Uwagi: +
    +
  • Ten atrybut działa tylko dla adresów URL tego samego pochodzenia.
    • +
  • Chociaż adresy URL HTTP muszą być w tym samym miejscu pochodzenia, obiekt blob: URLs oraz data: URLs są dozwolone, aby można było pobierać treści generowane przez JavaScript, takie jak obrazy utworzone w aplikacji internetowej do edycji obrazów.
    • +
  • Jeżeli nagłówek HTTP Content-Disposition: podaje inną nazwę pliku niż ten atrybut, nagłówek HTTP ma pierwszeństwo przed tym atrybutem.
    • +
  • Jeśli Content-Disposition: jest ustawione na inline, Firefox nadaje priorytet Content-Disposition, podobnie jak w przypadku nazwy pliku, podczas gdy Chrome nadaje priorytet atrybutowi download.
    • +
+
+
+
{{HTMLAttrDef("href")}}
+
Zawiera URL lub fragment URL do którego wskazuje hiperłącze.
+
Fragment adresu URL jest nazwą poprzedzoną znakiem skrótu (#), który określa wewnętrzną lokalizację docelową ({{HTMLAttrxRef("id")}} elementu HTML) w bieżącym dokumencie. Adresy URL nie są ograniczone do dokumentów opartych na sieci Web, ale mogą korzystać z dowolnego protokołu obsługiwanego przez przeglądarkę. Na przykład, file:, ftp:, oraz mailto: działają w większości przeglądarek. +
+

Uwaga: Możesz użyć href="#top" lub pusty fragment href="#" aby przejść do górnej części biężącej strony. Takie zachowanie jest określone przez HTML5.

+
+
+
{{HTMLAttrDef("hreflang")}}
+
Ten atrybut wskazuje język ludzki powiązanego zasobu. Jest to atrybut czysto doradczy, bez wbudowanych funkcji. Dozwolone wartości są określane przez BCP47.
+
{{HTMLAttrDef("ping")}}
+
Zawiera oddzieloną spacją listę adresów URL, do których, gdy następuje hiperłącze, żądania {{HTTPMethod("POST")}} z oznaczeniem PING będą wysyłane przez przeglądarkę (w tle). Najczęściej używane do śledzenia.
+
{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}
+
Wskazuje który odsyłacz należy wysłać podczas pobierania adresu URL: +
    +
  • 'no-referrer' oznacza, że Referer: nagłówek nie zostanie wysłany.
    • +
  • 'no-referrer-when-downgrade' oznacza, że Referer: nagłówek nie zostanie wysłany podczas nawigacji do miejsca pochodzenia bez HTTPS. Jest to zachowanie domyślne.
    • +
  • 'origin' oznacza, że odsyłającym będzie pochodzenie strony, nie włączając informacji po domenie.
    • +
  • 'origin-when-cross-origin' oznacza, że nawigacja do innych miejsc pochodzenia będzie ograniczona do schematu, hosta i portu, podczas gdy nawigacja w tym samym miejscu pochodzenia będzie obejmować ścieżkę strony odsyłającej.
    • +
  • 'strict-origin-when-cross-origin'
    • +
  • 'unsafe-url' oznacza, że odsyłacz będzie zawierał pochodzenie i ścieżkę, ale nie fragment, hasło, lub nazwę użytkownika. Jest to niebezpieczne, ponieważ może spowodować przeciek danych z bezpiecznych adresów URL do niepewnych.
    • +
+
+
{{HTMLAttrDef("rel")}}
+
Określa relację obiektu docelowego z obiektem łącza. Wartość jest oddzieloną spacjami listą typów łączy.
+
{{HTMLAttrDef("target")}}
+
Określa, gdzie ma być wyświetlany link URL. Jest to nazwa lub słowo kluczowe kontekstu przeglądania, zakładki, okna lub <iframe>. Następujące słowa kluczowe mają specjalne znaczenie: +
    +
  • _self: Wczytuje adres URL do tego samego kontekstu przeglądania, co bieżący. Jest to zachowanie domyślne.
    • +
  • _blank: Wczytuje adres URL w nowy kontekst przeglądania. Zazwyczaj jest to zakładka, ale użytkownicy mogą skonfigurować przeglądarkę tak, aby korzystała z nowych okien.
    • +
  • _parent: Ładuje adres URL do nadrzędnego kontekstu przeglądania bieżącego. Jeśli nie ma rodzica, zachowuje się tak samo jak _self.
    • +
  • _top: Wczytuje adres URL w kontekst przeglądania na najwyższym poziomie (czyli "najwyższy" kontekst przeglądania, który jest przodkiem obecnego i nie ma rodzica). Jeśli nie ma rodzica, zachowuje się tak samo jak _self.
    • +
+ +
+

Uwaga: Podczas używania target, rozważ dodanie rel="noreferrer", aby uniknąć wykorzystania API window.opener.

+
+ +
+

Uwaga: Linkowanie do innej strony przy użyciu target="_blank" uruchomi nową stronę na tym samym procesie co Twoja strona. Jeśli nowa strona wykonuje duże skrypty JS, wydajność Twojej strony może ucierpieć. Aby tego uniknąć, użyj rel="noopener".

+
+
+
{{HTMLAttrDef("type")}}
+
Określa typ nośnika w postaci {{Glossary("typu MIME")}} dla połączonego adresu URL. Jest to czysto doradcze, bez wbudowanych funkcji.
+
+ +

Atrybuty przestarzałe

+ +
+
{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}
+
Ten atrybut definiuje kodowanie znaków dla powiązanego adresu URL. Wartość ta powinna być spacją i/lub przecinkiem z listy zbiorów znaków zdefiniowanych w RFC 2045. Domyślną wartością jest ISO-8859-1. +
+

Uwaga dotycząca zastosowania: Ten atrybut jest przestarzały w HTML5 i nie powinien być używany przez twórców. Aby uzyskać jego efekt, użyj nagłówka HTTP Content-Type: na linkowanym adresie URL.

+
+
+
{{HTMLAttrDef("coords")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}
+
Do wykorzystania z atrybutem shape opisanym niżej, atrybut ten używał oddzielonej przecinkami listy liczb w celu określenia współrzędnych odnośnika na stronie.
+
{{HTMLAttrDef("name")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}
+
Ten atrybut był wymagany w przypadku kotwic określających możliwą lokalizację docelową na stronie. W HTML 4.01, id oraz name mogą być używane jednocześnie w elemencie <a>, o ile mają identyczne wartości. +
+

Uwaga dotycząca zastosowania: Ten atrybut jest przestarzały w HTML5, zamiast niego użyj globalnego atrybutu {{HTMLAttrxRef("id")}}.

+
+
+
{{HTMLAttrDef("rev")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}
+
Ten atrybut określa łącze odwrotne, odwrotną zależność atrybutu rel. Został wycofany ze względu na to, że był bardzo mylący. +
Uwaga: Obecnie specyfikacja W3C HTML 5.2 stwierdza, że rev nie jest już przestarzałe, podczas gdy Living Standard od WHATWG nadal ma to oznaczone jako przestarzałe. Dopóki ta rozbieżność nie zostanie wyjaśniona, zalecane jest uznawać go jako atrybut przestarzały.
+
+
{{HTMLAttrDef("shape")}} tylko{{HTMLVersionInline(4)}}{{Obsolete_Inline("HTML5")}}
+
Atrybut ten został użyty do zdefiniowania regionu dla hiperłączy w celu utworzenia mapy obrazu. Wartości to circle, default, polygon, oraz rect. Format atrybutu coords zależy od wartości kształtu. Dla circle wartością jest x,y,r gdzie x oraz y są współrzędnymi pikseli dla środka okręgu, a r jest wartością promienia w pikselach. Dla rect atrybut coords powinien wynosić x,y,w,h. Wartości x,y definiują lewy górny narożnik prostokąta, natomiast w oraz h odpowiednio szerokość i wysokość. Wartość polygon dla kształtu wymaga wartości x1,y1,x2,y2,... dla coords. Każda z par x,y określa punkt wielokąta, z kolejnymi punktami połączonymi liniami prostymi i ostatnim punktem połączonym z pierwszym. Wartość default dla kształtu wymaga użycia całego zamkniętego obszaru, zazwyczaj obrazu. +
Uwaga: Użyj atrybutu {{HTMLAttrxRef("usemap", "img")}} dla elementu {{HTMLElement("img")}} i powiązanego elementu {{HTMLElement("map")}} aby zdefiniować hotspoty zamiast atrybutu shape.
+
+
+ +

Przykłady

+ +

Odnośnik do lokalizacji zewnętrznej

+ +
<!-- kotwica tworząca odnośnik do zewnętrznego pliku -->
+<a href="http://www.mozilla.com/">
+Odnośnik zewnętrzny
+</a>
+
+ +

Rezultat

+ + +

Odnośnik zewnętrzny

+ +

Odnośnik do innej sekcji na tej samej stronie

+ +
<!-- odnośniki do elementów na tej stonie z id="attr-href" -->
+<a href="#attr-href">
+Opis łączy na tej samej stronie
+</a>
+ +

Rezultat

+ +

Opis łączy na tej samej stronie

+ +

Tworzenie klikalnego obrazu

+ +

W tym przykładzie jako odnośnika do strony głównej MDN użyto obrazu. Strona główna otworzy się w nowym kontekście przeglądania, czyli w nowej stronie lub nowej karcie.

+ +
<a href="https://developer.mozilla.org/pl/" target="_blank">
+  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
+       alt="MDN logo" />
+</a>
+
+ +

Rezultat

+ +

MDN logo

+ +

Tworzenie odnośnika email

+ +

Często tworzy się linki, które otwierają się w programie pocztowym użytkownika, aby umożliwić mu wysłanie nowej wiadomości. Odbywa się to za pomocą odnośnika mailto:. Oto prosty przykład:

+ +
<a href="mailto:nowhere@mozilla.org">Wyślij email do nikąd</a>
+ +

Rezultat

+ +

Wyślij email do nikąd

+ +

Aby uzyskać dodatkowe informacje dotyczące schematu adresu URL mailto, takie jak temat, treść, lub inne z góry określone treści, zobacz Odnośniki email lub {{RFC(6068)}}.

+ +

Tworzenie łącza telefonicznego

+ +

Oferowanie łącz telefonicznych jest pomocne dla użytkowników przeglądających dokumenty internetowe a ich urządzenie jest powiązane z telefonem.

+ +
<a href="tel:+491570156">+49 157 0156</a>
+ +

Dodatkowe informację na temat schematu URL tel można znaleźć w {{RFC(3966)}}.

+ +

Użycie atrybutu download do zapisania <canvas> jako PNG

+ +

Jeśli chcesz pozwolić użytkownikom na pobranie elementu HTML {{HTMLElement("canvas")}} jako obrazu, możesz utworzyć odnośnik z atrybutem download i danymi płótna jako URL pliku:

+ +
var link = document.createElement('a');
+link.textContent = 'download image';
+
+link.addEventListener('click', function(ev) {
+    link.href = canvas.toDataURL();
+    link.download = "mypainting.png";
+}, false);
+
+document.body.appendChild(link);
+ +

Można to zobaczyć w praktyce na stronie jsfiddle.net/codepo8/V6ufG/2/.

+ +

Uwagi

+ +

HTML 3.2 definiuje tylko atrybuty name, href, rel, rev oraz title.

+ +

Kwestie dotyczące bezpieczeństwa i prywatności

+ +

Chociaż elementy <a> mają wiele niewinnych zastosowań, mogą mieć niepożądane konsekwencje dla bezpieczeństwa i prywatności użytkownika. Zobacz Nagłówek Referer: obawy dotyczące prywatności i bezpieczeństwa, aby uzyskać więcej informacji i środków zaradczych.

+ +

Kwestie dostępności

+ +

wydarzenia onclick

+ +

Znaczniki Kotwicy są często nadużywane przez zdarzenie onclick do tworzenia pseudo-przycisków przez ustawienie href na "#" lub "javascript:void(0)", aby zapobiec odświeżaniu strony.

+ +

Wartości te powodują nieoczekiwane zachowanie podczas kopiowania/przenoszenia linków, otwierania odnośników w nowej zakładce/oknie, dodawaniu do zakładek i gdy JavaScript jest nadal pobierany, w stanie błędu, lub wyłączony. To również przekazuje nieprawidłową semantykę do technologii wspomagających (np. czytniki ekranu). W takich przypadkach zaleca się użycie przycisku {{HTMLElement("button")}} instead. Ogólnie rzecz biorąc, należy używać kotwicy tylko do nawigacji przy użyciu odpowiedniego adresu URL.

+ +

Linki zewnętrzne i łącza do zasobów nie-HTML

+ +

Oba odnośniki, które otwierają się w nowej zakładce lub oknie poprzez deklarację target="_blank" oraz linki do zasobów plików, których wartość href wskazuje na źródło pliku powinny zawierać wskaźnik zachowania, które wystąpi po aktywacji łącza.

+ +

Osoby o słabym wzroku, które poruszają się za pomocą technologii odczytu ekranowego lub które mają problemy poznawcze mogą zostać zmylone, gdy nieoczekiwanie otworzy się nowa karta, okno lub aplikacja. Starsze wersje oprogramowania do czytania na ekranie mogą nawet nie ogłaszać zachowania.

+ +

Odnośnik otwierający nową kartę lub okno

+ +
<a target="_blank" href="https://www.wikipedia.org/">Wikipedia (otwiera się w nowym oknie)</a>
+
+ +

Odnośnik do zasobów nie-HTML

+ +
<a target="_blank" href="2017-annual-report.ppt">Raport Roczny 2017 (PowerPoint)</a>
+
+ +

Jeśli zamiast tekstu używana jest ikona do oznaczenia tego rodzaju zachowania odnośników, upewnij się, że zawiera ona {{HTMLAttrxRef("alt", "img", "opis alternatywny", "true")}}.

+ + + +

Odnośniki pomijające

+ +

Link pomijający, znany również jako skipnav, jest elementem a umieszczonym jak najbliżej elementu otwarcia {{HTMLElement("body")}}, który odsyła do początku głównej zawartości strony. Odnośnik ten umożliwia ominięcie treści powtarzanej na wielu stronach, takich jak nagłówek strony i podstawowa nawigacja.

+ +

Łącza pomijające są szczególnie przydatne dla osób, które poruszają się za pomocą technologii wspomagających, takich jak przełączniki, komendy głosowe, ustne pałeczki/różdżki, gdzie poruszanie się przez powtarzające się łącza może być pracochłonnym zadaniem.

+ + + +

Odległość

+ +

Duża ilość interaktywnych treści—w tym kotwic—umieszczonych w bliskiej odległości od siebie powinna mieć miejsce na ich oddzielenie. Odstęp ten jest korzystny dla osób, które doświadczają problemów z układem ruchu, które mogą przypadkowo aktywować błędne treści interaktywne podczas nawigacji.

+ +

Odstępy mogą być tworzone przy użyciu właściwości CSS, takich jak {{CSSxRef("margin")}}.

+ + + +

Klikanie i focus

+ +

To, czy kliknięcie na {{HTMLElement("a")}} powoduje, że przechodzi ono w tryb skupienia, zależy od przeglądarki i systemu operacyjnego.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Czy kliknięcie na {{HTMLElement("a")}} spowoduje tryb skupienia?
Przeglądarki stacjonarneWindows 8.1OS X 10.9
Firefox 30.0TakTak
Chrome ≥39
+ (Chromium bug 388666)		TakTak
Safari 7.0.5Nie dotyczyTylko jeśli posiada tabindex
Internet Explorer 11TakNie dotyczy
Presto (Opera 12)TakTak
+ + + + + + + + + + + + + + + + + + + + + + +
Czy stuknięcie w {{HTMLElement("a")}} spowoduje tryb skupienia?
Przeglądarki mobilneiOS 7.1.2Android 4.4.4
Safari MobileTylko jeśli posiada tabindexNie dotyczy
Chrome 35???Tylko jeśli posiada tabindex
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}{{Spec2("Referrer Policy")}}Dodano atrybut referrer.
{{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")}} 
+ +

Kompatybilność z przeglądarką

+ + + +

{{Compat("html.elements.a")}}

+ +

Zobacz także

+ + diff --git a/files/pl/web/html/element/abbr/index.html b/files/pl/web/html/element/abbr/index.html new file mode 100644 index 0000000000..0dfe90c52b --- /dev/null +++ b/files/pl/web/html/element/abbr/index.html @@ -0,0 +1,200 @@ +--- +title: ': Element Skrótu' +slug: Web/HTML/Element/abbr +tags: + - Akronim + - Definicje + - Element + - HTML + - HTML semantyka na poziomie tekstu + - Reference + - Web + - semantyka + - skrót +translation_of: Web/HTML/Element/abbr +--- +

{{HTMLRef}}

+ +

Element skrótu HTML (<abbr>) reprezentuje skrót lub akronim; opcjonalny atrybut {{htmlattrxref("title")}} może stanowić rozwinięcie lub opis skrótu. Jeśli występuje, title musi zawierać pełny opis i nic więcej.

+ +

Artykuł Jak oznaczać skróty i uczynić je zrozumiałymi jest przewodnikiem do nauki używania <abbr> i elementów pokrewnych.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Kategorie treściTreść płynna, Treść frazowania, zawartość zdzieralna.
Dozwolona zawartośćTreść frazowania
Pominięcie znacznikaBrak, zarówno znacznik początkowy jak i końcowy są obowiązkowe.
Dozwoleni rodziceKażdy element, który akceptuje zawartość frazowania
Dozwolone role ARIAKażdy
Interfejs DOM{{domxref("HTMLElement")}}
+ +

Atrybuty

+ +

Ten element obsługuje tylko atrybuty globalne. Atrybut {{htmlattrxref("title")}} ma specyficzne znaczenie semantyczne, gdy jest używany z elementem <abbr>; musi zawierać pełny opis czytelny dla człowieka lub rozwinięcie skrótu. Tekst ten jest często prezentowany przez przeglądarki jako etykieta pomocnicza, gdy kursor myszy jest zawieszony nad elementem.

+ +

Każdy element <abbr>, którego używasz jest niezależny od wszystkich innych; podanie title dla jednego elementu nie załącza automatycznie tego samego rozszerzenia tekstu do innych o tej samej treści.

+ +

Uwagi dotyczące użycia

+ +

Typowe zastosowania

+ +

Z pewnością nie jest wymagane, aby wszystkie skróty były oznaczane przy użyciu <abbr>. Jest jednak kilka przypadków, w których jest to pomocne:

+ +
    +
  • Jeśli używany jest skrót i chcesz zapewnić rozszerzenie lub definicję poza obiegiem treści dokumentu, użyj <abbr> z odpowiednim atrybutem {{htmlattrxref("title")}}.
    • +
  • Aby zdefiniować skrót, który może być nieznany czytelnikowi, należy przedstawić termin używając <abbr> oraz atrybutu title lub tekstu liniowego podającego definicję.
    • +
  • W przypadku, gdy należy zwrócić uwagę semantycznie na obecność skrótu w tekście, przydatny jest element <abbr>. To z kolei może być użyte do celów stylizacyjnych lub skryptowych.
    • +
  • Możesz użyć <abbr> w porozumieniu z {{HTMLElement("dfn")}} aby ustalić definicje terminów, które są skrótami lub akronimami. Zobacz przykład {{anch("Definiowanie skrótu")}} poniżej.
    • +
+ +

Uwagi gramatyczne

+ +

W języka z {{interwiki("wikipedia", "grammatical number")}} (czyli w tych językach, w których liczba elementów wpływa na gramatykę zdania), użyj tej samej liczby gramatycznej w atrybucie title, co wewnątrz elementu <abbr>. Jest to szczególnie ważne w językach z więcej niż dwoma liczbami, takich jak Arabski, ale jest również istotne w języku angielskim.

+ +

Domyślna stylizacja

+ +

Celem tego znacznika jest jedynie wygoda dla autora i wszystkie przeglądarki domyślnie wyświetlają go w linii ({{cssxref('display')}}: inline), choć jego stylizacja różni się w zależności od przeglądarki:

+ +
    +
  • Niektóre przeglądarki, takie jak Internet Explorer, nie stylizują go inaczej niż elementu {{HTMLElement("span")}}.
    • +
  • Opera, Firefox i inne dodają kropkowane podkreślenie zawartości elementu.
    • +
  • Kilka przeglądarek nie tylko dodaje kropkowane podkreślenie, ale także dodaje do nich wariant "small-caps"; aby uniknąć tej stylizacji, dodanie czegoś w rodzaju {{cssxref('font-variant')}}: none w CSS załatwia tę sprawę.
    • +
+ +

Przykłady

+ +

Oznaczanie skrótu semantycznie

+ +

Aby oznaczyć skrót bez podania rozwinięcia lub opisu, po prostu użyj <abbr> bez żadnych atrybutów, jak widać w tym przykładzie.

+ +

HTML

+ +
<p>Używanie <abbr>HTML</abbr> jest fajne i proste!</p>
+ +

Rezultat

+ +

Używanie HTML jest fajne i proste!

+ +

Stylistyka skrótów

+ +

Możesz użyć CSS, aby ustawić własny styl skrótów, jak pokazano w tym prostym przykładzie.

+ +

HTML

+ +
<p>Używając <abbr>CSS</abbr>, możesz stylizować swoje skróty!</p>
+ +

CSS

+ +
abbr {
+  font-variant: all-small-caps;
+}
+ +

Rezultat

+ +

Używając CSS, możesz stylizować swoje skróty!

+ +

Dostarczanie rozszerzenia

+ +

Dodanie atrybutu {{htmlattrxref("title")}} pozwala na rozwinięcie lub zdefiniowanie skrótu lub akronimu.

+ +

HTML

+ +
<p>Funkcję rejestru nazw internetowych w domenie .pl pełni <abbr title="Naukowa i Akademicka Śieć Komputerowa">NASK</abbr>.</p>
+ +

Rezultat

+ +

Funkcję rejestru nazw internetowych w domenie .pl pełni NASK.

+ +

Definiowanie skrótu

+ +

Możesz użyć <abbr> w połączeniu z {{HTMLElement("dfn")}}, aby bardziej formalnie zdefiniować skrót, jak pokazano tutaj.

+ +

HTML

+ +
<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
+</dfn> jest językiem znaczników używanym do tworzenia semantyki i struktury strony internetowej.</p>
+
+<p><dfn id="spec">Specyfikacja</dfn>
+(<abbr title="Specyfikacja">spec</abbr>) jest dokumentem, który przedstawia w szczegółach, jak technologia lub API ma funkcjonować i jak wygląda dostęp do nich.</p>
+ +

Rezultat

+ +

HTML jest językiem znaczników używanym do tworzenia semantyki i struktury strony internetowej.

+ +

Specyfikacja (spec) jest dokumentem, który przedstawia w szczegółach, jak technologia lub API ma funkcjonować i jak wygląda dostęp do nich.

+ +

Zobacz bardziej szczegółowe przykłady w artykule Jak oznaczyć skróty i uczynić je zrozumiałymi.

+ +

Kwiestie dostępności

+ +

Wypisanie akronimu lub skrótu w całości za pierwszym razem, gdy jest on używany na stronie, jest korzystne, aby pomóc ludziom go zrozumieć, zwłaszcza jeśli treść jest żargonem technicznym lub branżowym.

+ +

Przykład

+ +
<p>JavaScript Object Notation (<abbr>JSON</abbr>) jest lekkim formatem wymiany danych.</p>
+
+ +

Jest to szczególnie pomocne dla osób, które nie znają terminologii lub pojęć omawianych w treści, dla osób, które są nowe w języku oraz dla osób z problemami poznawczymi.

+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', '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')}} 
+ +

Kompatybilność z przeglądarką

+ + + +

{{Compat("html.elements.abbr")}}

+ +

Zobacz także

+ +
    +
  • Używanie elementu <abbr>
    • +
  • Inne elementy zawierające semantykę na poziomie tekstu: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.
    • +
  • Przestarzały element {{HTMLElement("acronym")}}, którego obowiązki zostały przeniesione na <abbr>
    • +
diff --git a/files/pl/web/html/element/acronym/index.html b/files/pl/web/html/element/acronym/index.html new file mode 100644 index 0000000000..95c271a99f --- /dev/null +++ b/files/pl/web/html/element/acronym/index.html @@ -0,0 +1,81 @@ +--- +title: +slug: Web/HTML/Element/acronym +tags: + - Element + - HTML + - 'HTML:Treść płynna' + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/acronym +--- +

{{obsolete_header}}

+ +

Podsumowanie

+ +

Element HTML Akronim (<acronym>) pozwala autorom wyraźnie wskazać ciąg znaków, które składają się na akronim lub skrót słowa. Element ten został usunięty w HTML5. Użyj elementu {{HTMLElement("abbr")}}.

+ +
+

Uwaga dotycząca użycia: Ten element został usunięty w HTML5 i nie powinien być już używany. Zamiast tego, programiści powinni używać elementu {{HTMLElement("abbr")}}.

+
+ +

Atrybuty

+ +

Ten element ma tylko globalne atrybuty, które są wspólne dla wszystkich elementów.

+ +

Interfejs DOM

+ +

Ten element implementuje interfejs {{domxref('HTMLElement')}}.

+ +
Uwaga dotycząca implementacji: Do Gecko 1.9.2 włącznie, Firefox implementuje interfejs {{domxref('HTMLSpanElement')}} dla tego elementu.
+ +

Przykład

+ +
<p><acronym title="World Wide Web">WWW</acronym> jest tylko częścią składową Internetu.</p>
+
+ +

Domyślna stylizacja

+ +

Chociaż celem tego znacznika jest jedynie wygoda dla autora, jego domyślna stylizacja różni się w zależności od przeglądarki:

+ +
    +
  • Niektóre przeglądarki, takie jak Internet Explorer, nie stylizowały go inaczej niż elementu {{HTMLElement("span")}}.
    • +
  • Opera, Firefox, Chrome i inne dodają kropkowane podkreślenie zawartości elementu.
    • +
  • Kilka przeglądarek nie tylko dodaje kropkowane podkreślenie, ale także dodaje do nich wariant "small-caps"; aby uniknąć tej stylizacji, dodanie czegoś w rodzaju {{cssxref('font-variant')}}: none w CSS załatwia tę sprawę.
    • +
+ +

Dlatego zaleca się, aby autorzy stron internetowych nie polegali całkowicie na domyślnej stylizacji.

+ +

Specyfikacje

+ + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}{{Spec2('HTML4.01')}} 
+ +

Kompatybilność z przeglądarką

+ + + +

{{Compat("html.elements.acronym")}}

+ +

Zobacz także

+ +
    +
  • Element {{HTMLElement("abbr")}}
    • +
+ +

{{HTMLRef}}

diff --git a/files/pl/web/html/element/address/index.html b/files/pl/web/html/element/address/index.html new file mode 100644 index 0000000000..3b3f050fbd --- /dev/null +++ b/files/pl/web/html/element/address/index.html @@ -0,0 +1,140 @@ +--- +title: '
: Element Adresu Kontaktowego' +slug: Web/HTML/Element/address +tags: + - Adres + - Adres Email + - Autor + - Element + - Email + - HTML + - Informacje Kontaktowe + - Kontakt + - Reference + - Sekcje HTML + - Web +translation_of: Web/HTML/Element/address +--- +
{{HTMLRef}}
+ +

Element HTML <address> wskazuje, że dołączony HTML dostarcza informacji kontaktowych dla osoby lub osób, lub dla organizacji.

+ +

Informacje kontaktowe dostarczane przez element <address> mogą przybierać dowolną formę odpowiednią dla danego kontekstu i mogą obejmować wszelkie potrzebne informacje kontaktowe, takie jak adres fizyczny, adres URL, adres email, numer telefonu, obsługa mediów społecznościowych, współrzędne geograficzne i tak dalej. Element <address> powinien zawierać imię i nazwisko osoby, osób lub nazwę organizacji, do której odnoszą się dane kontaktowe.

+ +

<address> może być używany w różnych kontekstach, takich jak podanie informacji kontaktowych firmy w nagłówku strony lub wskazanie autora artykułu poprzez włączenie elementu <address> do {{HTMLElement("article")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Kategorie treściTreść płynna, zawartość zdzieralna.
Dozwolona zawartość +

Zawartość przepływu, ale bez zagnieżdżonego elementu <address>, bez zawartości nagłówka ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), bez zawartości sekcjonowania ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}) i bez elementu {{HTMLElement("header")}} ani {{HTMLElement("footer")}}.

+
Pominięcie znacznikaBrak, zarówno znacznik początkowy jak i końcowy są obowiązkowe.
Dozwoleni rodziceKażdy element, który akceptuje zawartość przepływu, ale zawsze z wyłączeniem elementów <address> (zgodnie z logiczną zasadą symetrii, jeśli znacznik <address>, jako rodzic, nie może zagnieżdżać elementu <address>, to ta sama zawartość <address> nie może mieć znacznika <address> jako rodzica.
Dozwolone role ARIABrak
Interfejs DOM{{domxref("HTMLElement")}} Przed Gecko 2.0 (Firefox 4), Gecko zaimplementowało ten element wykorzystując interfejs {{domxref("HTMLSpanElement")}}
+ +

Atrybuty

+ +

Ten element uwzględnia tylko atrybuty globalne.

+ +

Uwagi dotyczące użycia

+ +
    +
  • Aby reprezentować dowolny adres, taki, który nie jest związany z danymi kontaktowymi, użyj elementu {{HTMLElement("p")}} zamiast elementu <address>.
    • +
  • Element ten nie powinien zawierać więcej informacji niż dane kontaktowe, np. data publikacji (która należy do elementu {{HTMLElement("time")}}).
    • +
  • Zazwyczaj element <address> może być umieszczony wewnątrz elementu {{HTMLElement("footer")}} bieżącej sekcji, jeśli taki istnieje.
    • +
+ +

Przykład

+ +

Ten przykład pokazuje wykorzystanie elementu <address> do wyznaczenia danych kontaktowych autora artykułu.

+ +
  <address>
+    Możesz skontaktować się z autorem na <a href="http://www.somedomain.com/contact">
+    www.somedomain.com</a>.<br>
+    Jeśli widzisz jakieś błędy, proszę <a href="mailto:webmaster@somedomain.com">
+    skontaktuj się z administratorem</a>.<br>
+    Możesz również chcieć nas odwiedzić:<br>
+    Mozilla Foundation<br>
+    331 E Evelyn Ave<br>
+    Mountain View, CA 94041<br>
+    USA
+  </address>
+
+ +

Rezultat

+ +
Możesz skontaktować się z autorem na www.somedomain.com.
+Jeśli widzisz jakieś błędy, proszę skontaktuj się z administratorem.
+Możesz również chcieć nas odwiedzić:
+Mozilla Foundation
+331 E Evelyn Ave
+Mountain View, CA 94041
+USA
+ +

 

+ +

Mimo, że renderuje tekst z taką samą domyślną stylistyką jak elementy {{HTMLElement("i")}} oraz {{HTMLElement("em")}}, bardziej odpowiednie jest użycie <address> w odniesieniu do informacji kontaktowych, ponieważ przekazuje on dodatkowe informacje semantyczne.

+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', 'semantics.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')}} 
+ +

Kompatybilność z przeglądarką

+ + + +

{{Compat("html.elements.address")}}

+ +

Zobacz także

+ +
    +
  • Inne elementy związane z sekcją: {{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")}};
    • +
  • Sekcje i zarys dokumentu HTML5.
    • +
diff --git a/files/pl/web/html/element/applet/index.html b/files/pl/web/html/element/applet/index.html new file mode 100644 index 0000000000..dc0e3f6945 --- /dev/null +++ b/files/pl/web/html/element/applet/index.html @@ -0,0 +1,74 @@ +--- +title: applet +slug: Web/HTML/Element/applet +tags: + - 'HTML:Opis_elementów' +translation_of: Web/HTML/Element/applet +--- +

+


+

+

Podsumowanie

+

Element <applet> (Applet) wyróżnia włączenie apletu Java. Definicja HTML 4.01 Strict nie zawiera tego elementu, został on wycofany na rzecz <object>. +

+

Atrybuty

+
align +
Ten atrybut jest używany to umieszczenia apletu na stronie względem treści, która może opływać go wokół. Specyfikacja HTML 4.01 definiuje wartości bottom, left, middle, right i top, natomiast Microsoft i Netscape mogą wspierać również absbottom, absmiddle, baseline, center i texttop. +
+
alt +
Ten atrybut powoduje wyświetlenie opisowego alternatywnego tekstu w przeglądarkach, które nie wspierają Javy. Projektanci stron powinni również pamiętać, że zawartość zamknięta w elemencie <applet> również może być wyświetlona jako alternatywny tekst. +
+
archive +
Ten atrybut odsyła do zarchiwizowanej lub skompresowanej wersji apletu i powiązanych z nim plików klas, co może pomóc zredukować czas ładowania. +
+
code +
Ten atrybut określa URL pliku apletu z klasami do załadowania i wykonania. Nazwy plików apletu są identyfikowane przez rozszerzenie pliku .class. URL określony przez code może być relatywny do atrybutu codebase. +
+
codebase +
Ten atrybut daje bezwzględny lub względny URL katalogu, gdzie są przechowywane pliki .class apletu przywoływane przez atrybut code . +
+
datafld +
Ten atrybut, wspierany przez Internet Explorer 4 i wyższy, określa nazwę kolumny z obiektu źródła danych, który dostarcza powiązanych danych. Ten atrybut może być użyty do określenia różnych elementów <param> przekazywanych do apletu Javy. +
+
datasrc +
Podobnie jak datafld ten atrybut jest używany do wiązania danych w Internet Explorer 4. Określa id obiektu źródła danych, który dostarcza danych, które są powiązane z elementami <param>, związanymi z apletem.
+
height +
Ten atrybut określa wysokość w pikselach, której potrzebuje aplet. +
+
hspace +
Ten atrybut określa w pikselach dodatkową poziomą przestrzeń do zarezerwowania z dwóch stron apletu. +
+
mayscript +
W implementacji Netscape'a ten atrybut pozwala na dostęp do apletu przez programy w języku skryptowym, osadzone w dokumencie. +
+
name +
Ten atrybut przypisuje nazwę do apletu, zatem może być identyfikowany przez inne zasoby, szczególnie skrypty. +
+
object +
Ten atrybut określa URL serializowanej reprezentacji apletu. +
+
src +
Jako zdefiniowany dla Internet Explorer 4 i wyższego, ten atrybut określa URL dla pliku powiązanego z apletem. Znaczenie i użycie jest niejasne i nie jest częścią standardu HTML. +
+
vspace +
Ten atrybut określa w pikselach dodatkową pionową przestrzeń do zarezerwowania nad i pod apletem. +
+
width +
Ten atrybut określa w pikselach szerokość, której potrzebuje aplet. +
+

Przykład

+
<applet code="game.class" align="left" archive="game.zip" height="250" width="350">
+
+<param name="difficulty" value="easy">
+
+<b>Przepraszamy, potrzebujesz Javy, by grać w tę grę</b>
+
+</applet>
+

Notatki

+

Specyfikacja W3C nie zachęca do używania <applet> i preferuje używanie znacznika <object>. W definicji HTML 4.01 Strict ten element jest wycofywany. +


+{{ HTML:Element_Navigation() }} +

+
+
+{{ languages( { "en": "en/HTML/Element/applet" } ) }} diff --git a/files/pl/web/html/element/aside/index.html b/files/pl/web/html/element/aside/index.html new file mode 100644 index 0000000000..8bcb01e076 --- /dev/null +++ b/files/pl/web/html/element/aside/index.html @@ -0,0 +1,126 @@ +--- +title: