New Browsers


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

New Browsers

  1. 1. 06/08/09 HUGE / ParentsConnect / HUGE 45 Main Street, 2nd Floor NY NY 11201 718.625.4843 New Browsers ie8 March 10th, 2009
  2. 2. ie8 <ul><li>“ Internet Explorer 8 is planned to be a fully CSS Level 2.1-compliant browser, and will support some features of CSS 3. ” </li></ul>HUGE / New Browsers
  3. 3. ie6 - Acid 2 test HUGE / New Browsers
  4. 4. ie7 - Acid 2 test HUGE / New Browsers
  5. 5. ie8 - Acid 2 test HUGE / New Browsers
  6. 6. ie6 CSS hack <ul><li>_width </li></ul>HUGE / New Browsers
  7. 7. ie6 + ie7 CSS hack HUGE / New Browsers *width
  8. 8. ie8 - Conditional Comments? <ul><li><!--[if IE 8]> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>/**/ </li></ul><ul><li></style> </li></ul><ul><li><![endif]--> </li></ul>HUGE / New Browsers
  9. 9. ie8 - CSS Fixes and Changes <ul><li>Floats (fixed issues) </li></ul><ul><ul><li>Cleared elements don't clear other nested floats when they don't share a parent </li></ul></ul><ul><ul><li>Cleared elements after floats have doubled top padding </li></ul></ul><ul><li>Margin collapsing </li></ul><ul><ul><li>W3C CSS 2.1 compliance </li></ul></ul><ul><li>Table Layouts </li></ul><ul><ul><li>It is now possible to apply table-style formatting to non-table elements using the display attribute </li></ul></ul>HUGE / New Browsers
  10. 10. ie8 - hasLayout <ul><li>“ The hasLayout functionality has been removed in Internet Explorer 8.” </li></ul>HUGE / New Browsers
  11. 11. ie8 - CSS Vendor Extensions <ul><li>“… partial implementations of properties that are fully defined in the CSS specifications...” </li></ul><ul><li>-ms-filter </li></ul><ul><li>-ms-background-position-x </li></ul><ul><li>-ms-background-position-y </li></ul><ul><li>-ms-text-underline-position </li></ul><ul><li>-ms-zoom </li></ul><ul><li>… </li></ul>HUGE / New Browsers
  12. 12. ie8 - CSS {opacity:} <ul><li>opacity{ </li></ul><ul><li>-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; </li></ul><ul><li>filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); </li></ul><ul><li>-khtml-opacity: 0.5; /* old Safari */ </li></ul><ul><li>-moz-opacity: 0.5; </li></ul><ul><li>opacity: 0.5; </li></ul><ul><li>*zoom:1; </li></ul><ul><li>} </li></ul><ul><li>“… you need to include the updated syntax first before the older syntax in order for the filter to work properly in Compatibility View…” </li></ul>HUGE / New Browsers
  13. 13. ie8 - CSS :active and :hover <ul><li>“ An element in a hovered (mouseover) or active (mousedown) state.” </li></ul><ul><li>The :active and :hover pseudo-class now applies to all elements. </li></ul><ul><li>* both were not working in IE6, only hover was working in IE7 </li></ul>HUGE / New Browsers
  14. 14. ie8 - CSS :before and :after <ul><li>p:before { </li></ul><ul><li>padding-right: 5px; </li></ul><ul><li>content: url(logo.gif); </li></ul><ul><li>} </li></ul><ul><li>p:after { </li></ul><ul><li>font-style: italic; </li></ul><ul><li>content: &quot; and some text after.&quot;; </li></ul><ul><li>} </li></ul>HUGE / New Browsers <p>Generated paragraph.</p>
  15. 15. ie8 - CSS {content:} <ul><li>table td:before { content: attr(title) &quot; - &quot;; } </li></ul><ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td title=&quot;Title 1&quot;>item</td> </li></ul><ul><li><td title=&quot;Title 2&quot;>item</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td title=&quot;Title 3&quot;>item</td> </li></ul><ul><li><td title=&quot;Title 4&quot;>item</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>HUGE / New Browsers
  16. 16. ie8 - CSS {content:} <ul><li>table { counter-reset:item; } </li></ul><ul><li>table td:before { content: counter(item) &quot;. &quot;; counter-increment: item; } </li></ul><ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td>item</td> </li></ul><ul><li><td>item</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>item</td> </li></ul><ul><li><td>item</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>HUGE / New Browsers
  17. 17. ie8 - CSS {content:} <ul><li>none </li></ul><ul><li>counter </li></ul><ul><li>attr() </li></ul><ul><li>string </li></ul><ul><li>url </li></ul><ul><li>multi </li></ul><ul><ul><li>{content: ”test ” counter(test) “ ” url(logo.gif) “.” } </li></ul></ul>HUGE / New Browsers
  18. 18. ie8 - CSS “clearfix” <ul><li>It’s working! </li></ul>HUGE / New Browsers
  19. 19. ie8 - CSS {position:} <ul><li>static normal flow of the page, ignores top, left, bottom, right declarations. </li></ul><ul><li>relative normal flow of the page, offset by the amount the top, left, bottom, right declarations. A relatively positioned element serves as a containing block (useful for its children). </li></ul><ul><li>absolute taken out of the normal flow of the page and positioned at the desired coordinates relative to its containing block. </li></ul><ul><li>fixed taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. </li></ul>HUGE / New Browsers
  20. 20. ie8 - CSS {outline:} <ul><li>“ Enables elements to be highlighted without affecting their size.” </li></ul><ul><li>div {outline: red solid thin} </li></ul>HUGE / New Browsers
  21. 21. ie8 - CSS Expressions <ul><li>expression(document.body. </li></ul><ul><li>clientWidth/2-oDiv.offsetWidth/2); </li></ul><ul><li>CSS Expressions are </li></ul><ul><li>not supported in IE8 mode. </li></ul>HUGE / New Browsers
  22. 22. ie8 - Compability View HUGE / New Browsers
  23. 23. ie8 - Compability View <ul><li>render as IE8 </li></ul><ul><li><meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot; IE=8 &quot; /> </li></ul><ul><li>render as IE7 </li></ul><ul><li><meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot; IE=7 &quot; /> </li></ul><ul><li>Public sites will display in IE8 Mode, intranet sites will display in IE7 Mode </li></ul><ul><li>Compatibility View is domain specific </li></ul><ul><li>Happens on the fly without a browser restart </li></ul>HUGE / New Browsers
  24. 24. ie8 - Accelerators HUGE / New Browsers
  25. 25. ie8 - Accelerators <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li><openServiceDescription xmlns= > </li></ul><ul><li><homepageUrl></homepageUrl> </li></ul><ul><li><display> </li></ul><ul><li><name>The Pirate Bay</name> </li></ul><ul><li><icon></icon> </li></ul><ul><li></display> </li></ul><ul><li><activity category=&quot;search&quot;> </li></ul><ul><li><activityAction context=&quot;selection&quot;> </li></ul><ul><li><execute action=&quot;{ selection }/&quot;></execute> </li></ul><ul><li></activityAction> </li></ul><ul><li></activity> </li></ul><ul><li></openServiceDescription> </li></ul><ul><li>javascript:window.external.addService(’tpb.xml'); </li></ul>HUGE / New Browsers
  26. 26. ie8 - Developer Tools <ul><li>New view source </li></ul><ul><li>Code search </li></ul><ul><li>Save edited code </li></ul><ul><li>Browser mode x Document mode </li></ul><ul><li>Javascript debug and console object </li></ul>HUGE / New Browsers
  27. 27. ie8 - Developer Tools HUGE / New Browsers
  28. 28. ie8 - Console <ul><li>console.log(”Number of %d columns”,count); </li></ul><ul><li>writes a message to the console. </li></ul><ul><li>“”); message with the visual &quot;info&quot; icon </li></ul><ul><li>console.warn(“”); message with the visual &quot;warning” </li></ul><ul><li>console.error(“”); message with the visual ”error” </li></ul><ul><li>console.clear(“”); clear console </li></ul><ul><li>Not implemented ( </li></ul><ul><li>console.debug(“”); </li></ul><ul><li>message with a link to the line where it was called </li></ul><ul><li>console.time(name); and console.timeEnd(name); </li></ul><ul><li>console.dir(object); </li></ul><ul><li>prints interactive listing of all properties of the object. </li></ul>HUGE / New Browsers
  29. 29. ie8 - Search <ul><li>IE8 supports the OpenSearch description format for search plugins (apparently it is not a new feature, IE7 and FF2 support it too) </li></ul><ul><li>OpenSearch was created by, an company </li></ul><ul><li>Helps search engines and search clients communicate by introducing a common set of formats to perform search requests and syndicate search results </li></ul><ul><li>Describes the search interface </li></ul>HUGE / New Browsers
  30. 30. ie8 - Search HUGE / New Browsers
  31. 31. ie8 - Search <ul><li>opensearch.xml </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li><OpenSearchDescription xmlns=&quot;;> </li></ul><ul><li><ShortName>example Search</ShortName> </li></ul><ul><li><Url type=&quot;text/html&quot; template=“results.aspx?q={searchTerms}&quot; /> </li></ul><ul><li><Url type=&quot;application/x-suggestions+xml&quot; template=“suggestions.xml&quot;/> </li></ul><ul><li><Image height=&quot;16&quot; width=&quot;16&quot; type=&quot;image/icon”>favicon.ico</Image> </li></ul><ul><li></OpenSearchDescription> </li></ul><ul><li><link rel=&quot;search&quot; type=&quot;application/opensearchdescription+xml&quot; href=”opensearch.xml&quot; title=”Site Search&quot; /> </li></ul><ul><li>javascript:window.external.AddSearchProvider('/opensearch.xml') </li></ul>HUGE / New Browsers
  32. 32. ie8 - Web Slices <ul><li>“ A Web Slice is a section of a webpage that is treated like a subscribable item, just like a feed. To enable a Web Slice on your website, annotate your webpage with class names for the title, description, and other subscribable properties.” </li></ul><ul><li><div class=&quot; hslice &quot; id=” hslice-id &quot;> </li></ul><ul><li><p class=&quot; entry-title &quot;>Title</p> </li></ul><ul><li><div class=&quot; entry-content &quot;> </li></ul><ul><li>Lorem ipsum </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul><ul><li>*combination of the hAtom Microformat and Web Slice format </li></ul>HUGE / New Browsers
  33. 33. ie8 - AJAX Development <ul><li>AJAX navigation </li></ul><ul><li>window.location.hash onChange event </li></ul><ul><li>DOM storage </li></ul><ul><li>Connectivity events </li></ul><ul><li>Allow websites to check whether a user is connected to the network </li></ul><ul><li>Six connections per host (instead of 2) </li></ul><ul><li>Increased parallelism in AJAX scenarios </li></ul><ul><li>XMLHTTPRequest enhancements </li></ul><ul><li>Include a time-out property that can be set to cancel the request if necessary </li></ul><ul><li>Cross-domain request (XDR) </li></ul><ul><li>Cross-document messaging (XDM) </li></ul><ul><li>Sanitize HTML </li></ul><ul><li>Remove event attributes and script from user input </li></ul>HUGE / New Browsers
  34. 34. ie8 - Cross-domain request <ul><li>var xdr = new XDomainRequest (); </li></ul><ul><li>;POST&quot;, &quot;;); </li></ul><ul><li>xdr.send(null); </li></ul><ul><li>header('Access-Control-Allow-Origin: *'); </li></ul>HUGE / New Browsers
  35. 35. ie8 - Cross-document messaging <ul><li>var iframe = document.getElementById(’iframe'); </li></ul><ul><li>iframe . contentWindow.postMessage ('Hello iFrame',''); </li></ul><ul><li>window.attachEvent(' onmessage ',function(e) { </li></ul><ul><li>alert(“Hi”); </li></ul><ul><li>// var data =; </li></ul><ul><li>}); </li></ul>HUGE / New Browsers
  36. 36. ie8 - Native JSON support <ul><li>var testObj = new Object(); </li></ul><ul><li>testObj.numVal = 4; </li></ul><ul><li>testObj.strVal = &quot;fool&quot;; </li></ul><ul><li>testObj.arrVal = new Array(1,2,&quot;test&quot;); </li></ul><ul><li>testObj.boolVal = true; </li></ul><ul><li>// Convert the object to a string </li></ul><ul><li>var stringifiedValue = JSON.stringify(testObj) ; </li></ul><ul><li>// Create a new object from the string </li></ul><ul><li>var parsedValue = JSON.parse(stringifiedValue); </li></ul><ul><li>*fast and secure </li></ul>HUGE / New Browsers
  37. 37. ie8 - DOM Native Searching <ul><li>var objs = document.querySelectorAll('h3, p, ul, code'); </li></ul><ul><li>for (var i = 0; i < objs.length; i++) { </li></ul><ul><li>objs [i].style.display = 'none'; </li></ul><ul><li>} </li></ul><ul><li>Test your browser: </li></ul><ul><li> </li></ul>HUGE / New Browsers
  38. 38. ie8 - Data URI HUGE / New Browsers Embed small external resources (like CSS files or images) directly into a URL on a webpage: <img alt=&quot;Image fed from data url&quot; src=&quot;data:image/png;base64,iVBORw0KGgoAAA...&quot; /> * binary file can be represented inline as a string
  39. 39. ie8 - W3C's ARIA Support <ul><li>ARIA stands for Accessible Rich Internet Applications </li></ul><ul><li>Enables people with disabilities to access dynamic web content </li></ul><ul><li>IE8 uses ARIA role, state, and property information to communicate with assistive technologies </li></ul><ul><li>Example: </li></ul><ul><li> </li></ul><ul><li>FF addon: </li></ul>HUGE / New Browsers
  40. 40. Links <ul><li>IE8 Blog </li></ul><ul><li>( ) </li></ul><ul><li>CSS Improvements in IE8 </li></ul><ul><li>( ) </li></ul><ul><li>QuirksMode </li></ul><ul><li>( ) </li></ul><ul><li>IE8 Readiness Toolkit </li></ul><ul><li>( ) </li></ul><ul><li>OpenSearch </li></ul><ul><li>( ) </li></ul><ul><li>IE8 Getting Started with IE8 Visual Search </li></ul><ul><li>( ) </li></ul><ul><li>Ajaxian </li></ul><ul><li>( ) </li></ul><ul><li>Cross-Origin Resource Sharing </li></ul><ul><li>( ) </li></ul><ul><li>Cross-document messaging </li></ul><ul><li>( ) </li></ul>HUGE / New Browsers