Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

selecteren van een stylesheet voor telefoons

6 views
Skip to first unread message

Rob

unread,
Nov 26, 2020, 9:57:59 AM11/26/20
to
Als je in een simpele internet pagina graag een stylesheet wilt gebruiken
met modificaties die alleen voor mobiele devices gelden dan werkte dit
ooit wel:

<link rel="stylesheet" href="/css/handheld.css" type="text/css" media="handheld, only screen and (max-device-width: 640px)">

De styles daarin laten dan bijvoorbeeld sidebars weg of maken de site een
enkele lange kolom ipv een 3-koloms layout.

Op zich werkt dat wel maar die "640px" is nogal arbitrair en werkt
tegenwoordig vaak niet meer omdat mobiele devices ondertussen al weer
breder zijn.

Is er nou echt geen media selector die gewoon het algemene geval van
"een mobiele telefoon dus scrollen scrollen scrollen layout ipv alles
naast elkaar" kan selecteren?

Dus iets voor het veld
media="handheld, only screen and (max-device-width: 640px)"

in dat voorbeeld. Ook bruikbaar voor @media in de CSS zelf.

Erick T. Barkhuis

unread,
Nov 26, 2020, 11:05:25 AM11/26/20
to
Rob:

>Als je in een simpele internet pagina graag een stylesheet wilt
>gebruiken met modificaties die alleen voor mobiele devices gelden dan
>werkte dit ooit wel:
>
><link rel="stylesheet" href="/css/handheld.css" type="text/css"
>media="handheld, only screen and (max-device-width: 640px)">

Een belangrijke vraag in dit verband is: waarom zou je voor _mobiele
devices_ (in het algemeen) zulke modificaties willen?

Meestal gaat het om lay-out kwesties. Een horizontaal bovenbalk-menu of
een drie-koloms-layout zijn niet praktisch op een mobiel schermpje,
omdat alles dan te klein zou worden. Maar stel je voor (nee, stčl nou
eens) dat je een mobieltje hebt met een scherm van 30x30cm, 3000x3000
pixels. Zou je dan nog steeds die "modificaties" willen? Of dan toch
liever de volledige opgeblazen website?

(Bedenk: als het alleen maar gaat om de bruikbaarheid van buttons en
links, dan vermeld je natuurlijk gewoon geen max-schermafmeting).


>Op zich werkt dat wel maar die "640px" is nogal arbitrair en werkt
>tegenwoordig vaak niet meer omdat mobiele devices ondertussen al weer
>breder zijn.

...en dus die side bar wellicht wel weer aankunnen.

>
>Is er nou echt geen media selector die gewoon het algemene geval van
>"een mobiele telefoon dus scrollen scrollen scrollen layout ipv alles
>naast elkaar" kan selecteren?
>
>Dus iets voor het veld
> media="handheld, only screen and (max-device-width: 640px)"

Die max-device-width is toch nuttig. Maar daarvoor moet je denken in
termen van "breakpoints" in je applicatie. Neem je je applicatie als
uitgangspunt, en niet het schermapparaat, dan kun jij bepalen wanneer
het je nuttig lijkt om een alternatieve lay-out aan te bieden. Of het
nou een telefoontje is of een mini-scherm in een auto, of een hologram
op de kinderkamer. Of zo.

Het is geen direct antwoord op je vraag. Meer een aansporing om
bijvoorbeeld https://wpbuffs.com/media-query-for-mobile/#mobile-devices
eens te bekijken.


--
Erick

"Start Netscape op en roep heel hard: 'FOEI!'.
Dat zal 'm leren" - Gilbert in niwo

Rob

