Hi! My name is Kirill Live, and I develop web applications for creativity and work.
For security reasons, many users disable JavaScript in their browsers. I often create small documentation websites where easy navigation and often offline functionality are crucial, and without scripting and back-end this is no easy task. So, I decided to gather all my experience in creating interactive websites without JS in one place.
I've observed that many developers rely too heavily on JavaScript when creating interfaces and often implement functionality that is already available in HTML and CSS without additional scripting. CSS has evolved significantly over the past 20 years, and I plan to collect examples of its capabilities here
Text
Gallery
CSS
/* styles for galleries */
.gallery input[type="radio"]{display:none;}
.gallery input[type="radio"]:checked + label {background: #aff;}
.gallery input[type="radio"]:checked ~ .image {display:block;}
/* slide switch buttons */
.gallery label{
display:block;
background: #f2f2f2;
height: 64px; width: 64px;
cursor: pointer;
}
.gallery {position:relative;list-style:none;padding:0;}
/* Show the selected slide */
.gallery .image{ background: #aff;
position: absolute;
left: 64px; top: 0;
width: 192px;
height: 192px;
display:none;
object-fit: contain;
}
HTML
<!-- viewport -->
<ul class="gallery">
<!-- slides -->
<li>
<input type="radio" name="gallery1" id="image1">
<label for="image1">Slide button</label>
<div class="image" style="background-color:#fcc">Slide content</div>
</li>
<li>
<input type="radio" name="gallery1" id="image2">
<label for="image2">Slide button</label>
<div class="image" style="background-color:#cfc">Slide content</div>
</li>
<li>
<input type="radio" name="gallery1" id="image3" checked="checked">
<label for="image3">Slide button</label>
<div class="image" style="background-color:#ccf">Slide content</div>
</li>
</ul>