Псевдокласс target

Содержание

Псевдокласс :target | CSS

Изменить внешний вид элемента при смене URL-адреса

Элементу задан атрибут id и некие стили CSS, в данном случае свойство border .

Если в адресной строке к URL добавить # (хэш-символ) с тем же значением, что id у элемента, то содержимое окна браузера без перезагрузки страницы промотается так, что первым будет виден верхний край рассматриваемого элемента. Меняют URL-адрес преимущественно не вручную, а с помощью ссылки или с помощью объекта Window.location (JavaScript).

При этом внешний вид данного элемента сменится на тот, что указан в псевдоклассе :target , благодаря чему можно подсветить элемент, к которому был сделан переход.

Для того, чтобы вернуть элемент к исходному виду, можно изменить часть URL после хэша на любую другую.

Разный стиль :target для одного тега

Тегу можно задать только один уникальный id .

Псевдокласс target в CSS

Сегодня мы рассмотрим еще одну возможность, которую предоставляет нам CSS3, а именно поговорим о псевдоклассе target, для чего он нам может быть нужен, и рассмотрим один из самых популярных способов его применения.
Прежде всего, хотелось бы сказать, что данный псевдокласс срабатывает при случае совпадения идентификатора находящегося в URL, с элементом находящимся в документе. Если говорить более простыми словами, то при следующей ссылке #id1, в html документе должен присутствовать элемент с данным идентификатором, и при клике на данную ссылку будет применен псевдокласс target.
Для большей детализации рассмотрим все на примере. Для начала напишите у себя следующий html код:

id =»id_1″ > Образец текста, к которому будут применять стили.

id =»id_2″ > Второй образец текста, к которому будут применять стили.

id =»id_3″ > Третий образец текста, к которому будут применять стили.

id =»id_4″ > Четвертый образец текста, к которому будут применять стили.

Псевдокласс :target

Селектор псевдокласса CSS :target используется для выбора и оформления целевого объекта внутренней ссылки в документе, фрагмента страницы, указанного в атрибуте href ссылки.

…вы можете использовать селектор :target для подсветки этого раздела после клика по ссылке, чтобы привлечь к нему внимание читателя. Такая техника подсветки известна как «техника желтого затухания» и была впервые использована командой «37 Signals».

Эта техника требует применения CSS-анимации для демонстрации цветного фона в течение короткого временного промежутка, после чего этот фон будет убран — ее цель подсветить раздел ровно настолько, чтобы привлечь внимание читателя. Взгляните на демо, представляющее данную технику в действии:

В представленном выше примере временные стили применяются к объекту, указанному в ссылке. Но если вы решите использовать более долгоиграющие стили, вы сможете создавать эффекты, увеличивающие масштаб элементов, меняющие их видимость и многое другое.

Не так давно я использовала эту технику на своем собственном вебсайте при показе окна поиска, которое мои читатели могут использовать для поиска статей. Одной из частей основной навигации является ссылка, указывающая на «обертку» окна поиска — элемент

Сначала окно поиска скрыто с помощью opacity: 0; . Его положение настроено таким образом, чтобы оставаться фиксированным по отношению к видимой области документа, используя position : fixed; . Наконец, чтобы гарантировать, что окно не блокирует события указателя, поступающие от остальных элементов страницы, находящихся «под» ним, свойство pointer-events имеет значение none .

При клике по ссылке Search, благодаря использованию селектора :target , окно появляется, и на нем снова начинают срабатывать события указателя. Для плавного появления окна используется свойство «transition», которое создает соответствующий эффект.

Непрозрачность окна поиска постепенно увеличивается. Миссия… выполнена наполовину — нам нужно убедиться, что окно и исчезнет плавно, когда пользователю это понадобится.

Контейнер этого окна должен содержать другую ссылку, которая позволит нам вернуться на главную страницу. Для достижения этой цели мы можем присвоить элементу body или html идентификатор, а затем создать ссылку «Close», указывающую на него — это должно решить нашу задачу. Однако, делать это не обязательно. Создав ссылку, не указывающую на какой-либо конкретный фрагмент страницы, и используя в качестве указателя только # , вы, по сути, создаете ссылку на главную страницу, но получаете возможность не добавлять никаких идентификаторов фрагментов к URL вашей страницы.

