28172 sujets

CSS et mise en forme, CSS3

Bonjour
Quel est le meilleur moyen de simuler l'inexistant

@media touch-device{...}

Hallucinant qu'il existe un @media tv et pas un @media touch-device!
Administrateur
Bonjour,

En réalité il existe un
@media (pointer: ***) {}


Mais les spécifications sont trop récentes et je crois qu'aucun navigateur ne l'implémente encore.

La question est surtout pourquoi vouloir le détecter en CSS ? Que comptes-tu en faire en CSS ensuite ?
Raphael a écrit :
Bonjour,

En réalité il existe un
@media (pointer: ***) {}


Mais les spécifications sont trop récentes et je crois qu'aucun navigateur ne l'implémente encore.

La question est surtout pourquoi vouloir le détecter en CSS ? Que comptes-tu en faire en CSS ensuite ?

Tout simplement je veux appliquer un style à un touch-device, quelles que soient ses dimensions d'écran, et un autre aux systèmes qui disposent d'une souris, de façon à utiliser :hover sans le problème décrit dans ce fil:http://forum.alsacreations.com/topic-27-75983-1-Tabletteethover.html
auquel personne n'a répondu, et d'une autre façon dans ce premier fil http://forum.alsacreations.com/topic-1-75973-1-Montreretcacheruneimagesurtablette.html qui n'a pas reçu non plus de réponse.
En réfléchissant à la façon de régler ce problème, il m'est venu à l'esprit qu'une solution CSS serait parfaitement appropriée... si elle existait, mais -- pour des raisons que l'on comprend très bien quand on a participé aux normalisations de standards durant quelques années -- il faut plus de temps pour établir, faire accepter et implémenter un standard que pour inventer et mettre sur le marché un nouveau device comme une tablette.
Résultat, on aura un standard implémenté dans 10 ans, mais compte tenu de mon âge, je doute que ça me servira à grand chose Smiley biggrin

Si tu as une autre façon de traiter le problème, je suis bien entendu preneur, même si c'est une bidouille du genre

document.documentElement.className += 
    (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');

Mais j'ai cru comprendre que ça ne marchait que sur le tablettes Apple.
Modifié par PapyJP (05 Jun 2015 - 10:54)
Salut,

Une solution sûr pour ce genre d'opération c'est Modernizr qui t'ajoutera une class sur ton élément body (ou html je sais plus) en cas de support ou pas. Après tu peux faire les traitements nécessaires en JS ou CSS sur base de celle-ci. http://modernizr.com/
Gili a écrit :
Salut,

Une solution sûr pour ce genre d'opération c'est Modernizr qui t'ajoutera une class sur ton élément body (ou html je sais plus) en cas de support ou pas. Après tu peux faire les traitements nécessaires en JS ou CSS sur base de celle-ci. http://modernizr.com/

Si Modernizr le fait, pourquoi pas moi?
Ai-je besoin de tout ce produit pour une fonction qui doit bien être implémentée en JavaScript, si je comprends bien comment c'est fait?
Donc la question devient: comment fait Modernizr pour réaliser cette fonction en JavaScript?
Je pense qu'on progresse...

Le problème des vieux webmasters de campagne, c'est qu'ils ont des tonnes de choses qui marchent -- sans trop se souvenir pourquoi et comment -- , et qu'ajouter un produit comme jQuery ou Modernizr dans les librairies a des effets de bords inquiétants, comme je m'en suis rendu compte en voulant utiliser jQuery. En fait il faut pratiquement refaire chaque page autrement. Ce n'est pas particulièrement difficile pour chaque page, mais quand on en a beaucoup....
Ce petit plugin génèrera juste des class sur ton élément HTML. Il n'y a pas d'effet de bord. De plus, oui si le plugin le fait, tu peux effectivement le faire aussi, mais il a l'avantage d'avoir une très large compatibilité.

Maintenant que tu connais l'outil qu'il faut utiliser, tu peux inspecter la source et voir comment il gère cette problématique.

Modernizr peut être léger une fois customiser. Pour moi c'est presque un outil obligatoire quand on développe un site web.