Video summary

O HTML Agora Faz Isso SEM JAVASCRIPT!

Main summary

Key takeaways

Technology

Key technological idea

  • The video argues that modern HTML can replace common JavaScript UI behaviors for modals, popovers, and dropdown/menu toggles.
  • It uses built-in HTML attributes/commands (supported by major browsers, including Firefox).
  • The approach is framed as “HTML entering the game” against JavaScript, building on earlier CSS-only techniques (such as CSS transitions between pages).

Demo/project described (modals/forms)

  • A small project is built where clicking “Open form” displays a modal containing a form.
  • The speaker contrasts:
    • An older JavaScript approach (mapping modal/open/close constants and wiring event listeners)
    • With a new approach using only HTML attributes.

Mechanism described

  • Use the trigger element’s for attribute to point to the target element by ID.
  • Add a command attribute to control the action.
    • Examples shown: show-style command to open the modal, and close command to dismiss it.
  • Notes mentioned:
    • The modal’s “visible” state (previously something like a show class) is handled implicitly by the HTML command system.
    • Closing is done by applying the appropriate close command to a close button inside the modal.
    • Inspecting the page reveals an automatic backdrop (a darker overlay behind the modal).

Backdrop customization (CSS mention)

  • The video explains that the modal backdrop can be customized using CSS.
  • It references CSS targeting like:
    • ::backdrop on the modal element
  • Then adjusting colors/transparency (the example mentions making it “red” in an illustration).

Dropdowns / menus (toggle behavior)

  • The same HTML command mechanism can be used for a dropdown/hamburger menu toggle.
  • Mechanism described:
    • A single hamburger button can open and close the dropdown using a toggle command (instead of separate open/close logic or custom JS).
    • The trigger uses for to target the dropdown element by ID.
    • The command is described as toggle applied to a popover-style target.

Popovers vs dialogs (behavior difference)

The video distinguishes:

  • Dialog
    • Opens with a backdrop that darkens the page.
    • Feels more like a “window” and requires more user attention.
  • Popover
    • Appears as a small floating box without full page dimming.

Popover behavior uses commands such as:

  • show popover
  • hide popover
  • And also toggle (similar to the dropdown/menu example)

Custom HTML commands (and limitations)

  • The speaker notes you can define custom commands (using a syntax such as a double-dash command name).
  • However, truly custom behavior still requires JavaScript, reducing the advantage of the approach.
  • Example described (“change color”):
    • Add an ID to the element to be changed.
    • In JavaScript, map the command name, listen for command events, then update classes/styles.

Overall takeaway

  • The most compelling use cases presented are:
    • Opening/closing modals
    • Toggling dropdowns/menus
    • Showing/hiding popovers
  • The goal is to minimize or eliminate JavaScript for these UI patterns.
  • CSS customization remains important for visual styling, especially backdrop appearance.

Main speakers/sources

  • Gustavo Campelo (the channel’s speaker/host)

Original video