Ik'ben bezig met een webpagina in Google Chrome. Het wordt correct weergegeven met de volgende stijlen.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
Het is belangrijk op te merken dat ik'deze stijlen niet heb gedefinieerd. In Chrome dev tools staat er user agent stylesheet in plaats van de CSS bestandsnaam.
Als ik nu een formulier invul en er treedt een validatiefout op, dan krijg ik het volgende 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;
}
De font-size
van deze nieuwe stijlen verstoort mijn ontwerp. Is er een manier om mijn stylesheets te forceren en indien mogelijk, Chrome's standaard stylesheet volledig te overschrijven?
Wat zijn de doelbrowsers? Verschillende browsers stellen verschillende standaard CSS regels in. Probeer een CSS reset op te nemen, zoals de meyerweb css reset of normalize.css, om deze standaardregels te verwijderen. Google "css reset vs normalize" om de verschillen te zien.
Wat het begrip "user agent stylesheet" betreft, raadpleeg sectie Cascade in de CSS 2.1 spec.
User agent stylesheets worden overruled door alles wat je in je eigen stylesheet instelt. Ze zijn gewoon de bodem: bij afwezigheid van stylesheets die door de pagina of door de gebruiker worden aangeleverd, moet de browser nog steeds de inhoud op de een of andere manier renderen, en het user agent stylesheet beschrijft dit gewoon.
Dus als je denkt dat je een probleem hebt met een user agent style sheet, dan heb je echt een probleem met je markup, of je style sheet, of beide (waarover je niets hebt geschreven).