Notes on CSS and HTML

I'm really intrigued by how simple but functional css/html can be. If I can find commonly found, reactive features available in pure css/html, I'll place them here. Also a few failed efforts.

1. Matching on value attribute from <input/>

  • attempt to narrow a list of items by autocomplete searching and using attribute selectors (likely input[value~=""]

  • content can move from CSS to HTML just not from HTML to CSS as it was removed from the spec. it's also ironically placed under section 6.6.6.

  • value=""'s are added to inputs within react and other frontend frameworks, so the ability to match on an updated value attribute is lost. I originally thought this was inherent in html input elements

  • note that <details> toggles an open attribute on the element when clicked. If an html element would allow content to be added on a mouse down, you could set an input tags value without javascript, or just remove all but the selected

2. Using the content of a <div contenteditable="true" />

3. Using <datalist> to autocomplete <options/> on an <input/>

  • the killer here is really the same as above. You can autocomplete and technically sub-string 'search' terms based on the native implementation of an <inputs list="whatever"/>
  • the problem is after you select an option, no attribute is set in the html.
  • further more, you cannot style or manipulate options you've created for the dataset in the actual options list because the functionality is handled natively. I attempted setting <dataset style="position: absolute;"/> and was hoping the static list (assuming it was the same when auto-completing) would start to disappear

4. Form submit allowing autocompleted value to be submitted as the slug

  • we can substring search the <options />, but we can't reduce the list of options after search. Fine.
  • can we at least utilize the search result with a form?
  • it's either a query param or a POST that has a body

5. Submit query params and pull them into css

5. (Cheat) Have an expandable, hoverable A-Z list that will collapse the options based on first letter

  • it's not search, but it will serve the same function
  • allow letters active and search in an order


Content Toggles

Content toggles

  <summary>Content Toggles</summary>
  <p>this details tag and some other content</p>