J'ai vu cette fonctionnalité dans une conception un pendant le retour et la pensée "Hay, qui ressemble à une bonne idée". Mais à la recherche de plus en plus, je ne suis pas sûr que ce soit tout à fait possible en utilisant "juste CSS".
Il y avait une barre de navigation sur le côté gauche: p>
p>
<ul> <li>link 1</li> <li>link 2</li> <li>link 3</li> <li>link 4</li> </ul>
3 Réponses :
Vous ne pouvez certainement pas détecter la mise au point sur la fenêtre dans CSS depuis CSS exécuté dans la portée du document. Mais vous pouvez le détecter sur, dire p> corps code>, à l'aide de HTML5 Tabindex code> Attribut:
<body tabindex="0">
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</body>
Vous pouvez essayer il est implémenté au moins dans Firefox , et vous pouvez le voir travailler sur sa page de test (Firefox uniquement) . : fenêtre inactive :
Ni les normes CSS actuelles ni les prochaines normes CSS ne définissent aucune requête de sélecteur ou de support lorsque l'agent utilisateur n'est pas au premier plan. 1 sup> Le page visibilité API mentionné dans les commentaires ne fait pas tout à fait ce que vous recherchez, car cela ne vous dit pas si le navigateur est Au premier plan, seule la page est visible. Une fenêtre de navigateur peut être en arrière-plan, mais son onglet actuel peut toujours être visible si la fenêtre n'est pas minimisée ou n'est pas complètement obscurciée par une autre fenêtre (et vous n'obtiendrez même pas de résultats cohérents avec ce dernier avec l'API susmentionnée. ). P> Le meilleur que vous puissiez faire est d'écouter les événements de la fenêtre et de flou en utilisant JavaScript: p> p>
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
Utiliser CSS Ceci n'est pas possible. Êtes-vous ouvert à d'autres méthodes pour y parvenir? De plus, je sens la méthode du corps de la station balnéaire n'est pas une bonne, si vous allez déplacer votre souris jusqu'au sommet de votre navigateur, il ressemblerait un peu pas cher et collant.
@RUDDY: Je suppose que JQuery's l'alternative?
Il y a un récent (janvier 2015) Article à Smashingmagazine qui débattre des approches précédentes de voir si un onglet est visible aux côtés d'une API à venir à cette fin. (Mais: il s'agit de toutes approches JS.)
@ jbutler483 Démo , c'est comment vous pouvez le faire en jQuery (la façon dont je savoir) mais c'est à peu près la même chose que survolez.
@ jbutler483 Mais utiliser cette méthode serait meilleur que cela détermine si la page est toujours mise au point (contrairement à la survolte).
Pourquoi vous souciez-vous de changer la couleur de quelque chose quand quelqu'un ne le regarde pas?
Probablement pour la même raison, un système d'exploitation change le style des fenêtres inactives.
@Salmana: c'était plus qu'une «couleur de fond». Je pensais à quelque chose comme un design inactif (je l'ai vu utilisé sur des trucs comme la section / la fenêtre des onglets de Chrome), alors pensé que ce serait cool de mettre en œuvre quelque chose de similaire.