Css button hidden text

clubmate.fi

Visually hidden text, only visible to screen readers

This article looks into content that is visually hidden, but visible to people using assistive technologies, like screen readers.

Screen reader only content might be needed when:

• Rendering a button that is only an icon with no visible text. The button should contains a visually hidden text that tells what it does, e.g.: «Sort ascending».
• Rendering form fields with no visible labels, the label should be there, but it should be screen reader only.

Back in the day we simply used to do:

.visually-hidden  left: -9999px; position: absolute; >

The needed CSS to hide a button properly

But it had its issues, after some amount iterations the collective understanding is to use something like this:

.visually-hidden  border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; height: 1px !important; overflow: hidden !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important >)

Visually hidden React component

It’s pretty unsurprising. here’s one made using styled-components:

import styled from 'styled-components' const VisuallyHidden = styled.span( border: '0 !important', clip: 'rect(1px, 1px, 1px, 1px) !important', height: '1px !important', overflow: 'hidden !important', paddingBottom: '0 !important', paddingLeft: '0 !important', paddingRight: '0 !important', paddingTop: '0 !important', position: 'absolute !important', whiteSpace: 'nowrap !important', width: '1px !important' >) export default VisuallyHidden

With styled-components, you can just export that definition and use it, it’s already a React component, props.children will be passed along as it should.

Источник

Показать/скрыть текст. Примеры на JS, CSS

Давайте рассмотрим разные примеры того, как можно показать/скрыть текст по нажатию на кнопку. Обычно такая функция называется спойлер или аккордеон. Это когда весь текст или половина его скрыта от просмотра, и только при нажатии на кнопку, или определённый элемент, открывается весь текст.

Разнообразие реализации такой фишки, как показать/скрыть текст может быть огромное количество. Есть разный подход к технической части: на чистой JavaScript, jQuery, чистый CSS, HTML. Для WordPress можно найти специальные плагины или сделать раскрывающийся текст без плагина.

Показать скрыть текст JS

Первые примеры будут с использованием JS/jQuery. Всё представленное ниже можно «прикрутить» к любому сайту на любой платформе. Внешний вид, то есть дизайн, легко редактируется с помощью CSS.

Первый пример Посмотреть демо

.spoiler_wrap < position: relative; margin-bottom: 20px; font-size: 22px; background: #fff; border-radius: 5px; height: fit-content; >.spoiler_title < cursor: pointer; >.spoiler_title, .spoiler_content < padding: 30px 26px; >.spoiler_content < padding-top: 0; padding-bottom: 10px; transition: 0.15s ease-out; height: auto; max-height: 0px; overflow: hidden; margin-top: -10px; opacity: 0; font-size: 14px; color: #444; >.spoiler_content p < font-size: 16px; margin: 20px 0; color: #333; line-height: 1.4; >.spoiler_content.open < margin-top: 0; max-height: 100%; opacity: 1; >.spoiler_title .spoiler_arrow < display: inline-block; margin-left: 15px; font-size: 20px; transition: all .1s; vertical-align: middle; >.spoiler_title .spoiler_arrow svg < fill: red; width: 13px; >.spoiler_title .spoiler_arrow.open

Второй пример Посмотреть демо

.morecontent span < display: none; >.morelink

Третий пример Посмотреть демо

.spoiler_wrap < border-bottom: 1px solid #999999; margin-bottom: 15px; >.spoiler_wrap.active .spoiler_content < max-height: 500px !important; padding-bottom: 25px; transition: max-height 0.5s ease, padding-bottom 0.3s ease; >.spoiler_wrap.active .spoiler_title < color: #808080; transition: color 0.3s ease; >.spoiler_content < color: #090909; font-family: serif; font-size: 16px; line-height: 24px; max-height: 0; overflow: hidden; transition: max-height 0.5s ease, padding-bottom 0.3s ease; >.spoiler_content p < margin-bottom: 25px; >.plus-minus-toggle < cursor: pointer; height: 21px; position: absolute; width: 21px; left: -40px; top: 50%; z-index: 2; >.plus-minus-toggle:before, .plus-minus-toggle:after < background: #000; content: ''; height: 4px; left: 0; position: absolute; top: 0; width: 21px; transition: transform 500ms ease; >.plus-minus-toggle:after < transform-origin: center; >.plus-minus-toggle.collapsed:after < transform: rotate(90deg); >.plus-minus-toggle.collapsed:before < transform: rotate(180deg); >.spoiler_title < color: #090909; font-family: sans-serif; font-size: 20px; font-weight: 800; text-transform: uppercase; position: relative; cursor: pointer; padding: 20px 0; transition: color 0.5s ease; >@media screen and (max-width: 767px) < .spoiler_title < font-size: 18px; >>

