Top Tweets for #StylishHTML
The pattern is quite flexible as well. Here's I've made a more traditional "tabs" interface, but again with *only* HTML and CSS. Even I get surprised at what is possible today with #StylishHTML
`popover` & `popovertarget` give you dropdown menus w/ light-dismiss for free.
<button popovertarget="menu">Options</button>
<nav id="menu" popover>
<ul>
<li><a href="/settings">Settings</a></li>
<li><a href="/profile">Profile</a></li>
</ul>
</nav>
#StylishHTML
Breadcrumb separators belong in CSS, not HTML. Just use the `::after` pseudo-element.
nav > ol > li:not(:last-child)::after {
content: " / ";
color: lightgray;
padding: 0 0.5em;
}
The `:not(:last-child)` ensures no trailing separator after the final item.
#StylishHTML
In addition to closing <dialog>s, the `command` and `commandfor` attributes are wonderful for opening dialogs. You can open dialogs in either a modal (`show-modal`) or non-modal (`show`) state.
#StylishHTML
Another tip on closing <dialog>s involves the new `closedby` attribute. Putting `closedby="any"` on a <dialog> adds light-dismiss functionality to the dialog, meaning users can close the dialog with the Esc keyboard shortcut.
#StylishHTML
Coming in the next version of Safari, and already in Chrome and Edge, you can now create <textarea>s that auto-grow with the `field-sizing: content` rule.
#StylishHTML
Have a small scroll container where you want to de-emphasize the scrollbar, like in a popover? Say hello to `scrollbar-color` and `scrollbar-width`
#StylishHTML
Double-dashed IDs and the enhanced `attr()` CSS function allow us to bind popovertargets with their popovers without having to create distinct anchor-names.
Learn more at MDN: https://t.co/YJAvo3Xphe and https://t.co/ZjmyO8VBiq
#StylishHTML
Prevent scrolling when a modal <dialog> is open with pure CSS using the `:modal` CSS pseudo-class. Mix with `body:has` and you're good to go!
Learn more at MDN: https://t.co/QSNmTzDWZc
#StylishHTML
Want to avoid layout shift when you remove scrolling on popover or dialog opening?
Simple, use the new `scrollbar-gutter: stable` CSS rule on your scroll container (likely <body>).
Learn more at MDN: https://t.co/e25F2dCyoS
#StylishHTML
I love what @calebporzio is doing w/ Flux UI, and the new pillboxes component is 😍. I enjoy trying to build components without an ounce of JS anywhere to be found. Mine requires keyboard nav with TAB, but is otherwise basically identical: https://t.co/nmUzGIK6i6
#StylishHTML
Last Seen Hashtags on Sotwe
sleeping #gay
Seen from Vietnam
teenageer filter:videos
Seen from Germany
Alldemade
Seen from United States
crossdresser
Seen from United States
REDFLAG
Seen from United States
Overasselt
Seen from Netherlands
shemaleindo
Seen from Indonesia
kaw
Seen from Italy
cumdump
Seen from Denmark
hpirlporn
Seen from Mexico
Trends for you
Most Popular Users
Elon Musk 
@elonmusk
241.6M followers
Barack Obama
@barackobama
119M followers
Cristiano Ronaldo
@cristiano
114.1M followers
Donald J. Trump
@realdonaldtrump
111.8M followers
Narendra Modi
@narendramodi
107.2M followers
Rihanna
@rihanna
98.7M followers
NASA
@nasa
92.4M followers
Justin Bieber
@justinbieber
91.8M followers
KATY PERRY
@katyperry
89.8M followers
Taylor Swift
@taylorswift13
83.8M followers
Lady Gaga
@ladygaga
75.2M followers
Virat Kohli
@imvkohli
73M followers
Kim Kardashian
@kimkardashian
70.8M followers
YouTube
@youtube
68.8M followers
Neymar Jr
@neymarjr
66M followers
Bill Gates
@billgates
65M followers
Selena Gomez
@selenagomez
62.9M followers
The Ellen Show
@theellenshow
62.3M followers
CNN
@cnn
61.8M followers
X
@x
60.7M followers