{"id":203111,"date":"2015-06-04T08:38:47","date_gmt":"2015-06-04T15:38:47","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=203111"},"modified":"2018-09-06T06:30:20","modified_gmt":"2018-09-06T13:30:20","slug":"all","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/a\/all\/","title":{"rendered":"all"},"content":{"rendered":"<p>The <code>all<\/code> property in CSS resets all of the selected element&#8217;s properties, except the <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//d//direction///">direction<\/a><\/code> and <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//u//unicode-bidi///">unicode-bidi<\/a><\/code> properties that control text direction.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.module {\r\n  all: unset;\r\n}<\/code><\/pre>\n<p>The point of it is allowing for component-level resetting of styles. Sometimes it&#8217;s far easier to start from scratch with styling rather than fight against everything that is already there.<\/p>\n<h3>Values<\/h3>\n<ul>\n<li><code>initial<\/code>: resets all of the selected element&#8217;s properties to their initial values as defined in the CSS spec.<\/li>\n<li><code>inherit<\/code>: the selected element inherits all of its parent element&#8217;s styling, including styles that are not normally inheritable.<\/li>\n<li><code>unset<\/code>: the selected element inherits any inheritable values passed down from the parent element. If no inheritable value is available, the initial value from the CSS spec is used for each property.<\/li>\n<\/ul>\n<p>A few properties do not have an initial value explicitly defined in the spec and instead allow the user agent to set the initial value &mdash; <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//c//color///">color<\/a><\/code> and <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//f//font-family///">font-family<\/a><\/code> are two examples. If <code>all: initial;<\/code> or <code>all: unset;<\/code> is applied, the user agent default value is used as the <code>initial<\/code> value for these properties.<\/p>\n<p><code>all<\/code> is considered a &#8220;shorthand&#8221; property because it allows us to control the values of <em>every<\/em> CSS property at once with a single declaration. However, unlike most shorthand properties, there is no practical &#8220;longhand&#8221; version and it has no sub-properties.<\/p>\n<h3>Demo<\/h3>\n<p>See the CSS tab for comments that indicate which properties are inheritable. Notice that when the <code>inherit<\/code> value is used, the <code>div<\/code> inherits <em>every<\/em> property from its parent, including it&#8217;s <code>width<\/code>, <code>padding<\/code>, and <code>border<\/code>, which are not normally inherited. <\/p>\n<p data-height=\"268\" style=\"height: 268px; 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=\"5b305f6c7713cdc30e5a70581156c698\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=https://css-tricks.com/"http:////codepen.io//team//css-tricks//pen//5b305f6c7713cdc30e5a70581156c698///" rel=\"noopener\">all property demo<\/a> by CSS-Tricks (<a href=https://css-tricks.com/"http:////codepen.io//css-tricks/" rel=\"noopener\">@css-tricks<\/a>) on <a href=https://css-tricks.com/"http:////codepen.io/" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>More Information<\/h3>\n<ul>\n<li><a href=https://css-tricks.com/"http:////dev.w3.org//csswg//css-cascade//#all-shorthand\" rel=\"noopener\"><code>all<\/code> in the W3C CSS Cascading and Inheritance Level 4 Editor&#8217;s Draft <\/a><\/li>\n<li><a href=https://css-tricks.com/"http:////www.w3.org//TR//CSS21//propidx.html/" rel=\"noopener\">CSS2 Full Property Table<\/a>: shows inheritability of all CSS2 properties. The CSS3 specification is divided into multiple parts and is indexed on the <a href=https://css-tricks.com/"http:////www.w3.org//Style//CSS//current-work/" rel=\"noopener\">Table of Specifications<\/a>.<\/li>\n<li><a href=https://css-tricks.com/"https:////css-tricks.com//getting-acquainted-with-initial///">Getting Acquainted with Initial<\/a>: more detail on the <code>initial<\/code> value.<\/li>\n<li><a href=https://css-tricks.com/"http:////mcc.id.au//blog//2013//10//all-unset/" rel=\"noopener\">Resetting style using &#8216;all: unset&#8217; in Firefox 27<\/a> (2013) by Cameron McCormack<\/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-all\" 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\">37<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">27<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">9.1<\/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\">4.4.3-4.4.4<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">9.3<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The all property in CSS resets all of the selected element&#8217;s properties, except the direction and unicode-bidi properties that control [&hellip;]<\/p>\n","protected":false},"author":33562,"featured_media":0,"parent":13712,"menu_order":0,"comment_status":"open","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":[],"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\/203111"}],"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\/33562"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=203111"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/203111\/revisions"}],"predecessor-version":[{"id":276015,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/203111\/revisions\/276015"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13712"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=203111"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=203111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}