Dwingende Knop Standaard Stijlen

0
36

Er zijn verschillende “knoppen” in HTML. Je hebt:

<button>Knop</button>
<input type=”button” value=”Knop”>

Plus, voor beter of slechter, mensen hebben graag de links die zijn ingericht om te overeenkomen met het zoeken van een andere echte knoppen op de site

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

Een uitdaging is om al deze elementen te kijken en de lay-out precies hetzelfde. We dekken dat een paar manieren.

Een andere uitdaging is om mensen correct te gebruiken

Dit is een beetje verrassend voor mij, maar ik hoor het vaak genoeg om zorgen over te maken — is dat meer en meer ontwikkelaars zijn met het gebruik van <div>s voor de knoppen. Als in, ze gewoon te komen voor welke generieke, styling-gratis HTML is handig en bouwen als dat nodig is. Andy Bell legt uit waarom een echte knop is beter:

Zo, de knop <> elementen zijn een pijn in de kont te stijl? Dat betekent niet dat je moet bevestig uw JavaScript-events om een <div> of een <a href=”#”>. Ziet u, wanneer u een toets<>, krijg je toetsenbord evenementen gratis. Je bent ook het helpen van gebruikers van een schermlezer want het zal kondigen het element correct.

En hier is Andy weer om u te helpen met een stuk van CSS is dat je een netjes ingerichte knop:

Zie de Knop op de Pen Pal — aantal fundamentele knop stijlen door Andy Bell (@hankchizljaw) op CodePen.

Het is die stijl, die misschien de geestelijke obstructie

Het is een beetje begrijpelijk. Knoppen zijn raar! Ze hebben een goede hoeveelheid standaard styling (die komen van de “User Agent Stylesheet”), dat verschilt van browser tot browser en betekent dat je werk te doen om ze te krijgen precies hoe je het wilt.

Zie alle gekte er?

  • Zonder enige styling, de knop is een beetje weinig en heeft native grens/border-radius/box-shadow.
  • Door de font-grootte, we verliezen al deze standaard, maar het kreeg een nieuwe standaard look, een met een rand en ronde hoeken, een gradient achtergrond, en geen box-shadow. Dit is in wezen -webkit-vorm: knop.
  • De knoppen hebben een eigen lettertype-familie, dus niet het overnemen van de cascade-tenzij u het vertellen.

Hier is Chrome de user agent stylesheet voor de knoppen:

Firefox gedraagt zich een beetje anders. Zie in de video hierboven hoe de instelling border: 0; verwijderd van de grens in Chrome, maar ook de achtergrond? Niet het geval in Firefox:

Ik heb alleen dit te zeggen, ik snap het, knoppen zijn echt rare dingen in browsers. Factor in een dozijn andere browsers, mobiele, en het idee dat we willen dat al die verschillende elementen zien er precies hetzelfde uit (zie de opening van het artikel), en ik heb een zekere mate van empathie voor mensen die willen om dit te voorkomen.

Kan nooit kwaad om te overleggen Normaliseren

Normaliseren is een goede hoeveelheid:

/**
* 1. Het veranderen van het lettertype stijlen in alle browsers.
* 2. Verwijder de marge in Firefox en Safari.
*/

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

/**
* Toon de overloop in IE.
* 1. Toon de overloop in de Rand.
*/

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

/**
* Verwijder de erfenis van tekst te veranderen in Rand, Firefox en IE.
* 1. Verwijder de erfenis van tekst te veranderen in Firefox.
*/

knop
selecteer { /* 1 */
text-transform: none;
}

/**
* Juist het onvermogen om de stijl van klikbare soorten in iOS Safari.
*/

knop
[type=”button”],
[type=”reset”],
[type=”submit”] {
-webkit-weergave: – knop;
}

Ik was een klein beetje verbaasd om te zien WTF, Formulieren? geen dekking knoppen, alleen omdat het veel vreemde dingen die er is. Maar de elementen in het formulier, dat project zwepen in vorm zijn nog meer notoir moeilijk!

Een Stijl-Testen Beetje Dingetje

Ik voel me als het antwoord hierop is eigenlijk een grote ol’ blok van CSS. Dat is wat Andy verstrekt, en kan zeer waarschijnlijk komen om een op uw eigen door gewoon een beetje zwaarder is overhandigd dan de gebruikelijke van het instellen van de stijl van regels met uw knoppen.

Toch voelde ik me genoodzaakt om een kleine tester machine dingetje, zodat u kunt schakelen tussen stijlen in-en uitschakelen en zie hoe ze gaan allemaal samen in welke browser u zich in:

Zie de Pen Consistente stijl van knop van Chris Coyier (@chriscoyier) op CodePen.

A11y

Het grootste punt hier is om gebruik te maken van de juiste inheemse elementen, als u een bos van functionaliteit en toegankelijkheid voor gratis. Maar je kan net zo goed voor de styling recht ook!

Terwijl we praten knoppen, ik ga gebruik maken van dezelfde quote die ik in onze Bij Gebruik van De Knop Element post van MDN:

Waarschuwing: Wees voorzichtig bij het markeren van banden met de knop rol. De knoppen zijn naar verwachting worden geactiveerd met behulp van de Ruimte-toets, terwijl links naar verwachting worden geactiveerd door middel van de Enter-toets. In andere woorden, wanneer de koppelingen worden gebruikt om zich te gedragen zoals knoppen, het toevoegen van role=”button” alleen is niet voldoende. Het zal ook nodig zijn voor het toevoegen van een key event-handler die luistert naar de Spatie-toets om consistent te zijn met native knoppen.

U hoeft niet role=”button” op de knop <> omdat ze al naar de knoppen, maar als je gaat om een ander element knop-als u hebt meer werk te doen om na te bootsen de functionaliteit.

Plus, vergeet niet over :hover en :focus stijlen! Heb je eenmaal draaide in de stijlen voor de standaard staat, mag dit niet zo moeilijk, maar je zeker nodig!

toets:beweeg met de muis,
knop:focus {
achtergrond: #0053ba;
}

knop:focus {
overzicht: 1px solid #fff;
overzicht-verschuiving: -4px;
}

knop:active {
transformeren: schaal(0.99);
}