Everything You know about CSS is Wrong

60
Chandleryu 2011.06.30

description

Everything You know about CSS is Wrong

Transcript of Everything You know about CSS is Wrong

Page 1: Everything You know about CSS is Wrong

Chandleryu2011.06.30

Page 2: Everything You know about CSS is Wrong
Page 3: Everything You know about CSS is Wrong
Page 4: Everything You know about CSS is Wrong
Page 5: Everything You know about CSS is Wrong

The Grid’s the Thing

CSS was not designed to describe 2D grids. Rather, CSS assumes that every page will be made up of a vertical stack of blocks, piled( 堆叠 ) one on top of another, each containing either another stack of blocks, or text (called inline content) wrapped to fit inside the block.

Page 6: Everything You know about CSS is Wrong

.

Page 7: Everything You know about CSS is Wrong
Page 8: Everything You know about CSS is Wrong

Tables Do the Trick

Absolute positioning and floated blocks can be employed to force blocks to sit alongside other blocks—a purpose never envisioned by its creators.

Page 9: Everything You know about CSS is Wrong
Page 10: Everything You know about CSS is Wrong

The Layout We Want to Create

Page 11: Everything You know about CSS is Wrong

Current Techniques: Absolute

Page 12: Everything You know about CSS is Wrong

Current Techniques: Absolute

Page 13: Everything You know about CSS is Wrong

Current Techniques: Float

Page 14: Everything You know about CSS is Wrong

Current Techniques: oocss Float

/* ====== Columns ====== */ .main{overflow:hidden;_overflow:visible;_zoom:1;}.leftCol{float:left; width:250px;_margin-right:-3px;}.rightCol{float:right; width: 300px;_margin-left:-3px;}

Page 15: Everything You know about CSS is Wrong

Block Formatting Context

只要条件合适,任何块级元素都可以建立一个新的 Block Formatting Context ,以下是触发属性:• float:left• float:right• position:absolute• display:inline-block• display:inline-table• display:table-cell• display:table• overflow:auto• overflow:scroll• overflow:hidden (也就是除了 overflow:visible; )

Page 16: Everything You know about CSS is Wrong

Table-relative value

Internet Explorer 8 will support many new values for the CSS display property, including the table-related values: table, table-row, and table-cell—and it’s the last major browser to come on board with this support.

Page 17: Everything You know about CSS is Wrong

Using CSS Tables

Page 18: Everything You know about CSS is Wrong

Using CSS Tables

Page 19: Everything You know about CSS is Wrong

Internet Explorer 8+, Firefox, Safari, Opera

Our three-column equal-height layout is achieved without having to resort to tricks like faux (假的) columns using background images, worrying about positioning, or having to clear floats—revolutionary!

Page 20: Everything You know about CSS is Wrong

Hang on … Aren’t Tables for Layout Wrong?

The table value of the display property, on the other hand, is simply an indi cation of how something should look in the browser—it has no semantic meaning.

Page 21: Everything You know about CSS is Wrong

Anonymous Table Elements

if we use display: table-cell; without first containing the cell in a block set to display: table-row;, the row will be implied—the browser will act as though the declared row is actually there.

Page 22: Everything You know about CSS is Wrong

Anonymous Table Elements

.main{overflow:hidden;_overflow:visible;_zoom:1;}Can be replaced by:

.main{display:table-cell;_overflow:visible;_zoom:1;}Or

.main{display:table;_overflow:visible;_zoom:1;}

Page 23: Everything You know about CSS is Wrong

Table-cell/table 生成 BFC 的缺点无论是 table-cell 还是 table ,如果内部有元素宽度宽于 table-cell/table 的设定宽度,那么设定宽度无效。

Page 24: Everything You know about CSS is Wrong

Solution

.col2 {display:tablecell; *zoom:1; background:green;}.col2_inner{width:500px;overflow:hidden;background:yellow;}

Page 25: Everything You know about CSS is Wrong
Page 26: Everything You know about CSS is Wrong

Flexible Layout

Page 27: Everything You know about CSS is Wrong

Flexible Layout

