ReduceJavascript

From Traxel Wiki
Revision as of 14:20, 25 October 2023 by RobertBushman (talk | contribs) (→‎Tips from GPT)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Tips from GPT

 Those are nice! Are there other fancy things that are usually done with Javascript that can be done with static HTML?

Popovers without JavaScript

  • <details> and <summary> Tags: The `<details>` and `<summary>` elements provide a built-in way to create toggleable content.
  • Checkbox Hack: This technique involves using a hidden checkbox input and a label. The label, when clicked, toggles the checkbox. Using the `:checked` pseudo-class in CSS, you can control the display of content based on whether the checkbox is checked.
  • Hover Effects: For purely mouse-based interactions, the `:hover` pseudo-class can be used to display content when an element is moused over.

Interactive Effects with Static HTML/CSS

  • Sliders/Carousels: With radio buttons and labels, you can create simple content sliders or carousels.
  • Lightbox Image Gallery: Using the `:checked` pseudo-class along with radio buttons or checkboxes, you can build a lightbox image viewer.
  • Collapsible Accordions: Besides `<details>` and `<summary>`, the checkbox hack or focus can be used to create collapsible content sections.
  • CSS Transitions and Animations: Achieve visual effects using CSS transitions and animations.
  • Form Validations: Use `:invalid` and `:valid` pseudo-classes for basic form validations.
  • Dropdown Menus: Using the `:hover` pseudo-class, create nested dropdown menus.
  • Modals: Use the checkbox hack to trigger modals.
  • Tabs: Use radio buttons and labels to create a tabbed interface.
  • Tooltips with Attribute Selectors: Use the `data-` attribute and the `::before` or `::after` pseudo-elements to create tooltips based on attribute content.
  • Toggle Dark Mode: With a checkbox, toggle between light and dark themes using the `:checked` pseudo-class.

Considerations:

  • Fallbacks: Test methods in various browsers and provide fallbacks.
  • Semantics and Accessibility: Some techniques might not be semantically correct or accessible.
  • Limitations: These techniques won't replace complex JavaScript functionality.