Tvingande Standard-Knappen Stilar

0
36

Det finns en mängd olika “knappar”, i HTML. Du har fått:

<knappen>Knappen</button>
<input type=”button” value=”Knapp”>

Plus, till det bättre eller sämre, människor gillar att ha länkar som är som gjord för att matcha utseendet på andra sanna knappar på webbplatsen

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

En utmaning är att få alla dessa delar till utseende och layout exakt samma. Vi kommer att gå igenom detta på några olika sätt.

En annan utmaning är att få människor att använda dem på rätt sätt

Detta är lite förvånande för mig, men jag hör det ofta tillräckligt att oroa dig för det — är att fler och fler utvecklare att använda <div>s för knappar. Som i, de bara nå för vad generiska, styling-gratis HTML är praktiskt och bygga upp det som behövs. Andy Bell förklarar varför en riktig knappen är bättre:

Så, knappen <> – element är en smärta i baken för att rätt stil? Det betyder inte att du ska bifoga din JavaScript-händelser till en <div> eller <a href=”#”> om. Du ser, när du använder knappen<>, du får tangentbord händelser gratis. Du är även att hjälpa användare med skärmläsare ut eftersom det kommer att tillkännage element på rätt sätt.

Och här är Andy igen för att hjälpa dig med en del av CSS som ska få dig en rent stil-knappen:

Se Pennan Knappen Pal — några grundläggande knappen stilar av Andy Bell (@hankchizljaw) på CodePen.

Det är som en design som bara kan vara den mentala spärren

Det är lite förståeligt. Knapparna är konstiga! De har en mycket bra standard styling (som kommer från “User Agent Stylesheet”) som varierar från webbläsare till webbläsare och innebär att du har ett arbete att göra för att få dem exakt hur du vill.

Se alla konstigheter där?

  • Utan några styling, knappen är ganska liten och har som infödda gränsen/border-radius/box-shadow sak att gå på.
  • Bara genom att ställa in font-size, vi förlora alla dessa som standard, men det fick en ny standard titta, en med en kant och fyrkantiga hörn, en tonad bakgrund, och ingen box-shadow. Detta är i huvudsak -webkit-utseende: knappen;.
  • Knapparna har en egen font-familj, så man kan inte ärva från cascade om du säger det till.

Här är Chrome user agent stylesheet för knappar:

Firefox fungerar på ett lite annorlunda sätt. Se i videon ovan hur inställningen border: 0; bort gränsen i Chrome, men också bakgrunden? Inte i Firefox:

Jag bara påpeka att säga, jag får det, knapparna är verkligen konstiga saker i webbläsare. Faktor i ett dussin andra webbläsare, mobil, och idén att vi vill ha en stil alla dessa olika element för att se exakt likadant ut (se öppningen av artikeln), och jag har en smula empati för människor som vill undvika detta.

Skadar aldrig att höra Normalisera

Normalisera gör ett bra belopp:

/**
* 1. Ändra teckensnitt i alla webbläsare.
* 2. Ta bort marginal i Firefox och Safari.
*/

knappen
input,
optgroup,
välj,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}

/**
* Visa översvämningen i IE.
* 1. Visa översvämningen i Kanten.
*/

knappen
input { /* 1 */
overflow: visible;
}

/**
* Ta arv av text-transform i Kanten, Firefox och IE.
* 1. Ta bort arv av text-transform i Firefox.
*/

knappen
välj { /* 1 */
text-transform: none;
}

/**
* Rätt oförmåga att stil klickbara typer i iOS och Safari.
*/

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

Jag var en aning förvånad över att se WTF, Former? inte omfattar knappar, bara på grund av hur mycket konstigheter som finns. Men formen element som projektet piskor i form är ännu mer notoriskt svårt!

En Stil-Testning Kinda Grejen

Jag känner att svaret på detta är i grunden en stor ol’ block av CSS. Det är vad Andy som tillhandahålls, och du kan mycket sannolikt kommer att på egen hand genom att bara vara lite tyngre överlämnas än den vanliga inställningen stil regler med dina knappar.

Fortfarande kände jag mig tvungen att göra lite tester maskin som är grejen så att du kan växla mellan stilar på och av och se hur de går alla tillsammans oavsett i vilken webbläsare du råkar vara i:

Se Pennan Konsekvent knappen stilar av Chris Coyier (@chriscoyier) på CodePen.

A11y

Den största poängen här är att använda rätt native element som du får en massa funktionalitet och tillgänglighet för gratis. Men du kan lika gärna få styling rätt också!

Medan vi pratar knappar, som jag kommer att använda samma citat som jag använt i vår När Att Använda Knappen Del inlägg från MDN:

Varning: var försiktig när du märka länkar med knappen roll. Knappar förväntas att utlösas med hjälp av mellanslagstangenten, medan länkar förväntas vara utlöst via Enter-tangenten. Med andra ord, när du länkar används för att bete sig som knappar, lägga till roll=”knappen” är inte ensam tillräcklig. Det kommer också att vara nödvändigt att lägga till en nyckel händelsehanterare som lyssnar för mellanslagstangenten för att vara konsekvent med infödda knappar.

Du behöver inte roll=”knappen” på knappen <> för de är redan knappar, men om du ska göra något annat element-knappen-som, du har mer arbete att göra för att efterlikna funktionen.

Plus, glöm inte :hover och :fokus stilar! När du har wrangled i stilar för standardläget, detta borde inte vara så svårt, men du behöver definitivt dem!

knappen:hover,
knappen:focus {
bakgrund: #0053ba;
}

knappen:focus {
utkast: 1px solid #fff;
outline-offset: -4px;
}

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