Overordnet Standard-Knappen Stiler

0
14

Det er et utvalg av “knappene” i HTML. Du har:

<- knappen> – Knappen</button>
<input type=”button” value=”Knappen”>

Pluss, for bedre eller verre, folk som har lenker som er utformet for å matche utseendet andre sant-knapper på nettstedet

<a href=”#0″ class=”knappen”> – Knappen</a>

En utfordring er å få alle disse elementene til å se og layout akkurat det samme. Vi vil dekke det noen måter.

En annen utfordring er å få folk til å bruke dem riktig

Dette er litt overraskende for meg — men jeg hører det ofte nok til å bry deg om det — er at flere og flere utviklere bruker <div>s for knapper. Som i de akkurat nå uansett generisk, styling-gratis HTML er en hendig og bygge den opp etter behov. Andy Bell forklarer hvorfor en ekte knappen er bedre:

Så, < – knappen> – elementer er en smerte i baken til å stil? Det betyr ikke at du burde feste dine JavaScript hendelser til et <div> – eller <a href=”#”> om. Du ser, når du bruker en < – knappen>, kan du få tastaturet hendelser for gratis. Du er også med skjermleser brukere ut fordi det vil kunngjøre element på riktig måte.

Og her er det Andy igjen å hjelpe du ut med en del av CSS som vil få deg en ren stil knappen:

Se Pen-Knappen Pal — noen grunnleggende knappen stiler av Andy Bell (@hankchizljaw) på CodePen.

Det er som styling som bare kan være den mentale veisperring

Det er litt forståelig. Knappene er rare! De har en god mengde standard styling (som kommer fra “User Agent “Stylesheet””) som varierer fra nettleser til nettleser, og betyr at du har arbeid å gjøre for å få dem akkurat slik du ønsker.

Se alle weirdness det?

  • Uten styling, knappen er ganske lite og har som innfødt grensen/border-radius/box-shadow ting skjer.
  • Bare ved å angi skrift-størrelse, vil vi miste alle de standarder, men det fikk en ny standard utseende, ett med en kant og firkantede hjørner, en gradient bakgrunn, og ingen box-shadow. Dette er i hovedsak -webkit-utseende: knappen;.
  • Knappene har sin egen font-family, så ikke arve fra cascade med mindre du forteller det til.

Her er Chrome-user agent stylesheet for knappene:

Firefox oppfører seg litt annerledes. Se i videoen over hvordan sette grensen: 0; fjernet grensen i Chrome, men også bakgrunnen? Det er ikke tilfelle i Firefox:

Jeg bare påpeke dette å si, jeg får det, knappene er virkelig rare ting i nettlesere. Faktor i et dusin andre nettlesere, mobile enheter, og ideen om at vi ønsker å style alle de forskjellige elementene for å se akkurat det samme (se åpningen av artikkelen), og jeg har et minstemål av empati for folk som ønsker å unngå dette.

Aldri gjør vondt å konsultere Normalisere

Normalisere gjør en god beløp:

/**
* 1. Endre font stiler i alle nettlesere.
* 2. Fjern margin i Firefox og Safari.
*/

knappen,
– inngang,
optgroup,
velg,
textarea {
font-family: arve; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}

/**
* Vis overløp i IE.
* 1. Vis overløp i Kanten.
*/

knappen,
input { /* 1 */
overløp: synlig;
}

/**
* Ta arven i teksten forvandle i Kanten, Firefox og IE.
* 1. Ta arven i teksten forvandle i Firefox.
*/

knappen,
velg { /* 1 */
text-transform: ingen;
}

/**
* Riktig manglende evne til å stil klikkbare typer i iOS og Safari.
*/

knappen,
[type=”button”],
[type=”reset”],
[type=”submit”] {
-webkit-utseende: knappen;
}

Jeg ble en smule overrasket over å se WTF, Former? ikke dekker knappene, bare på grunn av hvor mye weirdness det er. Men formen elementer som prosjektet pisker inn formen er enda mer notorisk vanskelig!

En Stil-Testing Litt Thingy

Jeg føler at svaret på dette er i utgangspunktet en stor ol’ blokker av CSS. Det er det Andy gitt, og du kan meget sannsynlig kommer til en på egen hånd ved bare å være litt tyngre overlevert enn det som er vanlig i innstillingen stil regler med knapper.

Likevel, jeg følte meg tvunget til å gjøre en liten tester maskinen thingy slik at du kan veksle stiler på og av, og se hvordan de går sammen i uansett hvilken nettleser du skje for å være i:

Se Penn Konsekvent knappen stiler av Chris Coyier (@chriscoyier) på CodePen.

A11y

Det største poenget her er å bruke riktig native elementer, så får du en haug av funksjonalitet og tilgjengelighet for gratis. Men du kan like godt få styling riktig, også!

Mens vi snakker knappene, kommer jeg til å bruke samme sitat jeg har brukt i vårt Ved Å Bruke-Knappen Element innlegg fra MDN:

Advarsel: Vær forsiktig når du markerer opp linker med knappen rolle. Knappene er forventet å være utløst ved hjelp av Space-tasten, mens koblinger er forventet å være utløst gjennom Enter-tasten. Med andre ord, når koblinger er brukt til å oppføre seg som knapper, for å legge til rolle=”knappen” alene er ikke tilstrekkelig. Det vil også være nødvendig å legge en avgjørende hendelse handler som lytter til, Space-tasten for å være i samsvar med opprinnelige knapper.

Du trenger ikke role=”knappen” på < – knappen> fordi de allerede knapper, men hvis du kommer til å gjøre noen andre element-knappen, som du har mer arbeid å gjøre for å etterligne funksjonalitet.

Plus, ikke glem om :hover og :fokus stiler! Når du har wrangled i stiler for standard staten, dette burde ikke være så vanskelig, men du definitivt trenger dem!

knappen:hover,
knappen:fokus {
bakgrunn: #0053ba;
}

knappen:fokus {
disposisjon: 1px solid #fff;
outline-offset: -4px;
}

knappen:active {
forvandle: skala(0.99);
}