New Browsers

06/08/09 HUGE / ParentsConnect / HUGE 45 Main Street, 2nd Floor NY NY 11201 718.625.4843 www.hugeinc.com New Browsers ie8 March 10th, 2009

ie8

“ Internet Explorer 8 is planned to be a fully CSS Level 2.1-compliant browser, and will support some features of CSS 3. ”

HUGE / New Browsers

ie6 - Acid 2 test HUGE / New Browsers

ie6 CSS hack

_width

HUGE / New Browsers

ie6 + ie7 CSS hack HUGE / New Browsers *width

ie8 - Conditional Comments?

<!--[if IE 8]>

<style type="text/css">

/**/

</style>

<![endif]-->

HUGE / New Browsers

ie8 - CSS Fixes and Changes

Floats (fixed issues)

Cleared elements don't clear other nested floats when they don't share a parent

Cleared elements after floats have doubled top padding

Margin collapsing

W3C CSS 2.1 compliance

Table Layouts

It is now possible to apply table-style formatting to non-table elements using the display attribute

HUGE / New Browsers

ie8 - hasLayout

“ The hasLayout functionality has been removed in Internet Explorer 8.”

HUGE / New Browsers

ie8 - CSS Vendor Extensions

“… partial implementations of properties that are fully defined in the CSS specifications...”

-ms-filter

-ms-background-position-x

-ms-background-position-y

-ms-text-underline-position

-ms-zoom

…

HUGE / New Browsers

ie8 - CSS {opacity:}

opacity{

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

-khtml-opacity: 0.5; /* old Safari */

-moz-opacity: 0.5;

opacity: 0.5;

*zoom:1;

}

“… you need to include the updated syntax first before the older syntax in order for the filter to work properly in Compatibility View…”

HUGE / New Browsers

ie8 - CSS :active and :hover

“ An element in a hovered (mouseover) or active (mousedown) state.”

The :active and :hover pseudo-class now applies to all elements.

* both were not working in IE6, only hover was working in IE7

HUGE / New Browsers

ie8 - CSS :before and :after

p:before {

padding-right: 5px;

content: url(logo.gif);

}

p:after {

font-style: italic;

content: " and some text after.";

}

HUGE / New Browsers <p>Generated paragraph.</p>

ie8 - CSS {content:}

table td:before { content: attr(title) " - "; }

<table>

<tr>

<td title="Title 1">item</td>

</tr>

<tr>

</tr>

</table>

HUGE / New Browsers

table { counter-reset:item; }

table td:before { content: counter(item) ". "; counter-increment: item; }

<table>

<tr>

<td>item</td>

<td>item</td>

</tr>

<tr>

<td>item</td>

<td>item</td>

</tr>

</table>

HUGE / New Browsers

none

counter

attr()

string

url

multi

{content: ”test ” counter(test) “ ” url(logo.gif) “.” }

HUGE / New Browsers

ie8 - CSS “clearfix”

It’s working!

HUGE / New Browsers

ie8 - CSS {position:}

static normal flow of the page, ignores top, left, bottom, right declarations.

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).

absolute taken out of the normal flow of the page and positioned at the desired coordinates relative to its containing block.

fixed taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window.

HUGE / New Browsers

ie8 - CSS {outline:}

“ Enables elements to be highlighted without affecting their size.”

div {outline: red solid thin}

HUGE / New Browsers

ie8 - CSS Expressions

expression(document.body.

clientWidth/2-oDiv.offsetWidth/2);

CSS Expressions are

not supported in IE8 mode.

HUGE / New Browsers

ie8 - Compability View HUGE / New Browsers

ie8 - Compability View

render as IE8

<meta http-equiv="X-UA-Compatible" content=" IE=8 " />

render as IE7

<meta http-equiv="X-UA-Compatible" content=" IE=7 " />

Public sites will display in IE8 Mode, intranet sites will display in IE7 Mode

Compatibility View is domain specific

Happens on the fly without a browser restart

HUGE / New Browsers

ie8 - Accelerators HUGE / New Browsers

ie8 - Accelerators

<?xml version="1.0" encoding="UTF-8"?>

<openServiceDescription xmlns= http://www.microsoft.com/schemas/openservicedescription/1.0 >

<homepageUrl>http://thepiratebay.org</homepageUrl>

<display>

<name>The Pirate Bay</name>

