Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.

This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.

You may want to look at similar CSS-related posts that we published last months:

• 45 Powerful CSS and JavaScript Techniques
• 50 Brilliant CSS3/JavaScript Coding Techniques
• 5 Useful Coding Solutions For Designers And Developers

there's a shitload of really good stuff in here... more goodies to add to my growing list of bookmarks -- hey man, do you really think i can remember all this shit? seriously? heh.

probably one of the coolest CSS related things i've seen since i first discovered the "rounded corners" in CSS3.

(hat tip: jim)

1. Ignoring Browser Compatibility

This is probably the number one problem with web development, as you have to have layouts that look the same, no matter what browser the site visitor is using to navigate the page. This fact may sometimes seem like the bane of your existence: there are fundamental differences in the way Internet Explorer renders a page, versus Firefox. While it's not as bad as they used to be, there's still quite a difference between browsers.

It's easy for web developers to layout the page in their favorite browser and not worry about how it looks in other major browsers, as you most likely won't see the differences. (I'm a major offender of this. I'll sometimes design the site in Firefox and forget about checking in IE until after it's done!) While there are some tried and true methods to help safeguard your layouts for different browser rendering, the best way to ensure everything looks constant is to just use Browsershots. Browsershots gives an accurate snapshot of what your site looks like across many different platforms and browsers, allowing you to make sure nothing looks funky in a browser.

great post and one that i just bookmarked so i can refer back to it later if needed... couldn't agree more, though i'm just as guilty as the next guy on a few of these... for example, at the moment i'm soooooooooo tired of IE6 and if given the chance, completely "forget" about it --- seriously, it's 2008... IE6 needs to just fucking die.

although i have to say... what's wrong with big mammoth background images? *ahem*

p.s. 18 Rules the Best Web Developers Follow

p.p.s. CSS Animations and JavaScript

When released, 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. This event will mark the end of complex CSS layout techniques, and will be the final nail in the coffin of using HTML tables for layout. Finally, producing table-like grid layouts using CSS will be quick and easy.

Applying table-related display property values to web page elements causes the elements to mimic the display characteristics of their HTML table equivalents. In this article, I'll demonstrate how this will have a huge impact on the way we use CSS for web page layouts.

Using CSS Tables

CSS tables solve all the problems encountered when using absolute positioning or floats to create multi-column layouts in modern browsers. Specifying the value table for the display property of an element allows you to display the element and its descendants as though they're table elements. The main benefit of CSS table-based layouts is the ability to easily define the boundaries of a cell so that we can add backgrounds and so on to it-without the semantic problems of marking up non-tabular content as a HTML table in the document.

continue...

just thought it was a great article about one of the things that still drives me knucking futz about CSS... after all these years, to know that Internet Explorer will finally support the table values as defined in the CSS specs --- well, great news for sure, but can't help but kinda piss me off, since it should've been supported years ago when IE6 came out. g'damn it.

(hat tip: dave)

another great article that i immediately bookmarked into a browser "CSS" folder... figured it was worth of a quick post. heh.

Some of you may remember the days when 30KB was the recommended maximum size of a web page, a value which included HTML, CSS, JavaScript, Flash, and images. I find with every new project with even the slightest bit of complexity, it's not long before that 30 KB ideal is well out of my reach. With the popularity of CSS layouts and JavaScript-enriched web page experiences, it's not uncommon, particularly for large sites, for the CSS files alone to jump well beyond that 30KB ceiling.

But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. Optimization isn't just minimizing file size — it's also about being organized, clutter-free, and efficient. You'll find that the more knowledge you have about optimal CSS practices, smaller file size will inevitably come as an direct result of their implementation. You may already be familiar with some of the principles mentioned below, but they are worth a review. Being familiar with this concepts will help you write optimized CSS code and make you a better all-around web designer.

related: Get Started with CSS 3.....

As any web developer worth his salt will know, browsers can differ in their interpretation of CSS rules and properties. One way of coping with this headache is to use various hacks; they might (in some cases) be invalid CSS, but they force browsers to read only certain parts of your CSS and render your page or web site as close to how you intended as possible. CSS hacks are one of the common ways to send specific instructions to different browsers, be it to solve min-width issues or box model interpretations.

But there is another way. I will demonstrate the possibilities of using CSS3 selectors as an alternative to hacks when targeting specific browsers. Hacks are an example of graceful degradation: you design for the most capable browser and then fix issues in legacy browsers. But what if we took the opposite approach and worked with progressive enhancement?

In this case, progressive enhancement involves writing the CSS so it works in all your target browsers, and then adding enhancements for those browsers that better support the CSS specification. You can think of it as the reverse of graceful degradation.

it's amazing just how much work can go into these damn stylesheets... i still have so much to learn, which is why i'm probably still doing this web stuff and enjoying it (for the most part), after all these years. heh.

p.s. 25 Code Snippets for Web Designers

personally, ones like this booooooring design caught my eye... *chuckle*

on a related sidenote, have any of you heard or checked out this new Microsoft Silverlight?

Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of media experiences and rich interactive applications (RIAs) for the Web.

sounds interesing.

but just in case you're curious, click on the button to load the page without the CSS:

i dont know of many big/popular sites doing it, but it does seem like a pretty spiffy idea... well, maybe for a day at the most... found it interesting to read through some of the comments left about it over at Digg:

The whole idea of CSS is that when you turn it off, it will be accessible to people with screen readers and the such. You'd be pleasently suprised (if you're a good coder) at how well your information gets organised. I always make sure that when you veiw the page in lynx, which ignores CSS and images and stuff, it will look relitively normal and you can distinguish between subtitles, titles, and the paragraphs.
-- by moitio

Great idea. Make your site visitors (who mostly have no understanding of html or css) wonder why your site looks like crap now.
-- by eareache

I agree. I worked hard on the CSS on my page to get it just the way I wanted; why would I let a day pass without having it on my site?
-- by sfields

Dummy Code

<style type="text/css">
body { 
   background: url(bkg-5060-wp1.jpg) no-repeat fixed top left; 
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   color: #fff;
}
#page {
   width: 100%;
   height: 100%;
   overflow: auto;
}	
#content {
   height: 1600px;
   padding: 20px;
}
</style>
</head>

<body scroll="no">

<div id="page">
<div id="content">	
   <div style="height:1200px">test.</div>
   fuck yeah.
</div>
</div>

works perfectly in IE6....

there's also at least two handfoo's of other CSS examples are are pretty snazzy and worth checking out... i swear, shit like this just gives me ideas... *doh*

(hat tip: cssbeauty)

i was apply'n some styles using the :hover for form elements in my stylesheet, but it wasn't killing the added padding and background-color when you moused over the buttons... feel like this is some kinda brute CSS tactic or something, but here's what my code ended up looking like to kill the hover styles for Submit buttons and ones using images:

html>body #content input[type="image"],
html>body #content input[type="image"]:hover,
html>body #content input[type="submit"],
html>body #content input[type="submit"]:hover
 {
 	background: transparent !important;
 	border-style: none !important;
	border: 1px solid #fff;
	-moz-border-radius: 0 !important;
}

kinda crazy, huh? the 1px white border declaration is in there for some odd reason that i cant remember off the top of my head, but it solved some weird issue or other i was having at some point.... so dont ask. *shrugs*

i might start blogging more lil snippets like this from time-to-time around here, as i seem to be getting more emails with questions and shit of late... but we'll see...