Четвертый пример Посмотреть демо

.spoiler_wrap < margin-bottom: 40px; >.spoiler_title_wrap < display: block; padding: 0px; >.spoiler_title < margin-bottom: 20px; font-size: 22px; font-weight: 600; color: #000; cursor: pointer; display: table; transition: all .3s ease-in-out; position: relative; >.spoiler_title:hover, .expanded .spoiler_title < opacity: 0.7; >.spoiler_content < font-size: 16px; border-radius: 5px; line-height: 26px; display: none; margin-bottom: 30px; padding: 30px; background: #333; position: relative; >.spoiler_content p < color: #999; margin-bottom: 25px; >.spoiler_content p:last-child < margin-bottom: 0px; >.arrow-t < transform: rotate(-45deg); display: block; position: absolute; top: 7px; right: -33px; width: 10px; height: 10px; background: transparent; border-left: 3px solid #000; border-bottom: 3px solid #000; transition: all .3s ease-in-out; >.arrow-b

Пятый пример Посмотреть демо

.text_hide_wrap < max-width: 700px; >.item_text < width: 100%; padding: 20px; >.item_text p < margin-bottom: 20px; >.io_item < width: 100%; padding-bottom: 20px; >.io_button_wrap < text-align: center; margin-top: 10px; >.io_button < display: inline-block; border: 1px solid #f00; width: auto; padding: 0 20px; line-height: 32px; vertical-align: top; text-transform: uppercase; color: #f00 !important; font-size: 10pt; border-radius: 22px; cursor: pointer; >a.io_button:hover < text-decoration: none; >.io_item .btn_close < display: none; >.io_item .btn_open < display: inline-block; >.io_item.open .btn_close < display: inline-block; >.io_item.open .btn_open < display: none; >.io_trans < width: inherit; position: absolute; height: 80px; bottom: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); transition: 1s; >.io_item.open .io_trans < height: 0; transition: 1s; >.io_item_wrap < position: relative; overflow: hidden; max-height: 100px; width: inherit; transition: max-height 0.5; >.io_item.open .io_item_wrap

Показать скрыть текст CSS

Подобное скрытие текста можно реализовать одними средствами CSS и HTML. И это не значит какой-то недостаток. В том плане, что будет хуже, чем с помощью JS/jQuery. Да и в целом многое зависит от поставленной задачи. И помните, всегда можно отредактировать стили под свой дизайн сайта.

Первый пример Посмотреть демо

 
текст
 
 CSS

.spoiler_content < opacity: 1; transition: opacity 0.4s ease-in-out; >.spoiler_content p < text-align: left; margin-bottom: 5px; >.read-more-state < display: none; >.text_hide < opacity: 0; max-height: 0; font-size: 0; transition: opacity 0.4s ease-in-out; >.read-more-state:checked~.spoiler_content .text_hide < opacity: 1; font-size: inherit; max-height: 999em; >.read-more-state:checked~.spoiler_content p < margin-bottom: 20px; >.read-more-state~.read-more-trigger:before < content: 'Показать всё'; >.read-more-state:checked~.read-more-trigger:before < content: 'Скрыть текст'; >.read-more-trigger

Второй пример Посмотреть демо

.spoiler_wrap < position: relative; min-height: 30px; margin-bottom: 15px; >.spoiler_title < width: 100%; position: absolute; top: 0; left: 0; margin: 0; height: 30px; z-index: 1; font-weight: 600; font-size: 18px; >.toggle:checked~.spoiler_title, .spoiler_title:hover < color: #EA2816; >.icon < height: 18px; position: absolute; width: 18px; right: 0; top: 11px; z-index: 2; >.icon:before, .icon:after < background: #333; content: ''; height: 4px; right: 0; position: absolute; top: 0; width: 18px; transition: transform 500ms ease; >.toggle:checked~.icon:before, .toggle:checked~.icon:after < background: #EA2816; >.toggle:not(:checked)~.icon:before < transform: rotate(180deg); >.toggle:not(:checked)~.icon:after < transform: rotate(90deg); >.toggle < width: 100%; height: 40px; margin: 0; opacity: 0; cursor: pointer; position: absolute; top: 0; z-index: 3; >.border < height: 40px; border-bottom: 1px solid #333; >.toggle:checked~.border < border-bottom: 1px solid #EA2816; >.spoiler_content < padding: 15px 0 0 0; height: 0; overflow: hidden; z-index: -1; position: relative; opacity: 0; transition: .4s ease; >.toggle:checked~.spoiler_content < height: auto; opacity: 1; z-index: 2; >.spoiler_content>p

