Възможно е да има моменти, когато работите върху разработването на уеб страници, че трябва да "скриете" конкретни области от елементи по една или друга причина. Можете, разбира се, просто да премахнете елементите от въпросите от HTML маркировката, но какво ще стане, ако искате те да останат в кода, но да не се показват на екрана на браузъра по някаква причина (и ще прегледаме причините за направете това накратко). За да запазите елемент в HTML, но го скриете за показване, ще се обърнете към CSS.
Двата най-често срещани начина да скриете елемент, който е в HTML, ще използват CSS свойствата за "показване" или "видимост". На пръв поглед тези две свойства може да изглеждат като нещо общо, но те имат различни различия, за които трябва да сте наясно. Нека да разгледаме разликите между дисплея: никой и видимостта: скрити.
видимост
Използвайки двойката CSS собственост / стойност на видимост: скрита скрива елемент от браузъра. че този скрит елемент все още заема място в оформлението. Това е като, всъщност, сте направили елемента невидим, но той все още остава на мястото си и заема пространството, което щеше да поеме, ако остане сам.
Ако поставите DIV на страницата си и използвате CSS, за да й дадете размери до 100x100 пиксела, видимостта: скрита собственост ще накара DIV да не се покаже на екрана, но текстът, следващ нея, ще се държи така, сякаш все още е там, 100x100 разстояние.
Честно казано, видимото имущество не е нещо, което използвахме много често и със сигурност не сам по себе си. Ако използваме и други CSS свойства като позициониране, за да постигнем оформлението, което искахме за определен елемент, тогава можехме да използваме видимостта, за да скрием този елемент първоначално, само за да го "върнем" обратно. Това е едно възможно използване на тази собственост, но отново не е нещо, с което се обръщаме с всякаква честота.
показ
За разлика от свойството за видимост, което оставя елемент в нормален поток документи, дисплеят: никой не премахва напълно елемента от документа. Това не заема никакво място, въпреки че HTML кодът все още е в изходния код. Това е така, защото то наистина е премахнато от потока документи. За всички цели и цели, елементът е изчезнал. Това може да е нещо добро или лошо, в зависимост от вашите намерения. То може да бъде и вредно за страницата Ви, ако злоупотребите с тази собственост!
Често използваме "дисплей: никой" при тестване на страница. Ако имаме нужда от малко място, за да можем да изпробваме други части от страницата, можем да използваме дисплей: никой за това. Необходимо е да запомните обаче, че елементът трябва да бъде върнат обратно на страницата преди действителното стартиране на този сайт. Това е така, защото елемент, който е премахнат от потока на документи по този метод, не се вижда от търсещите машини или екранните четци, въпреки че може да остане в HTML маркировката. В миналото този метод беше използван като черна шапка, за да се опита да повлияе на класирането в търсачките, така че елементите, които не са показани, може да бъде червен флаг за Google, за да разбере защо се използва този подход.
Един от начините, по които можем да намерим дисплей: никой не е полезен и където го използваме на живо, производствени сайтове, е когато изграждаме отзивчив сайт, който може да има елементи, които са налични за един дисплей, но не и за други. Можете да използвате дисплей: никой, за да скриете този елемент и след това да го включите отново с искания за медиите по-късно. Това е приемливо използване на дисплея: никой, защото не се опитвате да скриете нищо поради неприлични причини, но имате законна нужда да го направите.
Оригинална статия на Дженифър Кринин. Редактиран от Jeremy Girard на 3/3/17