Browsers' default CSS for HTML elements

Question

Where can I find a browser\'s default CSS for HTML elements?

Many HTML elements come with some default CSS properties which can sometimes result in

Answer 1

While this is an old cross browser problem, as each browsers has his own rendering and behavior with some html elements like medias and inputs elements, we can now in 2017 use pretty safely the css filters proprety on top of them.

This allow to give a color palette with the hue-rotate filter that will render pretty well cross browsers.

The following snippets show a way to use a input type color to render this effect in realtime on a video element with javascript.

To use only css, this is mandatory to use each one of this filters: sepia not at 0, high saturation, grayscale at 0, high contrast, and then give a color with the hue-rotate property, following my tests. The invert filter isn't mandatory, but is giving some deep effects.

As well, the drop-shadow filter is working pretty nicely cross browser. To be use like this: filter:drop-shadow(2px 20px 50px red) [X,Y,RADIUS,COLOR]

function styloElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  
  media.style.cssText += ";filter:sepia(100%) saturate(1000%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"

}
styloElem()

body {
  text-align:center;
  background:#001;
  color: white
}
video {
  width:500px;max-width:500px
}

Colors: 




 

Can i use css filters:

http://caniuse.com/#feat=css-filters

A toolbar I made around css filters, from where are coming this notes:

https://github.com/webdev23/ponyFilters

A more complete codepen example:

http://codepen.io/Nico_KraZhtest/pen/bWExEB/