Wednesday, January 24, 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

plot explanation - Why did Peaches' mom hang on the tree? - Movies & TV

In the middle of the movie Ice Age: Continental Drift Peaches' mom asked Peaches to go to sleep. Then, she hung on the tree. This parti...