Имамо много ЦСС својстава и савладавање свих може бити изазов. ЦСС видљивост је једно од важних својстава које треба да савладате ако желите да постанете вешт веб програмер.
У овом чланку ћу дефинисати ЦСС видљивост, објаснити њен значај и навести и објаснити различите вредности ЦСС видљивости.
Преглед садржаја
Шта је ЦСС видљивост?
ЦСС својство видљивости сакрива или приказује елемент на веб страници. На пример, можете имати четири поља на својој веб страници и користити својство видљивости да одредите како ће бити приказани. Сви елементи ће се појавити на страници ако подесите видљивост као видљиву.
Међутим, ако је елемент сакривен, он ће и даље заузимати простор, али ће бити скривен од крајњег претраживача/ екрана.
ЦСС видљивост је важна у следећим случајевима;
- Контрола видљивости: Можете да контролишете шта треба да буде приказано на основу тренутног корисника. Можете подесити видљивост елемента да буде видљива само када га корисник покрене помоћу одређене радње. На пример, прелазак миша или клик на дугме.
- Очување изгледа: Добра апликација треба да сачува свој изглед и садржај без обзира на величину екрана. Када поставите видљивост елемента као скривеног, он ће и даље заузимати простор, али неће бити видљив крајњим корисницима. Такав приступ омогућава одржавање конзистентног распореда.
- Оптимизујте перформансе: прегледач не мора да наставља да поново израчунава изглед када је својство видљивости подешено као висибилити:хидден. Међутим, када користите својство дисплаи:ноне, прегледач мора поново да израчуна изглед кад год одлучите да поново прикажете елемент.
- Креирајте динамично и интерактивно корисничко сучеље: Можете комбиновати својство видљивости ЦСС-а са другим својствима, као што је непрозирност, да бисте креирали ефекте избледења, анимације и глатке прелазе.
Различите вредности видљивости ЦСС-а
ЦСС видљивост има пет могућих вредности. Ући ћу у детаље кроз блокове кода и снимке екрана. Ако намеравате да пратите,
- Направите фасциклу на вашој локалној машини.
- Додајте две датотеке; индек.хтмл и стилес.цсс.
- Отворите пројекат у свом омиљеном уређивачу кода (користим ВС Цоде)
Можете користити ову команду;
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
Следеће је повезивање датотека индек.хтмл и стилес.цсс. У одељку <хеад> датотеке индек.хтмл додајте ово;
<link rel="stylesheet" href="https://wilku.top/how-css-visibility-enhances-your-web-design-with-hidden-gems/styles.css">
Сада би требало да имате нешто слично овоме у уређивачу кода;
Видљиво
Када поставите вредност елемента као видљивост: видљиво, он ће се појавити на веб страници. Ова видљивост је тамо подразумевано. Можемо имати три поља у нашем ХТМЛ документу да бисмо боље разумели овај концепт. У одељку <боди> вашег индек.хтмл, додајте следеће;
<div class="container"> <div class="box1"> Box 1 </div> <div class="box2"> Box 2 </div> <div class="box3"> Box 3 </div> </div>
Сада можемо да стилизујемо наше див (кутије) користећи следећи ЦСС код;
.container {
padding: 15px;
width: max-content;
display: flex;
border: 1px solid black;
}
.box1,
.box2,
.box3 {
height: 30px;
width: 100px;
}
.box1 {
background-color: rgb(224, 49, 209);
margin-right: 15px;
}
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
}
.box3 {
background-color: rgb(154, 43, 12);
}
Када се завршна страница прикаже, имаћете нешто овако;
Ако подесите видљивост на оквирима као видљивост: видљива, то неће имати никаквог ефекта јер су сви оквири подразумевано видљиви.
Међутим, можемо демонстрирати како својство видљиво функционише помоћу приказа: нема својства на једном од кутија. Можемо изабрати бок3 као наш пример. Промените ЦСС код на класи .бок3 на следећи начин;
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
Када поново рендерујете страницу, приметићете да имамо само два поља, један и два.
Ако сте заинтересовани, приметићете да је наш елемент .цонтаинер смањен. Када користите својство дисплаи: ноне, поље 3 се не приказује, а његов простор у нашем претраживачу постаје празан да би други оквири могли да заузму.
Сакривен
Када применимо својство висибилити: хидден ЦСС на елемент, оно ће бити скривено од крајњег корисника. Међутим, и даље ће заузимати простор. На пример, можемо сакрити Бок2 користећи ово својство.
Да бисте то постигли, модификујте Бок2 ЦСС код на следећи начин;
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden
}
Једина промена коју смо направили је додавање ове линије;
visibility: hidden
Коначна страница ће бити као што је приказано;
Можемо видети размак између кутије 1 и кутије 3 пошто је елемент кутије 2 само сакривен.
Можемо видети да је поље 2 још увек у ДОМ-у ако прегледамо нашу рендеровану страницу.
Колапс
Скупи је вредност видљивости која се користи за поделементе. ХТМЛ табеле су савршен пример где можемо применити атрибут висибилити:цоллапсе.
Можемо додати следећи код да бисмо направили табелу у нашој ХТМЛ датотеци;
<table> <tr> <th>Programming Language</th> <th>Framework</th> </tr> <tr> <td>JavaScript </td> <td>Angular </td> </tr> <tr class="hidden-row"> <td>Ruby </td> <td>Ruby on Rails</td> </tr> <tr> <td>Python </td> <td>Django </td> </tr> </table>
Сада можемо да стилизујемо нашу табелу са ивицом од 1пк на свим ћелијама. Додајте ово у своју ЦСС датотеку;
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
Када прикажемо табелу, имаћемо следеће;
Сада ћемо сакрити други ред да покажемо како функционише атрибут висибилити: цоллапсе. Додајте ово свом ЦСС коду;
.hidden-row {
visibility: collapse;
}
Када се страница прикаже, ред са Руби и Руби он Раилс ће бити сакривен.
Иницијал
Својство висибилити: инитиал ресетује ХТМЛ елемент на његову почетну вредност. На пример;
- Почели смо са приказивањем свих редова у нашој табели.
- Скупили смо вредност реда 2 и тако је сакрили.
- Сада се можемо вратити на почетну вредност (прикажи је)
Додаћемо дугме које се пребацује између вредности приказа и скупљања да бисмо то демонстрирали.
Додајте ово дугме у свој ХТМЛ код;
<button onclick="toggleVisibility()">Click Me!!</button>
Затим можемо додати ЈаваСцрипт функцију која тражи .хидден-ров класу и укључује класу .висибле-ров на њој када се кликне на дугме.
<script>
function toggleVisibility() {
const hiddenRow = document.querySelector('.hidden-row');
hiddenRow.classList.toggle('visible-row');
}
</script>
Add this code to your CSS file;
.visible-row {
visibility: initial;
}
Вредност видљивости ће се мењати напред-назад док кликнете на приказано дугме;
Наследити
Својство висибилити : инхерит омогућава подређеном елементу да наследи својство приказа од надређеног.
Можемо имати овај једноставан код да покажемо како ово својство функционише;
<h1>Inherit Demo</h1> <div style="visibility: hidden"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p> </p>
Само садржај унутар ознака х1 и параграфа биће приказан ако рендерујете страницу. Међутим, постојаће размак који представља скривене елементе између ознака <х1> и <п>.
Имамо један див чију смо видљивост поставили као скривену. Имамо <х2> таг унутар див. Поставили смо видљивост <х2> као наследство, што значи да наслеђује од свог родитеља, див.
Међутим, ако својство див поставимо као видљиво, <х2> (његово дете) ће то такође наследити.
<h>Inherit Demo</h> <div style="visibility: visible"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p>
ЦСС видљивост:скривена у односу на приказ:нема
Главна разлика између дисплаи:ноне и висибилити:хидден је у томе што први у потпуности уклања елемент из изгледа док други сакрива елемент, али и даље заузима простор.
Можемо користити овај код да покажемо разлику између ова два;
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgray;
margin-right: 20px;
}
.box1 {
background-color: lightblue;
}
.box2 {
background-color: black;
}
.container {
padding: 10px;
border :2px solid black;
padding-left: 20px;
width: 250px;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
</body>
</html>
Ако рендерујемо нашу страницу, имаћемо две кутије једна поред друге;
Екран: нема демо
Додајте ово у класу .бок1;
display: none;
Када рендерујете страницу, приметићете да .бок1 више неће бити приказан. Друга кутија (црна) се такође помера улево да би заузела простор који је претходно заузимала светлоплава кутија.
Видљивост: скривени демо
Уместо приказа: нема, додајте ову класу .бок1;
visibility: hidden
Ово својство оставља мало простора за бок1, али га не приказује. С друге стране, бок2 остаје на свом месту.
дисплаи:ноневисибилити:хидден У потпуности уклања елемент са веб странице Сакрива ХТМЛ елемент, али и даље заузима простор на веб странициМожете стилизовати елемент чији је приказ подешен на нонеМожете позиционирати и стилизовати елемент чија је видљивост скривена Није доступно читачима екрана Можете приступити елемент чија је видљивост подешена као скривена помоћу читача екрана
Побољшајте приступачност помоћу ЦСС видљивости
Можете да користите ЦСС видљивост да сакријете елементе који нису важни за све кориснике. На пример, можете да користите ову функцију да сакријете корисника за пријаву који ће бити доступан само корисницима који нису пријављени. Такође можете имати бочну траку или подножје које садржи услове коришћења услуге или информације о ауторским правима.
Можемо имати овај код да илуструје како можете побољшати видљивост;
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style>
.login-form {
display: none;
}
.login-text:hover + .login-form {
display: block;
}
.login-form label {
display: block;
margin-bottom: 5px;
}
.login-form input {
width: 30%;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p class="login-text">Login</p>
<form class="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<button type="submit">Submit</button>
</form>
</body>
</html>
Образац за пријаву постаје видљив само када пређете мишем преко прве ставке.
Закључак
Верујемо да сада можете удобно да користите својство видљивости ЦСС-а у свом коду да бисте направили глатке прелазе и побољшали приступачност својим веб страницама. Међутим, морате знати где да користите сваку вредност видљивости да бисте избегли да завршите са зезнутим страницама. Такође можете сакрити кључне податке од крајњих корисника када злоупотребљавате својство видљивости ЦСС-а.
Погледајте наше ЦСС водиче и ресурсе да бисте сазнали више о ЦСС својствима која можете комбиновати са ЦСС видљивошћу.