Page 195 - Сила CSS3 Освой новейший стандарт
P. 195

Динамическая подсветка разделов страницы  •  195


            Помимо подсветки заголовка текущего раздела страницы, псевдокласс :target можно ис-
            пользовать для решения следующих задач:
            •   подсветка сносок;
            •   отображение пояснения рядом с целевым заголовком для предоставления пользова-
               телю более обширного контекста (см. http://web-graphics.com/mtarchive/001454.php);
            •   перенос элемента в начало стека перекрывающихся полей или изображений (см. http://
               virtuelvis.com/archives/2003/07/target-fun);
            •   набор полей с различным содержимым, оформленный в виде вкладок (см. http://css-
               tricks.com/5841-css3-tabs);
            •   меню формата «аккордеон», развертывание и свертывание полей с содержимым (см.
               http://www.paulrhayes.com/2009-06/accordion-using-only-css и http://www.thecssninja.
               com/css/accordian-effect-using-css);
            •   слайд-шоу (см. http://www.dinnermint.org/css/using-css3s-target-pseudo-class-to-make-
               a-slideshow и http://www.nealgrosskopf.com/tech/thread.php?pid=45);
            •   галереи изображений (см. http://www.tobypitman.com/pure-css-sliding-image-gallery,
               http://www.ie7nomore.com/fun/scroll и http://www.ie7nomore.com/fun/slideshow);
            •   модальные окна и лайтбоксы (см. http://sixrevisions.com/css/semantic-css3-lightboxes
               и http://www.thecssninja.com/css/futurebox2).
            Обратите внимание, что некоторые из этих методов, вероятно, проще и удобнее реа-
            лизовывать с помощью JavaScript, а не CSS, так как в версии CSS возможны проблемы
            с доступностью содержимого и удобством доступа. Тем не менее они могут оказаться по-
            лезны в каких-то других обстоятельствах или подсказать вам варианты прочих способов
            эффективного применения :target. Рассматривайте ресурсы в приведенном выше списке
            как источник вдохновения.

          Таблица 5.4. Поддержка :target в браузерах

           IE                     Firefox             Opera     Safari     Chrome
           Да, начиная с версии 9  Да                 Частично*  Да        Да

          *  Браузер Opera поддерживает псевдокласс :target, однако не убирает стилизацию
           :target при переходе от цели вперед и назад с помощью кнопок Back (Обратно)
           и Forward (Вперед).



          Обходные пути для IE
          IE 8 и более ранние версии не поддерживают псевдокласс :target. Разумеется, оглав-
          ление со ссылками будет работать, и пользователи IE смогут переходить к нужным
          разделам, однако заголовки разделов подсвечиваться не будут. Поскольку большин-
          ство страниц все равно работают именно так, вряд ли пользователи IE 8 заподозрят,
          что в оформлении этой статьи чего-то не хватает. Да и шансы, что читатели этой
          небольшой статьи потеряются в содержимом, также крайне невелики.


                                                        www.trk.kg
   190   191   192   193   194   195   196   197   198   199   200