unread,
Nov 26, 2020, 11:27:03 AM11/26/20
to
Erick T. Barkhuis <erick....@ardane.c.o.m> wrote:
> Rob:
>
>>Als je in een simpele internet pagina graag een stylesheet wilt
>>gebruiken met modificaties die alleen voor mobiele devices gelden dan
>>werkte dit ooit wel:
>>
>><link rel="stylesheet" href="/css/handheld.css" type="text/css"
>>media="handheld, only screen and (max-device-width: 640px)">
>
> Een belangrijke vraag in dit verband is: waarom zou je voor _mobiele
> devices_ (in het algemeen) zulke modificaties willen?
>
> Meestal gaat het om lay-out kwesties. Een horizontaal bovenbalk-menu of
> een drie-koloms-layout zijn niet praktisch op een mobiel schermpje,
> omdat alles dan te klein zou worden. Maar stel je voor (nee, stèl nou
> eens) dat je een mobieltje hebt met een scherm van 30x30cm, 3000x3000
> pixels. Zou je dan nog steeds die "modificaties" willen? Of dan toch
> liever de volledige opgeblazen website?
>
> (Bedenk: als het alleen maar gaat om de bruikbaarheid van buttons en
> links, dan vermeld je natuurlijk gewoon geen max-schermafmeting).
>
>
>>Op zich werkt dat wel maar die "640px" is nogal arbitrair en werkt
>>tegenwoordig vaak niet meer omdat mobiele devices ondertussen al weer
>>breder zijn.
>
> ...en dus die side bar wellicht wel weer aankunnen.
>
>>
>>Is er nou echt geen media selector die gewoon het algemene geval van
>>"een mobiele telefoon dus scrollen scrollen scrollen layout ipv alles
>>naast elkaar" kan selecteren?
>>
>>Dus iets voor het veld
>> media="handheld, only screen and (max-device-width: 640px)"
>
> Die max-device-width is toch nuttig. Maar daarvoor moet je denken in
> termen van "breakpoints" in je applicatie. Neem je je applicatie als
> uitgangspunt, en niet het schermapparaat, dan kun jij bepalen wanneer
> het je nuttig lijkt om een alternatieve lay-out aan te bieden. Of het
> nou een telefoontje is of een mini-scherm in een auto, of een hologram
> op de kinderkamer. Of zo.
>
> Het is geen direct antwoord op je vraag. Meer een aansporing om
> bijvoorbeeld https://wpbuffs.com/media-query-for-mobile/#mobile-devices
> eens te bekijken.

Ja ik herken dat wel. Niet het probleem oplossen, maar terug komen
met "dat moet je niet willen" of "laat de gebruiker maar turen naar
een microschermpje, hij heeft toch de resolutie!".

Maar daar heb ik niks aan. Ik zie hoe het eruitziet op zo'n verticaal
scherm met beperkte breedte en ik zoek gewoon een manier om op dat
soort schermen een andere layout te kiezen op een portable en liefst
toekomstzekere manier. En dan niet in termen van "breakpoints" ofzo
maar gewoon hoe het in de praktijk uitwerkt op zo'n mobiele telefoon.

(je weet best dat dat niet gaat in termen van breakpoints)

Erick T. Barkhuis

unread,
Nov 26, 2020, 11:55:40 AM11/26/20
to
Rob:

>Erick T. Barkhuis <erick....@ardane.c.o.m> wrote:
>> Rob:
>>
>>>Als je in een simpele internet pagina graag een stylesheet wilt
>>>gebruiken met modificaties die alleen voor mobiele devices gelden
>>>dan werkte dit ooit wel:
>>>
>>><link rel="stylesheet" href="/css/handheld.css" type="text/css"
>>>media="handheld, only screen and (max-device-width: 640px)">

[...knip enorme fullquote...]

>> Het is geen direct antwoord op je vraag. Meer een aansporing om
>> bijvoorbeeld
>>https://wpbuffs.com/media-query-for-mobile/#mobile-devices eens te
>>bekijken.
>
>Ja ik herken dat wel. Niet het probleem oplossen, maar terug komen
>met "dat moet je niet willen" of "laat de gebruiker maar turen naar
>een microschermpje, hij heeft toch de resolutie!".

