CSS-Tricks

Multiple Attribute Values

Chris Coyier — Mon, 19 Dec 2011 01:40:00 +0000

Elements can have multiple class names. For instance:

Then in CSS, you could match that element based on any one of them:

/* All these match that */
//AN_Xml:.module { }
//AN_Xml:.accordion { }
//AN_Xml:.expand { }

You can limit your selectors to match only if several of them are present, for example:

// Will only match if element has both
//AN_Xml:.accordion.expand { }

But what about other attributes?

Class names are unique in the ability outlined above. Other attributes are not treated as "multiple values" just because they have a space in them. For instance:

This element just has a data-type attribute with a value of "module accordion expand", not three unique values "module", "accordion" and "expand". But let's say we wanted to be able to select elements based on individual values like we can with class names.

We could do it by using a "*" substring matching attribute selector which will match if the provided string appears anywhere in the value:

[data-type*="module"] {
//AN_Xml:
//AN_Xml:}

or only match when multiple of specific "values" are present:

[data-type*="accordion"][data-type*="expand"] {
//AN_Xml:
//AN_Xml:}

Ever better, use the whitespace separated selector (e.g. [data-type~="expand"]). That way you won't get burned by something like "expand" matching "expander" when you didn't want to.

[data-type~="accordion"][data-type~="expand"] {
//AN_Xml:
//AN_Xml:}

View Demo

Works in IE7+ (because IE 7 was first IE to support attribute selectors)

Multiple Attribute Values is a post from CSS-Tricks

Dabblet

Chris Coyier — Fri, 16 Dec 2011 03:18:40 +0000

The best part about Lea Verou's new in-browser HTML/CSS demo tool? It saves your demos to your GitHub account as gists.

Direct Link to Article — Permalink…

Dabblet is a post from CSS-Tricks

Auto Updating IE

Chris Coyier — Thu, 15 Dec 2011 16:51:49 +0000

Big news from Microsoft:

With automatic updates enabled through Windows Update, customers can receive IE9 and future versions of Internet Explorer seamlessly

Windows XP gets IE 8
Windows Vista and 7 get IE 9

Presumably every new release will happen the same way. So when IE 10 goes final the next Windows Update will include that too for the OS's it will run on.

Direct Link to Article — Permalink

Auto Updating IE is a post from CSS-Tricks

Open a Window with Full Size Unscaled Image

Chris Coyier — Thu, 15 Dec 2011 05:46:43 +0000

For the gallery section of this site, I wanted people to have the ability to see the screenshot at its original size. Due to the fluid nature of this site, it's fairly common for the screenshot to be scaled down to fit into its column. So I put together this little solution.

My plan is to open a window the exact size needed to fit the image. Quick, easy, and perfectly good UX in my opinion. All you have to do is this:

window.open(path-to-image);

Actually it's a bit more complex than that. We need to pass in a bunch of parameters to get the window we want. Namely, the kind with as little chrome as possible. A top bar with a close button and that's about it.

window.open(path-to-image, null, 'height=y, width=x, toolbar=0, location=0, status=0, scrollbars=0, resizeable=0');

Example:

The tricky part is figuring out just exactly what height and width values to pass. You can't just ask the image what size it is. Well you can, but it will lie. It will tell you its current size, not its natural size.

var img = document.getElementById('screenshot');
//AN_Xml:
//AN_Xml:img.width;  // current size, not natural size
//AN_Xml:img.height; // current size, not natural size

To get the natural size, we'll create a new image in the magical ether of JavaScript, set its source to the source of the on-screen image, and then test its width and height. It will report correctly as it's untainted by CSS on the page.

var img = document.getElementById('screenshot');
//AN_Xml:
//AN_Xml:var magicEtherImage = new Image();
//AN_Xml:magicEtherImage.src = img.src;
//AN_Xml:
//AN_Xml:var padding = 20; // little buffer to prevent forced scrollbars
//AN_Xml:
//AN_Xml:// Values to use when opening window
//AN_Xml:var winWidth = magicEtherImage.width + padding;
//AN_Xml:var winHeight = magicEtherImage.height + padding;

I use jQuery on my site, so ultimately my code is like this:

$(".view-full-size").click(function() {
//AN_Xml:
//AN_Xml:  var mainScreenshot = $("#main-screenshot");
//AN_Xml:
//AN_Xml:  var theImage = new Image();
//AN_Xml:  theImage.src = mainScreenshot.attr("src");
//AN_Xml:
//AN_Xml:  var winWidth = theImage.width + 20;
//AN_Xml:  var winHeight = theImage.height + 20;
//AN_Xml:
//AN_Xml:  window.open(this.href,  null, 'height=' + winHeight + ', width=' + winWidth + ', toolbar=0, location=0, status=0, scrollbars=0, resizable=0'); 
//AN_Xml:
//AN_Xml:  return false;
//AN_Xml:
//AN_Xml:});

You can see it in action on single gallery pages like this.

Obviously it doesn't do much on mobile, so I just remove the button with a media query.

Open a Window with Full Size Unscaled Image is a post from CSS-Tricks

New Poll: Your Internet Connection Speed

Chris Coyier — Tue, 13 Dec 2011 23:54:54 +0000

I think it would be interesting to get an idea of what the internet connection speeds are like for CSS-Tricks readers. Connection speed makes such a huge difference in the web browsing experience I hope that getting an understanding of what speeds people are getting will help us all kind that in mind when working on websites.

So go test your speed right now (Download Speed) and pick the most appropriate answer in the poll (in the sidebar). If a mobile device is your main connection, test that, otherwise use your main home/work connection.

Remember, "Mbps"

That's "Megabits per second." Somehow this has become the standard for measuring internet connection speed. Personally, I think this is insane. People understand the size of digital things in bytes, kilobytes, megabytes, gigabytes, and terabytes. Yet instead of using these commons sizes that everyone understands, we use the "bit" versions of those, which are are 8x larger numbers. Because:

8 "Megabits" == 1 "Megabyte"
et al.

Let's stick with "Mbps" since that's what the speed tester reports.

New Poll: Your Internet Connection Speed is a post from CSS-Tricks

TextMate 2

Chris Coyier — Tue, 13 Dec 2011 16:46:18 +0000

The long awaited has arrived (in alpha).

Direct Link to Article — Permalink…

TextMate 2 is a post from CSS-Tricks

This Site’s Domain is Now Safe

Chris Coyier — Fri, 09 Dec 2011 08:14:13 +0000

css-tricks.com is now back under my ownership. Yay!

Quick review of what happened

A criminal stole the ownership of css-tricks.com. They transferred it from GoDaddy to PlanetDomain. I got it back. You can read a whole saga of the events.

This wasn't just css-tricks.com, this happened at the same time to many other domains that were all "Web tech related blogs."

How did it happen?

From the perspective of GoDaddy, where the domain was registered, the transfer looked completely legitimate. The criminal logged into my GoDaddy account, unlocked the domain, and transfered it away.

How did they get into my GoDaddy account? To this day, I don't know.

I do know that they got into my GMail account. By doing this, they were able to delete any emails about the transfer, so I was unaware it even happened. I don't have proof of the deletions, but I have proof the criminal was in my GMail account. My GoDaddy account password was never changed and didn't exist in my GMail account, so the criminal was able to get that password another way. On the first day of the hack, a file was also changed on my server, which suggests they had my FTP password as well, which also did not exist in my GMail account. All three were also different. I wish I could tell you exactly how all three of these passwords were hacked. I cannot.

How did it get returned?

I spoke with GoDaddy about the theft. They spoke with PlanetDomain. PlanetDomain agreed to give the domain back to GoDaddy. In my case, both companies were helpful and did all the right things. I actually did very little. I spoke with GoDaddy, filled out their Domain Dispute form, wrote a blog post, did my fair share of worrying, and ultimately it got resolved.

Who is to blame here?

The only person I can find to blame is the criminal (there has been some contact with this criminal, see video).

It's not GoDaddy's fault. From their perspective this looks like a standard domain transfer, thousands of which happen every day. They didn't simply allow a criminal into my account. It's also unlikely that the criminal broke into my GoDaddy account via a specific GoDaddy weakness. There were many domains affected here from many different registrars. I think it would be nice if GoDaddy offered two-step authentication, but their lack of that didn't cause this.

It's not GMail's fault. Yes, my account was hacked into. I have no idea how. I know the password was reset, but I don't know if that was a part of the criminal getting in, or because they wanted to keep me out afterward. Once in, theoretically the criminal could have gained access to anything else of mine by resetting passwords, but that wasn't the case. My GoDaddy or MediaTemple passwords were never changed. Again, there were many domains affected here and the owners of those domains didn't all use GMail. So it wasn't GMail specifically that was the vulnerability that caused all this.

It's not other random technologies fault. I heard some people blaming WordPress, which is just weird.

I'm willing to take some blame here myself. Perhaps I used an unsecure network or something. I'm just not sure.

It's hard to figure out exactly what happened. You might think that since so many of us were affected we could find the commonality. But unfortunately that has made it harder since we've been able to discover so little in common between our situations. It seems to me the most likely case is that the criminal is just damn good at being an internet criminal. Unfortunate that kind of talent is going toward making the world worse instead of better.

What can you do to protect yourself?

This is the section I was looking forward to writing the most. Sadly, I have little to say.

I think you should use really strong passwords that you change frequently. You should probably run antivirus stuff and make sure you don't have anything nasty like a keylogger. I think you should use 2-step verification if you use GMail, which should theoretically make it much harder for a criminal to get in.

The thing that allowed this to happen under my nose was that the email notifications I should have gotten were deleted. So one thing I have done was to start using Domain Monitor and having it notify an alternate email address of changes.

I've also enabled GoDaddy's Domain Protection. css-tricks.com is now about as protected as can be. Nobody, including myself, can transfer the domain. The only way it's possible to transfer is to cancel the service, and part of that process is legally proving my identity with official documents.

So yes, I'm going to keep css-tricks.com on GoDaddy. They were the folks that were with me during all of this and now, especially with the protected registration, I feel secure there.

How are the other people doing?

It's mostly good news. There are only three unresolved cases that I know of.

The worst of which is Soh Tanaka's sohtanaka.com. Soh needs 1and1 to start being responsive and cooperative and accept the domain back from PlanetDomain who is ready to give it back. Soh's site has been offline for days which is super uncool.
A similar situation is Ali A.'s shiachat.com. Ali needs 1and1's cooperation but doesn't have it. At least Ali's nameservers are pointed to the correct place.
Kirupa Chinnathambi is waiting for Network Solutions to get rolling on getting kirupa.com back to him. Apparently the two companies are talking though.

I think it may be of benefit to apply a little social pressure to @netsolcares and @1and1 on these folks behalf, if you are up for it.

Thank you

I'm also quite sure that each of you helped. The community outpouring of support got the attention of the companies involved and surely expedited things. css-tricks.com is now safe. I'm very grateful for that. Now back to your regularly scheduled programming. There are many more articles and screencasts to come!

This Site’s Domain is Now Safe is a post from CSS-Tricks

Poll Results: Ideal Page Size

Chris Coyier — Thu, 08 Dec 2011 16:28:56 +0000

Over 14,000 people responded to this poll in which I asked "What do you think is reasonable page size to try and stay under for a modern web design?"

Here's my simple attempt to make the results visual:

The most popular opinion was that 500k is a good size to stay under with 22% of the vote. Very few people responded saying over 1 MB. The heaviest three weights offered (1.5MB, 2MB, and over 2MB) combined only garnered 13% of the vote.

Another way to say it: 87% of people think websites page size should be 1MB or under.

For the record, CSS-Tricks (at the time of this writing, v9) is about 750k on a fresh load (average 3 seconds), and about 100k on cached reloads (average 1.5 seconds). Times based on my pretty average broadband connection. I'm fairly happy with that. Although I think it's heavy for mobile and if I had more time I'd find ways to optimize that.

It goes without saying that the lower the page size, the better, as that's less information that needs to travel the networks and your page will load faster. But of course how fast your page loads has many more factors that page size alone. Number of requests matter greatly, like reader basitian said:

I dont think its only a question about page weight. From the technical perspective you should at least take the weight AND number of requests into account.

How quickly your server can serve them and how fast the internet connection of your user of course matters too. Remember to think about how your personal internet speed rates compared to others worldwide (assuming worldwide is your audience, which is probably is if it's a website). Jan-Marten de Boer says:

In most country areas in my country, a DSL speed of only 500kb/s is the norm

Earlier in this article I wrote that my broadband was "pretty average". In running a quick speed test, I'm getting 21MB down and 6MB up. That's 40 times faster than Jan-Marten. That's an eye opener, eh?

How the page loads is another consideration. Read this comment by Mike Hopley in which he lays out four scenarios of how a 10 second page load might go down. There are good and bad ways, the best of which is where after the first second passes, the text content of the page is ready to consume, and further loading of the page doesn't scramble things around. Jake Archibold puts it another way: "The time it takes for the page to load isn’t the real issue, it’s the time it take the page to deliver what the user wants."

Lara Swanson of Dyn shares the same sentiment. She thinks 200k is a more reasonable goal and also that the document complete time is more important than the complete page.

I don’t really care about async code that renders after the document completes and I also won’t care about assets that don’t block a user from being able to read and use a page.

I'd say the best practice is just to do the best you can on all fronts and try to make them better any chance you get. Reduce the page size. Combine or reduce requests. Juice up your server and use a CDN. Make sure your loading process is clean without too much reflow. Lazy or asynchronously load as much as you can.

To wrap up, there are some interesting averages compile by Sreeram Ramachandran of Google in 2010 (4.2 billion sites analyzed):

44 requests per page
7 scripts
3 stylesheets
29 images
320k total page size

New poll soonish.

Poll Results: Ideal Page Size is a post from CSS-Tricks

HTML Forms in HTML Emails

Chris Coyier — Wed, 07 Dec 2011 16:10:46 +0000

You know how you can send HTML email?

You know how things like text areas and radio buttons are HTML elements?

Yep.

I got thinking about this after getting this email from Google:

HTML form right in an HTML email

So clearly, it can be done. Inspecting the source of the Google email, it's nothing special. Just an HTML form like any other.

I decided to try it myself, so I made a quick PHP page to send myself an HTML email.

';
//AN_Xml:$message .= '';
//AN_Xml:$message .= 'How did you like the movie Turfnuts?
';
//AN_Xml:$message .= ' ★☆☆☆
';
//AN_Xml:$message .= ' ★★☆☆
';
//AN_Xml:$message .= ' ★★★☆
';
//AN_Xml:$message .= ' ★★★★
';
//AN_Xml:$message .= '
';
//AN_Xml:$message .= 'Leave a quick review:
';
//AN_Xml:$message .= '
';
//AN_Xml:$message .= '
';
//AN_Xml:$message .= ' ';
//AN_Xml:$message .= '';
//AN_Xml:
//AN_Xml:mail($to, $subject, $message, $headers);
//AN_Xml:
//AN_Xml:?>

It worked.

I have only tested GMail so far. GMail gives this warning when submitting the form:

It's just a warning. It doesn't sound too scary. But it's not as clean as submitting a form on a regular website. There are certainly some users that will cancel and not go through with submission. Google's own email does this as well. If you click "OK", the form submits as you expect it would.

Identifying Sendee

Notice the Google email (or my quick test) doesn't include fields like "Name" and "Email". That would be silly wouldn't it? Anyone sending an email like this already knows that information. But how do you know it when you receive the form data? One way would be to pass it along with the post data in a hidden input. Whatever system you use to generate these emails could also drop that email in the value of the input:

But that's not particularly secure. Anyone digging around could see how you are posting that data and submit bogus posts with real email addresses. Not good. It's probably better to post the form with secret codes that identify the user (and anything else you want to identify securely, like the product they are reviewing).


//AN_Xml:

Those gibberish values would be salted hashes that you store on your end before sending out. Then when you receive them back, you can match them up and know exactly what user and product the review is for. Now I'm no security expert, so let me know if there is a smarter way.

Support

Mark Wyner blogged about this for Campaign Monitor in 2007. Here is the support from back then:

2007 information on support for HTML forms in HTML emails

I'd love to update this chart with more current email clients. If anyone can run a test, let me know, we'll get started building it.

Because of that blog post on Campaign Monitor, I can only assume they allow you to send emails that include forms, but I haven't tested it. I did try sending one from MailChimp, but it appeared that they stripped form before sending the email. According to that old article, some email clients consider emails with forms "insecure", so it might be a play on MailChimp's part to prevent bad experiences for users like that and increase deliverability.

If you are thinking of using this idea in practice, for a use case like presented above, you won't be able to use a service to send the emails anyway (since you'll need to generate, store, send those salted hashes securely).

Outlook

It looks like older versions of Outlook strip the forms functionality. So that's a problem. Hopefully new versions don't do that. Older versions of outlook also used Internet Explorer as the rendering engine, which means that you could use conditional tags to help:


//AN_Xml:
//AN_Xml:      
//AN_Xml:         
//AN_Xml:      
//AN_Xml:

Milage on that may vary... apparently Outlook 2007 and Outlook 2010 use Microsoft Word (WTF) as the rendering engine instead of Internet Explorer. Not sure how conditional tags work in Microsoft Word (again, WTF).

Tangential Examples

Amazon sends emails asking for reviews. They don't use in-email forms, but could!

2010 Netflix Email which doesn't use forms, but each ☆ is a different anchor link which goes to a URL which saves that value as your user rating.

HTML Forms in HTML Emails is a post from CSS-Tricks

Public Service Announcement: Careful With Your Nested Border-Radii

Chris Coyier — Tue, 06 Dec 2011 16:19:53 +0000

When you have and element within another padded element, both with different backgrounds and both with border-radius, make sure the inside element's border-radius is a bit less than the outer element.

Otherwise it makes kind of a too-thick "hump" around the edges.

Both have border radius of 20px;

Inside element's border radius reduced to 17px

There probably is some fancy math you could do to figure out the perfect values, but I find eyeballing it works pretty well.

This post brought to you by DICK™ (Details Improve Creative worK).

Public Service Announcement: Careful With Your Nested Border-Radii is a post from CSS-Tricks

Speech Bubble Arrows that Inherit Parent Color

Chris Coyier — Mon, 06 Feb 2012 17:57:42 +0000

Interesting question:

//AN_Xml:

css3 speech bubble question: for the "triangle"'s border color, how can I set it to whatever its parent div's bgcolor is automagically?
//AN_Xml:
— Jin Yang (@jzy) February 1, 2012

//AN_Xml: