What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More

What’s !important #12 talks about the old (testing in Safari when you don’t have Safari), the new ( ::checkmark ), the in-between (anchor positioning but with HTML), and more. Buckle up! Testing in Safari when you don’t have Safari Source: Frontend Masters Safari is the second most popular web browser, but is only available to Apple users. Fair enough. I mean, Apple are heavily invested in making Safari a proprietary browser that’s deeply integrated with Apple’s software and hardware. However, this makes testing websites in Safari a bit of a pain. Declan Chidlow explained what our options are in regards to testing in Safari when you don’t have Safari . A first look at ::checkmark Sunkanmi Fafowora gave us our first look at the ::checkmark pseudo-element , which solves the age-old problem of not (really) being able to style checkmarks. Note that this also targets the checked state indicator of radios and selects, not just checkboxes! Different shape styles with border-shape + shape() Temani Afif pointed out that we can create more shape styles when combining border-shape with the shape() function (compared to clip-path ), and, easily switch between them. Source: CSS Tip A concise guide to sibling-index() and sibling-count() Durgesh Pawar did a deep dive on sibling-index() and sibling-count() , showing us all of the cool things that we can do with these almost-Baseline CSS functions. CodePen Embed Fallback Also, don’t miss Durgesh’s two-part series about View Transition gotchas right here on CSS-Tricks. Managing anchor associations with data attributes and advanced attr() This one’s actually from me! Disappointed to hear that the anchor attribute has been dropped, which would’ve provided a way of managing anchor associations using HTML, I demonstrated my alternative technique that involves managing anchor associations with data attributes and advanced attr() . I won’t spoiler the CSS, but here are the different HTML syntaxes that I explored: