Как да направите прекрасни, анимирани подсказки с CSS

Руски (пуски) превод от Елън Нелсън (можете да видите и оригиналната статия на английски)

Подсказките са чудесен начин за подобряване на потребителското изживяване - потребителски интерфейс, когато вашите потребители се нуждаят от допълнително описание за тази изискана икона или когато искат да играят на сигурно място, преди да щракнат върху бутона, или може би заглавието на великденското яйце, което идва с изображение . Така че нека сега направим анимирани подсказки, като използваме не повече от HTML и CSS.

Ето върху какво ще работим:

Преди да скочим в котела, нека да разгледаме какво ще развалим. Нашата цел е да добавим подсказката по прост начин, така че ще направим това, като добавим атрибута на подсказката:

Известие за достъпност и функции

Ако търсите раздели 508, съвместими подсказки (американски стандарт за създаване на уеб ресурси за хора с увреждания) или ако искате по-интелигентни подсказки с откриване на сблъсък на контейнери и/или поддръжка на HTML съдържание или обикновен текст, има много решения, които използват трети -партийни скриптове за тези задачи.

Изискванията за достъпност не са специално разгледани в това ръководство. Познавате своите потребители и от какво се нуждаят, така че не забравяйте да преподавате и да зачитате техните нужди.

Нека дефинираме какво да очакваме

Отлично! Нека разтърсим тази лодка!

О, чакай! Има бележка под линия (*), нека първо се съгласим „не е необходима допълнителна маркировка“. В крайна сметка това е магия! Нашите подсказки всъщност не се нуждаят от допълнителни DOM елементи, тъй като са направени изцяло върху псевдоелементи (: before и: after), които можем да манипулираме с CSS.

Ако вече използвате псевдоелементи от различен набор от стилове и искате да създадете подсказка за този елемент, може да се наложи да промените структурата малко.

Няма парти без подсказки!

Изчакайте. Господа! Друга забележка: позициониране на CSS. За да функционират правилно подсказките, техният родител (това, към което прикачваме подсказката) трябва да бъде

  • позиция: относителна или
  • позиция: абсолютна, или
  • позиция: фиксирана

По същество всичко различно от позиция: static е режимът на позициониране по подразбиране, присвоен на почти всички елементи от вашия браузър. Подсказките са абсолютно позиционирани и следователно трябва да знаят границите, в които се осъществява тяхната абсолютност. Статичното позициониране по подразбиране няма свои собствени граници и няма да даде на подсказките ви нещо, от което да отскочите, така че подсказките ще използват най-близкия родител с ясно дефинирана граница.

Трябва да определите кое позициониране работи най-добре, когато използвате подсказки. За целите на този урок се приема, че родителят е настроен на position: relative. Ако вашият интерфейс разчита на абсолютно позициониране на елементи, може да са необходими някои промени (допълнителна маркировка), за да наведете подсказка върху този елемент.

Е, нека да скочим и да се втурнем!

Избор на атрибути: Бързо напомняне

Повечето CSS правила са написани, за да се използват от името на класа, като .this-thing, но има няколко вида селектори в CSS. За нашите прекрасни съвети ще използваме селектор на атрибут/свойство - деклариран с квадратни скоби.

Когато браузърът срещне нещо подобно:

той ще знае да приложи правилата [foo], защото тагът има атрибут на име foo. В този случай самият диапазон ще бъде полупрозрачен черен с бял текст.

HTML елементите имат различни вградени атрибути и ние също можем да измислим свои собствени. Като foo или подсказка. По подразбиране HTML не знае какво означава, но използвайки CSS, можем да кажем на HTML какво да прави с него.

Защо да се приписват селектори?

Ще използваме селектори на атрибути предимно за отделяне на задачи. Използването на атрибути вместо имена на класове не ни дава никакви бонус точки в тази битка; класовете и атрибутите имат една и съща цел. Въпреки това, като използваме атрибути, можем да поддържаме съдържанието си в съдържание, тъй като HTML атрибутите могат да имат стойности, докато имената на класове не могат.

В този пример за код разгледайте името на класа .tooltip и атрибута [tooltip]. Името на класа е една от стойностите на атрибута [class], докато атрибутът tooltip има стойност и съдържа текста, който искаме да покажем.

Сега добавете Алхимия към подсказката

Нашите подсказки ще използват два атрибута:

  • подсказка : съдържа съдържанието на подканата (ред с обикновен текст)
  • поток :не е задължително; ни позволява да контролираме как да разширяваме намека. Можем да използваме много различни методи за разположение, но ще разгледаме 4 общи насоки:
    отгоре, отляво, отдясно, отдолу.