Email or username:

Password:

Forgot your password?
10 posts total
Jen Simmons

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.

#css #webdesign #webdevelopment #graphicdesign

webkit.org/blog/16214/backgrou

Show previous comments
eurozerozero

@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!

abacabadabacaba

@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.

Jen Simmons

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).

jobs.apple.com/en-us/details/2

Tom Winzig

@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? šŸ˜¬

Jen Simmons

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?

Daniel Schildt

@jensimmons Is there a way to reduce the motion, as that feels rather distracting on the video clip?

Bruno Philipe

@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

counternotions

@jensimmons Is this image only or each item can be, say, a flex composite of image & text?

Jen Simmons

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
MickNotMike šŸ‡ŗšŸ‡¦šŸ‡¬šŸ‡§šŸ‡ŖšŸ‡ŗšŸ³ļøā€šŸŒˆšŸ

@jensimmons I always presumed this was to prevent a brute force attack, preventing the automation of trying multiple passwordsā€¦?

Neil Ross

@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

Jeff Watkins

@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.

Jen Simmons

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.

webkit.org/blog/14205/news-fro

Show previous comments
Fabien

@jensimmons Does this mean that Safari iOS will no longer convert HEIC to JPEG when picked by a input type=ā€œfileā€?

VĆ”clav Vančura

@jensimmons Thanks, but would it be possible to support HDR/EDR in photos?

Jen Simmons

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.

#WWDC23

Jen Simmons

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.

webkit.org/blog/13878/web-push

Jen Simmons

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
Hidde

@jensimmons in that spirit, it seems, the European Commission have set up their own instance social.network.europa.eu/@EU_C

Elon Musk āœ…šŸ§æ

@jensimmons Yes please. then I can ban every one owned by a billionaire and/or fascist.

Jen Simmons

Safari Technology Preview 160 is available.

Includes:
- Media Queries level 4, with Range Syntax
- resizable ArrayBuffer
- UserActivation API
- and much more, including a lot of fixes

webkit.org/blog/13639/release-

Jen Simmons

Getting deep into the syntax for CSS Nesting, exploring the optionsā€¦

Hereā€™s a quick & overly simplistic preview...

Option 3:
article {
font-family: avenir;
& aside {
font-size: 1rem;
}
}

Option 4:
article {
font-family: avenir;
} {
aside {
font-size: 1rem;
}
}

Option 5:
@nest article {
& {
font-family: avenir;
}
aside {
font-size: 1rem;
}
}

Which all become:
article {
font-family: avenir;
}
article aside {
font-size: 1rem;
}

Thoughts?

Getting deep into the syntax for CSS Nesting, exploring the optionsā€¦

Hereā€™s a quick & overly simplistic preview...

Option 3:
article {
font-family: avenir;
& aside {
font-size: 1rem;
}
}

Option 4:
article {
font-family: avenir;
} {
aside {
font-size: 1rem;
}
}

Option 5:
@nest article {
& {
font-family: avenir;
}
aside {
font-size: 1rem;
}
}

Anonymous poll

Poll

Option 3
218
79.9%
Option 4
15
5.5%
Option 5
19
7%
(show results)
21
7.7%
273 people voted.
Voting ended 15 Dec 2022 at 1:34.
Jen Simmons

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.

Go Up