forgetfoo

now this is pretty damn cool... checkout this slick CSS version of the beloved NES.

amazing.

Sneak Peek Into The Future: Selectors, Level 4

The buzzword "CSS4" came out of nowhere, just as we were getting used to the fact that CSS3 is here and will stick around for some time.

Browser vendors are working hard to implement the latest features, and front-end developers are creating more and more tools to be able to work with the style sheets more effectively. But now, on hearing about CSS4, you might ask, "Hey, what about CSS3? Is it over already?"

oh man, some pretty good stuff in there about the new uses for selectors, and location pseudo-classes... though i feel like we still have enough to handle with CSS3, especially where all the browsers are concerned, that part of me really doesn't even want to worry about CSS4 just yet.

can't help but get a little curious, though.

stumbled across this today and thought it was pretty slick, being able to play around with various CSS filters and animations... figured it was worthy of a quick blog post, since i might refer back to this at some point.

only works for me in chrome, though.

free cloud based photoshop plugin that converts layers to CSS3 styles... pretty cool stuff, mang.

p.s. typcast beta – another one that might be worth keeping an eye on.

Comprehensive List of Browser-Specific CSS Hacks

/***** Selector Hacks ******/
/* IE6 and below */
* html #uno  { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
/* Everything but IE6-8 */
:root *> #quince { color: red  }
/* IE7 */
*+html #dieciocho {  color: red }
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

damn man, looks pretty fugly doesn't it?

(src: design your way)

you want to know something that's right up there with how shitty the economy is? the idea that IE9 might just become the new IE6

Don’t believe me? OK, I’ll prove it. I have the latest Beta 4 of IE9, in Microsoft speak that means the version before Release Candidate, which is the version before Gold Master. I created a layout using CSS3 things like flexible box model, box sizing, border radius, box shadow, text shadow, background gradients, multiple backgrounds, background image sizing, transitions, transforms, and made sure that I supplied the IE9 equivalent of what it could handle. Firefox, Chrome and Safari are rendering the layout just fine. Are you ready to see what IE9 will do with it?

First, Safari on the left and Google Chrome on the right (by the way, these have wonder animations using CSS3 transitions and transforms):

And now IE8 on the left and IE9 on the right. Although IE8 is a total fail, IE9 is only marginally better. Look at the images above, then at IE9. Very disappointing:

The IE team have been chanting a mantra ad nauseum: Same Markup. That means, write once and have it render the same on all browsers. Funny, but the other browsers have been doing that for years. Seems, from the images above that it’s IE that’s unable to render the same markup.

i was reading through this and actually felt a little sick to the stomach thinking about it... there's still time, Team IE... please please please get this right! *knocks on wood*

50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)

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.

now this is just fucking sweet... checkout this pure css coke can that this guy put together, using only CSS to pull off the effect... really amazing stuff.

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

(hat tip: jim)

Are You Making These 10 CSS Mistakes?

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

Everything You Know About CSS Is Wrong

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)

7 Principles Of Clean And Optimized CSS Code

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.....

i'm about to sit down and go through another one of those design rounds, and whenever i do, i find myself surf'n around the usual design/css haunts online looking for some inspiration --- or at least to see what others are doing, etc... also been heavily re-doing some CSS of late, and been reading up on it once again... here's an article i was reading this morning that was pretty good: CSS Not([hacks])

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