Geen van beide dingen heb ik gezegd of gesuggereerd. Waarom zo
agressief? Ik heb je toch niks gedaan?

>Maar daar heb ik niks aan. Ik zie hoe het eruitziet op zo'n verticaal
>scherm met beperkte breedte

Dat je je alleen op verticale schermen richt, dat is een nieuw gegeven.
Je had dat in je vraag niet verwoord. Daar kun je een media feature
"orientation" voor gebruiken.

>en ik zoek gewoon een manier om op dat
>soort schermen een andere layout te kiezen op een portable en liefst
>toekomstzekere manier.

Dan zou je misschien moeten proberen te definieren wat "dat soort
schermen" voor jou betekent en dat dan in een media selector vertalen.

Als je wilt tonen op een apparaae met een schermpje, eentje die je in
de hand kunt houden, dan heb je het over een "handheld met only screen"
en laat je gewoon de max-device-width weg, want die vind je kennelijk
niet interessant.

>(je weet best dat dat niet gaat in termen van breakpoints)

Die heb je inderdaad niet nodig als je vindt dat de maten van het
scherm er niet toe doen. Tenminste niet het soort breakpoints dat in
het door mij genoemde artikel wordt genoemd.

--
Erick

"Ook draadstarter, die het draadonderwerp uitkoos, faalt hier mogelijk
genadeloos" - Bart van Stappen in niwo

Rob

unread,
Nov 26, 2020, 12:20:02 PM11/26/20
to
Erick T. Barkhuis <erick....@ardane.c.o.m> wrote:
> Rob:
>
>>Erick T. Barkhuis <erick....@ardane.c.o.m> wrote:
>>> Rob:
>>>
>>>>Als je in een simpele internet pagina graag een stylesheet wilt
>>>>gebruiken met modificaties die alleen voor mobiele devices gelden
>>>>dan werkte dit ooit wel:
>>>>
>>>><link rel="stylesheet" href="/css/handheld.css" type="text/css"
>>>>media="handheld, only screen and (max-device-width: 640px)">
>
> [...knip enorme fullquote...]
>
>>> Het is geen direct antwoord op je vraag. Meer een aansporing om
>>> bijvoorbeeld
>>>https://wpbuffs.com/media-query-for-mobile/#mobile-devices eens te
>>>bekijken.
>>
>>Ja ik herken dat wel. Niet het probleem oplossen, maar terug komen
>>met "dat moet je niet willen" of "laat de gebruiker maar turen naar
>>een microschermpje, hij heeft toch de resolutie!".
>
> Geen van beide dingen heb ik gezegd of gesuggereerd. Waarom zo
> agressief? Ik heb je toch niks gedaan?

Omdat ik dit antwoord herken van de vele nutteloze sites die ook met
ditzelfde niet-antwoord komen.

>>Maar daar heb ik niks aan. Ik zie hoe het eruitziet op zo'n verticaal
>>scherm met beperkte breedte
>
> Dat je je alleen op verticale schermen richt, dat is een nieuw gegeven.
> Je had dat in je vraag niet verwoord. Daar kun je een media feature
> "orientation" voor gebruiken.

Ik heb het over mobiele devices. je weet wel die dingen waar iedereen
tegenwoordig mee rondloopt.
Een beetje pedant gaan lopen doen helpt niet als je niet "agressief
benaderd" wilt worden...

>>en ik zoek gewoon een manier om op dat
>>soort schermen een andere layout te kiezen op een portable en liefst
>>toekomstzekere manier.
>
> Dan zou je misschien moeten proberen te definieren wat "dat soort
> schermen" voor jou betekent en dat dan in een media selector vertalen.

Maar dat was nou net de vraag!
Wat gebruik je voor media selector om mobiele devices te selecteren.
"smartphones" had ik moeten zeggen begrijp ik?

Ok de vraag is dus: wat zet ik achter media= zodat hij deze stylesheet
pakt op een smartphone.

