Wednesday, 24 January 2018

css - What is user agent stylesheet



I'm working on a web page in Google Chrome. It displays correctly with the following styles.




table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}


It is important to note that I didn't define these styles. On Chrome dev tools, it says user agent stylesheet in place of the CSS file name.




Now if I submit a form and some validation error occurs, I get the following stylesheet:



table {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-variant: normal;
font-style: normal;

color: -webkit-text;
text-align: -webkit-auto;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}



The font-size from these new styles is disturbing my design. Is there any way to force my stylesheets and if possible, completely overwrite Chrome's default stylesheet?


Answer



What are the target browsers? Different browsers set different default CSS rules. Try including a CSS reset, such as the meyerweb css reset or normalize.css, to remove those defaults. Google "css reset vs normalize" to see the differences.


No comments:

Post a Comment

casting - Why wasn't Tobey Maguire in The Amazing Spider-Man? - Movies & TV

In the Spider-Man franchise, Tobey Maguire is an outstanding performer as a Spider-Man and also reprised his role in the sequels Spider-Man...