Використання властивості CSS "display: none"

Каскадні таблиці стилів (CSS) дозволяють організувати зовнішній вигляд і оформлення інтернет-сторінки. Одним з найбільш часто вживаних властивостей і його значень є "display: none".

Визначення властивості

Само властивість є багатоцільовим і визначає тип відображення елемента в документі. Залежно від обраного значення певну ділянку сторінки може відображатися блочно, лінійно, як пункти списку, як частину таблиці і т. Д. Таким чином, завдяки властивості "display", можна змінювати тип самого блоку в документі.

Що стосується зв`язки "властивість-значення display: none", то вона дозволяє видалити елемент або блок з документа. При цьому місце під даний шматок сторінки не резервується, тобто він випадає з потоку. Всі елементи, які знаходяться за «віддаленим», просто не бачать його і ігнорують розміри і положення такого блоку. Для повернення прихованого об`єкта необхідно звернутися до документа через скрипти, які просто змінять значення властивості на необхідний формат. При цьому відбудеться автоматичне форматування сторінки з урахуванням нового об`єкта на ній.

Різниця між властивостями "display" і "visibility"

Незважаючи на те що в підсумку обидва властивості приховують елемент від користувача, їх принцип дії значно відрізняється. Як вже було сказано вище, параметр "display: none" повністю видаляє елемент з документа. Блок випадає з сторінки, тим самим не займаючи в ній місце. При цьому сам об`єкт по колишньому залишається в HTML-коді.

У свою чергу, властивість "visibility: hidden" ховає елемент від користувача, але не видаляє його з моделі документа. Таким чином, на сторінці залишається зарезервоване місце під даний блок. Тобто потік документа буде сприймати і враховувати розташування і розміри елемента з властивістю "visibility: hidden" рівно так само, як і без нього.

Така різниця організації структури документа цими двома властивостями дозволяє домогтися необхідного результату для правильного відображення сторінки.

Використання CSS - display: none

Інтернет-документ дозволяє використовувати кілька варіантів для визначення властивості елемента. В першу чергу display: none може бути прописаний в окремому файлі каскадних таблиць стилів. Такий спосіб є найбільш просунутим і правильним, оскільки дозволяє винести всі селектори, класи та їх властивості в окремий документ. Подібна модель дає можливість дуже швидко знаходити і змінювати параметри сторінки.

У заголовку документа

Другим варіантом є визначення стилів в заголовної частини документа між тегами style. Ефективність такого способу набагато менше. Його рекомендується застосовувати тільки лише в крайніх випадках, тому що при наявності великої кількості стилів читаність сторінки веб-дизайнером значно погіршується. А це призводить до виникнення помилок і уповільнення процесу розробки інтернет-документа. Такий підхід рекомендується використовувати тільки в разі додавання в цей тег малого числа стилів або для налагодження документа.

Слід пам`ятати, що якщо такий спосіб організації стилів розташований у документі нижче, ніж імпорт окремої таблиці стилів, то пересічні властивості будуть переписані тими, що знаходяться в тілі документа html.

Блок div. Display: none

Ще одним способом є додавання безпосередньо в тег елемента коду "style = display: none-". Подібний підхід найчастіше застосовують при роботі з різними фреймворками, мета яких - зниження числа властивостей безпосередньо в таблиці стилів і відображення їх у самому інтернет-документі. Крім того, подібна запис часто виникає при перегляді сторінки «інспектором коду». Важливо пам`ятати, що використовуючи цей підхід, можна змінити властивість і його значення, прописані в таблиці стилів. Тому варто бути обережним, тому що в підсумку можна створити собі додаткові проблеми і витратити деякий час на пошук і усунення помилки в коді сторінки.

javascript

Варто також згадати і про додаткову можливість зміни цієї властивості. Воно відноситься вже не до таблиці стилів і html-коду, а до скриптова мова. Тому для його застосування необхідно мати хоч якісь знання в цій галузі. Для того щоб прибрати елемент з потоку документа, можна використовувати властивість javascript "display = none". Воно дозволяє змінити структуру документа при настанні певної події. Також завдяки використанню скриптів можна динамічно («на льоту») змінити параметр властивості і тим самим оновити вигляд сторінки без необхідності її перезавантаження. Такий підхід є корисним при організації випадаючих меню, модальних вікон і форм.

SEO

В області оптимізації веб-контенту під пошукові машини існує багато забобонів і неясних моментів. Так, багато початківці сеошник вважають використання властивості "display" поганий манерою. Пояснюють вони це тим, що пошукачі, бачачи прихований контент, починають вважати сторінку спамом. У їхніх словах є частка логіки, але не більше того. На даний момент часу властивість приховування об`єкта використовується досить часто для форматування випадаючих меню і приховання частин документа, які в даний момент не цікаві користувачеві (наприклад, при виборі однієї категорії інформація про інші віддаляється). Такий підхід використовують досить потужні інтернет-портали (один з них - "Амазон"). Таким чином, пошукові роботи не можуть вважати використання властивості "display: none" спамом.

Інша справа, коли такий підхід використовується для приховання окремих слів і символів. Незважаючи на те що зараз пошукові роботи ще не мають досконалих алгоритмів розпізнання подібного «спаму» в документах, ймовірність того, що сторінка буде спіймана на цьому, досить висока. Тому рекомендується використовувати властивість "display" суворо за призначенням - для зміни типу блоку або його тимчасового приховування від очей користувача.