> Als je wilt tonen op een apparaae met een schermpje, eentje die je in
> de hand kunt houden, dan heb je het over een "handheld met only screen"
> en laat je gewoon de max-device-width weg, want die vind je kennelijk
> niet interessant.

Maar dat moet dan zonder komma neem ik aan?
En hoe moet ik dat dan zien in de context dat smartphones meestal helemaal
niet meer werken als "handheld" omdat men dat kennelijk als een verouderde
term beschouwt waar moderne smartphones met zoom enzo niet meer onder
vallen?

media="handheld, only screen" of media="handheld only screen"?

Ik wil natuurlijk niet dat deze stylesheet ook gekozen wordt voor een
PC met alleen een scherm (ik heb al een apart stylesheet voor print).

Rob

unread,
Nov 26, 2020, 12:23:21 PM11/26/20
to
Erick T. Barkhuis <erick....@ardane.c.o.m> wrote:
> Dat je je alleen op verticale schermen richt, dat is een nieuw gegeven.

Dat klopt trouwens niet eens, dat stond prima in de originele vraag.
En het onderwerp is ook "stylesheet voor telefoons".

Het verbaast me dat er niet gewoon een media="smartphone" is of
dat smartphones niet gewoon werken met media="handheld".

robert

unread,
Nov 27, 2020, 1:59:07 AM11/27/20
to
Rob <nom...@example.com>:
> Het verbaast me dat er niet gewoon een media="smartphone" is of
> dat smartphones niet gewoon werken met media="handheld".

`handheld` is deprecated.

--
robert

Rob

unread,
Nov 27, 2020, 4:00:02 AM11/27/20
to
Maar WAAROM? Het is ooit ingevoerd voor die IPAQ devices en die zijn
er nu niet meer, nu is een handheld gewoon een smartphone echter Apple
voelde zich te goed om als IPAQ door het leven te gaan.

En WAAROM is er geen media type voor zowat het meest voorkomende
device tegenwoordig?

Erick T. Barkhuis

unread,
Nov 27, 2020, 4:26:57 AM11/27/20
to
Rob:

>robert <US3N37+{n.i.w.o}@gmail.com> wrote:
>> `handheld` is deprecated.
>
>Maar WAAROM?

Dat staat keurig beschreven bij W3.org
Bovendien wordt daar geadviseerd passende media features te gebruiken,
die voor jouw applicatie geschikt zijn.
Maar goed, dat wil je niet willen.

https://www.w3.org/TR/mediaqueries-4/#media-types


--
Erick

"Is die site met gedenkwaardige niwo-citaten er nog?" - Anders Reizen
Piet

robert

unread,
Nov 27, 2020, 4:31:25 AM11/27/20
to
Erick T. Barkhuis <erick....@ardane.c.o.m>:
> Rob:
>
>>robert <US3N37+{n.i.w.o}@gmail.com> wrote:
>>> `handheld` is deprecated.
>>
>>Maar WAAROM?
>
> Dat staat keurig beschreven bij W3.org
> Bovendien wordt daar geadviseerd passende media features te gebruiken,
> die voor jouw applicatie geschikt zijn.
> Maar goed, dat wil je niet willen.
>
> https://www.w3.org/TR/mediaqueries-4/#media-types

Ik zou Rob aanraden een simpele CSS grid lib te gebruiken.

--
robert

Rob

unread,
Nov 27, 2020, 4:44:07 AM11/27/20
to
Erick T. Barkhuis <erick....@ardane.c.o.m> wrote:
> Rob:
>
>>robert <US3N37+{n.i.w.o}@gmail.com> wrote:
>>> `handheld` is deprecated.
>>
>>Maar WAAROM?
>
> Dat staat keurig beschreven bij W3.org
> Bovendien wordt daar geadviseerd passende media features te gebruiken,
> die voor jouw applicatie geschikt zijn.
> Maar goed, dat wil je niet willen.
>
> https://www.w3.org/TR/mediaqueries-4/#media-types

