We implemented a new value for `background-clip` called `border-area`. It lets you use CSS fill a border with a background image or gradient.
This article explains how it works, and shows up the possibilities in 7 demos.
10 posts total
We implemented a new value for `background-clip` called `border-area`. It lets you use CSS fill a border with a background image or gradient. This article explains how it works, and shows up the possibilities in 7 demos. My team at Apple is growing. We are looking for another web developer advocate! (And yes, someone who can live in the SF Bay Area). https://jobs.apple.com/en-us/details/200565512/web-technologies-evangelist-safari-webkit @jensimmons Would Apple consider hiring me just to fix the one bug where Safari keeps erasing all of my entire cookie history because I have the Developer toolbar enabled? š¬ Iāve been making demos of CSS Grid level 3 lately, to show off what putting masonry/waterfall-like layout support in CSS Grid can do. (Iāve got 16 demos and counting!) Hereās one with that includes View Transitions, running in Safari Technology Preview 192. What do you want to know about how masonry-like layouts could work in CSS Grid? @jensimmons Is there a way to reduce the motion, as that feels rather distracting on the video clip? @jensimmons exciting! One thing I'd like to see in a demo is having a number overlay for each item/image, so I can understand how the source list gets laid out with different settings @jensimmons Is this image only or each item can be, say, a flex composite of image & text? Dear people who make websites, Do you ever block your users from being able to paste into a text field? Why? Do you need this ability for a good reason? Whatās that reason? Or, as a user, would you like to see it go away? Perhaps you encounter sites that prevent you from pasting your super complex password from your password manager into a password field, and wonder why they can do so? What might be the downside of removing support of disallowing pasting from the web?
Show previous comments
@jensimmons I always presumed this was to prevent a brute force attack, preventing the automation of trying multiple passwordsā¦? @jensimmons I have previously shipped a paste block in the "confirm email" field in en effort to prevent email bounces, we had data that showed people pasting and it worked to reduce our missed bookings due to email bounces @jensimmons @jackbrewster Iāve encountered this a few times and AFTER Iāve stopped swearing creatively at the imagined Web site creator and product manager, I calmly close the tab and go away. They donāt need my business any way. But Iād love it were Safari to implement a super secret close this tab in flames option. Yes, Safari 17 supports JPEG XL. On macOS Sonoma, macOS Ventura and macOS Monterey, as well as iOS, iPadOS, watchOS, and soon, visionOS. We also added HEIC ā especially for web apps that want to let users edit photos directly from the camera. https://webkit.org/blog/14205/news-from-wwdc23-webkit-features-in-safari-17-beta/#images
Show previous comments
@jensimmons Does this mean that Safari iOS will no longer convert HEIC to JPEG when picked by a input type=āfileā? Yes, you heard that right. Web apps on Mac, from Safari. *Any* website can be added to your Dock, and opened as a web app. Web app developers can customize their web app with a web manifest file and more ā just like for web apps on iOS and iPadOS. Stay tuned for all the details later this week. Itās exciting to see folks talking about implementing web push for their web apps! Be sure to create an interface that lets your users take the first step ā so they can indicate that they want to get notifications. Like a bell icon or subscribe button. Itās up to *them* to opt in. https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/ Every news outlet should stand up a Mastondon instance for their reporters & staff. Itāll be great to see GivennameFamilyname@mastodon.famousnewspaper.com or whatever domain they want to use. Built in verification. Every reporter for the Washington Post on a washpo domain. Every reporter for the New York Times on an NYTimes domain. Etc, etc. Plus the ālocalā feed for each instance becomes a feed of all the posts from that institution mixed together ā providing extra discovery.
Show previous comments
@jensimmons in that spirit, it seems, the European Commission have set up their own instance https://social.network.europa.eu/@EU_Commission @jensimmons Yes please. then I can ban every one owned by a billionaire and/or fascist. Safari Technology Preview 160 is available. Includes: https://webkit.org/blog/13639/release-notes-for-safari-technology-preview-160/ Anonymous poll
Poll
Option 3
218
79.9%
Option 4
15
5.5%
Option 5
19
7%
(show results)
273 people voted. 21
7.7%
Voting ended 15 Dec 2022 at 1:34. Quite a few people are replying, asking why CSS nesting can't just work like Sass does. Well, it can't. We *all* wish it could. But it can't because of the way browser parsing engines work: if they see a sequence like `element:pseudo`, theyāll parse the entire style rule as if it were a `property: value` declaration. So Option 3 vs 4 vs 5 is the our choice for what to do instead. |
@jensimmons
@jensimmons I saw this come up on the WebKit RSS feed earlier - great article!
The examples and the way you progressively explain each property are really helpful in understanding how to use it!
@jensimmons I don't agree that the default should be `background-origin: border-box`. If you are using regular borders, you want the background to fit the padding box to avoid extra cropping.