RobertBushman: /* Tips from GPT */

2023-10-25T14:20:59Z

Tips from GPT

← Older revision		Revision as of 14:20, 25 October 2023
Line 1:		Line 1:
	[[Category:HTML]]		[[Category:HTML]]
	= Tips from GPT =		= 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 ==		== Popovers without JavaScript ==
	* '''<details> and <summary> Tags''': The `<details>` and `<summary>` elements provide a built-in way to create toggleable content.		* '''<details> and <summary> Tags''': The `<details>` and `<summary>` elements provide a built-in way to create toggleable content.

RobertBushman: Created page with "Category:HTML = Tips from GPT = == Popovers without JavaScript == * '''
and
Tags''': The `
` and `
` 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 E..."

2023-10-25T14:20:05Z

Created page with "Category:HTML = Tips from GPT = == 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 E..."

New page

[[Category:HTML]]
= Tips from GPT =
== 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.

ReduceJavascript - Revision history

RobertBushman: /* Tips from GPT */