After reading through a few more CSS wishlists, such as Chris Coyier’s and Ahmad Shadeed’s, I have come up with some more wishes I have for CSS, in addition to those I brought up in my recent CSS Wishlist post.
Continue reading post "More CSS Wishes"css posts
CSS Wishlist
After reading Eric Meyer’s and Dave Rupert’s recent CSS Wishlist, I decided to make my own. Working with CSS for many years, I have come across many things I’d like to see. Many have come about or improved since then, but there are still things I come across that I’d like to see. I agree with many of Eric and Dave’s items, and put them in my own list if I had more to say about them or especially want them. Here is the list of what I could come up with:
Continue reading post "CSS Wishlist"HTML + CSS toggle switch
I had to make a toggle switch widget for work recently. I had not done one before, having used built in or custom check-boxes for that purpose. My boss thought the switch would better fit a simple “form” that turns off and on a single setting though, so I made one.
Continue reading post "HTML + CSS toggle switch"Today, I learned that display: block on a <summary> element removes the disclosure triangle in Firefox.
The min-content in CSS grid apparently takes into account the full width of a <pre> element content, even if you put max-width: 100%; on it.
CSS: checking support for selectors
@supports is a good way to apply an entire block of styles only if (modern) browsers support a particular property-value combo. There is no similar block-level mechanism for selector support. Selectors are automatically ignored if their values or syntax aren’t recognized by the browser, so they basically already do this at the ruleset level.
Except, sometimes you want to apply styles to other elements that don’t use the selector, but only if the browser supports the selector.
Continue reading post "CSS: checking support for selectors"I had forgotten that CSS attr() is only supported for values of content.
IE 5 Mac class attribute with space bug
Crazy Mac IE 5 bugs with the HTML class attribute: If you have a space after any class in the attribute, it will treat any CSS class selector that contains that string at its beginning as a match for the element.
Continue reading post "IE 5 Mac class attribute with space bug"CSS: inner border grid list with grid layout
A couple years ago, I wrote a post titled “CSS: Inner Border Grid List” about solutions to a problem I was having. The post is not about CSS grid layout, but recent interest in the post leads me to believe people are visiting expecting it to be. In the interest of serving those visitors, I decided to create a solution using the now well supported spec.
Continue reading post "CSS: inner border grid list with grid layout"I’ve been using cssnano for compressing my CSS on some projects recently. Apparently, it rebases z-index values, ie reduces them to the minimum values that have the same stacking context within the file.