Використання властивості css "display: none"
Каскадні таблиці стилів (CSS) дозволяють організувати зовнішній вигляд і оформлення інтернет-сторінки. Одним з найбільш часто вживаних властивостей і його значень є "display: none".
Відео: 10 How to Use Display Element in CSS in Hindi || Shubham Jangid
визначення властивості
Саме властивість є багатоцільовим і визначає тип відображення елемента в документі. Залежно від обраного значення певну ділянку сторінка може бути блочно, лінійно, як пункти списку, як частина таблиці і т. Д. Таким чином, завдяки властивості "display", Можна змінювати тип самого блоку в документі.
Що стосується зв`язки "властивість-значення display: none", То вона дозволяє видалити елемент або блок з документа. При цьому місце під даний шматок сторінки не резервується, тобто він випадає з потоку. Всі елементи, які знаходяться за «віддаленим», просто не бачать його і ігнорують розміри і положення такого блоку. Для повернення прихованого об`єкта необхідно звернутися до документа через скрипти, які просто змінять значення властивості на необхідний формат. При цьому відбудеться автоматичне форматування сторінки з урахуванням нового об`єкта на ній.
Різниця між властивостями "display" і "visibility"
Незважаючи на те що в підсумку обидва властивості приховують елемент від користувача, їх принцип дії значно відрізняється. Як вже було сказано вище, параметр "display: none" повністю видаляє елемент з документа. Блок випадає з сторінки, тим самим не займаючи в ній місце. При цьому сам об`єкт як і раніше залишається в HTML-коді.
У свою чергу, властивість "visibility: hidden" ховає елемент від користувача, але не видаляє його з моделі документа. Таким чином, на сторінці залишається зарезервоване місце під даний блок. Тобто потік документа буде сприймати і враховувати розташування і розміри елемента з властивістю "visibility: hidden" рівно так само, як і без нього.
Така різниця організації структури документа цими двома властивостями дозволяє домогтися необхідного результату для правильного відображення сторінки.
Використання CSS - display: none
Інтернет-документ дозволяє використовувати кілька варіантів для визначення якості елемента. В першу чергу display: none може бути прописаний в окремому файлі каскадних таблиць стилів. Такий спосіб є найбільш просунутим і правильним, так як дозволяє винести всі селектори, класи і їх властивості в окремий документ. Подібна модель дає можливість дуже швидко знаходити і змінювати параметри сторінки.
У заголовку документа
Другим варіантом є визначення стилів в заголовної частини документа між тегами style. Ефективність такого способу набагато менше. Його рекомендується застосовувати тільки в крайніх випадках, тому що при наявності великої кількості стилів читаність сторінки веб-дизайнером значно погіршується. А це призводить до виникнення помилок і уповільнення процесу розробки інтернет-документа. Такий підхід рекомендується використовувати тільки в разі додавання в цей тег малого числа стилів або для налагодження документа.
Відео: CSS Display none vs Visibility hidden
Слід пам`ятати, що якщо такий спосіб організації стилів розташований в документі нижче, ніж імпорт окремої таблиці стилів, то пересічні властивості будуть переписані тими, що знаходяться в тілі документа html.
Блок div. Display: none
Ще одним способом є додавання безпосередньо в тег елемента коду "style = display: none;". Подібний підхід найчастіше застосовують при роботі з різними фреймворками, мета яких - зниження числа властивостей безпосередньо в таблиці стилів і відображення їх в самому інтернет-документі. Крім того, подібна запис часто виникає під час перегляду сторінки «інспектором коду». Важливо пам`ятати, що використовуючи цей підхід, можна змінити властивість і його значення, прописані в таблиці стилів. Тому варто бути обережним, так як в результаті можна створити собі додаткові проблеми і витратити деякий час на пошук і усунення помилки в коді сторінки.
javascript
Варто також згадати і про додаткову можливість зміни цієї властивості. Воно відноситься вже не до таблиці стилів і html-коду, а до скриптова мова. Тому для його застосування необхідно мати хоч якісь знання в цій галузі. Для того щоб прибрати елемент з потоку документа, можна використовувати властивість javascript "display = none". Воно дозволяє змінити структуру документа при настанні певної події. Також завдяки використанню скриптів можна динамічно ( «на льоту») змінити параметр властивості і тим самим оновити вигляд сторінки без необхідності її перезавантаження. Такий підхід є корисним при організації випадають меню, модальних вікон і форм.
SEO
Відео: HTML and CSS Tutorial 13: Hidden, Block, Inline, None and display properties
В області оптимізації веб-контенту під пошукові машини існує багато забобонів і неясних моментів. Так, багато початківці сеошник вважають використання властивості "display" поганий манерою. Пояснюють вони це тим, що пошукові системи, бачачи прихований контент, починають вважати сторінку спамом. В їх словах є частка логіки, але не більше того. На даний момент часу властивість приховування об`єкта використовується досить часто для форматування випадають меню і приховування частин документа, які в даний момент не цікаві користувачеві (наприклад, при виборі однієї категорії інформація про інші видаляється). Такий підхід використовують досить потужні інтернет-портали (один з них - "Амазон"). Таким чином, пошукові роботи не можуть вважати використання властивості "display: none" спамом.
Інша справа, коли такий підхід використовується для приховування окремих слів і символів. Незважаючи на те що зараз пошукові роботи ще не мають досконалих алгоритмів розпізнання подібного «спаму» в документах, ймовірність того, що сторінка буде спіймана на цьому, досить висока. Тому рекомендується використовувати властивість "display" строго за призначенням - для зміни типу блоку або його тимчасового приховування від очей користувача.
