Notes:
Reset Reasoning
What browser inconsistencies bothered developers enough to create this?
- some browsers indent unordered and ordered lists with left margins, whereas others use left padding.
- headings have slightly different top and button margins
- default line height varies from one brower to another
What to notice: The original problem CSS resets solved.
- all browsers have presentation defaults, but no browsers have the same defaults.
- spend less time fighting with browser defaults.
Modern CSS
What to notice: What changed between 2007 and now?
- These days, browsers don't have massive discrepancies when it comes to layout or spacing. By and large, browsers implement the CSS specification faithfully, and things behave as you'd expect. So it isn't as necessary anymore
- CSS resets were once used as a way to bridge the gap between browser presets, since browsers have all sort of become the same, CSS resets are now used to develop a consistent look and feel between websites, not browsers.
Why does Josh modify or reject parts of Meyer's approach?
- He modifies Meyers approach because Meyers was developed over a decade ago and the web has changed a lot since then.
- As well as, the fact that Josh likes certain elements and doesn't believe it's necessary to strip away all of the browser defaults.
Killer Collection
The variety of approaches (aggressive resets vs. gentle normalization)
- Gentle reset that is commonly used:
* {
padding: 0;
margin: 0;
}
Prominent Features:
- Uses universal selector to reset the padding and margins on all elements to zero.
- Could add, border and font styles and it would still be a minimalist CSS reset.
Aggressive Resets
- The Tripoli Reset - Which neutralizes browser-default CSS styles, and rebuilds the browser defaults entirely.
Prominent Features:
- white-space in all code tags
- disabling of the < hr > element
- all text reset such that 1em equals 10px
- disabling of the < font > tag and other deprecated elements
Questions:
Why reset at all? (What problem does it solve?)
- We use CSS resets to override modern browser defaults such as padding and margin values. It solved the problem of a web designer's design being altered due to multiple browser defaults.
- We also use it to create a more consistent look between all websites.
Why Josh's version over Eric's?
- Using Josh’s version over Erics is beneficial because Erics does an entire CSS overhaul and basically resets any browser setting to 0, Josh brings attention to the fact that designers can actually use certain default settings, creating less work for the designer.
- Also, it has been almost 20 years since Eric Developed his CSS reset, Josh’s is new and modern and since technology has advanced in the last two decades, that makes Erics outdated and it possibly has rules for things that are no longer needed. Long story short, Erics is too big and heavy, while Josh’s is modern and light.
- Finally, Eric’s approach to accessibility is menial, whereas Josh’s has built in features for accessibility because in the last 20 years, web accessibility has developed.
How do you actually use these? (Link tag? Import? Inline?)
- You use CSS resets by placing them at the top of your CSS or you can import a stylesheet and link it to your html along with your styles.css sheet that you would normally link.
What's a CSS boilerplate? (vs. a reset)
- A reset is a blank slate, you as the designer must style every element of the web page, whereas a boilerplate is a CSS reset that makes your work compatible for most browsers but also leaves room for you to style typography and other design elements, instead of making them default to 0.
Why use a boilerplate? (When does it help/hurt?)
- We would use a boilerplate before we have done any of our own CSS and add to it. It helps if you are starting from scratch, but adding a boilerplate after you've designed your page already could cause discrepancies and conflicting styles. Also, a boilerplate could hurt your design if you have something super customized to you because it is a standard design, and doesn't leave much room for creativity… unless added.
Why is Normalize.css different from resets? (Philosophy shift)
- Resets have the philosophy “create a blank slate” whereas Normalize.css has the philosophy of “keep the useful stuff, fix anything that isn't consistent.” So, using normalize is more functional and leaves less work for the designer to do.
Sources: