Berrabiarazi

Berrabiarazi, fitxategi bakarreko elementuen berariazko CSS aldaketen bilduma, abiarazi Bootstrap oinarri-oinarri dotore, koherente eta sinple bat emateko.

Hurbilketa

Berrabiarazi Normalizean oinarritzen da, eta HTML elementu asko iritzizko estiloak eskaintzen ditu elementu-hautatzaileak soilik erabiliz. Estilo osagarria klaseekin bakarrik egiten da. Esate baterako, estilo batzuk berrabiaraziko ditugu <table>oinarri sinpleago baterako eta geroago .table, .table-bordered, eta gehiago eskaintzen ditugu.

Hona hemen berrabiaraztean zer baliogabetu aukeratzeko gure jarraibideak eta arrazoiak:

Eguneratu arakatzailearen balio lehenetsi batzuk rems-ren ordez ems erabiltzeko osagaien tarte eskalagarrirako.
Saihestu margin-top. Marjin bertikalak kolapsatu daitezke, eta ustekabeko emaitzak emanez. Are garrantzitsuagoa dena, norabide bakarra margineredu mental sinpleagoa da.
Gailuen tamainak errazteko eskalatzeko, bloke-elementuek s erabili behar dute rems-rako margin.
Mantendu font-lotutako propietateen deklarazioak ahalik eta gutxien, inheritahal den guztietan erabiliz.

Orriaren lehenetsiak

eta <html>elementuak <body>eguneratzen dira orrialde osorako lehenetsi hobeak emateko. Zehazkiago:

Elementu box-sizingguztietan ezarrita dago globalki, *::beforeeta *::after, barne border-box. Horrek bermatzen du deklaratutako elementuaren zabalera ez dela inoiz gainditzen betegarria edo ertzaren ondorioz.
Ez da oinarririk font-sizedeklaratzen <html>, baina 16pxsuposatzen da (arakatzailearen lehenetsia). font-size: 1remeuskarri-kontsulten bidez erraz erantzuteko mota eskalatzeko aplikatzen da, <body>erabiltzaileen hobespenak errespetatuz eta hurbilketa eskuragarriagoa bermatuz.
, , eta <body>global bat ere ezartzen du . Hau inprimaki-elementu batzuek geroago heredatzen dute letra-tipoen inkoherentziak saihesteko.font-familyline-heighttext-align
Segurtasunerako, <body>deklaratu bat du background-color, lehenetsia #fff.

Letra-tipo-pila natiboa

Web-letra-tipo lehenetsiak (Helvetica Neue, Helvetica eta Arial) Bootstrap 4-n kendu dira eta "jatorrizko letra-tipo pila" batekin ordezkatu dira, gailu eta sistema eragile guztietan testua hobeto errendatzeko. Irakurri gehiago Smashing Magazine artikulu honetan jatorrizko letra-tipoen pilarei buruz .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Kontuan izan letra-tipoen pilak emoji letra-tipoak biltzen dituenez, Unicode ikur/dingbat karaktere arrunt asko kolore anitzeko piktograma gisa errendatuko direla. Haien itxura aldatu egingo da, arakatzailearen/plataformaren jatorrizko emoji letra-tipoan erabiltzen den estiloaren arabera, eta ez dute CSS colorestiloek eragingo.

Hau Bootstrap osoan font-familyaplikatzen da eta automatikoki heredatzen da. <body>Globala aldatzeko font-family, eguneratu $font-family-baseeta berriro konpilatu Bootstrap.

Izenburuak eta paragrafoak

Goiburuko elementu guztiak —adibidez, <h1>— eta <p>berrezarri egiten dira margin-topkentzeko. Izenburuak margin-bottom: .5remeta paragrafoak gehitu margin-bottom: 1remdira erraz tartekatzeko.

Goiburua	Adibidea
`<h1></h1>`	h1. Bootstrap goiburua
`<h2></h2>`	h2. Bootstrap goiburua
`<h3></h3>`	h3. Bootstrap goiburua
`<h4></h4>`	h4. Bootstrap goiburua
`<h5></h5>`	h5. Bootstrap goiburua
`<h6></h6>`	h6. Bootstrap goiburua

Zerrendak

Zerrenda guztiak — <ul>, <ol>, eta — kendu <dl>dituzte eta bat . Habiaratutako zerrendek ez dute .margin-topmargin-bottom: 1remmargin-bottom

Zerrenda guztiei goiko marjina kendu zaie
Eta haien beheko marjina normalizatu zen
Habiaratutako zerrendek ez dute beheko marjinarik
- Horrela itxura berdinagoa dute
- Batez ere, zerrendako elementu gehiago jarraitzen dutenean
Ezkerreko betegarria ere berrezarri da

Hona hemen zerrenda ordenatua
Zerrendako elementu batzuekin
Itxura orokor bera du
Aurreko ordenatu gabeko zerrenda bezala

Estilo sinpleagoa, hierarkia argia eta tarte hobea lortzeko, deskribapen-zerrendek margins eguneratu dituzte. <dd>s berrezarri eta margin-leftgehitu . s lodiz daude .0margin-bottom: .5rem<dt>

Deskribapen zerrendak: Deskribapen zerrenda ezin hobea da terminoak definitzeko.
Epea: Terminoaren definizioa.; Termino beraren bigarren definizioa.
Beste termino bat: Beste termino honen definizioa.

Aurrez formateatutako testua

Elementua <pre>berrezartzen da bere kentzeko margin-topeta bere remunitateak erabiltzeko margin-bottom.

.example-element {
  marjina-behea: 1rem;
}

Taulak

Taulak zertxobait doitzen dira estilora <caption>, ertzak tolestu eta koherentea bermatzen dute text-align. Ertzetarako, betegarrirako eta beste aldaketa gehigarriak klasearekin batera datoz.table .

Hau adibide-taula bat da, eta edukia deskribatzeko bere epigrafea da.
Taularen goiburua	Taularen goiburua	Taularen goiburua	Taularen goiburua
Taularen gelaxka	Taularen gelaxka	Taularen gelaxka	Taularen gelaxka
Taularen gelaxka	Taularen gelaxka	Taularen gelaxka	Taularen gelaxka
Taularen gelaxka	Taularen gelaxka	Taularen gelaxka	Taularen gelaxka

Formak

Hainbat inprimaki-elementu berrabiarazi dira oinarrizko estilo sinpleagoetarako. Hona hemen aldaketa aipagarrienetako batzuk:

<fieldset>s-ek ez dute ertzarik, betegarririk edo marjinarik, beraz, erraz erabil daitezke sarrera indibidual edo taldeen bilgarri gisa.
<legend>s, eremu-multzoek bezala, eraberritu egin dute goiburu gisa bistaratzeko.
<label>s ezarrita dago aplikatu display: inline-blockahal izateko.margin
<input>s, <select>s, <textarea>s eta <button>s Normalize-k zuzentzen ditu gehienbat, baina Berrabiarazteak haien margineta multzoak line-height: inheritere kentzen ditu.
<textarea>s aldatzen dira bertikalki tamainaz aldatzeko aukera izateko, tamaina horizontalean aldatzea askotan orriaren diseinua "hautsi" egiten baitu.
<button>s eta <input>botoi elementuek cursor: pointernoiz dute :not(:disabled).

Aldaketa hauek, eta gehiago, jarraian erakusten dira.

Erakusleak botoietan

Berrabiarazteak hobekuntza bat dakar role="button"kurtsore lehenetsia aldatzeko pointer. Gehitu atributu hau elementuei elementu interaktiboak direla adierazteko. Rol hori ez da beharrezkoa <button>elementuentzat, zeinek beren cursoraldaketa lortzen baitute.

Botoirik gabeko elementuaren botoia

<span role="button" tabindex="0">Non-button element button</span>

Hainbat elementu

Helbidea

Elementua eguneratzen <address>da arakatzailearen lehenetsia berrezartzeko . orain ere heredatzen da, eta gehitu egin da. s arbaso hurbilenari (edo lan-talde oso bati) harremanetarako informazioa aurkezteko dira. Gorde formatua lerroekin amaituz .font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Izen osoa
[email protected]

Blokeoa

Blockquotes lehenetsia marginda 1em 40px, beraz, berrezarri dugu 0 0 1rembeste elementuekin koherenteagoa den zerbait lortzeko.

Aipamen ezagun bat, blockquote elementu batean jasotakoa.

Iturria Tituluan ospetsua den norbait

Inline elementuak

Elementuak <abbr>oinarrizko estiloa jasotzen du paragrafoko testuen artean nabarmentzeko.

Nulla attr vitae elit libero, a pharetra augue.

Laburpen

Laburpenaren lehenetsia cursorda text, beraz, berrezarri dugu pointerelementuarekin klik eginez interakzioa egin daitekeela adierazteko.

Xehetasun batzuk

Xehetasunei buruzko informazio gehiago.

Are xehetasun gehiago

Hona hemen xehetasunei buruzko xehetasun gehiago.

HTML5 `[hidden]`atributua

HTML5-ek atributu global berri bat[hidden] gehitzen du display: none, lehenespenez estiloa duena. PureCSS -en ideia bat mailegatuz , lehenetsi hau hobetzen dugu ustekabean gainidaztea [hidden] { display: none !important; }saihesteko . displayIE10-k berez onartzen ez duen arren [hidden], gure CSSko adierazpen esplizituak arazo horri aurre egiten dio.

<input type="text" hidden>

jQuery bateraezintasuna

[hidden]$(...).hide()ez da jQuery eta $(...).show()metodoekin bateragarria . Hori dela eta, gaur egun ez ditugu bereziki onartzen elementuak [hidden]kudeatzeko beste teknika batzuk.display

Elementu baten ikusgarritasuna aldatzeko, hau displayda, ez da aldatzen eta elementuak dokumentuaren fluxuari eragin diezaiokeela esan nahi du, erabili .invisibleklasea .