Dat geeft dus geen oplossing voor deze situatie.
"we kwamen er zo snel niet uit dus doen we maar niets".

Rob

unread,
Nov 27, 2020, 4:46:36 AM11/27/20
to
robert <US3N37+{n.i.w.o}@gmail.com> wrote:
> Erick T. Barkhuis <erick....@ardane.c.o.m>:
>> Rob:
>>
>>>robert <US3N37+{n.i.w.o}@gmail.com> wrote:
>>>> `handheld` is deprecated.
>>>
>>>Maar WAAROM?
>>
>> Dat staat keurig beschreven bij W3.org
>> Bovendien wordt daar geadviseerd passende media features te gebruiken,
>> die voor jouw applicatie geschikt zijn.
>> Maar goed, dat wil je niet willen.
>>
>> https://www.w3.org/TR/mediaqueries-4/#media-types
>
> Ik zou Rob aanraden een simpele CSS grid lib te gebruiken.

Dat is wel erg zwaar overkill voor wat ik nodig heb...
Maar ik zal er eens naar kijken, en dan vooral hoe zij het probleem
oplossen want als dat op dezelfde manier gaat als ik eerder beschreef
dan lost zo iets natuurlijk niks op!

Erick T. Barkhuis

unread,
Nov 27, 2020, 5:18:54 AM11/27/20
to
Rob:
Het is andersom gegaan. De W3 was er al een tijdje uit:
"Wij introduceren media type 'handheld' voor dat soort apparaatjes.
Dames en heren browserbakkers, doe uw ding daarmee."

Vervolgens kwamen de browser- en webviewproducenten, met vraagtekens op
het voorhoofd: "Beste W3, kunnen jullie dan even definieren wat volgens
jullie een handheld is?"

Met het schaamrood op de kaken moest het W3, na lang beraad, toegeven,
dat daar geen eenduidige definitie voor te geven is. "Handheld betekent
niet, dat het ding in de hand wordt gehouden, want als een telefoontje
op een statief staat, is-ie niet hand-held, maar nog steeds 'handheld'.
Het is ook niet een ding waar een SIM-kaartje in kan, want dat hebben
ook andere apparaten. Als het met schermresolutie of -afmetingen te
maken heeft, kun je dat al direct opvragen en heb je geen mediatype
nodig. En wat is een 7" tablet tegenwoordig?"

Dat leidde er toe, dat browserontwerpers dat mediatype niet of
nauwelijks implementeerden en W3 er weer van af stapte.
Tja, er gaat er wel eens eentje mis.


Een béétje politicus of advocaat zou nu zeggen "laat mij zo'n ding zien
en ik kan u zeggen of het een smartphone is of niet". Daar zou
zo-iemand best wel eens gelijk in kunnen hebben.
Op dit moment.

Totdat hij rijdt in een auto met ingebouwde smartphone...een voertuig,
dat niet meer bijster hand-held is.


--
Erick

"En nu de bonusvraag: kan iemand nog Javascript fouten ontdekken en
(liefst) reproduceren?" - Jan Ehrhardt in niwo

Rob

unread,
Nov 27, 2020, 12:45:34 PM11/27/20
to
Dat krijg je als je van die pedante gasten aan de klus zet.
Ze hadden het hen gewoon uit de handen moeten trekken en een besluit
nemen waarvan duidelijk is dat het het juiste is.

Als je het over "screen" hebt dan gaat er wellicht ook iemand roepen
"maar wat is nou een screen" en "mag het geen projector zijn?".

Het gaat om de soort van device: een klein schermpje waar je liefst
alle content onder elkaar wilt omdat je alleen verticaal wilt scrollen
en het niet te ver wilt uitzoomen omdat het dan niet meer te lezen is.

Of dat "handheld", "smartphone", "scrollscroll" of wat dan ook heet
boeit niet, als het maar duidelijk is hoe je het selecteert.
0 new messages