15 сентября 2020

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

Одним из элементов страницы есть скрытый блок с текстом (а может быть и с другим контентом). По клику на какой-либо элемент, кнопку, ссылку (Читать еще, Подробнее, Больше информации), этот скрытый блок появляется во всей своей красе. Для этого используются технологии HTML+CSS+JS. В принципе, все просто и самодостаточно, но с одним важным "но":
Это все не быстро и требует особых знаний. Ну никак не для контент-менеджера.

Но тут как раз приходят на помощь не особо известные и, поэтому, не особо жалуемые теги <details> и <summary>

Итак, создадим следующий HTML-код:

    
    <details>
        <summary>
        Кликни меня!
        </summary>
        <p>
        Контент, который изначально будет скрыт:
        </p>
        <p>
            Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Там своего пор домах силуэт диких власти буквенных ему эта правилами, имеет. О, вопроса единственное!
        </p>
        <p>
            Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Там своего пор домах силуэт диких власти буквенных ему эта правилами, имеет. О, вопроса единственное!
        </p>
    </details>
    

В итоге получаем следующий чудесный результат:

Кликни меня!

Контент, который изначально будет скрыт:

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Там своего пор домах силуэт диких власти буквенных ему эта правилами, имеет. О, вопроса единственное!

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Там своего пор домах силуэт диких власти буквенных ему эта правилами, имеет. О, вопроса единственное!

Назначение тэгов для оформления контента, раскрывающегося по клику:

С этим все предельно просто.

Тэг <details> - обрамляющий тэг для всего контента, который мы будем скрывать/раскрывать. (По умолчанию - блочный элемент).
Внутри него могут быть абсолютно любой контент, любые тэги. Разумеется кроме тегов типа <body>, <html> и т.п.
Обратите внимание, весь контент внутри <details> будет изначально скрыт...
кроме... И тут мы подходим ко второму тэгу, используемому, как правило, в паре с предудущим: <summary>

Тэг <summary> - текст внутри него показывается, не скрыт. Это именно то, по чему мы кликнем, и раскроется тот контент, который изначально скрыт. Это, можно сказать заголовок-переключатель всей <details>-конструкции
То есть, все то, что находится внутри <details>, но не внутри <summary> в начале скрыто.

Кроссбраузерность тэгов <details> и <summary>

Мы, конечно же заботимся о том, чтобы любой посетитель, с любого устройства, с любым браузером мог удобно пользоваться нашими сайтами.
Выше описанные теги корректно работают во всех браузерах. Отличился Internet Exploirer, при чем всех версий. Но Microsoft Edge уже поддерживает в полном объеме. ИЕ же, воспринимает <details> как обычный <div>. Его содержимое всегда видимо.
По моему мнению, данными тэгами можно и даже нужно смело пользоваться. ИЕ юзаем на момент описания статьи менее 1%. И даже посетитель, зашедший на наш сайт через этот браузер, ничего не потеряет - он просто увидит весь скрытый контент сразу.

Кстати, если хотим сделать конструкцию <details> / <summary> еще более красивой - css в помощь. На эти теги можно повесить класс, можно задавать стили на прямую, можно задавать стили тэгам внутри. В общем, работаем как с остальным обычным HTML-контентом

 
Добавить комментарий





Практически весь контент размещенный на сайте, вся информация является продуктом студии WSI. Если материалы взяты с других ресурсов, то обязательно указана ссылка на эти ресурсы. Вы можете бесплатно пользоваться информацией с нашего сайта, размещать ее на своих сайтах, но так же обязательна ссылка на наш сайт, Web-Sputnik.Info.


Меню
Копирайт © 2020 'Tochcha' Все права защищены