Innovations

There are several innovative concepts, terms, and approaches. These are not new or radical: the technology is already built into the major browsers, the concepts are implied in the CSS specification, and the terms are commonly used. What makes them innovative is how I define and use them to show what can be done with CSS and HTML. In other words, they are innovative because they simplify learning, understanding, and using CSS and HTML. These ideas change how you think about CSS and HTML, and that makes all the difference. Furthermore,many of the design patterns in the book are innovative because they documentcombinations of properties and elements to solve difficult problems like never before.

Six Box Models

One innovation idea that CSS has six box models instead of one. CSS officially has one box model that defines a common set of properties and behaviors. A single box model is a very useful concept, but it is oversimplified. Over the years, I learned the hard way that box model properties work differently depending on the type of box. This is one reason why so many people struggle with CSS. The box model seems simple, yet when one uses a box model property, such as width, it only works some of the time or may work differently than expected. For example, the width property sets the interior width of a block box, but on table boxes it sets the outer width of the border, and on inline boxes it does
absolutely nothing. Rather than treating different behaviors as an exception to one very complicated box
model, I define six simple box models that specify the behavior for each type of box. The six box models, which are inline, inline-block, block, table, absolute, and float. Since you always know which of these six box models you are using, you always know how each box model property will behave.

Furthermore, each box model defines its own way that it flows or is positioned. For example, inline boxes flow horizontally and wrap across lines. Block boxes flow vertically. Tables flow their cells in columns and rows. Floats flow horizontally, wrap below other floats, and push inline boxes and tables out of the way. Absolute and fixed boxes do not flow; instead, they are removed from the flow and are positioned relative to their closest positioned ancestor.

Box Model Extents

Another innovation in the book is the concept that there are three ways a box can be dimensioned: it can be sized, shrinkwrapped, or stretched. Each type of box requires different combinations of properties and property values for it to be sized, shrinkwrapped, or stretched. Various design patterns in Chapters 5 through 9 show how this is done. These three terms are not official CSS terms, but they are implied in the CSS 2.1 specification in its formulas and where it mentions “size,” “shrink-to-fit,” and “stretch.”1 Of course, sizing, shrinkwrapping, and stretching are not new ideas. What is innovative is that this book clearly defines these three terms and shows how they are a foundational feature
of CSS and a key generator of CSS design patterns.

Box Model Placement

Another innovation is the idea that there are three ways a box can be placed in relation to its container or its siblings: specifically, it can be indented (or outdented), offset from its siblings, or aligned and offset from its container. The CSS 2.1 specification talks much about offsetting positioned elements, and it talks a little about aligning elements of the CSS 2.1 specificationbut it does not discuss how elements can be indented, although this behavior is implied in its formulas. Indenting, offsetting, and aligning are different behaviors. For example, an indented box is stretched and its margins shrink its width, whereas an aligned box is sized or shrinkwrapped and its margins do not shrink its width. Aligned and indented boxes are aligned to their containers, whereas offset boxes can be offset from their container or offset from their siblings. Different combinations of properties and property values are needed to indent, offset, and align different types of boxes. The design patterns  Of course, indenting, offsetting, and aligning are not new ideas. What is innovative is that this book clearly defines these three terms and shows how they are a foundational feature of CSS and a key generator of CSS design patterns.

Column Layouts

Another innovation is the discovery, naming, and documenting of 12 automated techniques built into browsers for laying out columns in tables All the major browsers include these powerful column layout features. They are compatible across the major browsers and are very reliable. Even though using tables for page layout is not recommended,2 tabular data still needs to be laid out, and you can take advantage of these column layouts to make tabular data look great.

Fluid Layouts

Another innovation is Fluid Layouts. The concept of fluid layouts is not new, but the process of creating them is commonly one of trial and error. In , I present four simple design patterns you can use to create complex fluid layouts with confidence and predictability in all major browsers. These design patterns, Outside-in Box, Floating Section, Float Divider, and Fluid Layout, use floats and percentage widths to make them fluid, but they do so without the problems you normally encounter using these techniques, such as collapsed containers, staggered floats, and percentages that push floats below each other.3The Fluid Layout design pattern creates columnar layouts with the versatility of tables but without using tables. Even better than tables, these layouts automatically adjust their width and reflow from columns into rows as needed to fit into narrow displays.

Event Styling

Another innovation is the Event Styling JavaScript Framework presented. This is a simple, powerful, open source framework for dynamically and interactively styling a document. It uses the latest best practices to ensure that HTML markup is completely free of JavaScript code and completely accessible, and all styling is done with CSS. Furthermore, the framework allows you to select elements in JavaScript using the same selectors you use to select elements in CSS. This vastly simplifies and unifies the styling and scripting of a dynamic HTML document! The blog includes this framework to show how to integrate JavaScript, CSS, and HTML so you can use styles interactively.

Related posts:

1. Different pattern / model of css Innovations There are several innovative concepts, terms, and approaches. These...
2. The CSS box model explained The box model is something every designer working with CSS...

Related posts brought to you by Yet Another Related Posts Plugin.