“I'm an experienced web developer and software engineer. Welcome to my blog. If you need to reach out you can continue the conversation with a tweet to @geedew. I hope you find what you are looking for here. You can also find me on Github and StackOverflow.”

CSS-wide Keywords and All selectors

For a time we struggled to reset browser styles. Resetting has become the first thing many applications do. Resetting also evolved into normalizing and then into the ‘do all pages need to look the same‘ approach. User Agent (UA) styles are an unfortunate design goal that each version of each browser may apply to elements. There has been little you could do to stop that from occurring; other than implementing the same interactions in pure Bootstrap form and ignoring the elements altogether.

This has begun to change. Largely due to the maturity of web development and the advent of Shadow Dom and Web Components, developers now gain new tools to battle UA styles. Firefox 27 released a very powerful and possibly destructive standard. Now you are able to easily reset all UA styles with a single CSS attribute.

1
*{ all:unset; } /* I do not approve (* is bad perf); but can you feel the weight lifted from the shackles being released?! */

Read More

Box-Shadow will crash us all

In CSS3, some of the newest features can bite you. Recently, I discovered a serious issue with box-shadow and rendering. Box-shadow is a new feature that creates a shadow effect either outset (around a box) or inset (inside a box, like a glow). What I wanted to do, was create a soft glow on the inside of a website, using <body>, so that the entire site had an easy fade. The code that I used was currently use is:

1
2
3
4
body {
-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
}

This code actually worked works, and I didn’t notice any issues. However, the 8px fade was too abrupt; I kicked it up ‘just a tad’ to 200px (I have large ‘tads’). Big mistake as all ‘advanced’ browsers were crumbling in my wake. If they support box-shadow, they failed. The page loaded, but scrolling was a complete and utter failure.

For now, I will have to avoid doing this, especially to the large <body> tag. I will chime back in on the topic once I get some solid evidence and facts about it.

Advanced button theming on jQuery UI Dialog

Check out the update to this post!

There is a very annoying bugfeature that I have found when using jQueryUI. It’s not the themes, they work great, in fact, they are the best thing since sliced bread. But in a ‘Cupertino.esc’ way, they provide too much simplicity over the functionality that I require. This post aims to solve that in a progressive enhancement sorta way. I am using jQuery 1.4.2. with jQuery UI 1.8.2, it doesn’t matter what theme you use with this, but I prefer redmond.

Read More

Bulletproof @font-face

There is quite an interesting discussion going on at Jeffrey Zeldman’s blog concerning the @font-face syntax and how to make sure that it is working in all browsers. It’s interesting to see the different ‘hacks’ that are being put together for something that should be hashed out to work well in all major browsers. Why does this remind me of things like the wonky implementations being played out in html5?!