Web Foundations

1. Web Foundations Monday, October 21, 2013 LECTURE 15: Reset, Normalize, Modernizer, Boilerplate, and Assorted tips & Tricks

2. Reset Style Sheet

3. Reset Style Sheet Resetting your styles, commonly referred to as CSS Reset or Reset CSS is the process of resetting (or more accurately – setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser. CSS Reset Avoids Browser Inconsistencies For example, say you use an anchor tag <a> in your HTML document. Usually, browsers like Internet Explorer and Firefox will render it as blue and underlined. But a year from now, someone decides to release a new browser (let’s call it UltraBrowser) and they decide that they don’t like blue, underlined links – so instead they set the default style of <a> tags to red and boldfaced. If you always set a baseline value for your <a> elements, then you’re guaranteed that it will always be the same, regardless of what UltraBrowser thinks <a> elements should look like. • Reset Links • 5 Popular Reset Scripts

4. Reset Style Sheet A Simple Example Example 1: How paragraph tags are rendered by default. In this example, I’ve placed three unstyled paragraphs <p> inside a container <div> (I gave the container div a blue background and orange border to highlight the difference).

5. Reset Style Sheet Rendered in Firefox Rendered in Internet Explorer By default, in Firefox, you’ll see that there’s a space in between the top of the first paragraph and the top of the container div, and a space between the bottom of the last paragraph and the bottom of the container div. By default, these spaces don’t exist in Internet Explorer. So which browser is right, Firefox or IE? It doesn’t matter. What does matter is that the spacing in between your paragraphs and other elements will look dissimilar if you don’t set a style for a paragraph’s margin and padding. Of course that’s a rather simplified example. In practice, CSS Reset is important in removing inconsistent margins, paddings, line-heights, and other attributes that can cause your web pages to look differently across various browsers. So that’s the basic theory of resetting your styles which just means you set your style rules for all elements to avoid having the browser do it for you. Further down, we’ll talk about it in practice, but first a little bit of history on how CSS Reset became a standard practice for modern web developers.

6. Reset Style Sheet A Reset to Where It All Started… The concept of CSS Reset was first discussed formally way back when dinosaurs still roamed the internet (2004 to be exact) by Andrew Krespanis. In his article, he suggests using the universal selector (*) at the beginning of your CSS file to select all elements and give them 0 values for margin and padding, like so: * { margin: 0; padding: 0; } Applying the universal selector margin/padding reset to our earlier example, we now remove all inconsistent spacing between all browsers (in other words, we don’t make the browsers think for us, we show them who’s boss).

7. Reset Style Sheet Example 2: Applying the Universal Selector margin/padding Reset But now we don’t have any spacing in between paragraphs, so somewhere below our universal selector reset, we’ll declare the way we want our paragraphs to look like. You can do it a number of ways – you can put margins (or padding) at the beginning or top of your paragraphs, or both. You can use ems as your units or pixels or percentages. What’s important is that we choose the way the browser will render it. For our example, I chose to add margins (instead of padding) both at the top of the paragraphs and at the bottom – but that’s my choice, you may want to do it differently. Here’s what I used: * { margin:0; padding:0; } p { margin:5px 0 10px 0; }

8. Reset Style Sheet Note: The example I used for discussion is a simplified example. If you only used paragraphs for your web pages and no other elements, you wouldn’t want to reset your margins to 0 using the universal selector only to declare a style rule right after it for your paragraph. We’ll discuss this more fully along with other best practices later on. Shortly thereafter – CSS guru Eric Meyer further built on the concept of resetting margins and paddings. In Eric Meyer’s exploration, he not only resets margins and padding, but also other attributes like line-heights, font styles, and list styles (some browsers use different bullets for unordered list items).

9. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } Reset Style Sheet After many iterations and refinements, we come to a wonderful solution called CSS Reset, which not only makes this CSS reset method more accurate than the universal selector method by using higher specificity by naming all possible HTML tags (because the universal selector fails to apply the reset to all HTML tags), but also sets default values for troublesome elements like tables (in which the border-collapse attribute isn’t rendered consistently across browsers). Of course, there are other methods of resetting your CSS (such as Yahoo!’s YUI Reset CSS), and you can roll your own based on your preference and project needs. Now let’s go through some tips and best practices when applying a CSS Reset solution to your own projects.

10. Applying the Reset Style Sheet Tips and Best Practices 1. Start by deciding exactly how you’ll reset your styles Above, I’ve shown you the two extremes of CSS Reset. From a sweet and simple method using the universal selector to a more involved and complex method with Eric Meyer’s CSS Reset. I also briefly mentioned the YUI Reset CSS which you can use directly off the YDN so that you don’t have to serve it, saving you some server resources when your web pages are requested. You can also "roll your own" and tailor it to your specific needs. There’s no pre-defined step-by-step method for determining the right way of resetting your styles; the important part is that it works to compliment your own development style and principles.

11. Applying the Reset Style Sheet Tips and Best Practices 2. Your CSS Reset has to be the first thing the browser sees (duh). Resetting your styles after declaring a style rule for an element will mess you up. You’ll scratch your head wondering why the margins you declared for .some-class isn’t working. Therefore it’s essential that the first thing the browser sees is your CSS Reset. Note: In case you fall into the “people-prone-to-this-common-mistake” category, here’s the reason why it has to be at the very top of your CSS documents: CSS works on a top-down hierarchy with rules lower down the CSS document taking precedence if there’s a conflicting/redundant style rule declaration.

12. Applying the Reset Style Sheet Tips and Best Practices 3. Have a separate CSS document for your CSS Reset I have to mention this tip because it’s common practice and one that many people advocate. Depending on the size and type of site, I’m sometimes in the One Big CSS Filecamp for page performance reasons, but a common practice is to have a separate CSS document (named something like reset.css) that you can reuse throughout your projects. This helps you keep your style rules organized and modular, but more importantly, it makes it easier to change and tweak your CSS Reset without having to go back to your old projects and updating it.

