Pubcon Las Vegas 2012 CSS and HTML coding
•Download as PPT, PDF•
0 likes•628 views
The panel of four discussed modern CSS and HTML techniques. Todd discussed HTML5 and JavaScript in detail, specifically in regards to browser feature detection rather than browser detection, how to start using HTML5 immediately today and the benefits associated with this type of setup, particularly mobile phones and tablets as well as the traditional computer display.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Pubcon Las Vegas 2012 CSS and HTML coding
Similar to Pubcon Las Vegas 2012 CSS and HTML coding (20)
Recently uploaded
Recently uploaded (20)
Pubcon Las Vegas 2012 CSS and HTML coding
- 1. Todd Keup :: magnifisites.com HTML5 and JavaScript Todd Keup @toddkeup
- 2. Todd Keup :: magnifisites.com Overview • JavaScript, libraries and frameworks • The arrival of HTML5 and its elements • Browser sniffing vs. feature detection • Polyfills • JavaScript interaction with HTML5
- 3. Todd Keup :: magnifisites.com Which JavaScript Library?
- 4. Todd Keup :: magnifisites.com HTML5 Basic Changes <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Title</title> <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css"> <script type="text/javascript" charset="utf-8" src="jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="jquery-ui.min.js"></script> </head> link cannot have a charset attribute style cannot have a charset attribute script if embedded must not have a charset attribute; if external (src attribute specified) and you choose to include a charset, it must match the Content-Type metadata (<meta charset="utf-8">
- 5. Todd Keup :: magnifisites.com Browser Sniffing
- 6. Todd Keup :: magnifisites.com Feature Detection Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
- 7. Todd Keup :: magnifisites.com Polyfills Filling the hole in the browser where the technology needs to be
- 8. Todd Keup :: magnifisites.com What's it gonna be, boy? Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional loading of external .js and .css resources.
- 9. Todd Keup :: magnifisites.com HTML5 New Feature Example • Web Forms : input placeholder // For older browsers not supporting HTML5 placeholder attribute if (!('placeholder' in document.createElement('input'))) { // Sets an input type text to use for placeholder on password fields $('input[type="password"]').each(function(){ // your handler code here } // additional handler code } • Include this on every form page with placeholder features • Conditional include using Modernizr
- 10. Todd Keup :: magnifisites.com HTML5-placeholder-polyfill <form> <label for="srch">Search: </label> <input placeholder="For What?" type="text" name="srch" id="srch"> </form> <script type="text/javascript" charset="utf-8"> Modernizr.load({ test: Modernizr.input.placeholder, nope: [ '/css/placeholder_polyfill.css', '/js/placeholder_polyfill.jquery.js' ] }); </script>
- 11. Todd Keup :: magnifisites.com Summary • Write JavaScript or use a library? • Start using HTML5 today • Stop browser sniffing • Start feature detecting • Bonus: works with CSS too
- 12. Todd Keup :: magnifisites.com Thank You Todd Keup todd@magnifisites.com @toddkeup
Editor's Notes
- Good Morning! I want to thank Brett Tabke and his organization for all their hard work in putting a conference like this together. Each time I attend I find myself a beneficiary of the knowledge shared at this gathering. Thanks Brett, for the opportunity to not only be here, but to be here once again as a speaker. I would also like to thank my good friend Ralf Schwoebel for volunteering to facilitate this session as well as my esteemed panel of peers. But most of all thank you for being here today. I am honored by your presence and the privilege to share what I am able regarding CSS and HTML coding today. For those of you that are familiar with the WebmasterWorld web site and the forums at WebmasterWorld, I am an active member and one of the moderators of the PHP Server Side Scripting Forum. I go by the nickname “coopster” and I want you to know that I would absolutely love the opportunity to make your personal acquaintance today. I am approachable and friendly. Please don't hesitate to introduce yourself.
- DHMTL (Dynamic HTML) has made a resurgence. JavaScript (JS) has been around for a long time but it gained more popularity in recent years especially after the Web 2.0 and AJAX hype. What is Web 2.0? It's the same old same old. Web 2.0 is DHTML which is simply making dynamic and interactive web pages with HTML, JS, the Document Object Model (DOM), and cascading style sheets (CSS). JS libraries are proof of the resurgence because it was realized that although JS programming in and of itself is not difficult, getting the code to work cross-browser most certainly is! A JS library is a collection of JS methods which allow for easier development of client-side (browser) applications. If you are not a programmer, or even if you are, you may benefit from the development efforts of others. But wait! There are quite a few JS libraries from which to choose! How do you know which one? And how can you use a JavaScript library once you have decided? To coding purists: Yes, you can write your own library. But using a JS library project allows you to continue writing your own library as it is open source code.
- Most of these libraries have this in common – the original programmers have rolled their own code to deal with the quirkiness of cross-browser programming and maintain a centralized library of methods for accomplishing similar tasks, common tasks, that each browser handles differently because of the browser programmers’ interpretation and implementation of the “standards” for rendering documents served with said technology. There are quite a few JS libraries from which you might choose, each different yet quite similar in many ways. There is no “best” library, you’ll need to decide which suits you best. Just do an internet search on jquery versus mootools and you’ll find plenty of reading on the topic. jQuery is quite easy and intuitive and has major support so we’ll use that today. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. From WikiPedia: Frameworks: Some JavaScript libraries, such as YUI, are classified as frameworks since they exhibit full-stack capabilities and properties not found in general JavaScript libraries. A software framework is an abstraction in which software providing generic functionality can be selectively changed by user code, thus providing application specific software
- What's different here? The DOCTYPE declaration has been simplified The meta element has been simplified The link, style and script elements have charset policies With no other changes, you are delivering HTML5! (NOTE: depends on server set up and response headers; ie application/xhtml+xml)
- Years ago web designers began using CSS for layout and style. Browser support for CSS then was marginal, at best, so designers began getting creative with hacks that made their layouts work in all browsers. One hacking technique that became quite popular was browser sniffing. Browser sniffing is detecting which browser and version the user has by looking at JavaScript property values (navigator.userAgent) or by analyzing the HTTP User Agent header request value on the server. Once determined, the developer could apply logic to target different browsers with different instructions. Later on came conditional comments in Internet Explorer which was another alternative (hack) being employed to render pages properly. Modern browsers provide much more support for CSS-based layouts. But now we have CSS3 and HTML5 and the situation is repeating itself—different browsers demonstrate varying levels of support for these new technologies! And we also know that clients don't expect websites to look exactly the same in every browser, pc vs. tablet vs. smartphone. However, wiser developers are no longer employing hacks or using browser sniffing. So how do we deal with this new yet familiar problem?
- We use feature detection. We no longer need to determine what browser and version are being used but rather we determine whether or not it is capable of doing what we ask of it. It is a simple way to test browser capabilities. But doing all these tests manually all the time gets tiresome. And just like maintaining your own JavaScript code as mentioned earlier, the easier way to solve this problem is to use a JavaScript library. Modernizr is the most widely used today. Resources: http://api.jquery.com/jQuery.support/ http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
- What is a Polyfill? According to Remy Sharp: A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will. http://remysharp.com/2010/10/08/what-is-a-polyfill/ Paul Irish defines it as "a shim that mimics a future API providing fallback functionality to older browsers." Example: sessionStorage is available in all the latest browsers (IE8 and upwards) but isn’t in IE7 and below. A polyfill can be used to plug the support for older browsers that don’t provide sessionStorage. Now with the polyfiller in place, as a developer I can rely on using the Web Storage API (for sessions) and not have to feature test in my code or fork to handle different situations. Another example is providing canvas support in IE. This is really where the poly part can be seen. If there’s no native canvas, we can provide canvas support using Silverlight. If Silverlight isn’t available, we can drop down to using VML using excanvas (note that excanvas actually does also include a Silverlight bridge which I’d expect it would try first anyway). Using these two scripts provides the developers with (fairly) solid canvas backup should it not be native in the browser.
- This is a very small, short example but it is a real-world issue. The concept here is the same. As a developer you can write your own code and include that code on every form page delivery. Or, you can use the Modernizr library to check for the new attribute and whether or not the user agent supports the feature.
- You can continue developing your own JavaScript, and your own JavaScript library/framework. This is a personal choice. But if you don't have the time to deal with all the nuances cross-browser you can take advantage of expert developers and contributors. Start using HTML5 today by making just a few simple changes in your pages (hopefully you are using some form of header template!) Finally, the cross-browser support problem is not new, the solution is not new. But the terminology may be new to you (feature detection, modernizr, polyfills, etc.) And you have JavaScript libraries and frameworks at your disposal to save you time and energy to deploy projects and code that utilize the latest, greatest browser features yet can also be available and delivered in non-natively supported browsers (IE6, IE7, etc.)