Smashing Magazine rounds up a few tricks for “CSS Layouts, Visual Effects and Forms”. Not everything in here looks useful to me, but I did notice a few gems while quickly browsing through. Bookmarked for later investigation.
Posted in Css
Universal Internet Explorer 6 CSS
Mr. Clarke advocates creating one single universal style sheet to handle all styling in IE6, and to stop worrying about making content in IE6 look anything like the high-end experience.
I’m now advocating to my clients (and to you), that where feasible, not to waste hours in time and a client’s money on lengthy workarounds in an unnecessary attempt at cross-browser perfection. Instead, you and I should provide simple but effectively designed HTML elements. This means just great typography for headings, paragraphs, quotations, lists, tables and forms and no styling of layout.
This will work well for content-focused web sites. And then maybe it’s officially time to completely drop support of IE6 for web apps.
Fluid Images
Nice going, Ethan. Definitely one to keep in the ol’ bag o’ tricks.
Fluid Grids
I love this in-depth look at implementing grids for liquid layouts. Ethan goes into detail just how it all fits together, and the magic formula needed to make it all work. Now if we could just have the ability to easily scale images inside a liquid layout (without resorting to clipping background images), we’d be golden (pun intended).
Wanted: Layout System
Eric Meyer elaborates on why we need a better layout mechanism for web content (whether it be via CSS or not). We know we shouldn’t use tables for layout. Floats are a hack, positioning is flawed, and display:table-cell is no better than using a table itself. But Eric explains here why table behavior works moderately well for layout:
… this is why the old “only use tables for layout” argument keeps coming up over and over: strip away the overheated rhetoric and obvious link-baiting, and you find the core of a real need. Because as powerful as CSS can be, table cells do certain things very easily that CSS makes very, very hard. Cells stretch vertically, keeping equal heights as a matter of their intrinsic nature. They stay out of each others’ way, while still being allowed to sit next to each other and use any sizing dimensions. They tie their layout to their parent elements, and vice versa.
Recreating the button
Until some future version of HTML gives us new native controls to use in a browser, at Google, we’ve been playing and experimenting with controls we call “custom buttons” in our apps (among other custom controls). These buttons just launched in Gmail yesterday, and they’ve been in Google Reader for two months now. The buttons are designed to look very similar to basic HTML input buttons. But they can handle multiple interactions with one basic design. The buttons we’re using are imageless, and they’re created entirely using HTML and CSS, plus some JavaScript to manage the behavior. They’re also easily skinnable with a few lines of CSS, which was a key factor now that Gmail has themes.
I thought it would be interesting to provide a portion of the background on our buttons here, and discuss some of the iterations we’ve been through so far to get to the current state. continued
Making Modular Layout Systems
Bookmarking this late. But an interesting perspective into Jason Santa Maria’s simple system for creating the dynamic layouts of his recent entries.
Roulette
Still throwing tables
On the one year anniversary of the article: Throwing Tables Out the Window, I thought it appropriate to reveal some behind-the-scenes info regarding the Microsoft example discussed in the article.
When I published that article last year, the words and advice contained within were welcomed warmly by large numbers of people. The article was translated into at least eight different languages, and continues to be referenced in other writings and in academic curricula. On the flip side, the same article was also the cause of flaming, accusations of ignorance, and general vitriol thrown my way, claiming I was over-hyping CSS and deceiving the multitudes of its capabilities. Those claims were voiced more loudly when readers couldn’t find any proving example code whatsoever. Those who refused to let go of their old ways assumed that I fabricated the entire case study. continued
Zoom layout
In a presentation for @media entitled, Zoom the Web, Joe Clark revealed and explained several possible options (a new trend, hopefully) for making sites more accessible and readable for low-vision users. In the continuing effort to make our sites accessible as possible, many have assumed accessibility best practices deal primarily with blind people who often use screen readers. continued