Abonneren op: RSS

HTML5 Is good for you.

Gigadesign


Android browser aanspreken met css

In: Android, CSS, CSS3, Mobile

Responsive all the way

Bij een recent project waarbij (bijna) alle mobile apparaten ondersteund dienden te worden, was de keuze “responsive” voor de hand liggend, dus snel enkele media queries in elkaar gebokst en het principe 320 and up toegepast.

Dan komt android browser met zijn eigen dingen

De standaard browser die in android zit heeft een – in dit geval nadelige – eigenschap door rond elke link een oranje outline te tonen om je als gebruiker er duidelijk van te maken welke link je nu geklikt hebt op je smartphone.

Velen zullen zich deze situatie wel herinneren, daar FireFox dit ook doet/deed met een dotted lijn rond je link en/of afbeelding als je erop geklikt had.

Een voorbeeld

In een 320 pixel breed smartphone situatie is de navigatie vervangen door een button/knop/link onder het logo:

navigatie onder het logo, niet aktief

door erop te klikken komt de navigatie te voorschijn:

="navigatie

Dit is natuurlijk niet gewenst in deze situatie.

Oplossing:

CSS

1
2
3
4
#situatiewaarjehetnietwilt:active,
#situatiewaarjehetnietwilt:focus {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Dus met zwart (de standaard kleur van alle elementen in een browser behalve achtergrond.) en dit dan nog eens op niet zichtbaar door opacity ook op 0 te zetten zal er dus geen rand meer aanwezig zijn.

  • Ilias - 20/05/2012

    Spreek je met die regel niet alle webkit browser aan en niet enkel Android?
    Hoe dan ook, altijd opletten met het verwijderen van default focus styles. Idealiter vervang je deze door je eigen styles.

  • Mark - 20/05/2012

    Die oranje rand is eigen aan android browser, ik heb dit nog niet gezien bij een safari op iphone. wat ik er niet bij gezet heb is dat deze regel in een media query staat, dus ook enkel maar op een smartphone zou kunnen uitgevoerd worden.

Ook een reactie geven!!

Je email is nodig en zal nooit worden weer- of doorgegeven.