{"id":196202,"date":"2015-02-18T09:43:03","date_gmt":"2015-02-18T16:43:03","guid":{"rendered":"http:\/\/css-tricks.com\/?p=196202"},"modified":"2015-02-18T09:43:03","modified_gmt":"2015-02-18T16:43:03","slug":"accidental-css-resets","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/accidental-css-resets\/","title":{"rendered":"Accidental CSS Resets"},"content":{"rendered":"

Any time you use a shorthand property in CSS, you set all<\/em> the values for all the properties it deals with. It’s not a bug, it’s just how CSS works. I’ve seen it confuse people plenty of times. Let’s shine a light on the issue to hopefully make it more understood.<\/p>\n

<\/p>\n

Here’s an example:<\/p>\n

.module {\r\n  background-repeat: no-repeat;\r\n  background: url(lion.jpg);\r\n  \/* Oops! This will repeat. *\/\r\n}<\/code><\/pre>\n
The shorthand CSS background<\/a> property overrides all the sup properties. The default value for background-repeat is repeat, so by not declaring it in the shorthand, it gets set to that default value.<\/p>\n
It works that way for every single one of the background sub properties:<\/p>\n
.module {\r\n  \/* This will get set to `repeat` *\/\r\n  background-repeat: no-repeat;\r\n\r\n  \/* This will get set to `0 0` *\/\r\n  background-position: top right;\r\n\r\n  \/* This will get set to `auto auto` *\/\r\n  background-size: 100px;\r\n\r\n  \/* This will get set to `scroll` *\/\r\n  background-attachment: fixed;\r\n\r\n  \/* This will get set to `border-box` *\/\r\n  background-origin: content-box;\r\n\r\n  \/* This will get set to `border-box` *\/\r\n  background-clip: padding-box;\r\n\r\n  \/* This will get set to `transparent` *\/\r\n  background-color: red;\r\n\r\n  \/* This will get overridden *\/\r\n  background-image: url(cool.png);\r\n\r\n  \/* OVERRIDE *\/\r\n  background: url(lion.jpg);\r\n}<\/code><\/pre>\n
This is the case with box model (and related) stuff, like:<\/p>\n
.module {\r\n  margin-right: 20px;\r\n  margin: 10px;\r\n  \/* margin-right will be 10px now *\/\r\n\r\n  padding-top: 30px;\r\n  padding: 10px;\r\n  \/* padding-top will be 10px now *\/\r\n\r\n  border-left: 1px;\r\n  border: 0;\r\n  \/* border-left will be removed *\/\r\n}<\/code><\/pre>\n
Fonts is another situation where you can accidentally reset yourself:<\/p>\n
p {\r\n  \/* Will get reset to what is set in shorthand (required) *\/\r\n  font-family: Sans-Serif;\r\n\r\n  \/* Will get reset to what is set in shorthand (required) *\/\r\n  font-size: 24px;\r\n  \r\n  \/* Will get reset to `normal` *\/\r\n  line-height: 2;\r\n\r\n  \/* Will get reset to `normal` *\/\r\n  font-style: italic;\r\n\r\n  \/* will get reset to `normal` *\/\r\n  font-weight: bold;\r\n\r\n  \/* will get reset to `normal` *\/\r\n  font-variant: small-caps;\r\n\r\n  \/* OVERRIDE *\/\r\n  font: 16px Serif;\r\n}<\/code><\/pre>\n
Note that the shorthand requires at least the font-family and font-size to work.<\/p>\n
Lists are yet another:<\/p>\n
ul {\r\n  \/* Will get reset to what is set in shorthand *\/\r\n  list-style-type: square;\r\n \r\n  \/* Will get reset to `outside` *\/\r\n  list-style-position: inside;\r\n\r\n  \/* Will get reset to `none` *\/\r\n  list-style-image: url(cooldot.png);\r\n\r\n  \/* OVERRIDE *\/\r\n  list-style: disc;\r\n}<\/code><\/pre>\n
The flex property as part of flexbox layout is also shorthand:<\/p>\n
.flex >  span {\r\n  \/* Will be reset to `auto` (or `main-size` if supported) *\/\r\n  flex-basis: 150px;\r\n\r\n  \/* Will be reset to `1` *\/\r\n  flex-grow: 0;\r\n\r\n  \/* Will be reset to `1` *\/\r\n  flex-shrink: 0;\r\n\r\n  \/* OVERRIDE *\/\r\n  flex: auto;\r\n}<\/code><\/pre>\n
This is an unusual one though, as rather than the shorthand resetting things you might not want reset, it resets them in ways you probably do want reset and might not even know it. Fantasai<\/a>:<\/p>\n
We (the Flexbox spec editors) strongly recommend not using the longhands of ‘flex’ unless you really, really want to cascade in flex settings from some other style rule, so I’d suggest somehow discouraging the use of ‘flex-grow\/shrink\/basis’ here (or, preferably, leaving it out\/in an advanced section). The shorthand resets things in appropriate ways, and will therefore result in fewer cascading errors. Please use the shorthand!<\/p><\/blockquote>\n
\n
Here’s a Pen<\/a> with some of this stuff in real code.<\/p>\n","protected":false},"excerpt":{"rendered":"
Any time you use a shorthand property in CSS, you set all the values for all the properties it deals with. It’s not a bug, it’s just how CSS works. I’ve seen it confuse people plenty of times. Let’s shine a light on the issue to hopefully make it more understood.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":365383,"url":"https:\/\/css-tricks.com\/cool-hover-effects-using-background-properties\/","url_meta":{"origin":196202,"position":0},"title":"Cool Hover Effects That Use Background Properties","date":"April 27, 2022","format":false,"excerpt":"A while ago, Geoff wrote an article about a cool hover effect. The effect relies on a combination of CSS pseudo-elements, transforms, and transitions. A lot of comments have shown that the same effect can be done using background properties. Geoff mentioned that was his initial thought and that\u2019s what\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/button-hover.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363619,"url":"https:\/\/css-tricks.com\/when-to-avoid-css-text-decoration-shorthand\/","url_meta":{"origin":196202,"position":1},"title":"When to Avoid the text-decoration Shorthand Property","date":"February 25, 2022","format":false,"excerpt":"In my recent article about CSS underline bugs in Chrome, I discussed text-decoration-thickness and text-underline-offset, two relatively new and widely-supported CSS properties that give us more control over the styling of underlines. Let me demonstrate the usefulness of text-decoration-thickness on a simple example. The Ubuntu web font has a fairly\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/text-decoration-none-devtools.png?fit=1098%2C534&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":288712,"url":"https:\/\/css-tricks.com\/managing-multiple-backgrounds-with-custom-properties\/","url_meta":{"origin":196202,"position":2},"title":"Managing Multiple Backgrounds with Custom Properties","date":"July 15, 2019","format":false,"excerpt":"One cool thing about CSS custom properties is that they can be a part of a value. Let's say you're using multiple backgrounds to pull off a design. Each background will have its own color, image, repeat, position, etc. It can be verbose! You have four images: body { background-position:\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/multiple-bgs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":6883,"url":"https:\/\/css-tricks.com\/understanding-border-image\/","url_meta":{"origin":196202,"position":3},"title":"Understanding\u00a0border-image","date":"July 21, 2010","format":false,"excerpt":"The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that's your thing) with a single div and a single image. In this article, I explain how the border-image shorthand property works in today's browsers.\u2026","rel":"","context":"In "Advanced"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/07\/borderimagecss.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":254179,"url":"https:\/\/css-tricks.com\/now-css-custom-properties-thing-value-parts-can-changed-individually\/","url_meta":{"origin":196202,"position":4},"title":"Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually","date":"April 25, 2017","format":false,"excerpt":"CSS Custom Properties give us the ability to reach into a property value and change certain parts of it. That's useful in a bunch of places, but in particular, it's useful in properties which don't allow us to do it any other way.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16302,"url":"https:\/\/css-tricks.com\/things-it-might-be-funuseful-to-try-the-universal-selector-on\/","url_meta":{"origin":196202,"position":5},"title":"Things It Might Be Fun\/Useful to Try the Universal (*) Selector On","date":"February 15, 2012","format":false,"excerpt":"What CSS properties might it make sense to apply to every single element on the page? We'll take a look at some that may (or may not) be a good idea.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/196202"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"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=196202"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/196202\/revisions"}],"predecessor-version":[{"id":196227,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/196202\/revisions\/196227"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=196202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=196202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=196202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}