Мы хотим, чтобы при клике по ссылке «Close»; наше окно поиска постепенно затухало, поэтому мы добавим еще один переход (transition) для #search-overlay:target , чтобы гарантировать, что его непрозрачность плавно опустится до 0 . Безусловно, вы можете пропустить этот шаг, если хотите, чтобы окно исчезало сразу после его закрытия.

Можно пойти еще дальше и добавить анимацию трансформации окна, чтобы оно увеличивалось при появлении — подобно (да, вы угадали) эффекту «лайтбокс». Вместо окна с формой поиска вы можете использовать изображение, которое будет увеличиваться до размеров области просмотра при клике по соответствующей миниатюре. У Мануэлы Илич есть пример чудесной и полноценно работающей галереи изображений, демонстрирующий применение этого метода на практике, с уроком, объясняющим использованный в ней код.

Галереи изображений, всплывающие окна и навигация снаружи макета, созданные, используя только CSS, являются примерами полноценных UI-компонентов, которые можно создать лишь с помощью CSS, используя преимущества, предоставляемые селектором :target .

Надеюсь, что эта статья помогла продемонстрировать вам имеющиеся возможности при использовании селекторов псевдоклассов CSS для стилизации контента.

Зачем нужен псевдокласс target в CSS3.

В CSS3 появилось много нового, и сегодня мы разберем один из новых псевдоклассов — target.

Target с английского переводится как «цель» и это не просто так. Дело в том, что данный псевдокласс применяет какие-то стили к элементу, на который ссылаются. Объяснять это просто так нет смысла, лучше посмотрим сразу на пример.

Илон Маск рекомендует:  Что такое код fputs

К примеру, у нас есть такой HTML код:

Теперь мы можем сослаться на данный элемент из строки запроса

Таким образом мы сможем перейти к данному элементу.

Теперь рассмотрим пример с псевдоклассом target.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore dignissimos odio eius, delectus autem facilis sunt vero ex, eum tempore excepturi harum voluptatem corporis modi, ducimus quam ab. Ipsa, officia.

Теперь, при клике по ссылке, текст в параграфе станет зеленого цвета, т.к. вы начнете на него ссылаться.

Итак, вот такой простой псевдокласс target в CSS3, однако, он позволяет делать очень крутые вещи. Одну из таких мы разберем в следующей статье.