Page 28: Everything You know about CSS is Wrong

Nest

Page 29: Everything You know about CSS is Wrong

Position

Page 30: Everything You know about CSS is Wrong

Colspan/rowspan

CSS tables lack any concept of row or column spanning, making it trickier to use one single layout structure than what might have been possible when using HTML tables. However, similar layouts can be achieved by using nested CSS tables.

Page 31: Everything You know about CSS is Wrong

Colspan/rowspan

Page 32: Everything You know about CSS is Wrong

Do I have to change the source order?

1. search engine optimization2. accessibility

Page 33: Everything You know about CSS is Wrong

SEO

The truth is, however, that source order has little impact on either of those areas. Of far more importance than source order is a proper heading structure: a properly nested sequence of heading tags (<h1> to <h6>) to clearly identify the page topic and sections.

Page 34: Everything You know about CSS is Wrong

Skip Links

Page 35: Everything You know about CSS is Wrong
Page 36: Everything You know about CSS is Wrong

Support for CSS Tables

Page 37: Everything You know about CSS is Wrong

Option 1 : Ignore Older Browsers

If you’re designing for yourself and nobody else, this is an option you might want to consider—it’ll certainly save you some time, and if you’re looking to make a point, this is the most visible way to do it.

Page 38: Everything You know about CSS is Wrong

Option 2 : A Simplified Layout

Page 39: Everything You know about CSS is Wrong

Option 3 : Reproduce

What you need to do is reproduce your table-based layout as closely as possible using the features available in IE6 and 7.

Page 40: Everything You know about CSS is Wrong

Why Not Stick with Floated Layouts?

If we don’t start using those features now, then who’s holding back the Web? The users who haven’t upgraded their browsers? Until we build sites that take advantage of the new features added to the latest browsers, how can we expect those users to upgrade? Microsoft has done its part; now it’s our turn.

Page 41: Everything You know about CSS is Wrong
Page 42: Everything You know about CSS is Wrong

CSS3 Multi-column Layout Module

Page 43: Everything You know about CSS is Wrong
Page 44: Everything You know about CSS is Wrong

CSS3 Multi-column Layout Module

Page 45: Everything You know about CSS is Wrong

CSS3 Multi-column Layout Module

Page 46: Everything You know about CSS is Wrong

CSS3 Grid Positioning Module

Imagine being able to define a grid for your page, then snap elements to that grid!

Page 47: Everything You know about CSS is Wrong

CSS3 Grid Positioning Module

In the case of a body with no width applied, they’d evenly stretch if the window was resized.

Page 48: Everything You know about CSS is Wrong

CSS3 Grid Positioning Module

Since this is a repeating pattern, we can also use the following notation instead of specifying all of the columns individually:

Page 49: Everything You know about CSS is Wrong

CSS3 Grid Positioning Module

Since this is a repeating pattern, we can also use the following notation instead of specifying all of the columns individually:

Page 50: Everything You know about CSS is Wrong

CSS3 Grid Positioning Module

Page 51: Everything You know about CSS is Wrong

CSS3 Template Layout Module

Page 52: Everything You know about CSS is Wrong

CSS3 Template Layout Module

We’d like to display the list as three columns.

Page 53: Everything You know about CSS is Wrong

CSS3 Template Layout Module

To set up the three-column template, we use the display property with a value of “abc”, a letter for each template slot (槽) .

Page 54: Everything You know about CSS is Wrong

CSS3 Template Layout Module

Positioning Elements into the Slots

Page 55: Everything You know about CSS is Wrong

CSS3 Template Layout Module

CSS3 templates can be even more complex than that. We don’t have enough room in this book to speculate on all the possibilities

Page 56: Everything You know about CSS is Wrong
Page 57: Everything You know about CSS is Wrong

CSS3 Template Layout Module

Page 58: Everything You know about CSS is Wrong

Everything You Know about CSS is Wrong

By keeping your techniques up to date and not expecting life to remain the same, you can ensure that you’re not left behind as techniques and support move on.

Page 59: Everything You know about CSS is Wrong

Thank U

Page 60: Everything You know about CSS is Wrong