After reading this Fontdeck Blog post a few of weeks ago, I dropped an exciting new CSS property into the stylesheet for this blog. Wanting to test hyphenation on all my posts and pages, I applied CSS hyphenation to all paragraphs: p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } During a day or so of road testing I noticed some pretty funky widows, so I fine-tuned my... Read more →
Since upgrading to Lion I’ve noticed a font rendering issue with Safari 5.1. Sites were randomly displaying some web-safe and web-served fonts with the Last Resort font, AKA “Block-A Characters.” These can appear for a variety of reasons, but I was getting them because Safari 5.1 has a compatibility issue when rendering fonts for those who use 3rd party font management apps. I use Font Explorer and love... Read more →
In certain situations, RGBa (red, green, blue, alpha) and HSLa (hue, saturation, lightness, alpha) color values can save the day. It’s widely supported in Chrome, Safari, Firefox, Opera, and IE 9, and when working with box-shadow, text-shadow, or when needing to apply a reduced opacity to a color without affecting the rest of an element, RGBa and HSLa can’t be beat. Dave Rupert and I recently put each... Read more →
Originally when I CSSed the round avatars on the DesignSwap comments area, I used the -webkit-mask-image property. I was really proud of how neat and effective this was until I realized you could apply border-radius to an image directly. To achieve a round avatar with a 2px beige border, I applied the following CSS to an avatar loading within a div class called avatar-frame. .avatar-frame{border: 2px solid #c7b89e;}... Read more →
I use the column-count & column-gap property on the search page of this site to break my Tags list into 4 columns. Because the content is dynamic, I couldn’t just hard code each column, and I didn’t want to waste kilobytes on running a WordPress plugin to achieve an effect that was possible with a single line of CSS. Currently, only firefox and webkit browsers supports this feature... Read more →
I did my fair share of testing this site on an iPad during development. In most cases, the version of Mobile Safari found on the iPad renders pages like any other standards-based browser. Only when I got to native UI elements like search boxes & text fields did I notice an inconsistency. A pre-set styling was being applied in the way of an inner shadow to text input... Read more →
