css archives
Check out Do Lectures. Looks like some interesting content (kind of like TED Talks), but that’s not why I’m posting. Take a close look at how they handle re-sizing the window. As you change width, the screen goes through a series of at least 4 seamless transformations to adapt to the new format—hiding secondary elements, re-sizing things, re-positioning. Very impressive flexible layout. (Via UIE podcasts.)
posted by
ted
8 hours ago
“I’m going to begin with a provocative claim: I believe CSS is one of the most difficult-to-master computer languages we have. … Simply put; it’s a styling language. A language for designers, not developers. Some of the most experienced programmers I’ve worked with struggle to comprehend CSS for this very reason.”
Having just had to explain the concept of “specificity” to an experienced developer, this quote resonated with me. From an article by Chris Sealey on Better Semantics with CSS Combinators and Selectors.
posted by
ted
on Wednesday, May 25, 2011
“CSS is the weakest link in the web developers toolbox. The problem goes deeper than CSS’s lack of variables. Unlike the “function” in programming, CSS has no fundamental building block.”
Chris Eppstein, the author of Compass writes up a solid argument for the need of abstraction in stylesheets. I’ve been toying around with Compass and the Sass language over the past few weeks and things look very promising.
posted by
john
on Monday, Sep 21, 2009
In a bizarre flood of memories this morning, I recalled one of the very first websites which pointed me in the direction of using CSS for layout. Whoever you are, BlueRobot, thanks.
http://www.bluerobot.com/web/layouts/.
posted by
sam
on Monday, Aug 17, 2009
Handcrafted CSS, a new book from Dan Cederholm and Ethan Marcotte, looks to add to the smallish pile of useful CSS books on my shelf. The others are in a large pile in the community library at work.
“This book will show how craftsmanship can be applied to flexible, bulletproof, highly efficient and adaptable interfaces that make up a solid user experience.”
posted by
jason
on Thursday, Jul 02, 2009
case study
Many in the world of web application design desire to make their web-based software look and feel more like a desktop application. I’m a fan of making the web experience as rich as possible, and I recently learned how to add something more to my designs: click-action buttons.
Yes, it’s true. I love buttons. To me, the button is quite possibly the most important element in an interface. They should be designed and implemented with a lot of thought since they are the invokers of action and the committers of data.
Here I’ll demonstrate how to make buttons that press in when clicked, and it’s all going to happen without any JavaScript or magic.
posted by
clifton
on Monday, Mar 09, 2009
Firescope is a free Firefox add-on from Sitepoint that puts a Reference tab into Firebug. This tab gives an overview of the level of browser support for a selected element and any styles applied to it, plus a link to more information on Sitepoint about elements and attributes. Looks very handy for troubleshooting… Download took about 3 seconds, plus a re-start of Firefox.
posted by
ted
on Wednesday, Feb 18, 2009
It looks like you can use XHTML and CSS to wrap and flow text just like you would do in InDesign. I don’t know how useful something like this would be, and I haven’t looked at the cleanliness of the code, but it’s nice to know this is programmatically possible (and in IE6, no less). Check it out.
posted by
clifton
on Wednesday, Dec 10, 2008
case study
Dropcaps are a staple of magazine and newspaper design, but aren’t always the easiest to implement on the web. Using this little jQuery and CSS tutorial, you can easily add hot little dropcaps to your web articles without bothering your developers. This method will also let you sleep at night knowing your caps will degrade gracefully, displaying just fine in browsers without CSS or JavaScript enabled.
Please note, this tutorial is for those who are familiar with jQuery and CSS. No basics taught here. Also nerd alert.
posted by
jason
on Tuesday, Dec 02, 2008
case study
So the other day Tadd linked up some work in progress code which hinted that we are using the Blueprint CSS framework in some of our sites under development.
This decision went through many heated debates internally where some were excited for it, and others were repulsed.
So what were the reasons behind the need for looking into a framework?
posted by
aaron
on Friday, Nov 21, 2008
The wbr tag saved my bacon today when a long email address was breaking a narrow column layout. This looks like another HTML tag I hadn’t ever used, but probably should have. I looked all around for a non-java-script CSS solution, but this little non-validating tag was the best I could do. See the linked Quirksmode article for a nice discussion of the “incompatibility soup” of solutions to this problem.
posted by
ted
on Wednesday, May 14, 2008
“i feel dirty every time i use ”!important” in a css file…”
“Bobthecow” on Twitter
posted by
ted
on Monday, May 05, 2008
A question came up today that when floated around to a few people we didn’t have a good answer, so I thought I’d toss it out to the interwebs. Is there any rhyme or reason for the separation of CSS properties that start with FONT and those that start with TEXT (including a few others like color, line-height, etc). For reference here is W3C’s pages on font and text.
Since we don’t have a method for easy response at the moment I’ve created a NorthTemple twitter account to provide your abbreviated responses. As an aside, several of the team here have started twittering recently, and so we may use this NorthTemple account for other stuff in the future. Follow us and wait in eager anticipation for that future day =)
posted by
aaron
on Thursday, May 01, 2008
Why haven’t I seen this? If I read my own blog I would have seen this. A fantastic article on
Elastic CSS Layouts, and another link today for
Jon Tan.
posted by
jason
on Tuesday, Mar 04, 2008
Another great article on CSS layout techniques (fixed, fluid, and elastic) with viable pros and cons for each.
posted by
rick
on Friday, Feb 29, 2008
“Using same corner radius setting for both outer and inner rounded rectangles will create a “lump” corner like an eaten mice in snake’s stomach.”
Adam Betts, on Rounded Rectangle Borders
posted by
jason
on Tuesday, Apr 24, 2007
Eric Meyer’s updated baseline style sheet, essentially a “reset” along the lines of YUI’s reset.css. “I don’t think [YUI reset.css] goes far enough in some areas, and a little too far in others,” Eric says. “So here’s my version.”
posted by
cameron
on Thursday, Apr 19, 2007