Menu Close

Fun with CSS no.1

I’m picky about my UIs. I use tech so much in my daily life, that I feel the need to be. 

Also, I’m highly … “principled”. I think that when I buy a device or software, it should do what I want. Not the other way around.

In that vein, today, I’m exploring User StyleSheets.

 

Most of the web that we experience today is HTML. This can either be a static HTML document that was typed up beforehand and published, OR it can be dynamically generated on-the-fly by PHP, JavaScript, and an array of other languages. But, after this HTML is generated, all of those elements must be STYLED. That is they must be given a color, a place on the page, a relationship to the other elements. This is all done through the magic of Cascading Style Sheets.

They are Cascading due to the fact that style choices will be inherited by lower level elements unless specifed. 

All of this action is handled automatically by our browser, and happens in the background where we don’t need to see it. BUT, since ultimately, we are controlling the endpoint (browser), what if we were able to insert our own CSS into the mix, and override the intention of the website author? Turns out that most browsers have supported this feature for a decade or more. Its called User Style Sheets, and it can completely change the way that you experience the Web.

 

To start with, we can make a global change:

Design trends these days are pushing FLAT on us pretty heavily. It is great to look at if you’re an artist. Not so much if you are a user attempting to use the tool. For instance, when I pull up a web page, there are HYPERLINKS. Clicking these should take me to another page. But, how can I easily identify these links? 

In the good old days, all links were Blue and Underlined. They turned Purple when you had clicked on them at least once. Easy, right?

Well, now you can undo the past decade of design mistakes. Copy and paste the following code into a text document, and save it as UserStyle.css

 

 

## GLOBAL
a {
text-decoration : underline !important;
}

a:link {
color:#0000FF !important;
} /* unvisited link is black*/

a:visited {
color:#660066 !important;
} /* visited link is black (reverse the color back to black)*/

## duckduckgo.com
/* Duck Duck Go Homepage Background */
.body–home {
background : #f1f7dd !important;
}

 

From the document above, you can see that we are telling the browser that all a (anchor) elements should be underlined. Then, unvisited ones (a:link) should be colored blue and visited ones in purple. Theres also an additional goodie that changes the background color of DuckDuckgo.com (if you’re into that whole privacy and non-curated search thing)

The possibilities here are endless. But styling dynamic pages can be much more complicated due to randomly generated element names. More on that to come….

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.