Notes and news, insights and inspiration from the autonomous collective mind of GS.

FED Stuff - September Edition

Steve Schrab by on September 30, 2011

FED Stuff is a collection of the little CSS and Front-End Developer tricks that I’ve learned each month. There is a lot to learn. Some may be new to you. Some may be what you assumed is common knowledge. But we can't know for sure unless we share. This is my attempt to share them. Little tricks add up to big things.

-webkit-font-smoothing

Get a little fine tuning on fonts in webkit browsers. Using ‘antialiased’ seems to clean up fonts that are looking a little heavy. I used this on the GS site when the Museo font was looking thicker than it did in Photoshop.

	-webkit-font-smoothing: none;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-font-smoothing: antialiased;

MORE INFO: http://www.usabilitypost.com/2010/08/26/font-smoothing/


:target pseudo class

You can style in-page anchor targets depending on the whether the target was used in the URL or not. For example:

<style>
	#supercool {
		font-size: 1em;
	}
	#supercool:target {
		font-size: 1.5em;
	}
</style>

<div id="supercool">This is sweet!</div>

So, if you go to the URL of http://super.com/index.html, you’ll see the div with a regular font size. If you go to http://super.com/index.html#supercool, it’ll have a larger font size. Or you could use some kind of CSS animation to bring attention to the section you just anchor linked too. Kinda sexy in my opinion.


Changing the “Tap” Color on Mobile WebKit

Allows you to change color of the tap highlight that occurs in mobile WebKit browsers. The default is an opaque black.

html {
	-webkit-tap-highlight-color: rgba(201, 224, 253, 0.8);
}

MORE INFO: http://davidwalsh.name/mobile-highlight-color


Border-radius and IE9

The CSS3 property border-radius is fully supported in IE9. You can even use it without a vendor prefix. However, you need to specify the radius of all four corners of the box even if all those values are the same. While the spec allows you to use something like border-radius: 8px and have all four corners be the same, IE9 requires you to list those values separately. So you need to use border-radius: 8px 8px 8px 8px to get it working.

Thanks a lot IE9.


Rules about styling headings within Section tags

While this is an interesting article about styling heading tags with Section tags, what interested me most was further definition of the often misunderstood section tag.

GIVE IT A READ: http://www.stubbornella.org/content/2011/09/06/style-headings-using-html5-sections/

Categories: 
Share:

Add new comment