CSS Visibility özelliği, bir elemanı ya da maddeyi web sitenin düzenini bozmadan o elemanı gizlemenizi ve ya göstermenizi sağlar. Buna ek olarak <table> içindeki satır veya sütunları da gizlemektedir. Bir elemanı yok etmek için daha önceki derslerde Display: None; özelliğini kullanmıştık ancak bunu kullandığımızda eleman direk kaybolup yerini bir sonraki elemana devretmekte idi. Bu CSS Visibility özelliği ise elemanı yok etmez sadece görünmez kılar yani elemanın kapladığı alan boş kalır.
CSS Visibility Özellikleri
CSS Visibility özelliği CSS1 ile eklenmiş bir özelliktir bu özellik toplamda 5 değer almakta ancak bunlardan yalnızca ilk üçü çoğunlukla kullanılmaktadır. Gelin beraber bu 3 önemli değeri inceleyelim.
- Visible
- Hidden
- Collapse
InitialInherit
1. Visible
CSS Visibility özelliğine Visible değeri verildiğinde verilen eleman normal bir varyasyonda gösterilmektedir. Visiblity özelliğinin varsayılan değeri olduğu için tekrar yazılmasına hiç gerek yoktur. Visible özelliği elemanı olduğu gibi sayfada göstermektedir.
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
<div class="box box4">Box 4</div>
<div class="box box5">Box 5</div>
<div class="box box6">Box 6</div>
<div class="box box7">Box 7</div>
<div class="box box8">Box 8</div>
<div class="box box9">Box 9</div>
</div>
.container{
width: 200px;
height: 200px;
background-color: red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 25px;
padding: 10px;
}
.box{
width: 50px;
height: 50px;
background-color: aqua;
}
2. Hidden
CSS Visibility özelliğine verilen bir diğer değer Hidden; bir elemanı sayfanın düzenini hiç bir şekilde değiştirmeden kapladığı alan boş bırakılmak şartı ile gizlemektedir. Gizlenen bu elemanın yerine ondan sonraki elemanlar geçemez yani o boşluk öylece kalmaktadır.
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
<div class="box box4">Box 4</div>
<div class="box box5">Box 5</div>
<div class="box box6">Box 6</div>
<div class="box box7">Box 7</div>
<div class="box box8">Box 8</div>
<div class="box box9">Box 9</div>
</div>
.container{
width: 200px;
height: 200px;
background-color: red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 25px;
padding: 10px;
}
.box{
width: 50px;
height: 50px;
background-color: aqua;
}
.box5{
visibility: hidden;
}
3. Collapse
Visibility özelliğinin Collapse değeri yalnızca tablo satır ve sütunları için kullanılır. Bir satır veya sütunu gizler ve kaldırır, tablo düzenini etkilemez. Tablonun istenmeyen satır yada sütununu tabloyu bozmadan kaldırır.
Normal Bir Tablo Örneği:
<table class="table">
<tr>
<th>Sıra</th>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>1</td>
<td>Asuman</td>
<td>Göldağ</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>Ünlüsoy</td>
<td>Mansur</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Cansen</td>
<td>Karaburun</td>
<td>84</td>
</tr>
</table>
.table {
border-collapse: collapse;
width: 100%;
}
.table td, .table th {
border: 1px solid #ddd;
padding: 8px;
}
.table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #2c3e50;
color: white;
}
Sıra | Ad | Soyad | Yaş |
---|---|---|---|
1 | Asuman | Göldağ | 29 |
2 | Ünlüsoy | Mansur | 49 |
3 | Cansen | Karaburun | 84 |
Collapse Kullanılan Bir Tablo Örneği:
<table class="table">
<tr>
<th>Sıra</th>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>1</td>
<td>Asuman</td>
<td>Göldağ</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>Ünlüsoy</td>
<td style="visibility: collapse;">Mansur</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Cansen</td>
<td>Karaburun</td>
<td>84</td>
</tr>
</table>
.table {
border-collapse: collapse;
width: 100%;
}
.table td, .table th {
border: 1px solid #ddd;
padding: 8px;
}
.table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #2c3e50;
color: white;
}
Sıra | Ad | Soyad | Yaş |
---|---|---|---|
1 | Asuman | Göldağ | 29 |
2 | Ünlüsoy | Mansur | 49 |
3 | Cansen | Karaburun | 84 |