jQuery, eCSStender & you [jQuery Summit 2010]

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

jQuery,
eCSStender
& you
Aaron Gustafson
Easy Designs, LLC
slideshare.net/AaronGustafson

jQuery, eCSStender & you

Download...

eCSStender.org
jQuery Summit - November 2010 ...

jQuery, eCSStender & you

Download...

eCSStender.org
jQuery Summit - November 2010 ...

jQuery, eCSStender & you

Download...

github.com/easy-designs/eCSStender.js
jQuery ...

jQuery, eCSStender & you

...collect extensions...

jQuery Summit - November 2010 15

jQuery, eCSStender & you

...collect extensions...

jQuery Summit - November 2010 16

jQuery, eCSStender & you

...include...
<script type="text/javascript" src="eCSStender.js"></script>
<scri...

jQuery, eCSStender & you

...and write your CSS
section,
article,
blockquote {
border-radius: 10px;
...

jQuery, eCSStender & you

Need selectors?
<script type="text/javascript" src="eCSStender.js"></script>
<script ty...

jQuery, eCSStender & you

Compound classes in IE6?
p.test {
color: green;
}
p.alt.test {
color: red;...

jQuery, eCSStender & you

Adjacent siblings?
p + p {
color: green;
}

jQuery Summit - November 2010 22

jQuery, eCSStender & you

General siblings?
p ~ p {
color: green;
}

jQuery Summit - November 2010 23

jQuery, eCSStender & you

Advanced pseudo-classes?
tr {
background: white;
}
td:empty {
background: ...

jQuery, eCSStender & you

Consider border-radius
#foo {
border-radius: 3px;
}

jQuery Summit - November 2...

jQuery, eCSStender & you

Consider border-radius
#foo {
-moz-border-radius: 3px;
-webkit-border-radius: 3p...

jQuery, eCSStender & you

Consider border-radius
#foo {
border-radius: 10px 5px;
}

jQuery Summit - Novem...

jQuery, eCSStender & you

Consider border-radius
#foo {
-moz-border-radius: 10px 5px;
-webkit-border-top-l...

jQuery, eCSStender & you

Ah, memories...
#foo {
padding: 10px;
width: 200px;
width: 180px;
heig...

jQuery, eCSStender & you

Simpliﬁed CSS3?
<script type="text/javascript" src="eCSStender.js"></script>
<sc...

jQuery, eCSStender & you

Yup!
section,
article,
blockquote {
border-radius: 10px;
box-shadow: 0 0 15px 1...

YouTube videos are no longer supported on Slideshare

View original on YouTube

jQuery, eCSStender & you

Valid extension of CSS

-prefix-

jQuery Summit - November...

jQuery, eCSStender & you

Browser vendors do it

-moz- -webkit- -ms- -o-

jQuery Su...

THE FUTURE OF CSS

YouTube videos are no longer supported on Slideshare

View original on YouTube

jQuery, eCSStender & you

Pointless, but possible
.bowling-alley img {
-easy-physics-fill: lead;
}
.beach...

Trivia Question:
Who were the
co-creators of CSS?

(First person to answer correctly, gets a book)

jQuery, eCSStender & you

Step 1: Register extensions

Register

jQuery Summit - N...

jQuery, eCSStender & you

Step 2: Find stylesheets

<html>

...

jQuery, eCSStender & you

Step 3: Collect the rules

Collect

jQuery Summit - Nove...

jQuery, eCSStender & you

Step 4: parse & process

Process

jQuery Summit - Novemb...

jQuery, eCSStender & you

Step 5: Trigger extensions

jQuery Summit - November 2010 45

jQuery, eCSStender & you

Helping hands
๏ Dean Edward’s IE scripts
๏ Selectivizr
๏ css3-mediaqueries.js

...

jQuery, eCSStender & you

Alternative syntax
๏ SASS (Syntactically Awesome Stylesheets)
๏ LESS (Leaner CSS)
๏ ...

jQuery, eCSStender & you

Capability checking
๏ Modernizr
Testing
...

jQuery, eCSStender & you

Something new
๏ More CSS
Testing
...

jQuery, eCSStender & you

Ecosystem
๏ jQuery plug-ins
๏ CSS Sandpaper One-off CSS
๏ CVI s...

jQuery, eCSStender & you

Unity!
One-off CSS
scripts&...

Let’s make
something awesome!

I thought you’d never ask.

jQuery, eCSStender & you

Pointless, but possible

jQuery Summit - November 2010 54

jQuery, eCSStender & you

Step 1: Dependencies
<script type="text/javascript" src="eCSStender.js"></script>
<scri...

jQuery, eCSStender & you

Step 1: Dependencies
// jquery.EasyPhysics.js
EasyPhysics.Balloon = function( el ...

jQuery, eCSStender & you

Step 2: Registration
eCSStender.register(

);

jQuery Summit - November 2010...

jQuery, eCSStender & you

Step 2: Registration
eCSStender.register(
{ property: '-easy-physics-fill',
f...

jQuery, eCSStender & you

Step 2: Registration
eCSStender.register(
{ property: '-easy-physics-fill',
f...

YouTube videos are no longer supported on Slideshare

View original on YouTube

jQuery, eCSStender & you

Step 2: Registration
eCSStender.register(
{ property: '-easy-physics-fill',
f...

jQuery, eCSStender & you

Pointless, but possible
.bowling-alley img {
-easy-physics-fill: lead;
}
.beach...

I love you you know.

I know.

Does the browser
support border-radius?

Nope.

isSupported()

jQuery, eCSStender & you

isSupported()
eCSStender.isSupported(
'property',
'visibility: hidden'
);
...

jQuery, eCSStender & you

isSupported()
eCSStender.isSupported(
'property',
'visibility',
'hidden'...

jQuery, eCSStender & you

isSupported()
var
el = document.createElement('b'),
html = document.createElement('p...

Can you make my
CSS smarter?

Of course.

jQuery, eCSStender & you

Inline style sucks...
<div style="display: none;">
<p>Some content</p>
</div>

...

jQuery, eCSStender & you

...don’t do it!
<div style="display: none;">
<p>Some content</p>
</div>

jQuery...

$jQuery, eCSStender & you makeUniqueClass() (function(){ var e = eCSStender, the_class = e.m...$

jQuery, eCSStender & you

embedCSS()
eCSStender.embedCSS(
'p { color: red; }',
'screen',
false
...

jQuery, eCSStender & you

applyWeightedStyle()
eCSStender.applyWeightedStyle(
el, { 'visibility': 'hidden' }, 1...

$jQuery, eCSStender & you As ﬂexible as possible function embed( selector, properties, medium ) { var style_...$

jQuery, eCSStender & you

As ﬂexible as possible
function inline( selector, properties, medium, specificity ) {
...

jQuery, eCSStender & you

As ﬂexible as possible
eCSStender.register(
// ...
function( selector, properties,...

jQuery, eCSStender & you

addRules()
var style = eCSStender.embedCSS(
'p { color: red; }',
'screen',
...

Can you look
something up for me?

No problemo.

jQuery, eCSStender & you

lookup()
var matches = eCSStender.lookup(
{
selector: 'h1',
spe...

Help make me better!

MIT Licensed

Fork: github.com/easy-designs/eCSStender.js
Discuss: groups.google.co...

jQuery, eCSStender & you
by Aaron Gustafson
Slides available at
http:/...