[Feat] Aparte custom stylesheets voor grade A en non-grade A

[NMe]

Dit is al een tijdje een klein irritatiepuntje voor me, maar met de nieuwe layout heb ik nog wat meer aanleiding om hiermee te zitten. Ik zou graag een apart stukje custom stylesheet willen dat alleen op grade A devices werkt. Op die manier kan ik op mijn desktop leuk wat CSS toevoegen voor hover-effectjes en voor het vastzetten van de headerbalk bovenaan het scherm terwijl de site op mijn telefoon óók bruikbaar blijft.

Voorbeeld ter illustratie: ik heb de rode balk en de zwarte menubalk eronder vastgezet bovenaan het browservenster zodat hij meescrollt. Het gevolg hiervan is dat ik bij het inzomen de knoppen aan de rechterkant verlies en ik daar ook niet naartoe kan scrollen. Op mijn telefoon zou ik die CSS dus liever niet includen, zodat ik wél naar rechts kan scrollen en daadwerkelijk mijn DM's ook mobiel kan openen. Net zoiets voor de active topics: ik heb de verbergknop verborgen en laat hem alleen on hover op de rij waarop hij staat zien. Is best leuk, maar mobiel niet zo praktisch. Tegelijkertijd heb ik wat andere CSS geschreven die op mijn telefoon wel lekker uitkomt en die ik graag zou houden.

Mijn voorstel is dus een apart custom CSS-veld dat voor de hele site werkt, ongeacht het device, en eentje die alleen op grade A (of in elk geval non-touch) devices werkt.

[TimmiX]

Dit kun je toch zelf aangeven in je custom-css bestand dmv media-queries, of werkt dit niet? (Niet geprobeerd)

[NMe]

Daarmee heb je voor zover ik weet geen makkelijke manier om te bepalen of je met een telefoon te maken hebt of niet. Je kan wel met een @media all and (min-width: 640px) werken maar telefoons krijgen steeds hogere resoluties en bovendien heb je daar tablets niet mee waar hetzelfde probleem geldt. Er zijn vast leuke dingen te doen met een combinatie tussen min-width en resolution, maar uiteindelijk zit de grade-checker al in Tweakers en is het bijhouden van een extra veld in principe vast niet zo'n probleem.