March 13, 2012

Can I change the WebKit CSS rules in my browser?

Question by Ian K

For the occasional late-night computing session, I like to tone done the colors of the sites I’m using for the sake of retaining my eyesight. My typical go-to extension is Stylish, a useful tool that loads custom CSS in webpages.

Curiosity and tampering led to the question I have here. Can I change WebKit’s CSS defaults in WebKit’s tags to better suit my needs? I’m speaking in regards to custom browser CSS rules, those used in Safari and Chrome for -webkit-, and others for other browsers. Is there any plain-text file that helps define these rules, which would allow me to edit them and therefore tamper with browser-loaded defaults?

Answer by Starx

I don’t recommend going on with this. Making a page appear differently in a certain browser,

  • is not user friendly, but rather confusing
  • and its sure to decrease usability.

Having said that, that are many webkit specific rules which you can define. And, overriding them is the only way of changing the default behavior.

This page consists all the webkit specific rules and you can override these rules by redefining them in your style sheet.

For example:

-webkit-box-orient: vertical;

Override the default rule and orients the elements vertically.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!