CSS-Tricks

Public Service Announcement: Watch Your @font-face font-weight

Chris Coyier — Thu, 29 Dec 2011 15:16:35 +0000

Let's say you're browsing Google Web Fonts for a free font to use on your website. You find one you like...

You think it will look nice as headings on your site. So you follow the directions on Google Web Fonts "quick use".

1) Copy/Paste CSS link to page:

2) Copy/Paste font-family CSS to your headings CSS:

h1, h2, h3, h4, h5 {
//AN_Xml:   font-family: 'Spicy Rice', cursive;
//AN_Xml:
//AN_Xml:   /* Your other headings CSS */
//AN_Xml:}

And alas! You've done it, your headings are now in your specially picked out font:

But then you start to notice that the font is a bit muddier than you'd like. It might be hard to explain, but it just doesn't look as good as when you picked it off Google Web Fonts. Or maybe someone else notices and:

The problem is the font is muddier than you originally saw it, and it's all about font-weight.

You see, the default font-weight for headings in browsers is "bold" (or more specifically, 700). And if you looked carefully when choosing this font, you might have noticed:

You might fall pray to this if:

You don't use a reset and didn't specify a font-weight for headings (defaults to user-agent style of bold).
You use Normalize.css instead of a reset, which doesn't adjust the font-weight since bold is consitent cross-browser default.
You explicity set font-weight to bold on headings (like you might if you use a reset).

This isn't Google Web Fonts or the font itself's fault. It's just this font doesn't come in a bold weight and you are asking for it specifically. That means the browser tries to bold the font for you, which is something it's able to do but isn't particularly good at (hence the muddiness).

Fixing it is as simple as being specific with your font-weight to match what the font offers.

h1, h2, h3, h4, h5 {
//AN_Xml:   font-family: 'Spicy Rice', cursive;
//AN_Xml:   font-weight: 400; /* Be specific */
//AN_Xml:   /* Your other headings CSS */
//AN_Xml:}

So yeah. In short:

This is a problem most common in decorative fonts where it's most common there is only one font-weight available. I'd say fonts from paid services like Typekit generally offer fonts with a wider variety of font-weights available, but that's not to say it can't be a problem with Typekit, as it's smart/recommended to load as few weights as you can get away with to lighten the load of your page.

Also note, this is a common problem with italics as well. Say you decide to load a normal, bold, and italic version of a font. If you then have text that is both bold and italic, the browser will have to fake it (because it doesn't have a bold-italic version available) and it will look bad. It happens to me on this site, but I don't think loading an extra whole version of the site is worth it so I just try to avoid it.

Public Service Announcement: Watch Your @font-face font-weight is a post from CSS-Tricks

Get Value of CSS Rotation through JavaScript

Chris Coyier — Wed, 28 Dec 2011 16:42:30 +0000

A comment by aditya:

Is there a way to get the angle [through JavaScript] by which the element is rotated?

Seems like a reasonable request. So we have some HTML:

text

And it's rotated through CSS:

#i-am-rotated {
//AN_Xml:  -webkit-transform: rotate(30deg);
//AN_Xml:  -moz-transform:    rotate(30deg);
//AN_Xml:  -ms-transform:     rotate(30deg);
//AN_Xml:  -o-transform:      rotate(30deg);
//AN_Xml:}

Our goal is to get the number "30" from that element via JavaScript. The modern way to access styling information from an element is getComputedStyle() (Supported in all modern browsers and IE 9+, older IE supported currentStyle()). Let's try and get it with getComputedStyle():

var el = document.getElementById("i-am-rotated");
//AN_Xml:
//AN_Xml:var st = window.getComputedStyle(el, null);
//AN_Xml:
//AN_Xml:var tr = st.getPropertyValue("-webkit-transform") ||
//AN_Xml:         st.getPropertyValue("-moz-transform") ||
//AN_Xml:         st.getPropertyValue("-ms-transform") ||
//AN_Xml:         st.getPropertyValue("-o-transform") ||
//AN_Xml:         st.getPropertyValue("transform") ||
//AN_Xml:         "Either no transform set, or browser doesn't do getComputedStyle";

You might think the value returned would be "rotate(30deg)" and we could run parseInt() on it and get "30". But unfortunately that doesn't work. The actual value we get back is this:

console.log(tr);
//AN_Xml:// matrix(0.8660254037844387, 0.49999999999999994, -0.49999999999999994, 0.8660254037844387, 0, 0)

The browser turns the CSS rotation transform into a matrix transform. I imagine it does this to simplify what could be multiple transforms on the single element into one value. So what are we to do?

Nicolas Gallager researched the matrix transformation for rotate transforms. Which is essentially this:

rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0);

We really just need one of these to make a quick equation. We just need to un-sin (opposite of sin, arc sin, asin, sin^-1) on of the values we have to get the radians.

First we get our hands on the separate individual matrix values:

var values = tr.split('(')[1].split(')')[0].split(',');
//AN_Xml:
//AN_Xml:var a = values[0]; // 0.866025
//AN_Xml:var b = values[1]; // 0.5
//AN_Xml:var c = values[2]; // -0.5
//AN_Xml:var d = values[3]; // 0.866025

Then we know sin(X) == 0.5 so asin(0.5) == radians and degrees == radians * 180/π.

So:

var angle = Math.round(Math.asin(b) * (180/Math.PI));
//AN_Xml:console.log(angle);
//AN_Xml:// 30

Yay!

Nicolas took it a bit further by accounting for scale as well. With the full code below, the rotation value can be extracted with any number of other transforms applied.

#complex-transform {
//AN_Xml:  -webkit-transform: rotate(30deg) scale(1.2) skew(10deg) translate(5px, 5px);
//AN_Xml:  -moz-transform:    rotate(30deg) scale(1.2) skew(10deg) translate(5px, 5px);
//AN_Xml:  -ms-transform:     rotate(30deg) scale(1.2) skew(10deg) translate(5px, 5px);
//AN_Xml:  -o-transform:      rotate(30deg) scale(1.2) skew(10deg) translate(5px, 5px);
//AN_Xml:}

var el = document.getElementById("complex-transform");
//AN_Xml:var st = window.getComputedStyle(el, null);
//AN_Xml:var tr = st.getPropertyValue("-webkit-transform") ||
//AN_Xml:         st.getPropertyValue("-moz-transform") ||
//AN_Xml:         st.getPropertyValue("-ms-transform") ||
//AN_Xml:         st.getPropertyValue("-o-transform") ||
//AN_Xml:         st.getPropertyValue("transform") ||
//AN_Xml:         "fail...";
//AN_Xml:
//AN_Xml:// With rotate(30deg)...
//AN_Xml:// matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)
//AN_Xml:console.log('Matrix: ' + tr);
//AN_Xml:
//AN_Xml:// rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix
//AN_Xml:
//AN_Xml:var values = tr.split('(')[1].split(')')[0].split(',');
//AN_Xml:var a = values[0];
//AN_Xml:var b = values[1];
//AN_Xml:var c = values[2];
//AN_Xml:var d = values[3];
//AN_Xml:
//AN_Xml:var scale = Math.sqrt(a*a + b*b);
//AN_Xml:
//AN_Xml:// arc sin, convert from radians to degrees, round
//AN_Xml:// DO NOT USE: see update below
//AN_Xml:var sin = b/scale;
//AN_Xml:var angle = Math.round(Math.asin(sin) * (180/Math.PI));
//AN_Xml:
//AN_Xml:// works!
//AN_Xml:console.log('Rotate: ' + angle + 'deg');

UPDATE: Turns out this line is way more reliable for calculating angle:

var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

View Demo

Thanks Nicolas, Divya, and Oli for behind-the-scenes help.

Get Value of CSS Rotation through JavaScript is a post from CSS-Tricks

Thank You (2011 Edition)

Chris Coyier — Mon, 26 Dec 2011 15:20:02 +0000

Hey folks! It's that time of year again where I write a post to say thanks to every person visiting this site. CSS-Tricks is part of my career, so just by virtue of you visiting this site directly helps me.

Like families often send holiday letters to their relatives with a review of their year and the notable things family members have done, I like to write this blog post and review the year at CSS-Tricks through the numbers. (See 2007, 2008, 2009, 2010)

I wrote 264 posts in 2011. 107 of those were "link" posts, which I still count because I do some writing along with them.

I crossed the 1,000 post milestone, now with 1,017 posts. That's an average of 15 posts per month since launch in July 2007.

There have been 41,941 approved comments to the site. Which averages out to about 41 comments per post, which I think is just an amazing level of community involvement. No spam in there either. Akismet has blocked 102,977 spam comments. I am still a big fan of featuring and burying comments as a way of rewarding quality comments and hiding not-spam-but-not-helpful comments, which makes the often-long threads easier to read.

The most ever commented post, with 421 comments, was just this month when I asked about internet connection speed. I've been thinking about doing a week or month where I do all opinion-style article and let the comments roll and this kind of participation encourages that.

Comment graph since launch of site (see)

I had 3 big scares this year:

One day I woke up to find the forums offline. Turns out it was a problem with how Vanilla forums does things and I nearly decided to sunset the forums as I didn't have time to deal with another big forum migration. Fortunately I was able to patch Vanilla in such a way that this nasty problem can't happen again, and the forums are alive and well.
In June, I had some serious performance problems with the site. After tons of troubleshooting, I was able to track it down to my permalink structure in WordPress. This site has 792 "pages" (that's how I do snippets and screencasts) which comes with a serious perfomance penalty when combined with using the /%postname%/ permalink structure in WordPress. I switched away from that and the site was fine. Now that WordPress 3.3 is out, that issue is fixed, and I've switched back.
In December, I found out the domain name css-tricks.com was stolen. Fortunately in about a week I was able to get it back.

In April 2011, SurveyMonkey purchased Wufoo (where I work) for $35m. This purchase meant moving to California to work out of the SurveyMonkey office, which in August 2011 I did and am still there now.

The advertising on the site has seen a bit of a shakeup lately. The block of six 125x125px advertisement in the sidebar are gone and replaced with a single advertisement for Treehouse. They also have the header advertisement. It's essentially a full-site sponsorship, like "CSS-Tricks, brought to you by Treehouse." I worried about removing advertisers that were long-time sponsors and friends to CSS-Tricks, but I think this is the correct move for me. It's a net gain financially and more importantly, the advertisements look better and are more integrated into the responsive nature of the site. I still have some spots on BuySellAds and still quite like their service.

Version 9 of this site rolled out this August and then I release and updated navigation and advertising (calling that v9.2) in November 2011. I'm sure there will be a real v10 in 2012, but that work hasn't started yet in earnest. The more the site grows the harder new versions are. I don't want v10 to be just a re-skin, but a more through audit of the experience of each section of the site. Honestly I bet it's Fall 2012 before that happens, but you never know.

Just this past month has broken some traffic records for the site. I'm now seeing over 1 million uniques per month with over 4 million pageviews. I think traffic will continue to grow. I plan to keep doing everything I always have around here, only in addition, work on the gallery and almanac (new very recently), which is just all the more content for people to find and explore.

Of the 38 million pageviews in the whole of 2011, about 30% of it went to demos. 11% went to the snippets area of the site. 4% went to the forums and another 4% to the screencasts. The most popular article was Perfect Full Page Background Images, which wasn't even written this year.

It's a near draw, 51% vs 49% in Returning Vistors vs New Visitor.

55% of traffic comes from search engines, 29% from referral sites, and 16% direct. The most poplar search term is "css tricks" with 2.5% of search traffic followed by "css shadow" with 1%. The top three referral sites are 1) 1stwebdesigner, 2) Smashing Magazine, 3) Web Design Ledger