<icon>http://thepiratebay.org/favicon.ico</icon>

</display>

<activity category="search">

<activityAction context="selection">

<execute action="http://thepiratebay.org/search/{ selection }/"></execute>

</activityAction>

</activity>

</openServiceDescription>

javascript:window.external.addService(’tpb.xml');

HUGE / New Browsers

ie8 - Developer Tools

New view source

Code search

Save edited code

Browser mode x Document mode

Javascript debug and console object

HUGE / New Browsers

ie8 - Developer Tools HUGE / New Browsers

ie8 - Console

console.log(”Number of %d columns”,count);

writes a message to the console.

console.info(“”); message with the visual "info" icon

console.warn(“”); message with the visual "warning”

console.error(“”); message with the visual ”error”

console.clear(“”); clear console

Not implemented (http://getfirebug.com/console.html):

console.debug(“”);

message with a link to the line where it was called

console.time(name); and console.timeEnd(name);

console.dir(object);

prints interactive listing of all properties of the object.

HUGE / New Browsers

ie8 - Search

IE8 supports the OpenSearch description format for search plugins (apparently it is not a new feature, IE7 and FF2 support it too)

OpenSearch was created by A9.com, an Amazon.com company

Helps search engines and search clients communicate by introducing a common set of formats to perform search requests and syndicate search results

Describes the search interface

HUGE / New Browsers

ie8 - Search HUGE / New Browsers

ie8 - Search

opensearch.xml

<?xml version="1.0" encoding="UTF-8"?>

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">

<ShortName>example Search</ShortName>

<Url type="text/html" template=“results.aspx?q={searchTerms}" />

<Url type="application/x-suggestions+xml" template=“suggestions.xml"/>

<Image height="16" width="16" type="image/icon”>favicon.ico</Image>

</OpenSearchDescription>

<link rel="search" type="application/opensearchdescription+xml" href=”opensearch.xml" title=”Site Search" />

javascript:window.external.AddSearchProvider('/opensearch.xml')

HUGE / New Browsers

ie8 - Web Slices

“ 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.”

<div class=" hslice " id=” hslice-id ">

<p class=" entry-title ">Title</p>

<div class=" entry-content ">

Lorem ipsum

</div>

</div>

*combination of the hAtom Microformat and Web Slice format

HUGE / New Browsers

ie8 - AJAX Development

AJAX navigation

window.location.hash onChange event

DOM storage

Connectivity events

Allow websites to check whether a user is connected to the network

Six connections per host (instead of 2)

Increased parallelism in AJAX scenarios

XMLHTTPRequest enhancements

Include a time-out property that can be set to cancel the request if necessary

Cross-domain request (XDR)

Cross-document messaging (XDM)

Sanitize HTML

Remove event attributes and script from user input

HUGE / New Browsers

ie8 - Cross-domain request

var xdr = new XDomainRequest ();

xdr.open("POST", "http://www.domain.com/xdr.php");

xdr.send(null);

header('Access-Control-Allow-Origin: *');

HUGE / New Browsers

ie8 - Cross-document messaging

var iframe = document.getElementById(’iframe');

iframe . contentWindow.postMessage ('Hello iFrame','http://domain.com');

window.attachEvent(' onmessage ',function(e) {

alert(“Hi”);

// var data = e.data;

});

HUGE / New Browsers

ie8 - Native JSON support

var testObj = new Object();

testObj.numVal = 4;

testObj.strVal = "fool";

testObj.arrVal = new Array(1,2,"test");

testObj.boolVal = true;

// Convert the object to a string

var stringifiedValue = JSON.stringify(testObj) ;

// Create a new object from the string

var parsedValue = JSON.parse(stringifiedValue);

*fast and secure

HUGE / New Browsers

ie8 - DOM Native Searching

var objs = document.querySelectorAll('h3, p, ul, code');

for (var i = 0; i < objs.length; i++) {

objs [i].style.display = 'none';

}

Test your browser:

http://webkit.org/perf/slickspeed/

HUGE / New Browsers

ie8 - Data URI HUGE / New Browsers Embed small external resources (like CSS files or images) directly into a URL on a webpage: <img alt="Image fed from data url" src="data:image/png;base64,iVBORw0KGgoAAA..." /> * binary file can be represented inline as a string

ie8 - W3C's ARIA Support