Спасибо за внимание и удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Использование псевдокласса CSS3 :target

    19 июня 2015 | Опубликовано в css | Нет комментариев »

    Псевдоклассы CSS, изменяющие стили после определенных действий пользователей, существуют очень давно. Вы точно знакомы с такими псевдоклассами, как :hover, :active и :focus, а некоторые даже могут вспомнить восторг от появления возможности смены цветов ссылок с их помощью в браузере Internet Explorer 4 в далеком 1997 году.

    CSS3 представил новый псевдокласс :target, который уменьшает необходимость использования скриптов в интерактивных элементах. Например, у страницы с ссылкой вида http://mysite.com/page#mytarget к элементу с идентификатором mytarget могут применяться соответствующие стили для псевдокласса :target.

    Поддержка браузерами псевдокласса :target

    Все современные версии браузеров поддерживают псевдокласс :target, проблем не будет и с браузером Internet Explorer от версии 9, и с большинством версий браузеров Chrome, Firefox, Safari и Opera. К сожалению, старые версии браузера Internet Explorer не поддерживают этот псевдокласс. Но если Вам очень нужна поддержка старых версий, можно воспользоваться, например, библиотекой JavaScript selectivizr, которая без особых сложностей добавит поддержку псевдокласса :target.

    Простой документ, использующий псевдокласса :target

    Рассмотрим пример использования псевдокласса :target.

    Например, текст мелким шрифтом в стандартном контракте, такой как расписание платежей, условия хостинга, условия расторжения контракта, условия поддержки, словарь и т. п. может располагаться на одной или нескольких веб-страницах. Даже если стараться быть кратким, эти тексты могут значительно разрастись.

    Вот отрывок кода документа HTML5 из contract.html:

    Можно воспользоваться псевдоклассом :target, чтобы визуально выделить активную часть документа, например:

    Так что пользователь, читающий контракт, может нажать на пункт меню, чтобы визуально выделить соответствующую часть документа. А также можно давать пользователям прямые ссылки на определенные разделы, например, contract.html#support.

    Псевдокласс :target дает и другие возможности, например, можно создавать динамические эффекты с помощью HTML5 и CSS, без использования JavaScript. В следующих уроках мы покажем другие примеры использования псевдокласса :target.

    CSS, псевдокласс, псевдоэлемент: hover, child, target

    Комбинируя HTML и CSS, можно управлять абсолютно всеми элементами веб-страницы. С помощью стилей вы легко измените внешний вид любого блока или строки. Нередко верстальщику нужно выполнить более сложную задачу – изменить внешний вид не самого элемента, а отдельной его части или определенного состояния. В таком случае на помощь приходят псевдоклассы CSS.

    Псевдоклассы работают по тому же принципу, что и обычные классы в разметке, однако физически они на странице не присутствуют. С их помощью можно выбрать элементы на основании не входящей в документ информации, которую не получится выбрать обычным селектором. Вот простой пример: у вас есть красная кнопка, а вы хотите, чтобы при наведении она становилась синей. Теоретически это можно реализовать на JavaScript, но зачем такие сложности? Гораздо удобнее использовать :hover CSS. С его помощью можно придать блоку любые параметры, которые будут срабатывать исключительно при наведении курсора мыши.

    Список псевдоклассов CSS регулярно обновляется. Возможно, в то время как вы будете читать этот материал, появится несколько новых. Для начала рассмотрим те, что появились в спецификации CSS3.

    :nth-of-type

    Предположим, у вас есть список, в котором вы хотите использовать чередование цветов, т. е. первая строка будет, к примеру, написана красным шрифтом, а вторая – синим, третья снова красным, четвертая снова синим. Раньше для этого приходилось создавать новые классы. Верстальщики прошлого добавляли каждому элементу списка по классу, а затем меняли их внешний вид в таблице стилей. Это было не слишком удобно и загрязняло верстку.

    Сейчас все делается проще. Используйте псевдокласс CSS :nth-of-type. Это даст возможность получить необходимый визуальный эффект, ничего не меняя в разметке. Принцип действия прост: вы указываете селектор, а в скобках после его названия пишете формулу или ключевое слово, которые будут находить требуемые элементы. Например, :nth-of-type(even) найдет все четные элементы, а :nth-of-type(odd) – нечетные. Существует большое количество формул, которые используются для максимально точного контроля. В скобках можно указать число – в таком случае стили будут применяться к элементу, индекс которого равен этому числу.

    :nth-child

    Этот псевдокласс CSS по принципу действия схож с предыдущим, но в отличие от него работает исключительно с дочерними элементами выбранного элемента. Например, если вы хотите с его помощью настроить внешний вид тегов
    в списке, нужно использовать конструкцию ul:nth-child, поскольку

      является родителем
      .

    Для точного контроля можно использовать формулы. Они довольно сложны для новичка, но стоит немного углубиться в синтаксис, как все становится проще. Формулы выглядят так: an+b, где а – это множитель, а b – смещение. Например, если в скобках указать n, то псевдокласс выберет все дочерние элементы (потому что не указаны дополнительные условия в виде а и b). Если указать n+2, будут выбраны все элементы, кроме первого (потому что смещение равно двум). Лучше всего этот момент изучать на практике. Поэкспериментируйте с дочерними компонентами и разными формулами.

    Илон Маск рекомендует:  preg_match_all - Выполняет глобальный поиск шаблона в строке

    :last-child

    Тут все просто. Псевдоклассы CSS child используются для выбора одного конкретного элемента. Этот выбирает последний дочерний компонент родителя. Используется довольно часто, например, чтобы выделить последнюю строку таблицы или убрать отступ у последнего блока, чтобы избежать его переноса на следующую строку.

    :nth-last-child

    По принципу действия аналогичен упоминавшемуся ранее nth-child, но действует в обратном направлении, т. е. при использовании элементы будут перебираться снизу-вверх. Это удобно, если нужно разыскать несколько последних элементов.

    Вы можете подумать, что эти псевдоклассы и псевдоэлементы CSS бесполезны, поскольку добиться цели можно также с помощью обычных классов. Это не так. :nth-child, :nth-last-child и их аналоги очень удобны при работе на больших проектах – например, в случаях, когда у блока имеется огромное количество дочерних элементов. Вручную расставлять классы долго и трудно.

    Псевдоклассы управления состояниями

    Что делать, если вам нужно изменить внешний вид элемента в определенном состоянии? На этот случай предусмотрены псевдоклассы CSS нажатия, наведения и других действий. Рассмотрим их подробнее.

    Это псевдокласс ссылок CSS, причем не любых, а только тех, что еще не посещались. В нем можно задать стили для тех элементов , по которым пользователь пока не переходил.

    :visited

    Аналог предыдущего варианта, который только управляет уже посещенными ссылками. Комбинируя два этих псевдокласса, можно настроить внешний вид тегов именно так, как вам нужно. Однако учтите, что состояния просчитываются для конкретных браузеров и сбрасываются после очистки истории.

    Псевдокласс :target CSS

    Один из самых интересных псевдоклассов, который при грамотном использовании до некоторой степени заменяет использование JavaScript. Он дает возможность управлять элементом, идентификатор которого указан в строке адреса страницы. Да, с первого раза это трудно понять. Попробуем разобрать на примере.

    Допустим, у нас на странице есть 3 блока div с определенными id: id1, id2, id3. Также у нас есть три ссылки с соответствующими значениями href: #id1, #id2, #id3. При нажатии на первую ссылку в строке адреса страницы после ссылки на саму страницу появится соответствующий id.

    В CSS для всех блоков div указано свойство display:none, то есть по умолчанию они не показываются. Используем target:div и задаем ему свойство display:block. Теперь, при нажатии по ссылкам с определенными href, блокам с соответствующими >

    Все еще ничего не понятно? Попробуйте поэкспериментировать. Создайте страницу с описанной выше разметкой и стилями. Через пару минут вы отлично во всем разберетесь.

    Псевдоклассы, которые могут применяться к любым элементам

    Большинство описанных выше псевдоклассов требовало ссылок для работы. Однако не всем нужны элементы . Ряд вариантов может применяться к абсолютно любым частям страницы.

    • :active предназначен для стилизации элементов, по которым пользователь кликнул левой кнопкой мыши;
    • :hover – CSS для элементов, на которые пользователь наводит курсор;
    • :focus – для тех частей страницы, которые сейчас находятся в фокусе. Этот псевдокласс часто используется для работы с формами. Например, если вы хотите выделить строку ввода имени пользователя, когда посетитель устанавливает в нее курсор и начинает набирать символы.

    Помните, что :active действует только в момент нажатия. Сразу после прекращения работы левой кнопки мыши заданные с его помощью стили исчезнут и элемент будет отображаться так, как он отображался по умолчанию. В большинстве случаев этот псевдокласс применяется для работы с кнопками. Можно задать им большое количество состояний. Например, по умолчанию кнопка будет синей, при наведении – зеленой, при нажатии – красной, и т. д.

    Разумеется, псевдоклассы полностью поддерживаются только современными браузерами. Например, в IE6 и 7 не удастся использовать focus, а hover и active в IE6 работают только для ссылок. Будем надеяться, что вам не придется работать с такими браузерами, а если все же необходимость возникла, применяйте условные комментарии.

    Дополнительные псевдоклассы

    Перечисленными выше вариантами список не ограничивается. Благодаря современному CSS можно выделять только включенные элементы (:enabled) или только выключенные (:disabled), только отмеченные переключатели checkbox и radio (:checked). Вкратце опишем еще несколько вариантов, которые вы можете использовать для более тщательного управления внешним видом содержимого.

    • :only-child — ает возможность применять стиль к элементу, который является единственным дочерним элементом;
    • :lang — для работы с элементами, у которых задан язык с помощью атрибута lang;
    • :root — используется для выбора корневого элемента. Соответственно, в HTML таковым является тег ;
    • :not — очень мощный инструмент. Дает возможность ограничивать применение стилей по определенным селекторам. Вот пример: .blue-color:not(span). Такой селектор применит стили ко всем элементам с классом blue-color, если они не являются .

    Полный список псевдоклассов может растянуться не на одну страницу. Большинство верстальщиков использует в практике только некоторые из них, предпочитая управлять состояниями с помощью JavaScript. Да, это удобно, однако существует ряд моментов, когда более эффективных результатов удастся добиться проще, используя соответствующий псевдокласс.

    CSS псевдокласс :target

    Значение и применение

    Псевдокласс :target стилизует целевой элемент на странице (на который был произведён переход по якорной ссылке).

    Поддержка браузерами

    Селектор Chrome Firefox Opera Safari IExplorer Edge
    :target 4.0 3.5 9.6 3.2 9.0 12.0

    CSS синтаксис:

    Версия CSS

    Пример использования

    В этом примере после перехода по якорный ссылке стилизуется абзац (HTML элемент

    ) на который был произведен переход. На изображении отображен пример перехода на элемент со значением «test2» глобального атрибута id:

    Пример использования псевдокласса :target. CSS селекторы

    Кажется, вы используете блокировщик рекламы :(

    Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

    CSS :: Псевдокласс :target

    Псевдокласс :target (от англ. target – цель) позволяет выбрать все элементы требуемого типа, которые используются в качестве якорей. Стиль к ним применяется после перехода по соответствующей ссылке, например, span:target <блок объявлений>.

    Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html -документа не указываются и отделяются от указанного в селекторе элемента двоеточием ‘:’ . При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.

    MATRASKA23

    Бог создал сайты, а копипаст сделал их равными.

    21 ноября 2010 г.

    Псевдокласс :target и меню на CSS

    Следовательно, мы можем на страницы разместить якоря, которые будут ссылаться на определенные элементы страницы. Тем самым при переходе по этим ссылкам мы будем применять к ним псевдокласс :target.
    Теперь следует сказать, что псевдокласс :target поддерживается почти всеми ныне ходовыми браузерами (Chrome, Safari, FireFox, Opera), кроме Internet Explorerа младше 9.0. Поэтому метод реализации меню средствами css пока лучше заменять JQuery или верстать по старинке с переходом на отдельные страницы, пока не «отомрут» все браузеры не поддерживающие css 3.0.

    html xmlns =»http://www.w3.org/1999/xhtml» >
    head >
    meta content =»text/html; charset=utf-8″ http-equiv =»Content-Type» />
    title > Untitled 1 title >
    link rel =»stylesheet» type =»text/css» href =»corp.css» />
    head >
    body >

    div class =»part_left» >
    ul >
    li > a href =»#bk» > Бизнес кредиты a > li >
    li > a href =»#rko» > Расчетно кассовое обслуживание a > li >
    li > a href =»#dbo» > ДБО a > li >
    li > a href =»» > Конверсионные операции a > li >
    li > a href =»» > Корпоративные карты a > li >
    li > a href =»» > Зарплатный проект a > li >
    li > a href =»» > Депозиты a > li >
    li > a href =»» > Векселя a > li >
    ul >
    div >
    div class =»part_right» >
    ul >
    li id =»default» > это IE li >
    li id =»bk» > Бизнес кредиты. li >
    li id =»rko» > Расчетно кассовое обслуживание. li >
    li id =»dbo» > Дистанционное банковское обслуживание. li >
    ul >
    div >
    body >

    html >

    * This source code was highlighted with Source Code Highlighter .

    a <
    font-family:Arial, Helvetica, sans-serif;
    font-size:12pt;
    color:black;
    font-weight:bold;
    >
    a:link
    a:hover
    a:activeul <
    margin:0;
    -webkit-padding-start:0;
    -moz-padding-start:0;
    >
    li .part_left <
    position:absolute;
    left:0;
    top:0;
    width:300px;
    >
    .part_right <
    position:absolute;
    left:305px;
    top:0;
    width:auto;
    >
    /* Задаем параметры для фрагмента #bk, и остальных пунктов меню*/
    /* Значения по умолчанию */
    li#bk, li#rko, li#dbo <
    display:none;
    >
    /* Когда ссылка активирована */
    li#bk:target, li#rko:target, li#dbo:target <
    display:block;
    >
    /*Возврат к визуализации по умолчанию */
    li#bk:not(:target),li#rko:not(:target), li#dbo:not(:target) <
    display:none;
    >
    /* ——- */
    /* Дефолтный случай для IE 9.0*/
    li#default <
    display:block;
    >
    /*li#default:target <
    display:block;
    >*/
    li#default:not(:target) <
    display:none;
    >

    Очередной блог фрилансера

    коротко и полезно о веб-разработке

    Псевдо-селектор :target

    Псевдо-селектор :target срабатывает при совпадении хэша в URL и >

    Пока URL будет таким как на картинке, блок section будет иметь желтый фон.

    Где это можно использовать?

    Один из примеров использования – подсветка “состояний”. Когда URL страницы содержит некий хэш, страница находится в соответствующем состоянии. Этот способ напоминает манипулирование именами классов, хотя и не является таким универсальным. Все то, что вы обычно делаете изменяя классы, можно использовать для изменения состояния элемента, когда к нему применяется псевдо-селектор :target. Например: изменение цвета, позиционирования, изменение картинок, отображение/скрытие различных элементов, и т.д.

    Существует три признака оправданного использования псевдо-селектора :target :

    1. Когда необходимо подчеркнуть “состояние”
    2. Когда приемлемо резкое “перепрыгивание” страницы вниз
    3. Когда приемлемо влияние на историю браузера

    Давайте рассмотрим это немного подробнее.

    Как получить хэш в URL?

    Самый распространенный способ – пользовательский клик по ссылке, включающей хэш. Ссылка может быть как внутренней (которая указывает на текущую страницу), так и полноценной, оканчивающейся хэш-тэгом и значением. Например:

    “Перепрыгивание” страницы

    Независимо от назначения ссылки, браузер всегда прокручивает страницу до тех пор, пока указанный элемент не окажется вверху. В случае если браузер не может прокрутить точно до указанного элемента, он прокрутит страницу на максимально возможную длину. Такое поведение браузера, накладывает определенные ограничения при использовании :target для подсветки текущего состояния.

    Например, однажды я (прим. я – Крис Койер, автор блога css-tricks.com) пробовал различные техники, для имитации создания CSS-табов, и в конце-концов остановился на чекбокс-хаке, поскольку только он позволял обойти проблемы с перепрыгиванием страницы. Йен Хэнсон, создатель CSS Science, также реализовал несколько примеров табов. Его третий пример использует :target и абсолютно позиционируемые элементы, спрятанные вверху страницы, для предотвращения “прыжка”. Это довольно умно, но все же не решение проблемы, поскольку страница прыгает вверх, табы должны располагаться ниже области прыжка.

    Прекрасный пример: подсветка секций

    Проблема: Клик по хэш-ссылке прокручивает страницу к указанной секции, которая по возможности будет удобно расположена в верхней части окна браузера. Но что если на странице немного контента, а скролл и вовсе отсутствует? В этом случае, секция останется в видимой области, но не будет прибита к верху страницы, что странно и не совсем удобно.

    Исходя из личного опыта могу заметить, что если клик по внутристраничной ссылке не прокручивает страницу к указанной секции, это безумно раздражает. Чаще всего эта проблема встречается на FAQ-страницах, содержащих большое количество коротких секций.

    Давайте это исправим!

    Один из самых знаменитых методов исправления этой проблемы, называется “Yellow Fade Technique” (Техника Желтого Затухания). Эта техника была разработана компанией 37 signals, специально для того чтобы обратить внимание пользователей на только что добавленный на страницу контент . Джонатан Снук портировал эту идею на CSS и объединил ее с псевдо-селектором :target.

    Вместо желтого затухания, мы будем выделять активную секцию страницы путем плавного сдвига вправо, одновременно добавляя красный маркер слева от текста. Это будет выглядеть следующим образом:

    HTML-структура представляет собой обычную навигацию, с привязкой ссылок к соответствующим секциями через ID:

    При активации :target, секция немного сдвигается вправо, через трансформацию translateX, поскольку она предотвращает любые проблемы с отступами и странное выравнивание текста; также слева появляется красный маркер, выполненный с помощью кейфрейм-анимации.

    Вот и все. Код отвечает принципам прогрессивного улучшения, поэтому будет нормально выглядеть и работать во всех браузерах.

    Боремся с прыжками страницы

    Предположим, вам понравилась идея использования :target для подсветки секций, но при этом хотелось бы избежать прыжков страницы, при клике по хэш-ссылкам. С помощью jQuery вы можете предотвратить дефолтное поведение всех хэш-ссылок, а затем использовать метод pushState() (или replaceState()), для изменения URL без передвижения страницы.

    Метод replaceState() отличается от pushState() тем, что не добавляет запись о смене URL в историю браузера. Так что, вы можете использовать любой из этих методов на свое усмотрение.

    Плохие новости

    При изменении хэша в URL через метод pushState(), предыдущая активная секция должна вернутся к исходному состоянию, а новая выделиться. Однако этого не произойдет (на момент написания статьи тестировалось в последних версиях WebKit и Firefox). Это баг.

    Теоретически вы можете измерить и сохранить текущую позицию скролла на странице, позволить ссылке передвинуть страницу естественным путем, а затем вернуть ее обратно на то место где она была. Но это выглядит настолько ужасно, что я не могу себя заставить сделать тестовую страницу с этим примером.

    Перевод статьи «On :target», автор Chris CoyierПсевдо-селектор

    Рассказать друзьям

    Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL