CSS-Tricks PSD to HTML: You Design - We XHTML

Links of Interest

CSS Qualified Selectors

cssqualifiedselectors
Shaun Inman has an idea for a submission to the CSS3 Working Group he is calling CSS Qualified Selectors. Definitely read the article to get the full low-down, but I’ll summarize: this is a way to add styling to a parent element based on its children. For example, if you have a list item that contains a visited link, right now you are only able to target the visited link with CSS such as “ul li a:visted”. With a qualified selector, you could instead target the list item with “ul li < a:visited".

This could be very powerful. For example, I just did a post on improved current field highlighting which would be obsoleted by this technique (it would no longer need javascript).

Eric Meyer already piped in (see article comments) on how this is unlikely to actually happen (booooooo). John Resig shows us that jQuery can already do this, and even with the same syntax if you want.

 

Down for everyone or just me?

downforall
Here is a handy-dandy little tool for checking if a website is really down, or down for just you.

 

Google Docs now supporting CSS

googledocscss
If anyone out there is using Google Docs, you may be pleased to know it is now supporting CSS as a means to style your documents. Using images either inline or through background-images is limited by some weird proprietary system though.

 

“Commands” Posters

coolposters
Really neat set of posters using some common Mac keyboard commands.

How To Fix Video Slowing Down Your Page Load Time

I have a client who demanded an auto playing video on their homepage. Normally our job as designers is to translate our brain’s first thoughts:

“OMG. WTF? Are you trying to drive people away never to return?”

Into something more like:

“I’m not sure that is the best idea right now. Some people find autoplaying video on websites annoying and our goal is to keep people on the site so they can discover more about you.”

But sometimes it comes out like:

“Yessum. Right away, sir.”

Ah well, can’t win them all. So, I did it. I even found a sweet little flash video player that did all the cool stuff people like in video players like scrubbing, fullscreen mode, and volume control. I even won a minor battle in muting the video by default so at least people didn’t get blasted with unwanted sound.

But then a few days later I get the call:

“Why is our homepage loading slower?!”

Again with the brain:

“Uhm, because there is a frigging 5MB video on your homepage now and even though it is streaming it still is taxing on your internet connection and it makes everything else load slower.”

Which should be translated into:

“I’ll look into that right away. I suspect it has something to do with the video that we added to the homepage, maybe we are going to rethink that.”

Which comes out like:

“I’ll get on that right way. Sorry, sir.”

Read Article / Comment »

From The Forums: Fluid, Fluid, Fixed & More

The CSS-Tricks Forums have been going very well since launch. It has only been just over a month and we have 130+ members and 660+ posts. Lots of great discussions have popped up and lots of folks have gotten the troubleshooting help they needed. Huge thanks to everyone! I thought I would highlight a couple of the threads:

Read Article / Comment »

Update on CSS Caching

css-caching

There were lots of great comments on the CSS Caching article. I learned a lot from those comments, so I wanted to clear up some of the misunderstanding and highlight some of the great tricks other folks shared.

Read Article / Comment »

New Screencast: Creating a Photoshop Web Mockup

This episode is a prequal to episodes 12, 13, and 14. We go back to a blank Photoshop document and re-create it. There is no HTML/CSS in this episode, just pure Photoshop work.


screencast-16-thumb

I’m sorry about the volume level on this one. The quality is OK but the volume is just too low, you’ll have to turn it up pretty loud for this one. This week I also tried experimenting with having the video in .m4v format at first. This is like the iTunes native format so it will work better with AppleTV and other devices. The compression and quality were good, but I couldn’t get it to play on the web. Also, the only way to get it into that format is to use an un-changeable built-in setting in Stomp, so the size would have had to change. I’m thinking somewhere around episode #50 I’ll have all this figured out =P

Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.