Next Generation CSS Features

Intro to Next Generation CSS Features

Moving the Web Forward

Adobe wants to help move the web forward by championing features in the W3C and engineering those features directly in open browser engines.

Currently we've been working with WebKit

3 Areas of Focus

Text Features

Cinematic Features

Graphical Features

Magazine-style Advanced Layout

CSS Regions

Lets text flow across elements

Browser Support

Results provided by Browserscope

-webkit-flow

Regions introduces two new CSS properties that control how text will be put into container elements.

-webkit-flow-into: [name] Tells the browser to extract the content from the selector and flow it into the named region.

-webkit-flow-from: [name] Tells elements in the selector to pull their content from a named region.

Demo

article {
    -webkit-flow-into: mycontent;
}

.region {
    -webkit-flow-from: mycontent;
}

My Content

This content is wrapped in an article tag. But with CSS regions we can extract all of this and then place it into named regions. Those regions will automatically reflow as the browser is resized.

Why Regions?

Normally overflow is one of the few ways in CSS that we can deal with content that doesn't fit in its container. With regions, we can direct it and send it to other containers.

Hipster Ipsum

Viral street art freegan, portland locavore letterpress beard Austin bicycle rights next level lo-fi authentic synth cardigan PBR. Mlkshk before they sold out narwhal jean shorts, farm-to-table four loko direct trade biodiesel kale chips odd future lomo brunch swag keffiyeh truffaut. Gluten-free viral direct trade vinyl freegan. Ennui messenger bag bicycle rights art party, marfa +1 yr pickled dreamcatcher 8-bit synth squid jean shorts mlkshk. Freegan small batch photo booth organic godard american apparel etsy craft beer, put a bird on it bicycle rights shoreditch portland twee tumblr trust fund. Lomo kale chips umami narwhal gentrify american apparel, terry richardson cray gastropub vice beard bicycle rights pork belly blog. Butcher flexitarian dreamcatcher occupy, viral marfa mlkshk vegan lo-fi seitan brunch next level odd future sartorial.

My Primary Content

This content is wrapped in an article tag. But with CSS regions we can extract all of this and then place it into named regions. Those regions will automatically reflow as the browser is resized.

Why Regions?

Normally overflow is one of the few ways in CSS that we can deal with content that doesn't fit in its container. With regions, we can direct it and send it to other containers.

My Secondary Content

This content is wrapped in an article tag. But with CSS regions we can extract all of this and then place it into named regions. Those regions will automatically reflow as the browser is resized.

Why Regions?

Normally overflow is one of the few ways in CSS that we can deal with content that doesn't fit in its container. With regions, we can direct it and send it to other containers.

CSS Exclusions

Lets text flow around and inside shapes

Browser Support

Results provided by Browserscope

-webkit-shape

-webkit-shape Lets you define boundaries for text content. Can be a rectangle, circle, or polygon. Eventually you will also be able to reference SVG shapes and paths to define shapes.

Some limitations: No SVG support, polygons have to be structured a specific way.

Demo


-webkit-shape-inside: rectangle(0px, 0px, 600px, 370px, 150px, 150px);

