HTML and CSS Reference
In-Depth Information
Advanced Layout and Effects
Many new specifications are actively being worked on. Some of the most interesting include:
•
CSS Grid Layout (
•
CSS Exclusions and Shapes (
•
CSS Regions (
•
Compositing and Blending (
•
Filter Effects (
•
CSS Masking (
■
The initial drafts for Filter Effects and CSS Masking hadn't been officially published when this topic went to
press. The URLs for the specifications are where they are expected to be located, but might change.
Note
Many of the ideas have been put forward by Adobe, and are based on the company's extensive experience
with print design. Some of them—such as CSS exclusions, shapes, and regions—emulate print layout by flowing
text around irregular shapes or linking dynamically between text boxes. These features are particularly suited to
electronic topics and magazines. Compositing and blending brings Photoshop-like effects to the browser, and
filters create cinematic effects.
Although Adobe has been the prime mover behind these developments, it's working closely with
Microsoft, Opera, and other manufacturers. You can find more information, including examples, at
Summary
That concludes our in-depth exploration of CSS3 as it currently stands in the second half of 2012. Although it
will probably have moved on even before the ink is dry on the pages of the printed book, I've deliberately tried
to describe the new aspects of CSS as they're intended to work rather than focus on browser shortcomings.
Browsers will continue to improve, catching up with the specification. If you master even only half of the
properties described in this topic, you'll have a solid foundation for years to come. The great strength of CSS
lies in the way it's designed to be both backward- and forward-compatible. Old browsers silently ignore new
properties and rules they don't understand, and new features are designed to build on top of existing ones.
This chapter has attempted to peek into the future of CSS. I concentrated heavily on flex layout, even though the
formal syntax is currently supported by only one browser. Flex layout promises to revolutionize the way pages are laid
out. It's probably more suited to sections of a page than laying out complete pages. Flex layout is very powerful, but
grasping the implications of reverse axes and understanding how the
flex
property works can be a challenge.
Looking ahead to some of the new features proposed for CSS, it's becoming an increasingly technical
discipline. In the course of the topic, I've recommended online tools that help generate the necessary code. No
doubt, dedicated software or new online tools will emerge in response to developments in CSS. But even if you don't
write the code yourself, understanding how it works will remain an essential part of being a successful web designer.
I hope you've found this topic useful as you go forward and make the Web a beautiful and useful place.
