Как правильно скрывать элементы не забывая о SEO?

Question

[Монти Пайтон]

Кто тоже сталкивался. Какие есть способы чтобы правильно скрывать HTML элементы на странице, слышал случаи когда сайт невозможно было найти в Google изза того что на странице использовалось свойство display с значением none у контактной информации в шапке, вместо которой была кнопка для её отображения, убирая которую сайт начинал индексироваться, что вы посоветуете использовать в таких случаях, чтобы гугл не думал что от него пытаются чтото скрыть?

Comments

[Ernest Faizullin]

подпишусь, ведь тут скажут как правильно)

[Монти Пайтон]

Ernest Faizullin, если такое происходит с одним свойством css, то думаю почему это может не происходить с другими css значениями, может можно или надо это както "на*овнокодить" через костыль на js без использования каскадных таблиц?

[Ernest Faizullin]

все придумано до нас)

[Монти Пайтон]

Ernest Faizullin, этот случай, кстати он говорят иногда может так себя вести, а иногда и вообще может так не случиться, google на это может обратить внимание, а может и вовсе не заметить

[Пума Тайланд]

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

[Антон Спирин]

Пума Тайланд, посоветую не называть "говнометодами" приемы, назначение которых не понимаете.

[Монти Пайтон]

Ernest Faizullin,

все придумано до нас)

да но, в данном случае както очень сильно сомневаюсь в этом

летающие автомобили тоже интересно по вашему придуманы до нас и для нас чтобы не пользоваться дорогами общего назначения и уйти подальше от технологии колеса, которая была изобретена ещё примерно 5000 лет назад до нашей эры, и "зачемто" такая примитивная технология продолжает использоваться и по сей день спустя 7000 лет которая не то что технически, а и морально уже давно устарела не так ли, семь тысяч лет латать дыры на дорогах, ремонтировать колёса, потому что всё придумано "за нас"?

[Монти Пайтон]

Пума Тайланд, на caniuse про box-suppress ещё даже ни одного слова вроде нету https://caniuse.com/#search=box-suppress

[Монти Пайтон]

Пума Тайланд, кажется искал это css-tricks.com: places-its-tempting-to-use-display-none-but-dont

[Монти Пайтон]

Пума Тайланд, начиная учиться с дизайна сперва учился рисовать, быть художником, стараться мыслить постоянно креативно, мне нравилось что можно нарисовать полностью всё в совершенстве, нельзя поставить заплатку и написать рядом с стрелочкой "а тут красота", её надо наводить, это круто быть перфекционистом, до того посмотрев зарплаты в NYC где дизайнеры получают по 300-500 в час, научившись рисовать интерфейсы, увидел что художников в снГЭ вообще не ценят никак, они получают ниже кодеров, ниже какихто "верстал" даже, начал потом учить CSS чтобы позже пойти в JS и кажется понял что хороший кодер-программист тот который знает большое количество костылей, культурно называя большею их часть ласково - паттерны

[Ernest Faizullin]

нельзя ПЫТАТЬСЯ думать креативно. Либо твоя практика позволяет тебе думать креативно либо нет. Третьего не дано Ostin1

[Ernest Faizullin]

Антон Спирин, Пума Тайланд знает что говорит. Ему можно доверять из-за его опыта. А вот вы пишите безосновательно. Основания вашего коммента в студию!

[Монти Пайтон]

Ernest Faizullin,

нельзя ПЫТАТЬСЯ думать креативно. Либо твоя практика позволяет тебе думать креативно либо нет. Третьего не дано

шта?

креатив влияет на практику и vice versa примерно точно также как и пение влияет на трение

[Монти Пайтон]

Ernest Faizullin,

Пума Тайланд знает что говорит. Ему можно доверять из-за его опыта. А вот вы пишите безосновательно. Основания вашего коммента в студию!

да они оба нормальные, просто Пума Тайланд хотел поправить что костыли лучше не использовать (но без них, в коде никуда нельзя, вообще никуда, они везде, повсюду) просто идеализировал или иронизировал наверное зная может какойто другой ответ, а Антон Спирин сперва дал ответ, который я на время задержал отмечать "ответом", о чём ему написал, попросив не удалять, сказав что отмечу папозжее, проскрольте и убедитесь, не капсите пожалуйста и научитесь пользоваться Тостером

[Ernest Faizullin]

Ostin1, Спирин написал Пуме, что он не имеет понимания своих слов.
PS: Есть огромные проекты без костылей. Костыли НЕ повсюду

[Монти Пайтон]

Ernest Faizullin,

Спирин написал Пуме, что он не имеет понимания предмета

хватит

[Монти Пайтон]

Ernest Faizullin,

PS: Есть огромные проекты без костылей. Костыли НЕ повсюду

вам юношеский максимализм затмил ваш разум, вы даже не ведаете о чём вы говорите

[Антон Спирин]

Ernest Faizullin, специально для вас. Один из кейсов использования visually hidden с сайта twitter.com:

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

[Монти Пайтон]

Антон Спирин, ему вообще не это важно, он подумал что "скрывать" в контексте данного вопроса означает наверное "засаливать" обфусцируя какимто новым "хитрым" методом каскадные таблицы, это хайп сейчас, как будто чтото создалось такое что жалко выложить всем посмотреть, плюс ещё и ругается, для меня эти "спецэффекты" именно так и выглядели)))

Answer 1

[Антон Спирин]

.visually-hidden {

  visibility: hidden;
  position: absolute;

  /* или */

  clip: rect(0, 0, 0, 0);
  position: absolute;

  /* или */

  transform: scale(0, 0);
  position: absolute;

  /* или */

  opacity: 0;
  position: absolute;
  pointer-events: none;
  user-select: none;

  /* или */

  height: 0;
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
}

UPD:

.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

Как прятать — HTML Шорты
Inclusively Hidden
Hiding Content for Accessibility
How-to: Hide Content

Comments

[Монти Пайтон]

не удаляйте ответ, позже отмечу решением, вдруг ктото ещё чегото накидает, с UPD посмеялся но буду его использовать, ничего не скажешь, спасибо вам большое

Answer 2

[David Halkin]

{
font-size: 0;
line-height: 0;
text-indent: -9999px;
overflow: hidden;
}

Answer 3

[Андрей Никифоров]

через data content