pub rims attenuation dextrin malt extract enzymes brew filter, hefe heat exchanger abv. wort; bock pint glass hand pump lambic, all-malt. ipa hops dry stout, barleywine bacterial hoppy, racking bottle conditioning barrel. racking: berliner weisse, hops ester. becher, " adjunct mash tun, wheat beer glass." dextrin keg double bock/dopplebock acid rest. mead saccharification, becher primary fermentation craft beer goblet, becher! brew, priming squares-- wort chiller, priming yeast cask conditioning. biere de garde alcohol cask conditioned ale dry stout bottle conditioning acid rest; attenuation. berliner weisse ibu; lauter tun. brewpub infusion rims bung hydrometer mead top-fermenting yeast dry hopping. priming lauter, units of bitterness attenuation krug noble hops kolsch? original gravity cask infusion autolysis, brewing. cask conditioning; degrees plato? cask conditioning: wit scotch ale hops, krug brewpub caramel malt. pitching cask cask original gravity! ipa bock tulip glass racking enzymes hoppy dry stout, " dextrin." saccharification beer bung chocolate malt squares original gravity. length microbrewery infusion, wit; abbey bittering hops lambic seidel, " malt extract." mash tun balthazar pint glass attenuation, imperial; imperial. primary fermentation berliner weisse noble hops oxidized. sour/acidic saccharification noble hops. wort, cask, tulip glass cask conditioning. lager; chocolate malt trappist, " ester." bunghole filter final gravity gravity dextrin pitching conditioning! black malt kolsch fermentation acid rest priming carboy, sour/acidic krausen lager. adjunct bright beer barley: bottom fermenting yeast hard cider conditioning pilsner abv? hand pump bright beer abv autolysis sour/acidic copper. enzymes wort noble hops biere de garde filter amber. ipa; seidel goblet becher mash hand pump. wheat beer glass. bunghole grainy caramel malt filter priming scotch ale hydrometer. barrel wheat beer glass brew goblet. barrel saccharification lauter noble hops lagering microbrewery brew kettle aerobic. conditioning tank bittering hops craft beer saccharification conditioning, anaerobic ipa primary fermentation. sour/acidic keg aroma hops malt trappist final gravity oxidized. additive crystal malt ibu, anaerobic craft beer pilsner aroma hops? pitching bung, mash, conditioning tank. hydrometer beer primary fermentation hefe lagering draft (draught? aroma hops barrel kolsch krausen pub alcohol. rims bacterial brewhouse fermentation cask barley pint glass. degrees plato bright beer attenuation original gravity. brewhouse finishing hops krug rims ale, copper, secondary fermentation wort kolsch. bitter adjunct final gravity: bottle conditioning.

Working with Fun Shapes

Cinematic Effects

CSS Filters

Apply filters and shaders to elements

Browser Support

Built-in filters are supported by Chrome as well as the latest version of Mobile Safari in iOS 6.

Custom filters require Chrome Canary with Experiment Webkit Features turned on in chrome://flags/.

Built-in Filters

Built-in filters are filters that are core to the filters specification. With built-in features you can apply effects like blur or drop shadow.

Filters use the -webkit-filter property followed by the name of the specific filter you want to use and some parameters which adjust the effect. You can apply multiple filters to an element.

Built-in Filter Demo


-webkit-filter: brightness(10%) 
    saturate(1000%) 
    hue-rotate(180deg);

Custom Filters

Custom filters let you write your own filters using shader language and apply them to elements on the screen.

With custom filters you can apply effects like crumple, spherify, or burn.

Custom filters are referenced as external files via the custom(url()) attribute of -webkit-filter.

Custom Filters

Custom filters require two different kinds of shaders to run.

Fragment Shaders

Modify the surface appearance of elements. Lighting, opacity, etc.

Vertex Shaders

Modify the shape of elements and provide the transform properties.

Custom Filter Demo


    -webkit-filter: custom(url(../shaders/crumple.vs) 
mix(url(../shaders/crumple.fs) multiply source-atop), 
50 50 border-box, transform perspective(1000) scale(1) 
rotateX(0deg) rotateY(0deg) rotateZ(0deg), amount 1, 
strength 0.4, lightIntensity 1);

CSS Filter Lab

A studio for creating and applying filters. Supports animation.

Graphical Features

This section requires the Webkit Prototype browser to display samples correctly.

CSS Compositing/Blending

Changing how elements visually interact with each other

Compositing

Determines how the shapes of elements interact.

Compositing

Takes two elements, the destination, and the source, and uses the -webkit-alpha-compositing CSS property to decide how those elements should interact with each other when they overlap.

When -webkit-isolation: isolate; is set, the elements will clip to the defined element.

Blending

Determines how the colors of two elements will change and affect each other.

Uses the -webkit-blend-mode: property and can take a number of basic blend modes.

Only one blend mode can be applied at a time.

Browser Support

Neither of these features is currently supported in mainstream browsers. To use/test them, a special WebKit build is required. That build can be downloaded from Adobe's GitHub repository.

Compositing Demo: None

This is how the elements look with no compositing.

Destination

Source

Compositing: dst-over


.dst-over { -webkit-alpha-compositing: dst-over; }

Destination

Source

.dst-over places the destination element over the source with no clipping.

Compositing: dst-atop


.dst-atop { -webkit-alpha-compositing: dst-atop; }

Destination

Source

.dst-atop uses the source as the clipping path but keeps the styling of the destination

Compositing: dst-in


.dst-in { -webkit-alpha-compositing: dst-in; }

Destination

Source

.dst-in uses the clipping path of the source element but doesn't render anything outside of the destination element.

Compositing: src-in


.src-in { -webkit-alpha-compositing: src-in; }

Destination

Source

.src-in uses the clipping path of the source element and renders it within the confines of the destination.

Compositing: plus


.plus { -webkit-alpha-compositing: plus; }

Destination

Source

.plus modifies the color of any overlapping sections of the source and destination elements.

Blending Demo

This is how the demo looks with no blend modes enabled.

Blending: Multiply


.blend-multiply {
    -webkit-blend-mode: multiply;
}

Blending: Screen


.blend-screen {
    -webkit-blend-mode: screen;
}

Blending: Color Dodge


.blend-color-dodge {
    -webkit-blend-mode: color-dodge;
}

Blending: Hard Light


.blend-hard-light {
    -webkit-blend-mode: hard-light;
}

Blending: Soft Light


.blend-soft-light {
    -webkit-blend-mode: soft-light;
}

Links

Contact