Mae porwr gwe heddiw wedi dod yn bell o'r dyddiau crazy lle roedd unrhyw fath o gysondeb traws-borwr yn feddwl ddiddorol. Mae porwyr gwe heddiw oll yn cydymffurfio â safonau iawn. Maent yn chwarae'n dda gyda'i gilydd ac yn cyflwyno arddangosfa dudalen weddol gyson ar draws y gwahanol borwyr. Mae hyn yn cynnwys y fersiynau diweddaraf o Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari, a'r gwahanol borwyr a geir ar y llu o ddyfeisiau symudol sy'n cael eu defnyddio i gael mynediad i'r wefan heddiw.
Er y gwnaed cynnydd yn sicr o ran porwyr gwe a sut maent yn arddangos CSS, mae anghysonderau rhwng y gwahanol opsiynau meddalwedd hyn o hyd. Un o'r anghysonderau cyffredin yw sut y mae'r porwyr hynny yn cyfrifo ymylon, padio a ffiniau yn ddiofyn.
Oherwydd yr agweddau hyn ar effaith y model blwch yr holl elfennau HTML, ac oherwydd eu bod yn hanfodol wrth greu gosodiadau tudalen, mae arddangosiad anghyson yn golygu y gallai tudalen edrych yn wych mewn un porwr, ond edrychwch ychydig yn un arall. Er mwyn mynd i'r afael â'r broblem hon, mae llawer o ddylunwyr gwe yn normaleiddio'r agweddau hyn ar y model blwch. Gelwir yr arfer hwn hefyd yn "sero allan" y gwerthoedd ar gyfer ymylon, padio a ffiniau.
Nodyn ar Ddiffygion Porwr
Mae gan bob porwyr gwe osodiadau diofyn ar gyfer agweddau arddangos penodol ar dudalen. Er enghraifft, mae hypergysylltiadau yn las ac yn cael eu tanlinellu yn ddiofyn. Mae hyn yn gyson ar draws gwahanol borwyr, ac er ei bod yn rhywbeth y mae'r rhan fwyaf o ddylunwyr yn newid yn unol ag anghenion dylunio eu prosiect penodol, mae'r ffaith eu bod i gyd oll yn dechrau gyda'r un diffygion yn ei gwneud hi'n haws gwneud y newidiadau hyn. Yn anffodus, nid yw'r gwerth diofyn ar gyfer ymylon, padio a ffiniau yn mwynhau'r un lefel o gysondeb traws-borwr.
Cymedroli Gwerthoedd ar gyfer Margins a Padio
Y ffordd orau o ddatrys problem model blwch anghyson yw gosod holl ymylon a gwerthoedd padio elfennau HTML i ddim. Mae ychydig o ffyrdd y gallech chi wneud hyn yw ychwanegu'r rheol CSS hon i'ch taflen arddull:
* {ymyl: 0; padio: 0; }Mae'r rheol CSS hon yn defnyddio'r cymeriad * neu gerdyn gwyllt. Mae'r cymeriad hwnnw'n golygu "pob elfen" ac yn y bôn byddai'n dewis pob elfen HTML ac yn gosod yr ymylon a'r padliad i 0. Er bod y rheol hon yn amherthnasol iawn, oherwydd ei fod yn eich taflen arddull allanol, bydd yn fwy penodol na'r porwr diofyn mae gwerthoedd yn gwneud. Gan fod y rhagdybiaethau hynny yn beth rydych chi'n ei drosysgrifio, bydd yr un arddull hon yn cyflawni'r hyn yr ydych yn bwriadu ei wneud.
Yr opsiwn arall yw defnyddio'r gwerthoedd hyn i'r elfennau HTML a chorff. Gan mai pob un o'r elfennau hyn fydd yr holl elfennau eraill ar eich tudalen, dylai'r rhaeadr CSS gymhwyso'r gwerthoedd hyn i'r holl elfennau eraill hynny.
html, corff {ymyl: 0; padio: 0; }Bydd hyn yn dechrau eich dyluniad yn yr un lle ar bob porwr, ond un peth i'w gofio yw bod unwaith y byddwch yn troi pob ymylon a padio i ffwrdd, bydd angen i chi eu troi yn ôl yn ddethol ar gyfer rhannau penodol o'ch tudalen we er mwyn cyflawni'r edrychiad a theimlo bod eich dyluniad yn galw amdano.
Gororau
Efallai eich bod chi'n meddwl "ond nid oes gan borwyr ffin o gwmpas elfen y corff yn ddiofyn". Nid yw hyn yn hollol wir. Mae gan fersiynau hŷn o Internet Explorer ffin dryloyw neu anweledig o amgylch elfennau. Oni bai eich bod yn gosod y ffin i 0, gall y ffin honno llanastio eich gosodiadau tudalen. Os ydych wedi penderfynu y byddwch yn parhau i gefnogi'r fersiynau hynaf hynafol o IE, bydd angen i chi fynd i'r afael â hyn trwy ychwanegu'r canlynol at eich corff a'ch arddulliau HTML:
HTML, corff {
ymyl: 0px;
padio: 0px;
ffin: 0px;
}
Yn debyg i'r ffordd yr ydych wedi diffodd yr ymylon a'r padio, bydd yr arddull newydd hon hefyd yn troi ffiniau rhagosodedig. Gallech hefyd wneud yr un peth trwy ddefnyddio'r dewiswr cardiau gwyllt a ddangosir yn gynharach yn yr erthygl.
Erthygl wreiddiol gan Jennifer Krynin. Golygwyd gan Jeremy Girard ar 9/27/16.