HTML-тег details: показать скрыть текст

Есть совсем простое решение, чтобы создать кнопку, при нажатии на которую открывается текст. Для этого существуют специальные теги в HTML 5, такие как , . По сути, их можно использовать даже без стилей CSS. Но чтоб всё сделать красиво, конечно, желательно применить каскадную таблицу.

 
Что такое спойлер?
 
текст
 
 
Открытый спойлер
 
текст
 
 

details < min-height: 5px; padding: 25px 70px 25px 25px; margin: 0 auto; position: relative; font-size: 22px; border: 1px solid #333; border-radius: 10px; box-sizing: border-box; transition: all .3s; >details+details < margin-top: 20px; >details[open] < min-height: 50px; >details[open] summary ~ * < animation: anspl .3s cubic-bezier(.52,.41,.75,.74); >@keyframes anspl < 0% 100% > details p < color: #444; font-weight: 400; margin: 15px 0; >details p:last-child < margin-bottom: 0px; >summary < display: flex; align-items: center; font-weight: 500; cursor: pointer; >summary:focus < outline: none; >summary::-webkit-details-marker < display: none >summary::before < content: '+'; padding-right: 0.5em; >details[open]>summary::before

Источник

Скрытие элементов в Веб

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

При скрытии элемента существует три разных состояния:

Элемент полностью скрыт и удален из потока документа.

Элемент скрыт только визуально и по-прежнему доступен для вспомогательных технологий (АТ), таких как программы чтения с экрана.

Элемент видим, но скрыт только для программ чтения с экрана.

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

В этой статье мы узнаем о скрытии элементов в HTML и CSS и рассмотрим аспекты доступности, анимацию и варианты использования для скрытия. Давайте начнем!

Атрибут HTML5 hidden

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

У нас есть заголовок, рисунок и описание. Рисунок должен отображаться только в том случае, если ширина области просмотра больше, чем 400px. Я добавил к элементу img атрибут hidden. В CSS я использовал атрибут hidden, чтобы отобразить элемент только в желаемом размере области просмотра.

Ну, вы можете быть удивлены, почему бы не использовать display: none? Хороший вопрос. Когда селектор изображения вызывается через его атрибут hidden, мы можем быть уверены, что даже если CSS по какой-то причине не загрузится, элемент будет скрыт.

Влияние hidden на доступность

С точки зрения доступности hidden полностью скрывает элемент с веб-страницы, поэтому он не будет доступен для программ чтения с экрана. Не используйте его, чтобы скрыть элементы только визуально.

Свойство CSS Display

Каждый элемент имеет значение display по умолчанию, например, inline-block, block, table и т.д. Чтобы скрыть элемент со свойством display, мы должны использовать display: none. Когда элемент скрыт через display: none, все его потомки будут удалены вместе с ним.

Учтите, что у нас тот же пример, что и выше, и мы хотим скрыть изображение.

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

Обратите внимание, что когда синяя книга скрыта, она полностью удалена из стопки. Пространство, которое было отведено ей, ушло. Та же концепция применяется при скрытии элементов в HTML. Зарезервированное пространство для элемента исчезло, и это меняет поток документа или, в нашем примере, стопку книг.

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

Загружаются ли ресурсы, если они были скрыты через CSS?

Короткий ответ — да. Например, если img скрыт с помощью CSS, и мы отображаем его на определенной контрольной точке, он уже будет загружен. Изображение вызовет HTTP-запрос, даже если оно скрыто с помощью CSS.

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

Мы вернемся к этому позже, чтобы объяснить, как уменьшить количество HTTP-запросов, когда они не нужны на определенной контрольной точке или размере области просмотра.

Элемент style

Стоит отметить, что существуют элементы с display: none по умолчанию. Элемент style может быть добавлен внутри HTML страницы, и мы можем изменить значение его свойства display на block, чтобы он был виден.

Источник