{"id":13710,"date":"2011-08-20T11:16:43","date_gmt":"2011-08-20T18:16:43","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13710"},"modified":"2011-08-20T11:16:43","modified_gmt":"2011-08-20T18:16:43","slug":"properties","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/","title":{"rendered":"Properties"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":13706,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-group.php","meta":{"_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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":318149,"url":"https:\/\/css-tricks.com\/video-screencasts\/190-css-custom-properties-penetrate-the-shadow-dom\/","url_meta":{"origin":13710,"position":0},"title":"#190: CSS Custom Properties Penetrate the Shadow DOM","date":"July 28, 2020","format":false,"excerpt":"One of the whole points of the Shadow DOM is that it provides encapsulation. No styles out, no styles in. But there are ways \"through\" the Shadow DOM, and one of them that is pretty cool and useful is using CSS custom properties on particular elements\/properties.","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/shadow-dom-thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317104,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inset\/","url_meta":{"origin":13710,"position":1},"title":"inset","date":"July 17, 2020","format":false,"excerpt":"The inset property in CSS is a shorthand for the four inset properties, top, right, bottom and left in one declaration. Just like the four individual properties themselves, inset has no effect on non-positioned (static) elements. In other words, an element must declare an explicit position value before inset properties\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322881,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inset-inline\/","url_meta":{"origin":13710,"position":2},"title":"inset-inline","date":"October 9, 2020","format":false,"excerpt":"inset-inline is a shorthand logical CSS property that sets the length that an element is offset in the inline direction combining inset-inline-start and inset-inline-end. It's sort of like declaring right and left except its starting and ending points are determined by the element's direction, text-orientation and writing-mode, just like other\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322833,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inset-block\/","url_meta":{"origin":13710,"position":3},"title":"inset-block","date":"October 9, 2020","format":false,"excerpt":"inset-block is a shorthand logical CSS property that sets the length that an element is offset in the block direction combining inset-block-start and inset-block-end. It's sort of like declaring top and bottom except its starting and ending points are determined by the element's direction, text-orientation and writing-mode, just like other\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22460,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-property\/","url_meta":{"origin":13710,"position":4},"title":"transition-property","date":"July 19, 2013","format":false,"excerpt":"The transition-property property, normally used as part of transition shorthand, is used to define what property, or properties, you want to apply a transition effect to. This is done by providing the name of the property as the value: .example { transition-property: color; } The value can be one of\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":203111,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/all\/","url_meta":{"origin":13710,"position":5},"title":"all","date":"June 4, 2015","format":false,"excerpt":"The all property in CSS resets all of the selected element's properties, except the direction and unicode-bidi properties that control text direction. .module { all: unset; } The point of it is allowing for component-level resetting of styles. Sometimes it's far easier to start from scratch with styling rather than\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13710"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13710"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13710\/revisions"}],"predecessor-version":[{"id":13711,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13710\/revisions\/13711"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13706"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13710"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}