{"id":280309,"date":"2019-01-02T08:18:55","date_gmt":"2019-01-02T15:18:55","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=280309"},"modified":"2019-01-02T08:18:55","modified_gmt":"2019-01-02T15:18:55","slug":"touch-action","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/touch-action\/","title":{"rendered":"touch-action"},"content":{"rendered":"<p>The <code>touch-action<\/code> property in CSS gives you control over the effect of touchscreen interactions with an element, similar to the more widely-used <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//p//pointer-events///">pointer-events<\/a><\/code> property used to control mouse interactions.<\/p>\n<pre rel=\"CSS\" class=\"language-css\"><code class=\"language-css\">#element {\r\n  touch-action: pan-right pinch-zoom;\r\n}<\/code><\/pre>\n<p>The <code>touch-action<\/code> property is useful primarily for interactive UI elements that need slightly different behavior depending on the type of device being used. When your users might expect an element to behave a particular way with a mouse, and slightly different behavior on a touch screen, <code>touch-action<\/code> will come in handy.<\/p>\n<p><!--more--><\/p>\n<p>The most obvious example of this is an interactive map element. If you&#8217;ve ever viewed a map not designed to work with touch devices, you&#8217;ve probably tried to pinch and zoom only to find the browser magnifying the element, but not actually zooming the actual map.<\/p>\n<p>By default, a browser will handle touch interactions automatically: Pinch to zoom, swipe to scroll, etc. Setting <code>touch-action<\/code> to <code>none<\/code> will disable all browser handling of these events, leaving them up to you to implement (via JavaScript). If you only want to take over one interaction, tell the browser to handle the rest. For example, if you wrote some JavaScript that only handles zooming, you can tell the browser to handle everything else with this property: <code>touch-action: pan-x pan-y;<\/code>.<\/p>\n<p data-height=\"622\" style=\"height: 622px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"PXbPXL\" data-default-tab=\"result\" data-user=\"css-tricks\" data-pen-title=\"examples of touch-action\" class=\"codepen\">See the Pen <a href=https://css-tricks.com/"https:////codepen.io//team//css-tricks//pen//PXbPXL///" rel=\"noopener\">examples of touch-action<\/a> by CSS-Tricks (<a href=https://css-tricks.com/"https:////codepen.io//css-tricks/" rel=\"noopener\">@css-tricks<\/a>) on <a href=https://css-tricks.com/"https:////codepen.io/" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Syntax<\/h3>\n<pre rel=\"CSS\"><code class=\"language-css\">touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation<\/code><\/pre>\n<h3>Values<\/h3>\n<p>The <code>touch-action<\/code> property accepts the following values:<\/p>\n<ul>\n<li><code>auto<\/code>: Allows the browser to handle all pan and zoom interactions.<\/li>\n<li><code>none<\/code>: Disables browsers from handling all pan and zoom interactions. This opens up the ability to custom define those interactions in JavaScript.<\/li>\n<li><code>pan-x<\/code>: Enables horizontal panning with a single finger interaction. It is shorthand for the <code>pan-left<\/code> and <code>pan-right<\/code> values, but can be used in combination with  <code>pan-y<\/code>, <code>pan-up<\/code>, <code>pan-down<\/code> and <code>pinch-zoom<\/code>.<\/li>\n<li><code>pan-y<\/code> Enables vertical panning with a single finger interaction. It is shorthand for the <code>pan-up<\/code> and <code>pan-down<\/code> values, but can be used in combination with  <code>pan-x<\/code>, <code>pan-left<\/code>, <code>pan-right<\/code> and <code>pinch-zoom<\/code>.<\/li>\n<li><code>manipulation<\/code>: Enables pinch and zoom interactions, but disables others you might find on some devices, like double-tap to zoom. It is shorthand for the combination of <code>pan-x pan-y pinch-zoom<\/code>.<\/li>\n<li><code>pan-left<\/code> (Experimental): Enables a single finger interaction when a user&#8217;s finger moves to the right, which pans toward the left.<\/li>\n<li><code>pan-right<\/code> (Experimental): Enables a single finger interaction when a user&#8217;s finger moves to the left, which pans toward the right.<\/li>\n<li><code>pan-down<\/code> (Experimental): Enables a single finger interaction when a user&#8217;s finger moves up, which pans downward.<\/li>\n<li><code>pan-up<\/code> (Experimental): Enables a single finger interaction when a user&#8217;s finger moves down, which pans upward.<\/li>\n<li><code>pinch-zoom<\/code>: Enables multi-finger interactions and can be combined with any other <code>pan-<\/code> value.<\/li>\n<\/ul>\n<h3>Related<\/h3>\n<ul>\n<li><a href=https://css-tricks.com/"//almanac//properties//p//pointer-events///"><code>pointer-events<\/code><\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=https://css-tricks.com/"http:////caniuse.com//#feat=css-touch-action\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">36<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">52<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">10*<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"n nope\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">126<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">127<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">126<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">13.0-13.1<\/span><\/td><\/tr><\/table><\/div><\/div>\n<p>Safari is the glaring omission to touch-action support. iOs Safari has limited support, only for the <code>auto<\/code> and <code>manipulation<\/code> values.<\/p>\n<h3>Additional Information<\/h3>\n<ul>\n<li><a href=https://css-tricks.com/"https:////www.w3.org//TR//pointerevents//#the-touch-action-css-property\" rel=\"noopener\">Pointer Events Level 2 Specification<\/a> &#8211; The spec is currently in Candidate Recommendation but is intended to move to Proposed Recommendation early 2019, as of this writing. The intent is that the document will become an official W3C Recommendation.<\/li>\n<li><a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//Web//CSS//touch-action/" rel=\"noopener\">MDN Documentation<\/a><\/li>\n<li><a href=https://css-tricks.com/"https:////googlechrome.github.io//samples//touch-action///" rel=\"noopener\">Touch-action pinch-zoom CSS property Sample<\/a> &#8211; Google Chrome&#8217;s demo of its implementation.<\/li>\n<li><a href=https://css-tricks.com/"https:////bugs.webkit.org//show_bug.cgi?id=133112\%22 rel=\"noopener\">WebKit Bugzilla Ticket #133112<\/a> &#8211; Open ticket to propose Safari support. Add your vote to bump it up.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The touch-action property in CSS gives you control over the effect of touchscreen interactions with an element, similar to the [&hellip;]<\/p>\n","protected":false},"author":223334,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[1253,886,1088,1553],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/280309"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223334"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=280309"}],"version-history":[{"count":15,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/280309\/revisions"}],"predecessor-version":[{"id":280452,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/280309\/revisions\/280452"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=280309"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=280309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}