The RSS feed hit a peak of 82,888 subscribers. It's still growing in number, but interestingly, growth itself has declined. Where we gained 25,000 new subscribers in 2010, we only gained 18,000 this year. I'm still a huge fan of RSS, but I can see how widespread usage of it is impacted by growth of social media use.

I have received 8,329 messages through the Wufoo contact form on this site, 2,844 were from this year (about 8 a day). I respond to the majority of them, unless they are a request for direct help which I unfortunately don't have the time for and instead recommend the forums.

Speaking of the forums, there are 13,233 forum threads. That's just threads, not total posts which I'm sure is many times that. I have numbers of registered users, but unfortunately it's so mired with spam users that number isn't useful. There are five forum moderators that do great work keeping the forums civil, spam-free, and useful. Thanks to Robskiwarrior, TheDoc, Mottie, jamy_za, and TT_Mark.

Goals

I set pretty loose goals for 2011. One I did mention was wanting to do another book, which I failed at. I'll be more specific this year:

Actually design more things, become better designer
Finish Almanac
Release a book or have serious progress on one
Produce at least one new round of CSS-Tricks merchandise
Release one web app side project
Continue same moderate pace of blogging and shooting screencasts while also posting new things to the gallery and snippets.

So thanks again folks! Here's to a fantastic 2012 for all of us!

