Web Design Articles
Should You Ever Use Longhand for Padding and Margins in CSS?
By Louis Lazaris on June 21st, 2010
Categories: Markup & Style, Web Design Articles | 11 Comments >
Most CSS developers eventually come to learn that, because of code savings, using shorthand notation is usually best. For this reason, I strongly recommend using shorthand notation for almost all CSS values, including padding and margins.
While I encourage developers to use shorthand for padding and margins, I would also like to point out that there will be times when using longhand notation may be the better choice. Of course, in a case like this, it’s usually up to personal preference. But I have found certain instances where longhand notation made more logical sense from a performance perspective, as well as from a future-maintenance perspective.
What Does “width: 100%” Do in CSS?
By Louis Lazaris on June 18th, 2010
Categories: Markup & Style, Web Design Articles | 54 Comments >
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it’s simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
Not so fast. It’s not quite that easy. I’m sure CSS developers of all skill levels have attempted something similar to what I’ve just described, with bizarre results ultimately leading to head scratching and shruggingly resorting to experimenting with absolute widths until we find just the right fit. This is just one of those things in CSS that seems easy to understand (and really, it should be), but it’s sometimes not — because of the way that percentages work in CSS.
Challenge: Can You Explain This Opera CSS Bug?
By Louis Lazaris on June 15th, 2010
Categories: Markup & Style, Web Design Articles | 16 Comments >
While doing some testing for cross-browser compatibility on a few of my recent articles/tutorials, I came across some odd behaviour in Opera 10.53 when styling a list of links as block-level elements.
I haven’t done enough testing, but it could be that this problem is occurring on pages with very little content, because I’ve only seen the bug on my demo pages, which are usually bare-minimum HTML and CSS.
Nonetheless, this is quite an interesting bug that was confirmed by at least one of my Twitter followers, and which, after poking around a little bit, I was able to resolve, but I thought I’d share it since it is quite interesting.
The CSS white-space Property Explained
By Louis Lazaris on June 8th, 2010
Categories: Markup & Style, Web Design Articles | 67 Comments >
CSS has a pretty useful property called white-space that probably goes pretty unnoticed among CSS beginners. You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.
This article will attempt to describe the different values for the CSS white-space property, and how each one can be used. I’m going to try to explain each value in a very practical, no-nonsense way, and I’ll do my best not to be overly technical.
Should A Website Be Designed According to the Standards of its Niche?
By Louis Lazaris on June 4th, 2010
Categories: Web Design Articles | 28 Comments >
Late last year, I wrote a pretty harsh critique of beer and alcohol websites in an article on Smashing Magazine, instigating quite a bit of discussion in the comments.
An interesting point was made by someone named Storm, which I thought would make a great topic for discussion. Basically, the commenter was saying that since most sites in that particular genre are designed in that same manner, then the usability expectations shouldn’t be too high, because that’s what users expect. This was an excellent point, and it may have a lot of validity.
As designers on the modern web, we’re trying to promote good practices like progressive enhancement, avoiding unnecessary use of Flash or unwanted auto-playing sounds, using semantic markup, and so on. We do this because we design for the web design industry — then we try to encourage those same practices in our client projects, regardless of the industry.
Recreating the MLB.com Content Switcher with jQuery and CSS3
By Louis Lazaris on June 1st, 2010
Categories: Markup & Style, Scripting, Web Design Articles | 22 Comments >
I’m a huge baseball fan, so a few weeks ago, just for a fun side project, I recreated the MLB.com Flash content switcher using jQuery and CSS3.
My goal with this project was to try to recreate the switcher without any extraneous images or other non-essential elements that tend to make stuff less maintainable.
My version uses CSS3′s border-radius, RGBA colors, opacity, and a small use of a gradient, and still looks acceptable in non-supportive browsers (although the jQuery is not as smooth in IE6 & 7). Be sure to look at the real version on MLB.com for comparison; there are quite a few small differences, but generally speaking, aside from one major thing missing (see below), mine is basically the same.
CSS3 Best Practices
By Louis Lazaris on May 27th, 2010
Categories: Markup & Style, Web Design Articles | 23 Comments >
Since CSS3 has become such a big deal in the future-thinking minds of web designers today, I think it would be appropriate for front-end developers to begin formulating some best-practice habits and techniques so that any CSS3 development we do is done right, and we therefore are able to get CSS3 development off to a good start.
By no means do I assume that everything in this article is etched in stone and error-free, but I think this will be a good starting point for this topic, and I will be happy to add to or amend any points that anyone feels need adjusting or clarification.
Consider this a starting point for discussing best practices for CSS3, especially since there don’t seem to be any articles available yet that exclusively discuss CSS3 best practices.
Using CSS3 Text Shadow for Active Link States
By Louis Lazaris on May 25th, 2010
Categories: Markup & Style, Web Design Articles | 8 Comments >
Recently, Chris Spooner of Line25 wrote a tutorial describing how to create a letterpress effect with CSS3′s text-shadow property.
In another article, Chris Coyier of CSS Tricks showed how he makes all the text links on his website feel more button-like using a simple bit of CSS positioning.
During a recent project I was working on, while messing around with the CSS3 text-shadow property, I serendipitously came across a simple way to combine the two different effects from those two articles to create a letterpress effect on active link states.
Dear Microsoft, You Missed the Boat
By Louis Lazaris on May 18th, 2010
Categories: Web Design Articles | 107 Comments >
Dear Microsoft,
I’m a web designer and developer who has been working with a variety of tools and languages in the web development industry for about 10 years now, mostly dealing with front-end tools and coding practices. Although I’ve spent a lot of time with you and your various technologies, I feel obligated to tell you that you missed the boat. Let me explain why.
About 9 years ago you released what was at the time the most standards-compliant web browser in existence, for which you even had the backing of Jeffrey Zeldman. Around that time, you were taking the browser market by the collar and showing it who’s boss. At one point, as you know, your browser held a 95% market share.
Not Another CSS3 Click Chart Update!
By Louis Lazaris on May 17th, 2010
Categories: Markup & Style, Web Design Articles | Comments Off
The CSS3 Click Chart has been updated to include 4 new CSS3 properties, a few of which I’ve only recently come across.
At this point, most of the cool and trendy stuff has been included in the chart, so nothing new that I add will be of great interest, but I’m continually researching and discovering new properties and enhancements that are part of the CSS3 spec, so I’ll continue to add them over time.
