Here are some things you can replace JavaScript with CSS
Here are 20 things you can replace JavaScript with CSS, using its advanced capabilities such as animations, selectors, pseudo-elements and transitions: 1. **Animated Hamburger Menu**: Use CSS `:checked` and transitions to animate the opening and closing of the menu. 2. **Tooltip**: Use `:hover` and `::after` to create and style tooltips without JS. 3. **Accordion**: By combining `input:checked` and `label` with CSS `display` and `height`, you can make a functional accordion. 4. **Dropdown Menu**: Use `:hover` or `:focus-within` to show and hide Submenus. 5. **Tabs**: With `input:checked` and `display`, you can switch content in tabs. 6. **Loading animation**: Create spinners and loading bars with CSS animations. 7. **Hover animation**: Hover effects such as scale increase, color change and rotation can only be done with transitions and `:hover`. 8. **Smooth Scroll**: The `scroll-behavior: smooth` property allows smooth scrolling without JS. 8. **Modals**: Using `:target` or `:checked` to show and hide modals. 10. **Image Carousel**: Using `@keyframes`, transitions and `input:checked`, you can create image carousels. 11. **Background Transitions**: Change gradients or background images with `:hover` transitions. 12. **Text Animation**: Effects such as text typing or opacity changes can be done with `@keyframes`. 13. **Interactive Buttons**: Button click effects can be done with `:active` and `:focus`. 14. **Form Validation**: Use `:valid` and `:invalid` to create form validation based on HTML5 attributes. 15. **Slide-out Menu**: With `:checked` and `transitions`, you can create slide-out menus without JavaScript. 16. **Parallax effect**: Using `background-attachment: fixed` and `background-position`, you can create a simple parallax effect. 17. **Sort Lists**: Use the order property on the `Flexbox` or `Grid` to visually rearrange items. 18. **Like Button**: Use `:checked` and `::before` or `::after` to create a like button that changes appearance. 19. **Show/Hide Content**: Use `input[type=“checkbox”]:checked + div` to hide or show sections without the need for JS. 20. **Infinite Scroll**: Using `@keyframes` to animate items in a loop like in news sliders. Add more cases where we can use css instead of javascript.
Very nice. To be clear to everyone, there is nothing wrong with using Js. it can often be easier or simpler to implement. However once you get to larger projects you will have further dependence on Js. The more that you can offload from your JS, the better the webapp will run on very very low end devices where the difference is noticable. The css is loaded once as part of the static bit of the page, once it is loaded its full feature-set is available without needing to (pardon my ruby influenced vocabulary) interact with the controller to dump changes to the view. Keep your dom free for the more advanced js processes that need to be done on the clients device. Yes most of these are really simple and wont use much resources, but a page full of them will unnecessarily burden the page slowing it down without any real benefit. As a beginner this dont matter, but still it is good practice to try and offload as much functionality away from your app's logic. Please us Js in most situations though! The reason i talked so much about this is because ive made web interfaces for IOT devices so i can play with them remotely and such. Well not surprisingly these things have the power of a flip phone or a graphing calculator. because i know how much of a performance hit js can add to a app, i recommend always keeping your js clear for legitimate functions, not for pretty intractable buttons. Granted most ppl dont make web apps run locally on IOT devices, so this is a very specific situation.