Thank You (2011 Edition) is a post from CSS-Tricks

Custom Events are Pretty Cool

Chris Coyier — Fri, 23 Dec 2011 01:46:29 +0000

Let's say you are working on a web application in jQuery and you are tasked with writing an accordion suited to the needs of your web app. You decide to make it into a plugin. That way anywhere in this app that needs an accordion, they can load this plugin and call it upon semantic markup that is ready to become an accordion. Then ta-da, they have a lovely working accordion.

Now another developer is using your accordion and they want to be able to Ajax load some content into one of the sections of the accordion, but only when that section is opened. Together you decide that you should keep your code separate. The generic functionality of how an accordion works should be separate from code specific to one accordion on one page of an app.

Callbacks, the traditional way

One way to approach that would be to write "callbacks" into your plugin. The other developer would specific the name of a function that she wants run when certain actions happen on that accordion. So the calling of it might be like:

$(".accordion").accordion({
//AN_Xml:  panelOpen: myPanelOpenCallback,
//AN_Xml:  panelClose: myPanelCloseCallback;
//AN_Xml:});

And they would have created those callback functions themselves:

function myPanelOpenCallback() {
//AN_Xml:  // Do Ajax stuff
//AN_Xml:}

Then the plugin itself would honor those callbacks in its related internal functions:

$.fn.accordion = function(options) {
//AN_Xml:
//AN_Xml:	return this.each(function(i, el) {
//AN_Xml:
//AN_Xml:	  var base = el;
//AN_Xml:
//AN_Xml:	  base.init = function() {
//AN_Xml:	  	// Do initialization stuff
//AN_Xml:	  };
//AN_Xml:
//AN_Xml:	  base.openPanel = function(panel) {
//AN_Xml:	  	// Open panel
//AN_Xml:
//AN_Xml:		// Do callback
//AN_Xml:		options.panelOpen.call();
//AN_Xml:	  };
//AN_Xml:
//AN_Xml:	  base.closePanel = function(panel) {
//AN_Xml:	  	// Open panel
//AN_Xml:
//AN_Xml:		// Do callback
//AN_Xml:		options.panelClose.call();
//AN_Xml:	  };
//AN_Xml:
//AN_Xml:	  base.init();
//AN_Xml:
//AN_Xml:	});
//AN_Xml:
//AN_Xml:};

View Demo of Callback Model

Custom Events, a better way

Now let's say a third developer gets involved, and they also want to write a bit of JavaScript that reacts to a panel opening as well. For the sake of a use case, say what's inside the accordion panels are settings, and this developer wants to save those settings whenever keys are opened or closed automatically.

Now we're in an interesting position. We've already defined our callback for accordion panels opening and closing. So in the callback model, these developers are going to have to get together on that callback and run both of their code in that one callback. Not that big of a deal, but now we're forced to mix code when that might not be ideal. Remember we started this whole thing off by separating specific functionalities.

Here's where custom events are super rad. Instead of firing off a specified callback, the accordion functionality plugin fires off a custom event. Custom events are just like any other event (e.g. click) only they are only declared and called programmatically.

First, callbacks are gone, we just call the accordion plugin without them:

$(".accordion").accordion();

Now in place of where we called the callbacks, we'll trigger our Custom Event. Basically, just make up a name that makes sense (like you are naming a function).

// OUT
//AN_Xml:// options.panelOpen.call();
//AN_Xml:
//AN_Xml:// IN
//AN_Xml:panel.trigger("panelOpen");

Now our other developers can bind their stuff to this custom event and do their own thing.

$(".panel").on("panelOpen", function() {
//AN_Xml:   // Developer 1: do Ajax stuff
//AN_Xml:});
//AN_Xml:
//AN_Xml:// Meanwhile, in another part of town...
//AN_Xml:$(".panel").on("panelOpen", function() {
//AN_Xml:   // Developer 2: do saving stuff
//AN_Xml:});

Yay for freedom! Yay for separation of functionality!

In my opinion custom events are just better all around. I do think they require a bit more communication though. You'll probably have to write up some comments somewhere that explain what custom events are fired and when and make that easy to discover.

View Demo of Custom Events model

More Information

The scenario outlined above is very simple. The following two articles go way more into depth about Custom Events including more complex examples and more information on how they work.

Demystifying Custom Events in jQuery by Rebecca Murphey
jQuery Special Events by Ben Alman

Custom Events are Pretty Cool is a post from CSS-Tricks

Stuff you can do with the “Checkbox Hack”

Chris Coyier — Wed, 21 Dec 2011 19:36:30 +0000

The "Checkbox Hack" is where you use a connected label and checkbox input and usually some other element you are trying to control, like this:

Do Something
//AN_Xml:
//AN_Xml:Control me

Then with CSS, you hide the checkbox entirely. Probably by kicking it off the page with absolute positioning or setting its opacity to zero. But just because the checkbox is hidden, clicking the still toggles its value on and off. Then you can use the adjacent sibling combinator to style the

differently based on the :checked state of the input.

input[type=checkbox] {
//AN_Xml:   position: absolute;
//AN_Xml:   top: -9999px;
//AN_Xml:   left: -9999px;
//AN_Xml:   /* For mobile, it's typically better to position checkbox on top of clickable
//AN_Xml:      area and turn opacity to 0 instead. */
//AN_Xml:}
//AN_Xml:
//AN_Xml:/* Default State */
//AN_Xml:div {
//AN_Xml:   background: green;
//AN_Xml:   width: 400px;
//AN_Xml:   height: 100px;
//AN_Xml:   line-height: 100px;
//AN_Xml:   color: white;
//AN_Xml:   text-align: center;
//AN_Xml:}
//AN_Xml:
//AN_Xml:/* Toggled State */
//AN_Xml:input[type=checkbox]:checked ~ div {
//AN_Xml:   background: red;
//AN_Xml:}

View Demo

So you can style an element completely differently depending on the state of that checkbox, which you don't even see. Pretty neat. Let's look at a bunch of things the "Checkbox Hack" can do.

Disclaimer: Some of this stuff crosses the line of what you "should" do with CSS and introduces some bad semantics. It's still wicked fun to play with and cool that it's possible, but in general functional behavior should be controlled by JavaScript.

Custom Designed Radio Buttons and Checkboxes

Hide the default UI of a radio button or checkbox, and display a custom version right on top of it. Probably not generally good practice, as users are familiar with default form elements and how they work. But can be good for enforcing cross browser consistency or in situations where the UI is so obvious anyway it's just for fun.

Pioneered by Ryan Seddon
Similar by Martin Ivanov
For use on Wufoo forms by me

File system like "tree menu"

Demo by Ryan Seddon

Tabbed Areas

The "tabs" design pattern is just toggling on and off of areas, perfect for the checkbox hack. But instead of checkboxes, in which any checkbox can be on or off independently of one another, these tabs use radio buttons in which only one per group can be on at a time (like how only one tab can be active at a time).

Functional CSS tabs revisited

Dropdown Menus

Original by paullferguson and then Forked for betterness by me

Push Toggles

From What's My MPG?

Options from Dabblet

FAQ Answer Revealing

View Demo

Stuff you can do with the “Checkbox Hack” is a post from CSS-Tricks

Adobe-like Arrow Headers

Chris Coyier — Tue, 20 Dec 2011 16:33:14 +0000

Adobe has some pretty cool header bars for modules on their site:

The header bar is divided into left and right sections. The left being an explanatory title and the right being a related link. But let's get super critical of how they did it. First of all, they use a non-sprited image to do it:

That means an extra HTTP request just for the headers. Worse, the :hover effect is a totally separate image. That means yet another HTTP request and a "flash of black" while the second image loads on your first hover.

We can do it with zero images! Here's our version:

View Demo Download Files

The markup for the header is just a title with a link inside:


//AN_Xml:  Community Blue
//AN_Xml:  
//AN_Xml:

Here's the basic setup of the header, with the link on the right with basic coloring, including the straight white line made by a border:

.module h2 {
//AN_Xml:	background: #ccc;
//AN_Xml:	padding: 0 0 0 10px;
//AN_Xml:	font-size: 16px;
//AN_Xml:
//AN_Xml:	/* Thickness of the bar more easily achieved with line-height
//AN_Xml:	   since padding would push link inward.  */
//AN_Xml:	line-height: 2;
//AN_Xml:}
//AN_Xml:.module h2 a {
//AN_Xml:	float: right;
//AN_Xml:	position: relative;
//AN_Xml:	text-decoration: none;
//AN_Xml:	color: #333;
//AN_Xml:	padding: 0 10px;
//AN_Xml:	border-left: 5px solid white;
//AN_Xml:}

Now the trick to getting the arrow within the line is just using CSS triangles applied via the ever-useful pseudo elements.

.module h2 a:before,
//AN_Xml:.module h2 a:after {
//AN_Xml:	content: "";
//AN_Xml:	position: absolute;
//AN_Xml:	/* Pushed down half way, will get pulled back up half height of triangle
//AN_Xml:	   ensures centering if font-size or line-height changes */
//AN_Xml:	top: 50%;
//AN_Xml:	width: 0;
//AN_Xml:	height: 0;
//AN_Xml:}
//AN_Xml:.module h2 a:before {
//AN_Xml:	left: -12px;
//AN_Xml:	/* Triangle */
//AN_Xml:	border-top: 8px solid transparent;
//AN_Xml:	border-bottom: 8px solid transparent;
//AN_Xml:	border-right: 8px solid white;
//AN_Xml:	/* Pull-up */
//AN_Xml:	margin-top: -8px;
//AN_Xml:}
//AN_Xml:.module h2 a:after {
//AN_Xml:	/* Smaller and different position triangle */
//AN_Xml:	left: -5px;
//AN_Xml:	border-top: 6px solid transparent;
//AN_Xml:	border-bottom: 6px solid transparent;
//AN_Xml:	border-right: 6px solid #a2d6eb;
//AN_Xml:	margin-top: -6px;
//AN_Xml:}

One significant difference between ours and theirs is that they have a gradient that goes right through the triangle. That's not possible with ours as it's not practical to apply gradient with the CSS triangle technique. That's not to say gradients are out though, you'd just need to make sure that where the triangle attaches to the main link, the color is solid.

For the demo page I added a few different colors, transitions, and examples where double-triangles could be used to fake an angled line.

View Demo Download Files

Adobe-like Arrow Headers is a post from 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

The Syntax vs The Spirit

Chris Coyier — Fri, 10 Jan 2014 20:43:51 +0000

Sometimes I literally can't remember how to write a for loop. Not like funny ha-ha I can't remember how to spell "psychology" but really I can figure it out in a few seconds. Like, go to Google, type in "for loop PHP", click on a promising result, copy and paste, then alter it.

//AN_Xml:

I'm mostly a front-end guy, but I'm essentially a professional programmer. Isn't that ridiculous and embarrassing? Meh.

//AN_Xml:

I'm in and out of a lot of different languages in any given day. A for loop is different in all of them. Here they are:

//AN_Xml:

for i in 1..5
//AN_Xml:  puts i
//AN_Xml:end

//AN_Xml:

for (i = 0; i < 5; i++) {
//AN_Xml:  console.log(i);
//AN_Xml:}

//AN_Xml:

for ($i = 1; $i < 5; $i++) {
//AN_Xml:  echo $i;
//AN_Xml:}

//AN_Xml:

@for $i from 1 through 5 {
//AN_Xml:  .n-#{$i} { color: red; }
//AN_Xml:}

//AN_Xml:

- (1..16).each do |i|
//AN_Xml:  %div #{i}

//AN_Xml:

for i in [1...16]
//AN_Xml:  console.log(i)

//AN_Xml:

They are all different. None are very difficult to understand, but the for loop is probably the simplest construct you'll need to write in a language, so you can imagine it gets worse.

//AN_Xml:

So what.

//AN_Xml:

All those languages have perfectly good reasons for why they do that the way they do. It is a minor inconvenience to maneuver the correct characters into place to get them to do the job.

//AN_Xml:

What matters is:

//AN_Xml:

I know what a for loop is
I know when to reach for a for loop
I know the difference between a for loop and other loops
I know the potential dangers of a for loop

//AN_Xml:

Nevermind the syntax, it's the spirit that counts.

//AN_Xml:

//AN_Xml: //AN_Xml:

The Syntax vs The Spirit is a post from CSS-Tricks

Front End Ops

Chris Coyier — Wed, 08 Jan 2014 15:26:04 +0000

As Alex Sexton laid out, it's a thing. More and more people will be hired to do it specifically and organizations will start thinking of it as an important piece of the pie. These slides by Ian Feather help explain what that might look like.

//AN_Xml:

Direct Link to Article — Permalink…

//AN_Xml: //AN_Xml:

Front End Ops is a post from CSS-Tricks

When To Use The Button Element

Chris Coyier — Wed, 08 Jan 2014 02:32:19 +0000

You use it when, uhm, you want a button on your page that users can click, right? Well, unfortunately it's a bit more complicated than that. It's not too bad though, let's figure it out.

//AN_Xml:

It looks like this:

//AN_Xml:

What's the most common result of clicking something on a website? Moving to a new URL, like you would clicking a link (an ) element).

//AN_Xml:

The //AN_Xml: //AN_Xml:

However gross the UX, forms can have reset buttons as well. You can duplicate that behavior by changing the default submit type to reset.

//AN_Xml:


//AN_Xml:  
//AN_Xml:

//AN_Xml:

Clicking that button will clear all the other inputs (and textareas) with the parent

//AN_Xml:

Buttons can have content

//AN_Xml:

The primary reason for using a ) tag. Which means there can be stuff inside. A common use case would be something like:

//AN_Xml:

While an input can be , this mixed content would be hard to pull off.

//AN_Xml:

As far as I can tell, there is no limit to what kind of content you can put in a button, so feel free to get real weird with it. Pseudo elements can be used too.

//AN_Xml:

Let's leave styling //AN_Xml:

But

//AN_Xml:

Even if a

CSS-Tricks

Public Service Announcement: Watch Your @font-face font-weight

Get Value of CSS Rotation through JavaScript

Thank You (2011 Edition)

Goals

Custom Events are Pretty Cool

Callbacks, the traditional way

Custom Events, a better way

More Information

Stuff you can do with the “Checkbox Hack”

Custom Designed Radio Buttons and Checkboxes

File system like "tree menu"

Tabbed Areas

Dropdown Menus

Push Toggles

FAQ Answer Revealing

Adobe-like Arrow Headers

Community Blue

Multiple Attribute Values

But what about other attributes?

Dabblet

Auto Updating IE

Open a Window with Full Size Unscaled Image

The Syntax vs The Spirit

Front End Ops

When To Use The Button Element

Button is a Form Element

Buttons can have content

Let's consider: "if a button doesn’t have a meaningful href, it’s a

But

Alright. Let's insert it with JavaScript then.

When links make more sense

Accessibility concerns

CSS-Tricks

Public Service Announcement: Watch Your @font-face font-weight

Get Value of CSS Rotation through JavaScript

Thank You (2011 Edition)

Goals

Custom Events are Pretty Cool

Callbacks, the traditional way

Custom Events, a better way

More Information

Stuff you can do with the “Checkbox Hack”

Custom Designed Radio Buttons and Checkboxes

File system like "tree menu"

Tabbed Areas

Dropdown Menus

Push Toggles

FAQ Answer Revealing

Adobe-like Arrow Headers

Community Blue

Multiple Attribute Values

But what about other attributes?

Dabblet

Auto Updating IE

Open a Window with Full Size Unscaled Image

The Syntax vs The Spirit

Front End Ops

When To Use The Button Element

Button is a Form Element

Buttons can have content

Let's consider: "if a button doesn’t have a meaningful href, it’s a

But feels better anyway

Alright. Let's insert it with JavaScript then.

When links make more sense

Accessibility concerns

But