13. Applying the Reset Style Sheet Tips and Best Practices 4. Avoid using the universal selector reset (the * wildcard) The universal selector reset (using the * wildcard) is the first true conception of resetting your styles, but it has many shortcomings and browser inconsistencies (which is what we’re trying to get rid of in the first place) that make it a poor choice. Surprise-surprise, but IE doesn’t apply and support it as intended; it doesn’t cover all your bases and you should only use it for simple, short, static, and predictable web pages (if you really have to use it). This tip especially holds true when you distribute a “one-size-fits-all” solution like a content management system theme which will be used and hacked in unpredictable ways. Using a solid foundation at the get-go – an extensive CSS Reset method – ensures that you’re truly resetting your styles and it’s worth the added bytes in your CSS document.

14. Normalize Style Sheet

15. Normalize vs. Reset Style Sheets • Normalize.css preserves useful defaults rather than "unstyling" everything. For example, elements like sup or sub "just work" after including normalize.css (and are actually made more robust) whereas they are visually indistinguishable from normal text after including reset.css. So, normalize.css does not impose a visual starting point upon you. This may not be to everyone's taste. The best thing to do is experiment with both and see which gels with your preferences. • Normalize.css corrects some common bugs that are out of scope for reset.css. It has a wider scope than reset.css, and also provides bug fixes for common problems like: display settings for HTML5 elements, the lack of font inheritance by form elements, correcting font-size rendering for pre, SVG overflow in IE9, and the button styling bug in iOS. • Normalize.css is more modular. The project is broken down into relatively independent sections, making it easy for you to potentially remove sections (like the form normalizations) if you know they will never be needed by your website. • Normalize.css has better documentation. The normalize.css code is documented inline as well as more comprehensively in the GitHub Wiki. This means you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests. The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements.

16. Normalize Style Sheet What you may not already know is that most, if not ALL web browsers come pre-packaged with default styles built in. That’s right, without you even lifting a finger, web browsers will apply default styles to your web pages and the kick in the teeth for us web designers is that they’re not all the same! With these pre-defined styles already in place, I found that I was creating elements on my web pages that were inheriting default styles and therefore, were not as I’d intended. So, I developed my own stylesheet which I would always use as a starting point for any new project and it served me very well indeed. Years later, I realized it had been done before and it had been done a lot better at that! Now, there are numerous ‘CSS Normalizer’stylesheets that will do the exact job I’ve described. They can really help if you’re struggling to figure out why you’re CSS styles aren’t being consistently rendered in certain browsers. This is the one that I have found the most helpful:necolas.github.com/normalize.cssIt is pretty comprehensive and includes support for HTML 5 tags • Normalize Links • About Normalize • YUI: Using Normalize • YouTube: About Normalize • Github: Normalize.css Download Fun Fact: 90% of Normalize CSS is to keep various versions of IE behaving, imagine how small the file would be without IE ! 

17. Modernizr (JavaScript) A Very Brief Mention…

18. Modernizr JavaScript Library Modernizr is a JavaScript library that detects which HTML5 and CSS3 features your visitor’s browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them. This is called feature detection and is much more efficient than browser sniffing. • Modernizr Links • Modernizer Download • Getting Started with Modernizr • A Modernizr Primer

19. HTML5 Boilerplate

20. HTML5 Boilerplate Even for the most skilled of designer veterans, getting started with a new standard can be a daunting affair, even when a language is designed to make coding easier, such as HTML5. HTML5 Boilerplate helps designers to get started with the new standard by offering a professional front-end template that allows you to create a fast, robust and adaptable site with a set of HTML5-ready features and elements. It was created by Paul Irish and DivyaManian and is an open source project that is perfect for creating cross-browser sites that work with older browsers, while being HTML5 ready. It can be downloaded from the HTML5 Boilerplate website in its full form, or a stripped down version that doesn’t include all of the explanatory documentation. For those of you that are confident you can work with it fully, there’s also a customizable option that allows you to choose the elements you need. • HTML5 Boilerplate Links • HTML5 Boilerplate Download • HTML5 Boilerplate Information • HTML5 Boilerplate Documentation • Mashable: HTML5 Boilerplate • Tutsplus:HTML5 Boilerplate Screencast • Sitepoint: Introduction to HTML5 Boilerplate • YouTube: Using HTML5 Boilerplate

21. HTML5 Boilerplate • Core features to be found in HTML5 Boilerplate include all of the necessary elements that you will need to begin, as well as supporting documentation: • HTML • CSS • JavaScript • .htaccess (Apache web server configuration) • Crossdomain.xml • Miscellaneous (ignore file, gitignore and so on) • Modernizr is also included in order to allow you to style the new HTML5 elements in IE and helps with detecting HTML5 or CSS3 features in all browsers, including earlier versions of IE (before v9). • You can also use HTML5 Boilerplate with Initializr (get the demo page here), which generates templates based on Boilerplate that allow you to choose the elements you want and those you don’t. With this, you also have the option of using a responsive template from the outset, rather than starting with a blank page.

22. Tips & Tricks

23. Tips & Tricks • HTML5 & CSS3 Readiness Chart • Can I Use … ? • Initializer • Front End Tools for Workflow • The ToolBox • HTML/CSS Frameworks • Blueprint • Bluetrip • Elements • Malo • CSS Tips & Tricks • CSS3.me Generator • CSS3Generator • LayerStyles • Gradient Editor • Arrow Please • Create CSS3 • CSS Values Assorted Tips & Tricks http://www.pinterest.com/pibbydotcom/html5-css3-tips-and-tricks/