‘user agent stylesheet’ estiloak berridazten ikas ezazu

CSS - WordPress

Noizbait beste norbaitek garatutako html txantiloi batekin lan egin behar izan duzu eta estiloak berridazten zoratu al zara?

Artikulu honetan nire kasu partikularra azalduko dizut. WordPress garapen batean lan egiten, hirugarren batek garatutako txantiloia erabiltzen nengoela, CSS estiloak berridatzi nahi nituen, baina hara non ez nituen inondik elementu konkretuaren CSS arauak topatzen. Web nabigatzailearen kontsola irekitzean, ‘user agent stylesheet’ mezua topatu nuen, hau da, estiloak nabigatzailearenak ziren eta ez txantiloiarenak.

Hortik aurrera ‘!important’ arauak edonon eta emaitzarik ez. Horregatik, artikulu honetan ‘user agent stylesheet’ delako estiloei aurre egiteko modua azaltzen dizuet.

Zer da User Agent Stylesheet?

Zure orrialdeko HTML elementu batek CSS araurik ez duenean, askotan nabigatzaileak bere estilo propioak aplikatzen dizkio. Hau da, User Agent Stylesheet nabigatzaileak aplikatzen duen araua da.

Arazoa txantiloi edo zure webguneko HTML elementu zehatz bati estilo propioa eman nahi diozunean dator. Izan ere, askotan nabigatzailearen estiloak zuk nahi dituzun estiloen gainetik daude.

user agent stylesheet estiloen aurrean zer egin?

Irtenbideetako bat CSS arauetan ‘!important’ gehitzea da, jarraian azaltzen den ereduan ikusten den moduan.

.button.full-width,
button.full-width,
input[type=button].full-width,
input[type=reset].full-width,
input[type=submit].full-width {
  width: 100%;
  padding-left: 0!important;
  padding-right: 0!important;
  text-align: center;
}

Zoritxarrez hau ez da beti eraginkorra izaten. Kasu horietan, irtenbiderik onena nabigatzaileak sortzen dituen estiloak berridaztean datza. Honek esan nahi du zure estiloak beste guztien gainetik geratuko direla, eta, ondorioz, nahiz eta nabigatzaileak bereak propioak aplikatu, gero ezabatuak izango dira eta gero ere, norberak nahi dituen estiloak aplikatuko dira.

Aurreko paragrafoan azaltzen denarekin bat egiteko, ezinbestekoa da CSS fitxategiak orden zuzenean kargatzea, ezabatzea eta gero zure estiloak kargatzea, alegia. Horrela egin ezean, berriz ere nabigatzailearen estiloak gailenduko dira.

Jarraian aurkezten den irudian, WordPress 4.8 batentzako garatutako txantiloian css fitxategiak kargatzeko modua eta ordena azaltzen dira.

user agent stylesheet - CSS ordena

Nabigatzaileen estiloak ezabatzeko hainbat modu ezberdin daude. Beheko estekan nik neuk erabilitakoa uzten dizuet.

normalize_reset.css

Xehetasun hauekin zuen WordPress webgunearen txantiolien estiloak guztiz moldatzeko kapaz izango zarete.

Utzi erantzuna

Zure e-posta helbidea ez da argitaratuko. Beharrezko eremuak * markatuta daude