Как прятать
Когда display: none, а когда visibility: hidden?
Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут.
Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище… ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.
Самый простой и популярный — display: none, он работает как топор: элемент как будто вырубают из HTML. Его не видно на странице и соседние блоки про него ничего не знают. Просто нет и всё. Его даже скринридеры игоририруют и не читают содержимое — будьте аккуратнее с этим.
Что интересно, несмотря на полное вырубание элемента, браузеры всё равно загружают картинку из img с display: none. Если же картинка указана фоном, то Chrome и Edge её тоже загружают, а Firefox и Safari — нет. Ну, разные у них взгляды на оптимизацию загрузки, что поделать.
Другой способ — visibility: hidden, он работает как кольцо всевластья: элемент вроде здесь и соседние блоки его чувствуют, но его не видно. И чем это отличается от opacity: 0? Opacity просто делает элемент прозрачным (или полупрозрачным), а visibility: hidden ещё не даёт с ним взаимодействовать: навести, кликнуть, сфокусировать.
У visibility: hidden есть другая приятная особенность: свойство наследуется, а значит ребёнок невидимого родителя может сменить видимость на visible. Такой трюк не пройдёт ни с display: none, ни с opacity: 0. С ним удобно делать всплывающие меню и подказки.
Иногда нужно, чтобы элемент не мешал дизайну, но при этом не прятался от скринридеров, оставаясь частью содержимого. Ну не нарисовал дизайнер здесь заголовка, а по логике документа он здесь нужен. Вот бы нам что-то вроде display: hidden или visibility: none! Это я только что придумал, в природе их не существует.
Недавно в черновике CSS Display третьего уровня появилось свойство box-suppress со значениями show, discard и hide. Оно отвязывает видимость блока от display — ведь с обратной стороны от none есть не только block, но и inline, flex, grid. Значение discard привычно вырубает элемент, а hide делает то самое волшебное комбо. Читайте подробнее у Рейчел Эндрю.
К сожалению, до box-suppress нам ещё долго ждать. Его не только ещё нет в браузерах, но уже в том черновике — недавно его перенесли в следующий уровень, чтобы закончить текущий вовремя. Так что придётся делать магию самим — следите за руками.
Есть такой паттерн «visually hidden» или «визуально спрятанный», чтобы прятать элементы из дизайна, но оставлять доступным их содержимое. Про другие нюансы со скринридерами читайте у Тима Райта. Как это работает: вы делаете универсальный служебный класс и добавляете его к элементам, которые нужно доступно спрятать. Обычно его так и называют: visually-hidden, через дефис.
Если посмотреть что внутри, то это обычный position: absolute плюс clip, который обрезает элемент до нуля. То есть он не влияет на соседей и становится невидимым. Все остальные свойства добавляют универсальности и кроссбраузерности, чтобы класс можно было не глядя шлёпнуть на любой элемент. Подробнее читайте в справке к ally.js Родни Рейма.
А вы знали, что любому элементу можно добавить атрибут hidden и он пропадёт? Теперь знаете! В современных браузерах на этот атрибут повешен тот самый display: none, который вырубает элемент. Он бинарный как required или checked, так что его удобно выставлять через JavaScript. Только не забудьте добавить в стили [hidden] < display: none >для IE 10, Safari 5 и других старых браузеров.
Это почти всё, что вам нужно знать про прятки в CSS. Попробуйте эти способы, они все хороши в разных ситуациях. Главное, не рубите с плеча и думайте о доступном содержимом.
Методы скрытия элементов веб-страниц
Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:
HTML5-атрибут hidden
Рассмотрим следующий пример:
В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.
Вот CSS-код, который здесь использован:
→ Вот пример этой страницы на CodePen
▍Атрибут hidden и доступность контента
Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.
CSS-свойство display
Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:
При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.
Синюю книгу убрали из стопки
Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.
Если убрать книгу из стопки — положение других книг в ней изменится
▍Производится ли загрузка ресурсов, скрытых средствами CSS?
Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.
Исследование страницы, содержащей скрытое изображение
Как прятать
Когда display: none, а когда visibility: hidden? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!
Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище… ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.
Самый простой и популярный — display: none, он работает как топор: элемент как будто вырубают из HTML. Его не видно на странице и соседние блоки про него ничего не знают. Просто нет и всё. Его даже скринридеры игоририруют и не читают содержимое — будьте аккуратнее с этим.
Что интересно, несмотря на полное вырубание элемента, браузеры всё равно загружают картинку из img с display: none. Если же картинка указана фоном, то Chrome и Edge её тоже загружают, а Firefox и Safari — нет. Ну, разные у них взгляды на оптимизацию загрузки, что поделать.
Другой способ — visibility: hidden, он работает как кольцо всевластья: элемент вроде здесь и соседние блоки его чувствуют, но его не видно. И чем это отличается от opacity: 0? Opacity просто делает элемент прозрачным (или полупрозрачным), а visibility: hidden ещё не даёт с ним взаимодействовать: навести, кликнуть, сфокусировать.
У visibility: hidden есть другая приятная особенность: свойство наследуется, а значит ребёнок невидимого родителя может сменить видимость на visible. Такой трюк не пройдёт ни с display: none, ни с opacity: 0. С ним удобно делать всплывающие меню и подказки.
Иногда нужно, чтобы элемент не мешал дизайну, но при этом не прятался от скринридеров, оставаясь частью содержимого. Ну не нарисовал дизайнер здесь заголовка, а по логике документа он здесь нужен. Вот бы нам что-то вроде display: hidden или visibility: none! Это я только что придумал, в природе их не существует.
Недавно в черновике CSS Display третьего уровня появилось свойство box-suppress со значениями show, discard и hide. Оно отвязывает видимость блока от display — ведь с обратной стороны от none есть не только block, но и inline, flex, grid. Значение discard привычно вырубает элемент, а hide делает то самое волшебное комбо. Читайте подробнее у Рейчел Эндрю.
К сожалению, до box-suppress нам ещё долго ждать. Его не только ещё нет в браузерах, но уже в том черновике — недавно его перенесли в следующий уровень, чтобы закончить текущий вовремя. Так что придётся делать магию самим — следите за руками.
Есть такой паттерн «visually hidden» или «визуально спрятанный», чтобы прятать элементы из дизайна, но оставлять доступным их содержимое. Про другие нюансы со скринридерами читайте у Тима Райта. Как это работает: вы делаете универсальный служебный класс и добавляете его к элементам, которые нужно доступно спрятать. Обычно его так и называют: visually-hidden, через дефис.
Если посмотреть что внутри, то это обычный position: absolute плюс clip, который обрезает элемент до нуля. То есть он не влияет на соседей и становится невидимым. Все остальные свойства добавляют универсальности и кроссбраузерности, чтобы класс можно было не глядя шлёпнуть на любой элемент. Подробнее читайте в справке к ally.js Родни Рейма.
А вы знали, что любому элементу можно добавить атрибут hidden и он пропадёт? Теперь знаете! В современных браузерах на этот атрибут повешен тот самый display: none, который вырубает элемент. Он бинарный как required или checked, так что его удобно выставлять через JavaScript. Только не забудьте добавить в стили [hidden] < display: none >для IE 10, Safari 5 и других старых браузеров.
Это почти всё, что вам нужно знать про прятки в CSS. Попробуйте эти способы, они все хороши в разных ситуациях. Главное, не рубите с плеча и думайте о доступном содержимом.
Как сделать хороший бизнес на пыльных бутылках вина малоизвестных брендов
Тридцатисемилетний математик Сергей Курлович хорошо разбирался в вине, но многие годы его знаниями пользовались лишь друзья, которым он помогал выбирать вино. Но три с половиной года назад он решил превратить хобби в бизнес и основал стартап Invisible – закрытый винный интернет-клуб, куда клиенты могли попасть по приглашению или после одобрения заявки. На тот момент у Курловича была доля в геолокационном сервисе AlterGeo, и 500 000 руб., заработанных в этом проекте, он вложил в новое дело. Через год в проект Invisible вложилась группа инвесторов. Среди них Виктор Лысенко, гендиректор Рокетбанка, Шахар Вайсер, основатель и гендиректор GetTaxi, и др. Общая сумма инвестиций составила около 35 млн руб. Клуб оформил лицензию на торговлю алкоголем, сообщил Курлович.
К 2013 г. практически каждый крупный импортер вина имел собственный интернет-магазин, но по закону не имел права торговать через сайт: постановление правительства № 612 от 2007 г. о правилах дистанционной торговли разрешает продавать алкоголь только в точках продаж, на которые юридически оформлена лицензия. Но виноторговцы нашли выход, переделав магазины в информационные интернет-витрины и убрав с сайтов кнопки заказа и доставки.
По оценкам Вадима Дробиза, директора Центра исследований федерального и региональных рынков алкоголя (ЦИФРРА), сейчас основным каналом продажи вина являются традиционные магазины (около 80% всех продаж), еще 10% приходится на специализированные алкогольные супермаркеты и бутики, около 5–8% – на рестораны и кафе. И только 1% продаж осуществляется с помощью онлайн-витрин, и онлайн-сегмент имеет колоссальный потенциал роста.
В 2014 г. выручка Invisible составила 32 млн руб., в 2015 г. – 72 млн руб., а в этом году Курлович рассчитывает на 180–200 млн руб. Сейчас общее число зарегистрированных пользователей Invisible составляет 36 000 человек (по данным Дробиза, суммарное число пользователей российских винных интернет-витрин составляет несколько сотен тысяч человек). К концу 2016 г. число пользователей составит 100 000 человек, рассчитывает Курлович. Столь быстрым ростом компания обязана тому, что ей удалось найти свой подход к аудитории, которой обычные виноторговцы пренебрегали, – к обывателю, не разбирающемуся в видах и марках вина.
Ставка на дилетанта
90% жителей России не умеют выбирать вино: рынок фрагментирован, очень мало общеизвестных брендов, говорит Курлович. И изначально Курлович даже хотел сделать рекомендательный сервис, который мог бы по статистике заказов и запросов клиента угадывать его вкусы и формировать ему индивидуальное предложение. В начале 2013 г. он отобрал 10–12 вин и раздал его на дегустацию друзьям, чтобы получить первичные данные о вкусовых предпочтениях и выстроить рекомендательный алгоритм наподобие Apple Music. Но позднее от этой идеи пришлось отказаться, признает Курлович. Для таких проектов нужен большой ассортимент (и соответствующий оборотный капитал) и время на накопление статистики.
Курлович пошел по другому пути. Он не держит большой ассортимент вин – сотни марок, как другие интернет-бутики, а предлагает только 120 позиций. Для сравнения: на интернет-витрине Simple представлено 5000 наименований вин.
В Invisible люди не могут заказывать по одной бутылке, как везде, – им предлагаются заранее укомплектованные наборы (сеты). В отличие от конкурентов, Курлович ориентируется не столько на ценителей, сколько на неподготовленных покупателей, для которых выбор вина – мучение. А сеты, по идее, помогают покупателю быстро принять решение. Подбором вина для сетов занимается команда Invisible (в компании работают 10 человек). Сотрудники компонуют сеты из 4–6 бутылок: для новичков, разбирающихся и ценителей. Стоимость самого простого набора – 3500 руб., самого дорогого – 11 000 руб. Все сеты развозит курьер в день заказа по Москве в пределах МКАД.
Недопили
Несмотря на кризис, уровень потребления вина в России не упал, констатирует Вадим Дробиз, директор ЦИФРРА. По его данным, в России на душу населения приходится 3,95 л вина в год, во Франции и Италии – в 10 раз больше.
Состав наборов обновляется раз в неделю, а через каждые два месяца меняется целиком. По словам Ильи Заянца, руководителя департамента электронной коммерции компании Simple, Invisible освободил клиента от выбора. «По сути, продается продукт вместе с сервисом», – комментирует Заянц.
Для развития бизнеса был необходим постоянный приток новых членов клуба. Для этого команда Курловича придумала несколько маркетинговых приемов. Так, в конце 2014 г. у Invisible насчитывалось 6000 клиентов. Но тут Курлович придумал добавить на сайт специальную кнопку для приглашения друзей (прежде люди переходили по ссылкам). За ее использование пользователю начислялось 500 руб. бонуса либо новый пользователь получал два винных бокала Spiegelau в подарок. И благодаря кнопке число пользователей выросло до 10 000 за два месяца. Потом Invisible запустил еженедельную рассылку писем от Курловича, с описанием новинок и спецпредложений.
Ренессанс неликвида
Курлович подсчитал, что выгоднее не гоняться за раскрученными марками, а торговать малоизвестными брендами качественного вина, пылящимися на складах поставщиков. Существует огромное количество вин одного вида, например одного Chianti есть 20 видов, говорит Андрей Григорьев, гендиректор винодельческого проекта Alma Valley. При этом разница в цене на один вид вина от разных производителей может отличаться в 1,5 раза, а вкусовые отличия для среднестатистического потребителя останутся незаметными. На стоимость вина влияет известность бренда.
Курлович начал обивать пороги компаний-импортеров, уговаривая их поставлять ему неликвидные остатки. Импортеры ухватились за идею расчистить склады и предоставили мелкому винному клубу более низкие закупочные цены по сравнению с теми, которые получают обычные супермаркеты. К тому же традиционные винные бутики предпочитают закупки большого ассортимента мелкими партиями, максимум по 120 бутылок, а Invisible заказывал мало наименований, но в больших количествах. Партнерам стало понятно, что Invisible работает, как «Ашан», который, к примеру, покупает 10 позиций по несколько тысяч бутылок, а Invisible закупает условно по 10 наименований партиями по 2000 бутылок, говорит Курлович.
За два года Invisible заключил договоры с 14 импортерами, в том числе с такими крупными компаниями, как Fort, Marex, MBG, Arsenal, «Винотерра», «Евровайн», Simple. По словам Курловича, в ближайшее время поставщиков станет в два раза больше. Сейчас поставщики даже сами выходят на Invisible с предложениями о сотрудничестве. Курлович говорит, что им выгодно перекладывать на плечи Invisible заботы и расходы по раскручиванию неизвестного винного бренда. Сейчас половина ассортимента Invisible – вино, которое практически не продается в супермаркете, признается он. «Нам выгодно работать с Invisible. В сети все сложнее зайти с новой маркой вина, даже для пробной поставки», – говорит Алексей Михайлев, руководитель отдела маркетинга компании Fort. Курлович вспоминает, как в 2015 г. они случайно включили в сет малоизвестное краснодарское вино «Раевское Ренессанс 2012». «Выбрали его случайно, а потом покупатели раструбили о нем в соцсетях. В итоге дистрибутор «Раевского» продал аж 25 000 бутылок», – хвастается Курлович. По его словам, крупная компания Simple включила это вино в портфель заказов на следующий год.
Отмена поможет
Сейчас Курлович строит наполеоновские планы – выйти в Санкт-Петербург и города-миллионники. Эксперты настроены скептически. По словам Григорьева, такая бизнес-модель эффективна до тех пор, пока является камерной и строится на доверии, а тиражировать ее трудно. «У Invisible – замечательный маркетинг, но слабость проекта в отсутствии системной экспертизы вин», – говорит Максим Каширин, президент компании Simple. По его словам, потребитель рано или поздно научится разбираться в вине и модель перестанет быть эффективной. Но шансы на продолжение роста у Invisible есть. В начале февраля Госдума внесла на рассмотрение законопроект, который отменит запрет торговли через интернет. А это, по словам Дробиза, означает бурный рост всего сегмента интернет-торговли вином.
Технологии невидимости: 5 изобретений, которые позволят нам скрыться
Наталия Киеня
Невидимость веками была третьей мечтой человечества после полетов и способности видеть то, что далеко. Сегодня для первого есть самолеты, а для второго — телевидение и интернет. Какие технологии позволят нам научиться исчезать по собственному желанию в будущем? Кожа кальмара, отсутствующий небоскреб и —Т&P изучили разработки современных ученых, чтобы ответить на этот вопрос.
Прежде всего, плохая новость: сделать живое тело невидимым с помощью эликсира пока не представляется возможным. Английский писатель и публицист Герберт Уэллс в своем романе «Человеке-невидимка», написанном в 1897 году, объяснял: «Тела либо поглощают свет, либо отражают, либо преломляют его, или все вместе. Если тело не отражает, не преломляет и не поглощает света, то оно не может быть видимо само по себе. Если вы положите кусок обыкновенного стекла в воду или, еще лучше, в жидкость, более плотную, чем вода, то вы стекла почти совсем не увидите, потому что свет, переходя из воды в стекло, преломляется и отражается очень слабо, и вообще не подвергается почти никакому воздействию». Иными словами, чтобы сделать тело невидимым, нужно уменьшить коэффициент преломления его тканей (кожи, мышц, внутренних органов и костей) до коэффициента преломления воздуха. Ни физика, ни физиология сегодня не позволяют нам этого сделать: невидимые глаза не смогут улавливать свет, а для изменения оптических свойств тканей нужно так перекроить обмен веществ, что станет не понятно, как жить с этим. Идея шапки-невидимки тоже выглядит сомнительно: она должна временно менять оптические свойства не только живых тканей, но и одежды и обуви, — предметов, сделанных из совсем других материалов, часто смешанных и синтетических.
Как устроен плащ-невидимка
Плащ-невидимка работает совсем не так, как шапка или эликсир: не меняя свойств предмета, он может направить лучи света в обход и заставить стороннего наблюдателя видеть только то, что находится позади. Сегодня субстанции с такими свойствами уже есть: это метаматериалы с отрицательным углом преломления, который заставляет лучи света огибать объект и делает его невидимым глазу.
Первопроходцем в области создания таких метаматериалов стал физик Имперского колледжа в Лондоне, сэр Джон Пендри. В середине 90-х он предположил, что достижение нужного угла преломления возможно не столько за счет химического состава молекул, сколько за счет их расположения. Ученый исходил из всем известного факта: на границе сред волны могут отражаться или преломляться, а внутри среды — поглощаться или проходить сквозь нее. Он предложил использовать материалы, в состав которых входит металл (проводник электричества) и диэлектрик. Тем не менее, когда в 2006 году дошло до опытов, выяснилось, что метаматериалы Пендри делают предметы невидимыми только в инфракрасном диапазоне. Тогда профессора Мичиганского университета Елена Семушкина и Сян Чжан предложили отказаться от металла и использовать только диаэлектрики: например, одноосные кристаллы, для которых характерно двойное лучепреломление при всех направлениях падающего света, кроме одного.
Чтобы сделать плащ-невидимку, такие кристаллы начали исследовать физики из Бирмингема. Вскоре им удалось создать материал с одноосными кристаллами нитрида кремния на прозрачной нанопористой подложке оксида кремния. Когда все кристаллы оказались на подложке, в них проделали отверстия нанометрового диаметра. В результате получилось гладкое оптическое зеркало, которое способно скрывать объекты в видимом диапазоне. Именно такую технологию, возможно, использовали канадские создатели военных «исчезающих плащей», которые пока держат состав своего материала в секрете.
Quantum Stealth: материал-обманщик
Канадская компания Hyperstealth специализируется на камуфляже и выпускает ткань Quantum Stealth. Этот мягкий материал обводит свет вокруг объекта и позволяет сделать его невидимым для глаз, приборов ночного видения и тепловизоров, а также скрывает тень. Материал работает без камер, батарей, ламп и зеркал, мало весит и, по словам разработчиков, стоит недорого. Тем не менее, купить его пока нельзя, ведь изначально эта ткань была предназначена для канадской, американской и британской армии. Военные и представители групп быстрого реагирования начали тестировать Quantum Stealth в 2012 году. В апреле 2014 года Hyperstealth объявила о запуске коммерческого варианта своего плаща-невидимки: Hyperstealth INVISIB. Его свойства будут не такими удивительными, как у армейского аналога, однако исчезновений все равно можно будет добиться. Сейчас компания оформляет права интеллектуальной собственности на массовую версию разработки. Уже следующем году она, возможно, попадет на рынок.
Углеродные нанотрубки: эффект миража
Ученые из Университета Техаса в Далласе разработали технологию использования углеродных нанотрубок, которая позволяет «стирать» объекты. В ее основе лежит эффект миража, или фототермическое преломление. Чтобы заставить предмет «исчезнуть», специалисты используют цилиндрические молекулы углерода с высокой теплопроводимостью. Включая и выключая подачу тока, ученые нагревают и остужают материал, вынуждая предмет за ним появляться и пропадать. Основная проблема техасского изобретения, тем не менее, заключается в том, что для его работы скрываемый объект непременно должен находиться в контейнере с водой.
Исчезающий небоскреб: глаза наоборот
Американское архитектурное бюро GDS строит в Сеуле невидимый небоскреб Infinity. В высоту это здание будет достигать 450 м. Для строительства его создатели используют бетон и стекло, а невидимости планируют добиться за счет использования оптических видеокамер и дисплеев на фасаде. Камеры будут снимать то, что находится позади небоскреба, и транслировать изображение на его стены. Это создаст впечатление, что вы смотрите сквозь здание, а то и вовсе не видите его. Чтобы дисплеи смогли точнее отображать пейзаж, у Infinity будет три вертикальные секции, каждая с шестью сторонами. Правда, по углам, на стыке дисплеев, небоскреб все равно будет выглядеть заметным. До тех пор, пока мы не изобретем мягкие дисплеи достаточной прочности, устранить эту проблему не получится.
Белок рефлектин: кожа кальмара
Способность каракатиц, кальмаров и осьминогов становиться невидимыми в воде позволила ученым из Университета Калифорнии и Университета Дьюка создать «плащ-невидимку» для морских пехотинцев. Они использовали белок под названием рефлектин, способный подстраиваться под свет с разной длиной волны. Специалисты нашли его в тканях кожи кальмара лонгфин (Loligo pealeii), которого изучали по заказу Службы военно-морских исследований США. Они обнаружили, что в его тканях чередуются слои клеток с высоким и низким показателем преломления. Сокращая и увеличивая расстояние между слоями, кальмар «отражает» свет разного диапазона и меняет цвет. Чтобы воспроизвести эту способность, ученые выделили рефлектин из клеток с высоким показателем преломления и поместили слой этого белка на и пленку. Попеременно обрабатывая материал водяным паром и раствором кислоты, они смогли заставить слой белка расширяться и опадать, меняя цвет. Специалисты говорят, что их разработка станет «первым решающим шагом» к созданию исчезающего плаща. Такая самонадеянность понятна: ведь если, повторяя за птицами, мы научились летать, почему бы нам не научиться быть невидимыми, повторяя за кальмаром?