Your Website does not need JavaScript

We acknowledge the traditional custodians of this land, the Wurundjeri people of the Kulin nation.

JS is useful
but often overused

HTML & CSS are lighter

  • No JS
  • No build tools
  • No npm packages
  • Just HTML & CSS

HTML Tricks

  • Content Targeting
  • Accordians

Content Targeting

<!-- Links to another page or website -->
<a href="/about">Other page</a>
<a href="https://google.com">Other website</a>

<!-- A File or Resource -->
<a href="/img/my_image.jpg" download>Download Image</a>
<a href="/resources/info.pdf">View PDF</a>

<!-- An ID -->
<a href="#main">Skip to main content</a>
<a href="/about#contact">Contact the team</a>
.my_element:target {
	background: pink;
}
chrome icons
2010
edge icons
2015
safari icons
2008
firefox icons
2006
ie icons
2011

Full Disclosure…

Accordians

<details>
	<summary>This bit is clickable to expand/collapse</summary>
	<p>This content is hidden but can then be expanded or re-collapsed.</p>
</details>
chrome icons
2011
edge icons
2020
safari icons
2012
firefox icons
2016

Full Disclosure…

CSS Tricks

  • Nesting
  • Range Slider
  • Testimonials
  • Toggle Switch
  • Image Carousel

Nesting

div {
	& p {
		color: red;
	}
}
chrome icons
2023
edge icons
2023
safari icons
2023
firefox icons
2023

Range Slider

<input type="range" min="0" max="10" />
<input type="range" min="0" max="10" list="options" />
<datalist id="options">
	<option value="0">Not good</option>
	<option value="5">🤷‍♀️</option>
	<option value="10">Stupendous</option>
</datalist>
chrome icons
2010
edge icons
2015
safari icons
2008
firefox icons
2013
ie icons
2012
chrome icons
2018
edge icons
2020
safari icons
2019
firefox icons
2023
chrome icons
2022
edge icons
2022
safari icons
2022
firefox icons
🙅‍♀️

Testimonials

<input type="radio" id="t_1" name="testimonials" />
<label for="t_1">Quote 1</label>
<blockquote>
	<!-- Quote here -->
</blockquote>

div:has(p:nth-child(4)) {
	--children: 4;
}

div:has(p:nth-child(5)) {
	--children: 5;
}
chrome icons
2022
edge icons
2022
safari icons
2022
firefox icons
🙅‍♀️
chrome icons
2021
edge icons
2021
safari icons
2015
firefox icons
2020
chrome icons
2017
edge icons
2017
safari icons
2017
firefox icons
2017
ie icons
2017

Full Disclosure…

Toggle Switch

<div class="toggle">
	<input id="off" type="radio" name="switch" value="off" checked />
	<label for="off">Off</label>
	<input id="on" type="radio" name="switch" value="on" />
	<label for="on">On</label>
	<span class="switch"></span>
</div>
body {
	@media(prefers-color-scheme: dark) {
		--background: #0d0d0d;
		--neutral: #f7f0eb;
	}
}
chrome icons
2022
edge icons
2022
safari icons
2022
firefox icons
🙅‍♀️
chrome icons
2019
edge icons
2020
safari icons
2019
firefox icons
2019

Full Disclosure…

<input type="radio" name="images" value="i_1" id="img_1" checked />
<label for="img_1">Image 1</label>
<div class="image">
	<img src="img_1.jpg" alt="" />
</div>

chrome icons
2017
edge icons
2017
safari icons
2017
firefox icons
2017
ie icons
2017
chrome icons
2022
edge icons
2022
safari icons
2022
firefox icons
🙅‍♀️

Full Disclosure…

nojs.amyskapers.dev

JS is useful but not the answer

Can you do it with HTML?

Can you do it with CSS?

Can JS make it better?

Can some JS be removed?

Do we really need to track this?

Questions?

kapers.dev/nojs

Thank You👏