Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialrobinbehroozi
15,912 PointsWhat does the value 'initial' mean?
Hey…
I came across this code in one of the videos. It's a media query that changes the values back to initial whenever the screen is 768 px or less. Here's the code…
/* @media screen and (max-width:768px){ .main-wrapper,.main-nav li, .main-logo{ width:initial; height:initial; float:initial; }
}
I just don't understand what initial is…what is it changing the values back to?
Any help would be great. Thanks.
4 Answers
George Cristian Manea
30,787 PointsThe initial keyword is used to set a CSS property to its default value. In width and height initial is the same thing as auto, the browser will set the width and height, in for float it will become float:none;
Adam Moore
21,956 PointsThe word "initial" is used to set the element back to its default value. Whatever value happens to be the default value for a given element's attribute, "initial" will set the attribute back to that default, or "initial", value. For instance, <div>
elements have a default display
value of block
. So if you set it to display: inline-block
, but then need it to revert back to its default in, say, a media query, you can set the display
value to initial
, and it'll put it back to its default setting, or the "initial" setting that I had as the default.
Jovanny Elias
16,204 PointsIt resets the value of to its default browser value. This way with media queries you can start fresh basically and have everything back to normal making it easier for you to style it the way you want.
Take a look at this site showing you what it does it has an example.
Jason Anello
Courses Plus Student 94,610 PointsThe initial value that it is set back to is the initial value in the css specification and not the browser default value in its style sheet.
Here's a property table for css2 which shows, among other things, the initial value for each property. http://www.w3.org/TR/CSS2/propidx.html
So when you use the initial
keyword it's supposed to set it back to what you see in the "initial value" column. This doesn't match up entirely with browser defaults.
For instance, if you use display: initial
then it's going to set it back to inline
regardless of which element you use it on. So a div
will be set back to inline
even though it's browser default is block
.
Also, the initial
keyword is not supported in IE. So using this keyword may cause broken layouts for you in IE.
Adam Moore
21,956 PointsHmm, apparently I was a little off. Thanks, Jason! I seem to learn something new from you everyday! And thanks for the reference to w3.org!
Kevin Murphy
24,380 PointsJason - Thanks for the concise explanation and the link! A lot of confusion out there on what "default" actually means. And I could not find a table via google that listed the initial values anywhere. Next time I'll start with the W3 and the forum. Thanks again.