safari only media query

• Write for us
• Advertising

Web Development, Networking, Security, SEO

CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge A set of useful CSS3 media queries to target only specific versions of the various browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Microsoft Edge

Table of Contents

IE 6, 7 and 8

Ie 8 standards mode only, ie 8,9 and 10, ie 9 and above, ie 9 and 10, ie 10 and above, ie 11 (and above..), microsoft edge, any version (gecko), quantum only (stylo), legacy (pre-stylo), chrome & safari (any version),  safari (7.1+), safari (from 6.1 to 10.0), safari (10.1+).

If you're a HTML developer you most likely know that there are times when you need to selectively apply some styles to a specific browser, or to a specific version/build of a browser. When such scenarios occur, there are a number of CSS and/or JS based techniques to achieve that result.

Here's a collection of media queries that will allow you to do that in pure CSS3 code, without a single line of JavaScript code: most of them come from the  browserhacks.com web site, which is an excellent resource of browser-specific CSS and JavaScript hacks for these kind of tasks.

Internet Explorer

For further info or additional media queries, visit the awesome browserhacks.com website!

Related Posts

How to become a Web Developer: a detailed plan for learning JavaScript A list of the main study topics that await a novice JavaScript developer in his/her learning path to become a great web developer

May 19, 2020 May 19, 2020

Tabulazer - Chrome Extension to Filter and Sort HTML Tables A free Google Chrome Extension that can be used to filter, sort and enlarge HTML tables from any web page

October 2, 2019

7 typical reasons why Bootstrap is ideal for responsive Web Design A list of some great features that still makes Bootstrap the world’s most popular front-end component library

July 25, 2019 July 25, 2019

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

6 Comments on “ CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge A set of useful CSS3 media queries to target only specific versions of the various browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Microsoft Edge ”

Using a media query like this, @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {, to only target Chrome previously worked but now Firefox is picking up those styles in that media query. Any ideas for another workaround for just Chrome? Thanks!

Try one of these:

The css for ‘Safari (from 6.1 to 10.0)’ affects ALL browsers on iPad: Chrome, Safari, Opera. Not only Safari.

_:lang(x)::-ms-backdrop, .selector { color: blue; } /* IE11 */ _:-ms-lang(x)::backdrop, .selector { color: blue; } /* Edge */ _:lang(x)::-internal-media-controls-overlay-cast-button, .selector { color: blue; } /* Chrome */ _:lang(x)::x-, .selector { color: blue; } /* Safari */ _:-moz-any(x), .selector { color: blue; } /* Firefox */

not from me

sadly that edge things no longer works.. kind of tough to find an edge only query..

How to add a media query for a specific browser with specific width? for e.g. Safari browser version 10 and above with width: 1440px

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 Aggiungi e-mail alla newsletter

Notify me of follow-up comments by email.

Notify me of new posts by email.

This site uses Akismet to reduce spam. Learn how your comment data is processed .

How to target Safari 16+ with a CSS @supports media query

Easiest method for targeting Safari with CSS in 2024.

I just spent over 30 minutes looking for a way to only target Safari with CSS media queries and could not find a reliable way that works with Safari 17 without also targeting Chrome.

Looking through the compatibility table on caniuse.com you can spot that Safari 16+ has a unique property which is not supported by Chrome or Firefox called hanging-punctuation .

Using that property and -webkit-appearance we can target Safari specifically until any other browser decides to support it.

✦ 2024 Update: You can also chain it with font: -apple-system-body to make this more bulletproof. Thanks to Saber Hayati for the tip.

If you open this page in Safari, the right column will be red.

All Browsers

Safari only

Nice, but why does it also target Arc, Chrome, Firefox, Brave, Internet Explorer, etc. on my iPhone, iPad, or Vision Pro?

Because iOS and iPadOS (and visionOS) use the Mobile Safari rendering engine for all webviews. This means if you are using Chrome or any other “browser” on your iPhone it is still Safari under the hood.

That’s the case until these apps ship with their own rendering engines which will start being possible with iOS 17.4 for the EU.

get notified when i write something new or launch a new project right into your inbox.

Thanks for your time & attention.

Change CSS rules only in Safari

FabioRosado Saturday 5th, May 2020 2 mins to read 0 Like 0 Comment

How to apply css rules to safari only

The solution.

While working on Thumbs Up News , I've noticed a strange UI bug that happened only on Safari, when the screen was smaller than 900px height-wise. All the other browsers where okay, but the subscribe button was broken. The border was pushed up outside the area of the button and was now between the two elements of the menu. This only happened when a user clicked the categories button and the sub-menu expanded. I'm assuming that this happens because Apple wants space for its bottom menu?

The mobile menu is set on a fixed position. It seems that Safari will change either the padding, the margin or just some border rules when that fixed element doesn't have enough space vertically to show some space under the last element. My first thought was to use the -webkit rule to increase the padding on the button. Using that rule fixed the issue on Safari but broke on Chrome and this is when my search on how to apply CSS rules to a specific browser started.

After searching for a while, I've come across this article written by Ryan - CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge , if you scroll down you come to this little hack that works on Safari 10.1+.

I am using Sass on Thumbs Up News and that means I can't have an empty @media rule. But this was a great starting point for coming up with a solution. I've removed the empty media query to see if the rule would work on Safari and not on any other browser. Surprise, surprise, it worked! Now I decided to play around with the media query rule a bit more, to see what works and what doesn't work.

The Safari only rule hack has two parts. You need to use a unit that is not supported by Safari - dpcm , dpi , dppx and you need to set that media query to not all . The not all rule is important so chrome doesn't pick it up.

After testing different things and playing around with the media query, I've come to the final solution. I've also added a rule to trigger the CSS only when the screen is smaller than 900px high, because we don't want the menu to be broken on a larger screen.

That's all there is to get a media query work on Safari only. I'm still wondering why this trick works and would love to know why, so if you know the answer please let me know!

Webmentions

You might also like these.

A lot of sites make the first letter of a paragraph spread to multiple lines, let me share with you how you can do it.

Make the first letter spread multiple lines

Nx makes it easy to work with monorepost, this article will show you how you can use Nx for your projects and talks about some basic commands that will help you.

Getting started with Nx

How to set up an UI element persistent in Gatsby to allow users from Landing in Tech to listen to the latest episode, when navigating the site.

How to make a UI element persistent in Gatsby

How to create a function to filter articles by tag. On this post I am using the javascript filter method to filter all articles.

How to filter all MDX articles by tags

improved scroll syncing and bug fixes.

Fix stability issues and update the rendering engine to Chromium 128.

This is a bugfix release.

The complete guide to CSS media queries

From the polypane blog.

Table of contents

What are media queries?

The and operator, the or operator: , (a comma), the not operator, media query in html, using media queries, you can use all units in media queries, aspect ratio, implementing a dark mode, implementing reduced motion, prefers-contrast, color-gamut, display-mode, resolution/-webkit-device-pixel-ratio, scripting (supported since firefox 113, safari 17 and chromium 120), inverted colors (safari only), dynamic-range, multiple pointing devices, prefers-reduced-data (no support) available for testing in polypane, prefers-reduced-transparency (chromium 118, supported behind a flag in firefox), overwriting forced colors, -ms-high-contrast (supported in old edge), light-level (no support), nav-controls (no support), environment-blending (no support), screen-spanning (supported in chromium browsers), range: replacing min-* and max-*, not() function, custom media queries.

• Device-* media queries

prefers-color-scheme lost a value

Using media queries in javascript, test your media queries with polypane, the browser for developers and designers.

If you want to be kept up to date with new articles, CSS resources and tools, join our newsletter.

Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones are there and which ones should you use? Here's the complete guide to media queries.

What this guide will go through:

How a media query is structured

Media types, using media query features.

• Upcoming media queries

New notations in Media query levels 4 and 5

Deprecated media queries.

• Using Media Queries in JavaScript

What is a media query? A media query is a specific feature of CSS that lets you conditionally apply styling based on a media type, a media feature or both. You use them primarily to check the screen dimensions and apply CSS based on that, but media queries can do many other powerful things.

Here's the general structure of a media query:

It begins with the @media keyword, also called an "at-rule", optionally followed by a media type and zero or more media features .

A real example of a media query is:

In English, what this says is this: "if the site is being shown on a screen and that screen's width is at least 400px wide, apply this CSS".

Both the media type and the media feature are optional, so this is a valid media rule:

And this is a valid media query too:

If you leave out the media type, it will be seen as the media type all , which is usually fine.

Logical operators

Next to media type and media features, we also have a few "logical operators" that go inbetween those parts: and , or and not . Here's how those work:

You can use the "and" operator not just between a type and a feature, but you can also use it to "chain" multiple media features using and , like so:

Which tells a browser to apply this CSS if the browser width is between 400 and 800 pixels.

You can use a comma to do "or", like so:

which applies to screen or print. Each comma separated line is its own media query and as soon as one of them evaluates to true, the CSS in the media query is applied. In the future you'll also be able to use or instead of a comma .

Lastly, there is not , which can be used to negate an entire media query. So the following query will be applied everywhere except print:

If you use the not operator you must set a media type (like screen or print) as well. If you don't, the media type will be all , and then your media query will read "not all" so it won't get applied anywhere.

not inverts the entire media query. Scroll down to not() notation for an upcoming feature that will allow you to negate just a part of a media query.

There's also the only logical operator, but in modern browsers you don't need to use this, so we'll pretend it doesn't exist.

You can nest media queries in other media queries and that will work fine! So instead of

you can also write

In this example it might not be so useful, but you could wrap your entire CSS in an @media screen {} and do your responsive design with nested media queries, and then have a fully custom print stylesheet. With this, that'll look a little cleaner.

You can optionally append one or more comma-separated media queries to the import statement to conditionally import the file, for example like so:

If a media query does not match, the CSS won't be applied, but the file will still be downloaded.

You can also use a media query in your HTML, for example in a <style> or <link> tag, like so:

It's worth noting that any linked files will still be downloaded by your browser even if they doesn't apply.

You can also use media queries to control which responsive image to load using the img element with a sizes attribute, or a picture element with different source elements that each have a media attribute, but since that's a large topic and does not concern CSS, we'll leave that for another guide.

The media type is used to describe the type of device that a browser is running on. There used to be loads, but the level 4 specification deprecated a whole lot that were never implemented anyway, leaving us with 3 we should care about:

As mentioned earlier, if you don't specify a media type, it will default to "all", which means the css will apply to all devices.

Probably what you're reading this article on now!

For when you print a page, or any "paged" media (Like a book! Did you know people use HTML and CSS to mark up books?)

Did you know you can easily switch between screen and print stylesheets in Polypane with our emulation features?

So just for completeness, here's all the other ones that you never got to use, and probably never will:

• aural (which was replaced by speech ),
• speech (...also deprecated. Originally for use with speech synthesizers, like screen readers. Never implemented in browsers.)
• tty (for the terminal),
• tv (... like a screen, but different...somehow?),
• projection (projectors),
• handheld (for phones, they were actually used for a while before media expressions were a thing),
• braille (for braille devices) and
• embossed (like a combination of print and braille, so for printed braille).

When using media queries it's good to give yourself a few rules, so you don't randomly add media queries and end up with CSS that behaves unpredictably and is hard to maintain.

When starting fresh, I recommend to write CSS from narrow (mobile) to wide (desktop) and then only using min-width for your styling. That way you're always designing "up" and your CSS remains easy to reason about: All the CSS you write will be additive compared to the base styling. Your original CSS might place things in a column:

and when you get wide enough to show two columns, you switch to horizontal:

Because the main element already has display: flex; , all we needed to do at the wider breakpoint is change the flex-direction . We prevent code duplication and everything is more readable and faster to download.

We can extend this reasoning to all the media features described below. Write your CSS for the starting point: the most well-supported, the smallest or the most accessible version. Then progressively add more styling using media queries.

For more in-depth tips on how to develop a responsive website, read our article Responsive design ground rules .

Media query feature make up the main part of a media query and have the most influence on what you're designing. Media feature do a lot . They let you check for device and browser capabilities, settings and user preferences beyond just the type of device.

By far the most used media features are related to browser dimensions. Here are they:

Width and Height

You can check for exact width , min-width and max-width , and exact height , min-height and max-height .

width and height you'll probably never want to use, they only apply at that exact width.

More useful are the min-* and max-* values, which let you write CSS for screens starting at a certain size and larger (using min-* ), or up to a certain size (using max-* ).

All the width and height media features support the regular CSS units like pixels and ems. It's recommended to use the em unit for media queries, so it scales nicely when people zoom in their browser . This won't happen with pixels, and rem is the same size as an em when it's used in media queries. rem also has some bugs in Safari. So, em 's are best.

If you think sizing in em s is hard because you don't know how large an em is: media queries are handled at the top level, so 1 em is always 16 pixels or what the browser set as the default font size (and so are rems).

Did you know Polypane automatically detects the width and height media queries in a site and creates panes for them? That way, you're always building sites to your own specifications. It also supports sizing panes in ems so you don't even have to calculate between pixels and ems!

Though you usually want to use em for media queries, or will feel more comfortable with using px , you can use all (absolute) units in media queries. So that means you can use ch to measure the width in characters or lh to measure the height in line-heights. It also means you can use calc() , min() and max() .

min-width: calc(100px + 30ch) will work fine and will match when the width of the viewport is at least 100 pixels plus the width of 30 characters wide. min-height: min(1600px, 100em) will match when the height of the viewport is at least 1600 pixels or 100 ems, whichever is smaller. For most devices this would be the same, but if a user has set a larger default font size that 100em would be taller than 1600px.

You can also test for the relation between width and height, with the aspect-ratio and orientation media features.

The aspect-ratio media feature takes a fraction, and also has the more useful min-aspect-ratio and max-aspect-ratio media features. It will lets you check if a browser has a certain ratio between width and height. The way to think about it is: the first number represents the width, the second number represents the height. This means an aspect ratio of 2/1 is twice as wide as it is high.

You can test for (only) square screens:

Or check for screens that are 16 by 9:

Like width and height, you'd usually use the min-* and max-* variants. With a certain aspect ratio you can decide to show images in a portrait or landscape mode, for example.

With min-aspect-ratio , you can check for screens that are wider than they are high:

Conversely, by using to max-aspect-ratio: 1/1 , you switch that around to only screens that are higher than they are wide.

Instead of doing that though, you can also just use orientation: landscape and orientation: portrait , which mean the same thing and are a little clearer.

Prefers-color-scheme

With prefers-color-scheme you can check if a user prefers to see a dark mode or light mode version of your website.

Some users might prefer dark mode because it's easier on their eyes, because their environment is dark or because they're sensitive to bright lights. Conversely, users might prefer your light mode for the usually increased contrast or because they visit your site in a bright space.

Here's how to test for both:

Between, these, light is considered to be the default. So much so, that a third option no-preference was recently removed from the specifications due to lack of implementations.

Did you know Polypane's emulation mode makes it really easy to test both a dark and light theme side-by-side.

If you already have a website and want to add dark mode, the neatest way to go about it is to redesign each part. This will give you the most control and highest quality implementation.

For many sites, it might be hard to go through all parts of a site, or there's no time or budget available. For those sites, there's a thing I like to call "cheap dark mode", and it looks like this:

Here's how it works: First we set a dark background on the :root , which is basically the html element. This doesn't have to be #111 (very dark gray), it can also be pure black (#000) or you can add a little color to it. That all depends on your brand and design, so pick one that works for you.

The next line is where the magic happens. With filter we can invert all the colors. This will make light dark and dark light. It won't affect the background which is why we defined that ourselves.

Invert also has another effect though, it also inverts colors. So blue will become orange, green becomes pink and so on. That's not great, because it means you just lost your brand colors. Fear not though, we can get them back by rotating the hue back to the original colors with hue-rotate(180deg) , undoing the invert specifically for the hue of your colors.

At this point, all images and videos on your site look super weird, so what we need to do there is double-apply the invert and hue-rotate, turning both back to their original colors. Now you have a site in dark mode, where all images and videos are shown as they are. Not bad for just a few lines of CSS!

Prefers-reduced-motion

With prefers-reduced-motion , users can indicate they want to see less stuff happening on screen. The reason they want to do this can be things like motion sickness, vestibular disorders or they just plainly don't want to wait for your nice animations to finish.

If a users has prefers-reduced-motion turned on it doesn't mean they want no motion, but you have to be mindful: use motion only where it helps understanding and if you do, keep the motion small (so fade instead of swoosh ). Otherwise just turn them off. And for video's, make sure you don't auto-play them .

If you're starting a new project and want to incorporate support for reduced motion it's a good idea to consider motion an enhancement: have no or little motion as the default, and only when refers-reduced-motion: no-preference is set, add additional motion to your website. That way, the default experience is the more accessible one.

For an existing site, this might be a lot of work, so we also have a cheap reduced motion script:

This will turn off all animation for all elements so it's as relatively blunt method, but it's perfect to retroactively add to a site to make it more accessible. The animation is set to 1ms so the animationend and transitionend events are still fired because your javascript might depend on them, but with the negative delay you won't notice the difference.

Did you know Polypane makes it really easy to test your prefers-reduced-motion implementation side-by-side with a regular pane.

Prefers contrast indicates whether a users prefers more or less contrast in their interface. For example visual impairments can make it difficult to make out details or subtle differences in color so people that have that will prefer higher contrast. On the other hand, other people might be sensitive to harsh high contrast and prefer colors to be closer to each other.

prefers-contrast: custom is an odd one out. If you dont prefer more , less or the same ( no-preference ) contrast, why does this exist? The custom value will match when forced-colors is active but the user doesn't have a high or low constrast theme selected, but something in the middle. This way, @media (prefers-contrast) without a value will still match and that will let you re-use the media query to reduce visual complexity.

The "increase contrast" option in the macOS accessibility menu will trigger prefers-contrast: more :

When you turn it on, your entire operating system also switches to an increased contrast mode which you can use for inspiration on your site. As you can see from the screenshot, macOS doesn't turn everything full black on full white (though it does bump up the text contrast), but instead it increases the contrast between sections, by adding clear borders instead of soft shadows and suble background tints.

On Windows, prefers-contrast is turned on when you turn on forced-colors and will match more , less or custom depending on the contrast ratio between the background and default text color.

Did you know Polypane makes it really easy to test your prefers-contrast ands forced-colors implementation side-by-side with regular panes.

Colors on the web so far have been limited to just the sRGB color gamut, but modern screens are able to display much more colors, like the p3 color space. With the color-gamut you can test if a device has such a wider color space.

There are three potential options, and if it supports the larger color space, it automatically includes support for the smaller color space.

• srgb This is the one we all know :)
• p3 This is what for example modern iPhones use, often called "wide gamut"
• rec2020 , this is the largest color space available right now, but you basically won't find this in the wild.

If a user has a display with a wider gamut, you can use images in that color space and they'll be more vibrant than ones in sRGB.

Not supported yet, but coming soon are new CSS notations you can use to describe colors in these wider color space (since this is not possible with rgb , hsl or hex, which are limited to sRGB).

For these new colors, there are three new css functions: lab() , lch() and color() . For now, only Safari supports the color() function, and the other two are supported nowhere.

Lab and lch allow you to describe more precise colors than rgb and hsl, but with color() you can explicitly opt-in to a color gamut, like so:

The display-p3 is the only value supported for now, and the three numbers are floating point numbers for the R, G and B channel.

If you're designing a game or video player, you might have more than just the game/video on the page but when someone switches to fullscreen you only want to show the game/video. This media query lets you do that. display-mode is supported by all modern evergreen browsers, and will let you test for how your site is shown with four possible options:

• browser This is the default mode, where your page is shown in a regular browser window.
• fullscreen Your page is displayed full screen and there is no browser chrome visible. If there is no fullscreen media query defined, your browser will instead apply styles defined in a standalone media query.
• standalone The page is not shown fullscreen, but also doesn't have all of the regular browser chrome, Instead it looks like a standalone (desktop) application. If there is no standalone media query defined, your browser will instead apply styles defined in a minimal-ui media query.
• minimal-ui Your page is shown in its own window, but the browser will still show some chrome for controlling navigation (like popup windows). If there is no minimal-ui media query defined, your browser will instead apply styles defined in a browser media query.

As you can see, most of these values fall back to the next one, so if you define a minimal-ui style, that will also be applied to standalone and fullscreen .

With the resolution media query you can test for a displays pixel density. There is resolution , which tests for a single specific pixel density and min-resolution and max-resolution which give a lower and upper bound.

You can use this to serve retina background images to displays that support it, for example.

Resolution takes a number with either a dpi (dots per inch), dpcm (dots per centimeter) or dppx (dots per pixel). In CSS, a pixel is always 96dpi , so 1dppx is a regular screen resolution, and 2dppx is 'retina'.

Instead of dppx you can also just use x , so your CSS could look like this:

Older versions of Safari (before TP Release 138) don't support the resolution media query. They have a similar feature called -webkit-device-pixel-ratio (as well as -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio ), which accepts a number without a unit. The implied unit is the same as dppx though, so the following CSS has the same effect as the resolution sample above:

To improve support, all other modern browser also support the -webkit-device-pixel-ratio notation so between resolution and -webkit-device-pixel-ratio , you can safely use the latter for the widest support. Consider switching to resolution though, unless you also need to support older versions of Safari.

Overflow can test how a device handles content that's larger than fits. It exists of two properties, overflow-block , for the block direction (usually top to bottom) and overflow-inline for the inline direction (usually left to right).

For overflow-block there are 4 potential values to check against:

• none , meaning that anything that overflows is simply not displayed
• scroll , you can scroll to content that overflows
• paged , content that overflows is shown on a next page.

And overflow-inline only has two values:

update is used to detect how often the media type can update. Possible values are:

• none , meaning it can't update, like printed paper.
• slow , where updating is slow like on e-book readers or low power devices.
• fast where updating is not constraint by device capabilities, like regular screens.

Scripting will let you test if JavaScript is available. It has three possible features:

• none , JavaScript is not available
• initial-only , JavaScript is only available during page load, but not after
• enabled , JavaScript is available

This media query indicates that the operating system has inverted all colors. The operating system in this instance is MacOs, the only operating system that supports this (and conversely, only Safari supports this media query). It's either off or on:

You might think that you'd use this to double-invert your images and videos like we did with our cheap dark mode , but Safari already does this for you. You can however, still hue shift your entire site to make sure your brand colors are followed.

Some displays can display "HDR", or "high dynamic range", characterized by large contrast, brightness and color depth. The specification gives two options: high and standard . If it's high, this means that you can use display-p3 colors (currently only supported in Safari) to provide more vibrant colors for your visitors. To test for support for specific color spaces, you can use the color-gamut media feature

Interaction: pointer and hover

We have many more different input/pointing devices now compared to when the web got started. Mouse pointers still exist, but we also have touch, external controllers like Wii remotes and even things like AR hand detection.

Some things that are easy to do with a mouse are harder or impossible to do with touch devices, like hitting small targets or even hovering. With the interaction media features you can adapt to these devices in clever ways.

The way I would go about this is consider a touch device as the most minimal implementation. It won't have hover effects, and the precision of your input device is coarse (It's the size of your thumb).

For this group, you can't have things popping up on hover so they need to be visible or behind an explicit toggle, and your tap targets will need to be larger.

But those devices could also have support for a stylus, still not allowing hover, but making it easier to point to specific parts on the screen. While it's a good idea to have large enough clickable targets even if pointer: fine, you can for example place them closer and make more efficient use of the space.

Then as you start to get hover capabilities, you can add those with:

Devices that allow for hovering but have a coarse pointer are things like Wii controllers and Kinect. They let you point at things but without great precision. You'll want large enough targets and you can add hover effects as an indication of where they're pointing.

Lastly, we end at what many will think of as "normal", but is actually the most well-featured situation: a device with a mouse/trackpad.

These devices can hover over elements and precisely target them. Users of these devices might still have different capabilities (Not just permanent! They also might be tired, or have greasy fingers) so design accordingly.

Though iOS 13.4+ support these media features, it will always match pointer:coarse and hover:none (and their any- counterparts), even when using the new trackpad or the pencil.

The pointer and hover media queries give you information about the primary pointing device. But what about the touchscreen-with-stylus example where you have a coarse and a fine pointing device simultaneously? Even if the user has a stylus, the primary pointing device is still a touch screen, so coarse. For those situations you can use any-hover and any-pointer . This will test if any pointing device exists that matches the criteria.

Less interesting media queries

There are a few more media queries that are not as useful in daily usage but I didn't want to leave out.

the color media query (and it's min-* and max-* variants) lets you detect if the screen your page is being shown on has any color, and if so, how much:

You can also give it a value which translates to the number of bits per color component, so for each of red, green and blue separately. Most modern screens have 8 bits per channel, but 10 bit screens and even 12 bit screens are becoming more common. The value is not the total number of colors, but the bits per color, so don't confuse it with "8-bit color", which is something different. 8 bits per color channel corresponds to a 24-bit color screen.

Somewhat the inverse, monochrome (and it's min-* and max-* variants) lets you detect if the screen is shown on a monochrome (like greyscale) media type. You can again use just the value to detect a monochrome media type:

And like color , it also has an optional value that's the number of bits per pixel. If you test for monochrome: 0 , that will check if the device is not monochrome (so it has colors). monochrome: 1 will detect a device with pixels that are either on or off (like e-paper).

An interesting use-case for monochrome is that you can use it to detect when a page is printed in color or in monochrome:

The grid media query will let you detect when a page is shown in text-only terminals or basic phones with fixed fonts. It's value is either a 0 or a 1, and unlike color or monochrome , you need to explicitly add it:

Upcoming media query features

While all the previous features have pretty good support across modern browsers, there are also many upcoming features that are only supported by a few browsers or that will hopefully be implemented soon.

Please note that some of these are still in a drafting phase, which means they might be changed or scrapped before becoming part of a specification. I'll try to keep this document updated!

Not everyone is lucky enough to have fast, or reliable, or unlimited data plans. Browsers can send the Save-data: on header, and web servers can then choose to send smaller images and videos and disable any form of polling or preloading. Even though turning on the sending of that header is hidden deep in settings (on mobile) or requires a third-party plugin (on desktop), a large number of people still end up using this header.

Unfortunately dealing with this on a web server level is often hard to do, either because you lack access, or the configuration requirements to make it work are just too complex. That's unfortunate because it's potentially very impactful.

Coming up is a prefers-reduced-data: reduce media query, which will let you target this situation in CSS. Though you can do less with that compared to a save-data header (which you could use to send an entirely different website, basically), you can still use it to prevent downloading unneeded fonts and background images, or to request smaller background images.

You can emulate the prefers-reduced-data media query in Polypane using the emulation panel

While we wait on this feature to land, we can already use JavaScript instead to detect the save data preference or a slow connection using the Network Information API:

The Network Information API is available in Chromium browsers and behind a flag in Firefox. It can tell if you saveData is on and gives you rough information on the type of connection. effectiveType takes into account not just the type (wifi, cellular etc) but also how long previous roundtrips to the server took and what the download speed is. There's slow-2g , 2g , 3g and 4g as possible values.

To learn more about how to design for prefers-reduced-data , read our article Creating websites with prefers-reduced-data

User can use this to indicate they prefer to see things on solid colors, usually due to visual impairments making it hard to read text on, for example, background images. But it can also help people with for example dyslexia or concentration problems to read your content easier. Note it doesn't say no-transparency .

Wanting less transparency is not the same as wanting more contrast and should not be lumped together. prefers-contrast and prefers-reduced-transparency are there for different reasons and can be compensated differently for.

Forced-colors (Support in Chromium browsers and Firefox) Available for testing in Polypane

Forced colors, or high contrast, will strip out all your background images if there's text over them and overwrite all your other colors, making everything uniform with the rest of the operating system. This helps people with visual impairments by making all text easier to read for them.

Those of you that have been doing web development for a bit longer might remember that we could style things with "system colors". That's no longer possible due to security implications, but in the forced colors mode a subset of them are back:

• CanvasText : the color of text content.
• LinkText : the color of links.
• GrayText : the color of disabled content
• HighlightText : the color of selected text.
• Highlight : the background color of selected text.
• ButtonText : the color of a < button > element's text.
• ButtonFace : the color of a < button > element's background.
• Canvas : controls the color of the background.

These color names are not here for you to pick and choose, high color mode already overwrite all your text, background, border and button colors. They're there for you to use on other elements (like icons) to make them fit the rest of the site.

Forced-colors has two possible values:

When forced-colors is active, prefers-color-scheme can be used to detect if there is white text on a black background, or black text on a white background.

On Windows, forced-colors will also activate prefers-contrast with a value of more, less or custom depending on whether you have high, low or average contrast between the text and background colors.

To learn more about using Forced colors, read our article Forced colors explained: A practical guide

It's not always desirable for forced-colors to overwrite all the colors, for example in a color selector on an ecommerce website. To disable forced colors for specific elements you can use the css property forced-color-adjust: none; .

-ms-high-contrast was the implementation of forced colors in the old EdgeHTML version of Edge. It has three possible values to check for, which includes the color scheme:

It similarly has color keywords for you to use, but they're slightly different:

• WindowText : the color of text content.
• -ms-hotlight : the color of links.
• Window : controls the color of the background.

Light-level comes with three possible values: dim , normal and washed . What those mean exactly and when they get triggered is up to the operating system.

Light-level will be dim if the screen is in a dark place, like at night, whereas washed means that it's shown under bright lights or in outdoor conditions with lots of sunlight.

Operating systems nowadays already compensate for these situations by increasing or decreasing brightness, but a website owners we can improve the experience more. In dim situations, you might opt to decrease strong contrast here and there and decrease overall brightness. In washed situations you might want to increase the contrast of all text compared to the background.

Nav controls is used to detect if the page is being viewed in a user agent that has navigation controls (specifically, a back button). It has two possible values:

• none , meaning there are no navigation controls
• back , meaning there is are navigation controls and they're visible ("obviously discoverable", according to the spec, which they explain as UI that's visible as opposed to a shortcut or gesture)

This is useful when your website is shown in a webview in an app, where the app might not have its own navigation controls. This way you can still provide a back button or other means of navigating.

Environment blending lets you test whether or not your screen blends with the environment, for example if it's projected onto a piece of glass. There's three potential values:

• opaque . Like a regular monitor, or paper (think of this as the default)
• additive . For example, a heads-up display like Hololens. Black is transparent, and white is 100% light.
• subtractive . For example, an LCD display like a Gameboy screen, embedded in a mirror. Here the opposite happens: 'white' is fully transparent and black has the most contrast.

The screen-spanning media feature (which used to be called just "spanning") is made to support devices with multiple screens. It will tell you if a browser spans multiple screens and if those screens are aligned horizontally or vertically. It has three possible values:

• none , when the browser does not span multiple screens.
• single-fold-horizontal , when the browser spans two screens, with the fold horizontally in the middle.
• single-fold-vertical , when the browser spans two screens, with the fold vertically in the middle.

The specification for this is not yet final, and it might get new names and values, in particularly being more explicit about spanning horizontally or verticallym with integer values to support more than two screens.

Your site will work fine spanning across two screens because the browser will just pretend that it's a single screen, but you can use the values above, along with a new set of env() css environment variables that show you where the fold is so you can lay out things on both screens (For example you could use it to have a list on one screen and a map on the other.)

• fold-height

These give you an offset for the fold, and you can combine these with calc() to target each screen individually. For Javascript, there's a new api called window.getWindowSegments() that will return an array of your screens. These are static values so won't update if a user rotates their device.

Alongside the new media queries, the latest specifications (4 and 5) also comes with some new notations. They're useful improvements that are slowly finding their way into browsers.

In media query level 4 you can do away with the min-* and max-* versions of media features that have a "range context" (e.g., a min and max version) and instead write them as a simple equation.

If you have both a min-width and a max-width , you can even combine them into one equation:

You can use both < and > as well as <= and >= . The first two will exclude the edges (so (width > 300px) works like (min-width:301px) ), while the last two will include them (and work the same as the min-* and max-* versions).

The range syntax has been supported in Firefox for a long time, Chromium supports it since 104 and Safari since 16.4.

The next few notations aren't supported anywhere yet.

Instead of a comma, you can now also write or just like how you could already write and . The entire query will then evaluate to true as soon as one of them matches.

You can prepend not to the entire media query, but what if you only want to check a single value? You can do that with the not() notation:

Custom media queries let you define a media query once and then use that media query in multiple places without repeating yourself, just like how css custom properties ("variables") work. They even have the same notation.

Here's an example:

Despite all the new features coming out, there's also parts older specifications that are not recommended for use anymore. You might still see them in the wild here and there, but you shouldn't add them to new projects and if you find them in existing projects, try and refactor them.

Device- * media queries

When media queries were first implemented, the main idea was that they reasoned about the device , so there were media features like device-width , device-height and device-aspect-ratio .

But the size of the device is not always the size of the viewport, so styling based on these makes no sense.

The no-preference value for prefers-color-scheme was recently removed from the specification so there will only be dark or light as possible values. They removed it because most browsers implemented this media feature with the default being light and never implemented no-preference anyway. The door is left open for re-introducing it in the future, as well as introducing other color scheme preferences, such as "sepia".

No browser actually supports this feature and it was to be used in tandem with the deprecated tv media type so we'll probably never see support again, but I'll explain it anyway. The scan media query can be used to test for the scanning process that is used to paint an image on a screen (like on a CRT monitor). It has two options:

• interlace , where odd and even lines are drawn alternately.
• progressive where all lines are drawn one by one.

progressive is described as a screen that is slower to update and probably fuzzier.

Lastly, I want to point out that you can't just use media queries in CSS, you can reason about them in JavaScript as well. You can do this with the window.matchMedia() function.

The window.matchMedia() function takes a media query string and return a "MediaQueryList" object with information on if that particular media query matches:

The matches value will tell you if the media query evaluates to true . So if you had video that you wanted to autoplay, you could use a matchMedia function to do that only for people that don't have prefers-reduced-motion: reduce :

You can also add a listener to the MediaQueryList object. This will let you respond to changes in the document that cause the media query to go from false to true , or the other way around.

The matchMedia object also used to have an addListener function that you could use for the same purpose, but that has been deprecated.

Polypane lets you test your website in many different screen sizes and against different media queries like prefers-color-scheme , print stylesheets and prefers-reduced-motion .

It's the fastest way to develop and test websites, and you can try it for free !

Build your next project with Polypane

• Use all features on all plans
• On Mac, Window and Linux
• 14-day free trial – no credit card needed

Media Queries for Apple Devices

As a web designer and developer, I often find myself searching for media queries to ensure that websites are optimized for various devices. In an effort to streamline this process, I decided to compile a list of the most frequently used media queries.

Since Apple devices are the most widely used, I have compiled a list of media queries specifically for these devices. I will make sure to keep this list up to date with any new Apple device releases.

• iPad 3 & 4
• iPad 1 & 2
• iPhone 10, 11, X
• iPhone 6, 7, 8
• iPhone 6, 7, 8 Plus

iPad Media Queries (All generations)

Ipad in portrait & landscape, ipad in landscape, ipad in portrait, ipad 3 & 4 media queries, retina ipad in portrait & landscape, retina ipad in landscape, retina ipad in portrait, ipad 1 & 2 /mini media queries, iphone media queries,  iphone 14 media queries, iphone 14 pro, iphone 14 pro max,  iphone 13 media queries, iphone 13 mini.

This media query is used for: iPhone 13 mini, iPhone 12 mini, iPhone 11 Pro, iPhone Xs, and iPhone X

iPhone 13 and iPhone 13 Pro

This media query is used for: iPhone 13, iPhone 12 and iPhone 12 Pro

iPhone 13 Pro Max

This media query is used for: iPhone 13 Pro Max and iPhone 12 Pro Max

iPhone 10 Media Queries

Iphone x in portrait & landscape, iphone x in landscape, iphone x in portrait, iphone 6, 7, 8 media queries, iphone 6, 7, 8 in portrait & landscape, iphone 6, 7, 8 in landscape, iphone 6, 7, 8 in portrait, iphone 6, 7, 8 plus media queries, iphone 6, 7, 8 plus in portrait & landscape, iphone 6, 7, 8 plus in landscape, iphone 6, 7, 8 plus in portrait, iphone 5 & 5s media queries, iphone 5 & 5s in portrait & landscape, iphone 5 & 5s in landscape, iphone 5 & 5s in portrait, recent posts.

Legal Landscape of Newsletters: Key Considerations for Compliance

Lincoln Collective Design & Development Studio

Top 5 Web Design Trends to Boost Your Online Presence in 2024

How to Effectively Rebrand Your Business: A Step-by-Step Guide

The Importance of Typography in Design

The ROI of Investing in Quality Graphic Design

• Graphic Design
• Shopify Design & Development
• WordPress Design & Development
• Social Media Blog

+27 (0)72 805 1271

[email protected], ui/ux design.

• Web Development

Privacy Policy

© 2024 lincoln collective. all rights reserved..

• Why Choose me?
• UX/UI Design Crafting intuitive and engaging user experiences.
• Web Design Creating responsive websites for various platforms.
• Web Development Creating responsive websites for various platforms.
• Shopify Build Robust and scalable e-commerce stores.
• WordPress Build Customised and optimised WordPress sites.
• Graphic Design From logos to marketing collateral, visually compelling designs.
• UX/UI Design

Privacy Overview

Instantly share code, notes, and snippets.

jbutko / style.css

• Download ZIP
• Star ( 9 ) 9 You must be signed in to star a gist
• Fork ( 1 ) 1 You must be signed in to fork a gist
• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.
• Learn more about clone URLs
• Save jbutko/6718701 to your computer and use it in GitHub Desktop.

AnithaPal commented Jan 2, 2020

@Valeka , Thanks It works perfectly.

Sorry, something went wrong.

rhostem commented Feb 27, 2020

@ntnbt thanks a lot!!

vihuy commented Apr 21, 2020

when i added @media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) { @media { #activity-list{ margin-top: 25px; } }} it still runs on chrome browser

Hungreeee commented Apr 26, 2020

thank @ntnbt a lot it worked well for me.

@vihuy I only do: .classname { @media screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) { @media { margin-top: 25px; } } }

or if u are using React MUI useStyles like me just ' @media not all and (min-resolution:.001dpcm)': { ' @supports (-webkit-appearance:none)': { sth here }, },

vihuy commented May 8, 2020

@MynameisHung thank you.

JonathanFSilva commented Aug 12, 2020

Thanks @ntnbst , your approach worked for me!

onenazmul commented Aug 29, 2020

It worked, thanks a lot @ntnbst

yogesh-xseed commented Nov 3, 2020 • edited Loading

@media screen and (-webkit-min-device-pixel-ratio: 0) { _::-webkit-full-page-media, _:future, :root , .some-class { top:just save 0; } }

@Valeka thank you so much you just saved my day.

sanket4real commented Jan 18, 2021

Thanks @ntnbst , it worked

xoriant-vikas commented Feb 18, 2021

@media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { .safari_only { color:#0000FF; background-color:#CCCCCC; } }}

although its working perfectly but have sass lint error.

Include leading zeros on numbers for @media not all and (min-resolution:.001dpcm)

Vendor prefixes should not be used for @supports (-webkit-appearance:none)

Chelny commented Mar 21, 2021

Thanks @ntnbst !

Muhammad-Naiem commented Mar 24, 2021

need just ios chorme browser all media

nguyen422 commented May 7, 2021

@ntnbst works for me too ;) Thanks so much!!

ShiBa-Shin commented Sep 1, 2021

@ntnbst Works like a charm. Thanks for shared this.

Mil00Z commented Oct 4, 2021

@ntnbst OMG , i don't really understand it works but thank you very much !!!! (if you have some explanations, i'm ready ^^)

shivam2112 commented Dec 1, 2021

works fine on Chrome and Firefox but not on Safari (iOS or MacOS). I am getting a “zero sized error” on Safari. I recently had an expired cert but renewed it using Let’s Encrypt. I did not test on Safari after renewal as it worked fine on Chrome. created wordpress website can solve this problem. Thanks in advance!

Mil00Z commented Dec 5, 2021

It's work without SASS process The hack applies on Firefox Standard (why ? Don't know) I think some of User Agent specs are the same between Firefox and Safari MacOs

4leeX commented Aug 12, 2022

@ntnbst thanks man

EngineerPlug commented Oct 28, 2022

So can i just plug this in and it will work?

Mil00Z commented Oct 31, 2022

yes, it's work for me so just check the Developer tools on Firefox so the hack appear on sometimes :)

dkoutevska commented Nov 9, 2022

FYI: @ntnbst 's approach works great for desktop browsers, but it will target every mobile browser on iOS devices . :)

tettoffensive commented Feb 2, 2023

@ntnbst 's approach did not work for me on Safari desktop. It didn't affect any browser. If I remove the "not all", it seems to affect all browsers.

cynthiaeddy commented Oct 9, 2023

@Valeka - many thanks! your solution worked for me.

MakerTim commented Mar 7, 2024

Works fine for me & without errors from linter(s)

CerealKiller97 commented Mar 31, 2024

@MakerTim Thank you so much!!! You made my day!!

RobinSen2217 commented Apr 23, 2024

@MakerTim Thank you very much, good sir!!!

shanimal commented Aug 7, 2024 • edited Loading

Safari is a mess. Thank you! Added to my globals...

akshilThumar-toddleapp commented Aug 22, 2024

@MakerTim Thank you very much!

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries . With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

Note: In JavaScript, the rules created using @media can be accessed with the CSSMediaRule CSS object model interface.

The @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

For a discussion of media query syntax, please see Using media queries .

Description

Media types.

Media types describe the general category of a device. Except when using the only logical operator, the media type is optional and the all type is implied.

Suitable for all devices.

Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)

Intended primarily for screens.

Note: CSS2.1 and Media Queries 3 defined several additional media types ( tty , tv , projection , handheld , braille , embossed , and aural ), but they were deprecated in Media Queries 4 and shouldn't be used.

Media features

Media features describe specific characteristics of the user agent , output device, or environment. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.

Does any available input mechanism allow the user to hover over elements? Added in Media Queries Level 4.

Is any available input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.

Width-to-height aspect ratio of the viewport

Number of bits per color component of the output device, or zero if the device isn't color

Approximate range of colors that are supported by the user agent and output device. Added in Media Queries Level 4.

Number of entries in the output device's color lookup table, or zero if the device does not use such a table

Width-to-height aspect ratio of the output device. Deprecated in Media Queries Level 4.

Height of the rendering surface of the output device. Deprecated in Media Queries Level 4.

Width of the rendering surface of the output device. Deprecated in Media Queries Level 4.

The mode in which an application is being displayed: for example, fullscreen or picture-in-picture mode. Added in Media Queries Level 5.

Combination of brightness, contrast ratio, and color depth that are supported by the user agent and the output device. Added in Media Queries Level 5.

Detect whether user agent restricts color palette. Added in Media Queries Level 5.

Does the device use a grid or bitmap screen?

Height of the viewport.

Does the primary input mechanism allow the user to hover over elements? Added in Media Queries Level 4.

Is the user agent or underlying OS inverting colors? Added in Media Queries Level 5.

Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome.

Orientation of the viewport.

How does the output device handle content that overflows the viewport along the block axis? Added in Media Queries Level 4.

Can content that overflows the viewport along the inline axis be scrolled? Added in Media Queries Level 4.

Is the primary input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.

Detect if the user prefers a light or dark color scheme. Added in Media Queries Level 5.

Detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors. Added in Media Queries Level 5.

Detects if the user has requested the web content that consumes less internet traffic.

The user prefers less motion on the page. Added in Media Queries Level 5.

Detects if a user has enabled a setting on their device to reduce the transparent or translucent layer effects used on the device.

Pixel density of the output device.

Whether display output is progressive or interlaced.

Detects whether scripting (i.e. JavaScript) is available. Added in Media Queries Level 5.

Detects the shape of the device to distinguish rectangular and round displays.

How frequently the output device can modify the appearance of content. Added in Media Queries Level 4.

Combination of brightness, contrast ratio, and color depth that are supported by the video plane of user agent and the output device. Added in Media Queries Level 5.

Width of the viewport including width of scrollbar.

Logical operators

The logical operators not , and , only , and or can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.

Used for combining multiple media features together into a single media query, requiring each chained feature to return true for the query to be true . It is also used for joining media features with media types.

Used to negate a media query, returning true if the query would otherwise return false . If present in a comma-separated list of queries, it will only negate the specific query to which it is applied.

Note: In Level 3, the not keyword can't be used to negate an individual media feature expression, only an entire media query.

Applies a style only if an entire query matches. It is useful for preventing older browsers from applying selected styles. When not using only , older browsers would interpret the query screen and (max-width: 500px) as screen , ignoring the remainder of the query, and applying its styles on all screens. If you use the only operator, you must also specify a media type.

Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others Thus, if any of the queries in a list is true , the entire media statement returns true . In other words, lists behave like a logical or operator.

Equivalent to the , operator. Added in Media Queries Level 4.

User agent client hints

Some media queries have corresponding user agent client hints . These are HTTP headers that request content that is pre-optimized for the particular media requirement. They include Sec-CH-Prefers-Color-Scheme and Sec-CH-Prefers-Reduced-Motion .

Accessibility

To best accommodate people who adjust a site's text size, use em s when you need a <length> for your media queries .

Both em and px are valid units, but em works better if the user changes the browser text size.

Also consider media queries or HTTP user agent client hints to improve the user's experience. For example, the media query prefers-reduced-motion or the equivalent HTTP header Sec-CH-Prefers-Reduced-Motion ) can be used to minimize the amount of animation or motion used based on user preferences.

Because media queries provide insights into the capabilities—and by extension, the features and design—of the device the user is working with, there is the potential that they could be abused to construct a "fingerprint" which identifies the device, or at least categorizes it to some degree of detail that may be undesirable to users.

Because of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer. A browser might also offer additional measures in this area; for example, if Firefox's "Resist Fingerprinting" setting is enabled, many media queries report default values rather than values representing the actual device state.

Formal syntax

Testing for print and screen media types.

Introduced in Media Queries Level 4 is a new range syntax that allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples:

For more examples, please see Using media queries .

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• CSS media queries module
• Using media queries
• In JavaScript, @media can be accessed via the CSS object model interface CSSMediaRule .
• Extended Mozilla media features
• Extended WebKit media features

[SOLVED] iphone @media queries not working in (mobile-)Safari

I’m using the following media queries, and they work fine in the Chrome iPhone8 & responsive modes in DevTools.

But I just tested on Safari and the ios simulator and it fails.

Here’s a stackblitz

https://angular-ionic4-test-udtdf4.stackblitz.io

[solved] use max-width instead of max-device-width

see this answer: Safari Responsive Design Mode CSS media query ‘device’ not applied

• How to Micro-Optimize Your CSS
• CSS Text Decoration (and Related) Properties
• Awesome New CSS3 Selectors
• Understanding CSS3 and CSS2.1 Border Properties
• Better Image Preloading with CSS3

Target iPhone and iPad with CSS3 Media Queries

When designing a website, it’s always a good idea to test on as many different platforms, devices, and browsers as possible. These days, pimping your websites for the iPhone and iPad is an important step in the design process. Especially on the iPad, sites tend to look about 20% cooler than on desktop browsers, so you definitely want to take the time to fine-tune the details. And when dealing with iDevices, it’s often necessary to deliver some custom CSS to make everything just right.

Want to apply CSS styles to the iPad and iPhone? Here is the plug-n-play, copy-&-paste code that actually works.

As you may have heard , I’ve been super-busy behind the scenes building an Angry-Birds fan site, of all things. The site is looking great so far, but needed some tweaking to appear slick on the iPad and iPhone. After testing a number of different solutions, here is what I found that actually works ..

Target iPad & iPhone with separate CSS files

If you want to apply styles to the iPad and iPhone using external stylesheets, put this code in your <head> :

For this to work, you need to edit the path to each of the stylesheets. Then add some styles exclusively for the iPhone ( first <link> ) or the iPad ( second <link> ).

How does it work? Well, we first exclude IE by wrapping the links in a simple conditional comment . Then we’re using some CSS 3 media queries to target each device specifically. Safari on the iPhone responds to a max-device-width of 480px , and Safari on the iPad seems to respond best when both min-device-width and max-device-width are used in the query. Together, these media queries apply styles in either portrait or landscape orientation.

Target iPad & iPhone from within your existing stylesheet

Using external stylesheets to target iStuff works great, but the extra HTTP requests can reduce performance. To avoid this, we can apply iPad/iPhone-specific CSS using our existing stylesheet. You know, the same one that we’re using for Firefox, Opera, and other desktop browsers. After much experimentation and testing, here is what I found that works :

Just place that code into your stylesheet and change the declaration blocks to something more useful. Unfortunately, combining these two media queries won’t work :

As always, comments, questions, and suggestions are welcome! :)

37 responses to “Target iPhone and iPad with CSS3 Media Queries”

Very cool, thanks so much for sharing this code. Is this to say that we could simply include these styles in our existing WordPress theme stylesheet and our sites would be formatted for iPhone or iPad?

Would doing this exclude the need for plugins like WP Touch?

Jeff wouldn’t it be easier to check the user-agent string for iPhone/iPad? Then you can spoof your browser to do testing as not everyone has an iPhone/iPad to test on.

@Adam: Yes, the media queries could be used in your theme stylesheet to apply any styles to iPad/iPhone Safari browser. With CSS, we can change site appearance, but not structure. You can customize things using CSS , but for major structural overhaul, it’s way easier to go with WPtouch (or whatever).

@Skye: For development sites, sure – by any means necessary. But for production sites, delivering targeted styles in existing CSS files is going to save HTTP requests and help optimize performance. So once you finalize your iCSS, just add it to your main stylesheet using the code above.

I’ve created an Apple Stylesheet with iPhone specifc styling:

http://pastebin.com/Y2BsXig4

It’s clear and simple and targets older versions of Apple products.

How does “ only screen and (min-device-width: 768px) and (max-device-width: 1024px) ” only target the iPad? Won’t it target any device whose screen width is between 768px and 1024px (including normal browser windows)?

@Jeff: Thanks for the clarification and the additional link, it’s most appreciated.

For the last code example to work could you just miss out the second ‘@media’? So it reads ‘@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 480px) { }’? I have not used css3 media queries before, and may have misread this page http://www.w3.org/TR/css3-mediaqueries/ (example VI).

@Deano: Thank you for sharing! :)

@Daniel15: Never said it “only” targets anything – of course these media queries will also match any device that meets the criteria. For the iPad, we’re getting pretty specific with the “ and ” qualifier, so the matching device (not browser) would have to have the same screen dimensions as the iPad. I’m sure there are such devices, but I have yet to hear of one.

@Adam: Anytime – happy to help! :)

@Andrew: Perhaps so.. I will test this tonight and update the post if positive results are achieved. Thanks for pointing it out.

great i never thought media attribute would be so helpful to filter the browser before

The media query for iPhone is valid for iPhone Geneartions 1-3, but will it work with Generation4 handsets, too? AFAIK the retina display has a physical resolution of 960×640, but how does it behave concerning the media queries?

At the moment I don’t have access to a Gen4 Device, any body out there to report on this issue?

Kind regards, mtness.

To be clear, can I just drop the code you’ve mentioned into my existing stylesheet and be good-to-go?

You said something about useful declarations but I didn’t really get that…. :-(

@Avi D: yep just drop it in

Here’s the latest version of my sheet that is a great starting point:

http://pastebin.com/VYMeKqtV

• more »
• mod_rewrite
• optimization
• Online Dev Tools
• About Perishable Press
• Perishable Press Archives
• Contact Perishable Press
• Welcome to Dungeon!
• Wizard’s SQL Recipes (eBook)
• The Tao of WordPress (eBook)
• Digging Into WordPress (eBook)
• Develop WordPress themes (eBook)
• WordPress on shared hosting (video tutorials)
• .htaccess made easy
• Code Snippets
• Blackhole Pro

CSS Tutorial

Css advanced, css responsive, css examples, css references, responsive web design - media queries, what is a media query.

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

If the browser window is 600px or smaller, the background color will be lightblue:

Add a Breakpoint

Earlier in this tutorial we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen.

Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.

Use a media query to add a breakpoint at 768px:

When the screen (browser window) gets smaller than 768px, each column should have a width of 100%:

Advertisement

Always Design for Mobile First

Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).

This means that we must make some changes in our CSS.

Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First:

Another Breakpoint

You can add as many breakpoints as you like.

We will also insert a breakpoint between tablets and mobile phones.

We do this by adding one more media query (at 600px), and a set of new classes for devices larger than 600px (but smaller than 768px):

Note that the two sets of classes are almost identical, the only difference is the name ( col- and col-s- ):

It might seem odd that we have two sets of identical classes, but it gives us the opportunity in HTML , to decide what will happen with the columns at each breakpoint:

HTML Example

For desktop:

The first and the third section will both span 3 columns each. The middle section will span 6 columns.

For tablets:

The first section will span 3 columns, the second will span 9, and the third section will be displayed below the first two sections, and it will span 12 columns:

Typical Device Breakpoints

There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups:

Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending on the orientation of the browser.

You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation:

The web page will have a lightblue background if the orientation is in landscape mode:

Hide Elements With Media Queries

Another common use of media queries, is to hide elements on different screen sizes:

Change Font Size With Media Queries

You can also use media queries to change the font size of an element on different screen sizes:

Variable Font Size.

Css @media reference.

For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference .

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

The New CSS Media Query Range Syntax

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

We rely on CSS Media Queries for selecting and styling elements based on a targeted condition. That condition can be all kinds of things but typically fall into two camps: (1) the type of media that’s being used, and (2) a specific feature of the browser, device, or even the user’s environment.

So, say we want to apply certain CSS styling to a printed document:

The fact that we can apply styles at a certain viewport width has made CSS Media Queries a core ingredient of responsive web design since Ethan Marcotte coined the term . If the browser’s viewport width is a certain size, then apply a set of style rules, which allows us to design elements that respond to the size of the browser.

Notice the and in there? That’s an operator that allows us to combine statements. In that example, we combined a condition that the media type is a screen and that it’s min-width feature is set to 30em (or above). We can do the same thing to target a range of viewport sizes:

Now those styles apply to an explicit range of viewport widths rather than a single width!

But the Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators — things like < , > , and = — that make more sense syntactically while writing less code.

Let’s dig into how that works.

New comparison operators

That last example is a good illustration of how we’ve sort of “faked” ranges by combining conditions using the and operator. The big change in the Media Queries Level 4 specification is that we have new operators that compare values rather than combining them:

• < evaluates if a value is less than another value
• > evaluates if a value is greater than another value
• = evaluates if a value is equal to another value
• <= evaluates if a value is less than or equal t o another value
• >= evaluates if a value is greater than or equal t o another value

Here’s how we might’ve written a media query that applies styles if the browser is 600px wide or greater:

Here’s how it looks to write the same thing using a comparison operator:

Targeting a range of viewport widths

Often when we write CSS Media Queries, we’re creating what’s called a breakpoint — a condition where the design “breaks” and a set of styles are applied to fix it. A design can have a bunch of breakpoints! And they’re usually based on the viewport being between two widths: where the breakpoint starts and where the breakpoint ends.

Here’s how we’ve done that using the and operator to combine the two breakpoint values:

You start to get a good sense of how much shorter and easier it is to write a media query when we ditch the Boolean and operator in favor of the new range comparison syntax:

Much easier, right? And it’s clear exactly what this media query is doing.

Browser support

This improved media query syntax is still in its early days at the time of this writing and not as widely supported at the moment as the approach that combines min-width and max-width . We’re getting close, though! Safari is the only major holdout at this point, but there is an open ticket for it that you can follow.

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

Let’s look at an example.

Here’s a layout for that’s nicely suited for larger screens, like a desktop:

This layout has base styles that are common to all breakpoints. But as the screen gets narrower, we start to apply styles that are conditionally applied at different smaller breakpoints that are ideally suited for tablets all the way down to mobile phones:

To see what’s happening, here’s a how the layout responds between the two smaller breakpoints. The hidden nav list getting displayed as well as title in the main gets increased in font-size .

That change is triggered when the viewport’s changes go from matching one media’s conditions to another:

We’ve combined a few of the concepts we’ve covered! We’re targeting devices with a screen media type, evaluating whether the viewport width is greater than or equal to a specific value using the new media feature range syntax, and combining the two conditions with the and operator.

OK, so that’s great for mobile devices below 768px and for other devices equal to or greater than 768px . But what about that desktop layout… how do we get there?

As far as the layout goes:

• The main element becomes a 12-column grid.
• A button is displayed on the image.
• The size of the .title element’s font increases and overlaps the image.

Assuming we’ve done our homework and determined exactly where those changes should take place, we can apply those styles when the viewport matches the width condition for that breakpoint. We’re going to say that breakpoint is at 1000px :

Have a play with it:

Why the new syntax is easier to understand

The bottom line: it’s easier to distinguish a comparison operator (e.g. width >= 320px ) than it is to tell the difference between min-width and max-width using the and operator. By removing the nuance between min- and max- , we have one single width parameter to work with and the operators tell us the rest.

Beyond the visual differences of those syntaxes, they are also doing slightly different things. Using min- and max- is equivalent to using mathematical comparison operators:

• max-width is equivalent to the <= operator (e.g. (max-width: 320px) is the same as (width <= 320px) ).
• min-width is equivalent to the >= operator (e.g. (min-width: 320px) is the same as (width >= 320px) ).

Notice that neither is the equivalent of the > or < operators.

Let’s pull an example straight from the Media Queries Level 4 specification where we define different styles based on a breakpoint at 320px in the viewport width using min-width and max-width :

Both media queries match a condition when the viewport width is equal to 320px . That’s not exactly what we want. We want either one of those conditions rather than both at the same time. To avoid that implicit changes, we might add a pixel to the query based on min-width :

While this ensures that the two sets of styles don’t apply simultaneously when the viewport width is 320px , any viewport width that fall between 320px and 321px will result in a super small zone where none of the styles in either query are applied — a weird “flash of unstyled content” situation.

One solution is to increase the second comparison scale value (numbers after the decimal point) to 320.01px :

But that’s getting silly and overly complicated. That’s why the new media feature range syntax is a more appropriate approach:

Wrapping up

Phew, we covered a lot of ground on the new syntax for targeting viewport width ranges in CSS Media Queries. Now that the Media Queries Level 4 specification has introduced the syntax and it’s been adopted in Firefox and Chromium browsers, we’re getting close to being able to use the new comparison operators and combining them with other range media features besides width , like height and aspect-ratio

And that’s just one of the newer features that the Level 4 specification introduced, alongside a bunch of queries we can make based on user preferences . It doesn’t end there! Check out the Complete Guide to CSS Media Queries for a sneak peek of what might be included in Media Queries Level 5 .

Great roundup! I’m very curious about what the practical use cases will be for the = operator. I struggle to think of any outside of silly Easter eggs and inside jokes.

Ha! So true, right?! I can already imagine all kinds of fun Easter eggs at a specific/exact breakpoint.

I can see folks mistakenly reaching for it to make device-specific layouts like we did in the 320px / 768px days. But I’m also curious if others have practical use cases in mind!

I’d imagine the functionality for handling = was just a necessity for handling >= and <= and so it became its own operator without a larger practical use for designers and developers.

But you are absolutely correct in expecting people to use this to make fun experiences on the quirky feature.

Well, there is no new functionality regarding this, so any potential jokes could be already made with the combination of min-width and max-width

This seems like a nice shorthand but it makes me think of a Safari bug from awhile back where media queries needed to be off by 0.2px. As a result, frameworks like bootstrap generated media queries like @media (max-width: 767.98px) . Do we know if we need to keep doing this? Because if we do, we might not be able to get away with this shorthand yet.

Answering my own question, people are reporting they’re unable to replicate this bug any more https://bugs.webkit.org/show_bug.cgi?id=178261

I love your all logical tricks . . . . . . . …Amazing ❤

Thank you for sharing! This new syntax makes it so much easier to understand MQ. Though, there’s no need to write screen and in MQ unless you’re explicitly writing styles for screen only. It’s almost never the case. I’d suggest updating the code snippets, so this won’t be spread further.

Its just that … JS doesn’t “support” a <= b <= c (in the way python or this new range query are parsing this). So a bit confusing. But surely much much better than min/max thing…

Seems like the feature got shipped for Safari aswell ( https://bugs.webkit.org/show_bug.cgi?id=180234#c4 ), good stuff!

What is the point? Once you set up your mixins you do not need it anymore. Again, trying to fix something that is not broken.

I would prefer a range style like swift does it, but it’s too late to change this now I guess. It’s so ugly to put width in the middle..

@media (width ~= 400px…1000px)

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

WebKit Features in Safari 18.0

Sep 16, 2024

by Jen Simmons

New in Safari 18

Web apps for mac, spatial web, managed media source, web inspector, safari extensions, deprecations, bug fixes and more, updating to safari 18.0.

Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolved issues land in WebKit, the rendering engine driving Safari.

Distraction Control

Distraction Control lets you hide distracting items as you browse the web, such as sign-in banners, cookie preference popups, newsletter signup overlays, and more, in Safari for iOS 18, iPadOS 18 and macOS Sequoia.

We always recommend using semantic HTML when creating a website, including <video> , <main> , <article> and other elements that describe content. Doing so helps ensure both Safari Reader and Safari Viewer work best for the users of your website.

iPhone Mirroring and remote inspection

With iPhone Mirroring on macOS Sequoia, you can use your iPhone from your Mac. Combine it with remote inspection from Safari, and now it’s easier than ever to test and debug websites on iOS using Web Inspector .

Get set up for remote inspection by first ensuring you have Safari’s developer tools enabled on your Mac (if you can see the Develop menu in Safari, you’ve already done this step). Next, enable Web Inspector on your iPhone at Settings > Apps > Safari > Advanced > Web Inspector. Then, you’ll need to connect the device to your Mac using a cable to grant permission. Once plugged in, your device will appear in the Develop menu in Safari. Finally, to enable wireless debugging, go to Safari on macOS > Develop > [your device] > Connect via Network.

Now you can use Web Inspector to wirelessly debug websites running on iPhone anytime. And with iPhone Mirroring, you don’t even have to pull out your phone. Everything is on your Mac’s screen.

Learn more about remote inspection by reading Inspecting iOS and iPadOS , or by watching Rediscover Safari developer features from WWDC. Learn more about iPhone Mirroring 1 on apple.com .

Last year , we added support for web apps in macOS Sonoma. You can add any website to your dock — whether or not it was built with a Manifest file, Service Worker, or other technology to customize the web app experience. Go to the site in Safari, then File > Add to Dock… where you can customize the icon, change the name, and even adjust the URL. Then, just click on the web app icon in your Dock, and the website will open as a stand-alone app.

This year brings two improvements to web apps on Mac.

Opening links

macOS Sequoia adds support for opening links directly in web apps. Now, when a user clicks a link, if it matches the scope of a web app, that link will open in the web app instead of their default web browser. For example, imagine you have added MDN Web Docs to your Dock. Then a colleague sends you a link to an MDN page in Messages, Mail, Slack, Discord, IRC, or any non-browser application on your Mac. Now when you click on that link, it will open in the MDN Web Docs web app instead of your default browser.

Clicking a link within a browser will maintain the current behavior. This feature only affects links opened elsewhere. (When a user is in Safari, clicking on a link that matches the scope of a web app that is added to Dock, they will see an “Open in web app” banner, unless they have previously dismissed the banner.)

By default, this behavior applies when the link matches the host of the web page used to create the web app. As a developer, you can refine this experience by defining the range of URLs that should open in the web app with the scope member in the web app manifest .

Extension support

Now users can personalize web apps on Mac with Safari Web Extensions and Content Blockers. Navigate to the web app’s Settings menu to access all the installed Content Blockers and Web Extensions. Any enabled in Safari will be on by default in the web app. Each web app is uniquely customizable, just like Safari profiles.

View Transitions

WebKit added support for the View Transitions API in Safari 18. It provides an optimized browser API to animate elements from one state to another. Safari supports the CSS View Transitions Module Level 1 specification that adds new CSS properties and pseudo-elements for defining transition animations, along with a new browser API to start transition animations and react to different transition states. It works by capturing the current (old) state of the page and applying an animated transition to the new state. By default, the browser applies a cross-fade between the states.

Call the document.startViewTransition() method to initiate the capture. You can pass a callback function as the first argument to make DOM state changes between the old and new captures. The method returns a ViewTransition object which contains promises that can be used to track when the view transition starts or ends.

Once the states are captured, a pseudo-element tree is built which can be targeted with CSS, allowing you to modify the CSS animations used for the transitions. The animations out of the old page state and into the new page state can be modified via the ::view-transition-new(*) and ::view-transition-old(*) selectors. You can also ask the browser to independently track state changes for a specific element by naming it with the CSS view-transition-name property. You can then use the pseudo-elements to customize animations for it.

The :active-view-transition pseudo-class becomes active on the root element when a view transition is running.

The example below demonstrates state management with tabbed navigation. Each tab view has a custom transition animation out and a subtly different animation in, while the tabs themselves rely on the default page transition.

Style Queries

WebKit for Safari 18.0 adds support for Style Queries when testing CSS Custom Properties. Similar to how developers can use Sass mixins, Style Queries can be used to define a set of reusable styles that get applied as a group.

Here, if the --background custom property is set to black, then certain styles will be applied — in this case to make the headline and paragraph text color white.

Don’t forget to pay attention the HTML structure. By default, Style Queries reference the styles on the direct parent element. You can create a different reference through the use of Container Query names.

currentcolor and system color keywords in Relative Color Syntax

Support for Relative Color Syntax shipped in Safari 16.4 . It lets you define colors in a more dynamic fashion, creating a new color from an existing color. The value lch(from var(--color) calc(L / 2) C H) for instance uses the lch color space to take the variable --color and calculate a new color that’s half its lightness, calc(L / 2) .

Now in Safari 18.0, the first browser to ship support, you can reference the currentcolor or a system color keyword as you define the new color. For example, this code will set the background color to be the same color as the text color, only 4 times lighter, as calculated in the oklch color space.

Being able to reference system color keywords opens up another world of options. System colors are like variables that represent the default colors established by the OS, browser, or user — defaults that change depending on whether the system is set to light mode, dark mode, high contrast mode, etc. For example, canvas represents the current default background color of the HTML page, while fieldtext matches the color of text inside form fields. Find the full list of system colors in CSS Color level 4 .

Relative Color Syntax lets you define dynamic connections between colors in your CSS, lessening the need to control color through variables in a tightly-regimented design system. Learn more about Relative Color Syntax by watching this portion of What’s new in CSS from WWDC23.

Translucent accent colors

Partially transparent colors in accent-color are now blended on top of the Canvas system color to match the latest updates to the web standard. This means that any of the many ways to define colors using an alpha channel will now work as expected when used to define an accent color for a form control.

Animating display

WebKit for Safari 18.0 adds support for transition animation of the display property.

Many developers are excited to use @starting-style along with transition-behavior and display: none interpolation. WebKit for Safari 17.4 added general support for transition-behavior , including transition-behavior: allow-discrete . WebKit for Safari 17.5 added support for @starting-style , letting you define starting values for transitioning an element as it’s created (or re-created). Now in WebKit for Safari 18.0, you can use these features together to transition the display property.

Backdrop Filter

Originally shipped in Safari 9.0, backdrop filter provides a way to apply graphics effects to the content behind a particular element. You can apply backdrop-filter to a headline, for example, and everything behind the headline will be blurred, or have decreased saturation, or increased contrast. Any of the filter functions from SVG can be used — blur() , brightness() , contrast() , drop-shadow() , grayscale() , hue-rotate() , invert() , opacity() , saturate() , and sepia() .

For many years, backdrop filter only worked in Safari. It was available when you prefixed the property with -webkit-backdrop-filter . Now, starting in Safari 18.0, you don’t need the prefix. We also improved our implementation, fixing bugs and boosting interoperability.

This demo shows eight different filters and what you might do with each one alone. You can, of course, combine filters to create even more interesting results. With backdrop filter supported in Safari since 2015, Edge since 2018, Chrome since 2019, Samsung Internet since 2020, and Firefox since 2022, this is a great time to consider the kind of graphic design possibilities it enables.

Content visibility

WebKit for Safari 18.0 adds support for content-visibility . This property controls whether or not an element renders its contents in a fashion that’s useful for making performance optimizations. It lets you communicate to the browser that certain portions of the page will likely be initially offscreen, and suggest they be omitted from layout and rendering. This can make the page load faster.

WebKit for Safari 18.0 adds parsing support for the custom value for the prefers-contrast media query. (It does not return “true” on Apple platforms, since there is no forced-colors mode in iOS, iPadOS, macOS or visionOS.)

Safari 18.0 for visionOS 2 adds support for immersive-vr sessions with WebXR . Now you can create fully immersive experiences for people using Apple Vision Pro and deliver them through the web. WebXR scenes are displayed using hardware-accelerated graphics driven by WebGL .

Safari for visionOS 2 supports the new WebXR transient-pointer input mode. It lets you make the most of natural input on visionOS, and allow your users to interact with a look and a pinch.

If you want to animate a 3D model of the user’s hands, Safari for visionOS 2 also includes support for WebXR hand tracking . To ensure privacy, permission to allow hand tracking will be requested from users at the start of their WebXR session.

Learn all about WebXR on visionOS 2 by watching Build immersive web experiences with WebXR from WWDC. Learn more about transient-pointer input mode by reading Introducing natural input for WebXR in Apple Vision Pro . And learn all about how to use Safari’s developer tools on Mac to inspect and debug in Apple Vision Pro by reading Try out your website in the spatial web .

Spatial photos and panoramas

One of the amazing experiences you can have on Apple Vision Pro is looking at spatial photos and panoramas. The web is a great place to share these photos with others.

When you open the Photos app in visionOS, you see your library of photos. When you tap an image, it appears alone in a floating frame in front of you. Spatial photos appear at just the right height and viewing angle to make it feel like you’ve gone back to a moment in time. A second tap of the UI breaks a spatial photo out of its frame, becoming even more immersive. Similarly, a panorama floats in a frame on first tap. Then on second tap of the UI, it expands to wrap all around you, creating a fully immersive experience.

Now in Safari 18.0 for visionOS 2, you can use the JavaScript Fullscreen API to create a similar experience on the web. You can embed the photo in a web page, and provide the ability to tap. The photo will pop into a floating frame as the Safari window disappears. Then when the user taps on the spatial photo or panorama UI that visionOS provides, the photo will further expand to create a more immersive experience. When they exit the image, the Safari window will return.

Let’s walk through how to support experiencing a spatial photo or panorama on the web using Fullscreen API. First, include the image on your web page using any of the techniques used for years. Here, we can embed a flattened panoramic photo into the web page using simple HTML.

Then using JavaScript, we’ll trigger .requestFullscreen() on tap. Perhaps like this.

You could, of course, create your own UI for the user to tap, rather than making the entire photo the tap target.

Spatial images work just the same, although it’s likely we want to provide fallbacks for browsers that do not support HEIC files . We can do so with the picture element.

Spatial images are stereoscopic, with both a left and right channel. In Safari, when the image is embedded in the web page, the browser will show the left channel. And there’s no need to worry about providing a fallback of any sort for Safari on macOS, iOS, or iPadOS — the stereoscopic HEIC file works great.

This technique will also cause images to go fullscreen in any browser that supports Fullscreen API. Learn more about adding panorama and spatial photos to your websites by watching Optimize for the spatial web from WWDC.

Shaping interaction regions on visionOS

As a web developer, you’re very familiar with how link styling works on the web. For decades you’ve been able to use CSS to style text-decoration , color and more for :link , :hover , :active , and :visited states. You’ve also been able to adjust the size of the invisible tap target through use of padding.

Apple Vision Pro adds a new dimension to how links work — tap targets are visible on visionOS. Anytime a user looks at an interactive element, it’s highlighted to let them know that it can be tapped. And you as a designer or developer can intentionally design how an interaction region looks. You may want to add padding, for instance, or even a rounded corner to the otherwise invisible box.

Now in Safari in visionOS 2 , when you use CSS clip-path to change the shape of tappable area of a link, the visible interaction region will change shape as well. Interactive UI elements built with SVG and cursor: pointer will also be highlighted with the proper shape. Learn more by watching Optimize for the spatial web from WWDC.

Video on visionOS

Safari for visionOS 2 adds support for docking fullscreen videos into the current Environment . Anytime a user is watching a video fullscreen, they can tap the mountain symbol to enter an immersive experience. Turning the Digital Crown adjusts the immersion.

Writing Suggestions

At last year’s WWDC, Apple unveiled inline predictive text on iOS, iPadOS, macOS and more. It helps users input text faster by predicting what they might be typing and finishing the word, phrase or even a whole sentence when the user taps the space bar. Now, WebKit for Safari 18.0 on iOS, iPadOS, visionOS, macOS Sequoia and macOS Sonoma brings inline predictive text to the web.

While inline predictive text makes for a fantastic, personalized user experience, there might be specific situations on the web where it’s better to not have predictions. WebKit for Safari 18.0 on iOS, iPadOS, visionOS, macOS Sequoia and macOS Sonoma gives web developers the opportunity to disable inline predictions through the writingsuggestions attribute. By default, writing suggestions is set to true. You can turn off the capability by including the writingsuggestions="false" attribute on any type of text input field.

WebKit for Safari on iOS 18 adds haptic feedback for <input type=checkbox switch> . This means, now when a user taps a switch control on iPhone, a single tap is felt — just like how toggling a switch feels in Settings app on iOS. Try this demo to see what it’s like.

Date and time inputs

WebKit for Safari 18.0 on macOS improves accessibility support for date and time input field types. Now <input type="date"> , <input type="datetime-local"> , and <input type="time"> elements work properly with VoiceOver.

Usually elements have the labels they need, but sometimes there is no text label for a particular button or UI. In this situation, ARIA can be used to provide an accessible label. The aria-label attribute provides names of labels while aria-roledescription provides the description for the role of an element.

On very rare occasions, you may need to override aria-label or aria-roledescription to provide different names or descriptions specifically for braille. The aria-braillelabel and aria-brailleroledescription attributes provide such an ability. They exist to solve very specific needs, including educational contexts where the site needs to render the specific braille table dot pattern. If you do use braille-related ARIA attributes, be sure to test them using a braille reader. If in doubt, relying on the accessible name from content or aria-label / aria-roledescription is almost always the better user experience . WebKit has supported these ARIA attributes for years.

Now, WebKit for Safari 18.0 adds support for the ariaBrailleLabel and ariaBrailleRoleDescription element reflection properties. These make it possible to get and set the aria-braillelabel and aria-brailleroledescription ARIA attributes on DOM elements directly via JavaScript APIs, rather than by using setAttribute and getAttribute .

WebKit for Safari 18.0 adds support for Unicode 15.1.0 characters in RegExp. Unicode 15.1 added 627 characters, bringing the total of characters to 149,813. Now, these new characters can be used in regular expressions.

WebKit for Safari 18.0 also adds support for the v flag with RegExp.prototype[Symbol.matchAll] . providing more powerful ways to match Unicode characters, as specified in the ECMAScript 2024 standard.

For example, you can now specify to only match on Latin characters, while avoiding matching on Cyrillic script characters.

Or split a string matching on Emojis.

WebKit for Safari 18.0 adds support for URL.parse() , a way to parse URLs which returns null rather than an exception when parsing fails.

WebKit for Safari 18.0 expands Declarative Shadow tree support by adding the shadowRootDelegatesFocus and shadowRootClonable IDL attributes to the <template> element. It also adds the shadowRootSerializable attribute and shadowRootSerializable IDL attribute to the <template> element, enabling those using Declarative Shadow roots to opt into making them serializable. Serializing can be done through the new getHTML() method that has been added at the same time.

WebKit for Safari 18.0 adds support for PopStateEvent ’s hasUAVisualTransition , indicating whether the user agent has a visual transition in place for the fragment navigation.

WebKit for Safari 18.0 adds support for subresource integrity in imported module scripts, which gives cryptographic assurances about the integrity of contents of externally-hosted module scripts.

WebKit for Safari 18.0 adds support for the bytes() method to the Request, Response , Blob , and PushMessageData objects. This replaces the need for web developers to call arrayBuffer() , which can be difficult to use, and wraps the result in a Uint8Array . Calling bytes() is now the recommended way going forward when you need to access the underlying bytes of the data these objects represent.

WebKit for Safari 18.0 adds support for feature detecting text fragments by exposing document.fragmentDirective . Note that the returned object (a FragmentDirective ) doesn’t provide any functionality, but it’s helpful if you need to know if Fragment Directives are supported by the browser.

WebKit for Safari 18.0 adds support for the willReadFrequently context attribute for the getContext() method. It indicates whether or not a lot of read-back operations are planned. It forces the use of a software accelerated 2D or offscreen canvas, instead of hardware accelerated. This can improve performance when calling getImageData() frequently.

WebKit for Safari 18.0 extends 2D canvas support for currentcolor . It can now be used inside color-mix() or Relative Color Syntax. Here currentcolor will default to the computed color property value on the canvas element.

WebKit for Safari 18.0 adds Workers support for both Managed Media Source (MMS) and Media Source Extensions ( MSE ). This can be especially helpful on complex websites that want to ensure continuous and smooth video playback even when other site activity (such as live commenting) causes a very busy main thread. You can see the performance difference in this demo .

WebKit for Safari 18.0 adds support for the WebRTC HEVC RFC 7789 RTP Payload Format. Previously, the WebRTC HEVC used generic packetization instead of RFC 7789 packetization. This payload format provides a new option for improving videoconferencing, video streaming, and delivering high-bitrate movies and TV shows.

WebKit for Safari 18.0 adds support for MediaStreamTrack processing in a dedicated worker. And it adds support for missing WebRTC stats.

WebKit for Safari 18.0 adds support for secure HTTPS for all images, video, and audio by upgrading passive subresource requests in mixed content settings. This means that if some files for a website are served using HTTPS and some are served using HTTP (known as “mixed content”), all images and media will now be auto-upgraded to HTTPS, in adherence with Mixed Content Level 2 .

WebKit for Safari 18.0 adds support for six new WebGL extensions:

• EXT_texture_mirror_clamp_to_edge
• WEBGL_render_shared_exponent
• WEBGL_stencil_texturing
• EXT_render_snorm
• OES_sample_variables
• OES_shader_multisample_interpolation

WebKit for Safari 18.0 adds support for fuzzy search code completion in the Web Inspector’s CSS source editor.

Two years ago at WWDC22, we announced support for passkeys — a groundbreaking industry-standard way to login to websites and app services. Passkeys provide people with an extremely easy user experience, while delivering a profound increase in security. To learn more, watch Meet Passkeys or read Supporting passkeys .

WebKit for Safari 18.0 adds support for three new features as we continue to improve passkeys. First, Safari 18.0 adds support for using mediation=conditional for web authentication credential creation. This allows websites to automatically upgrade existing password-based accounts to use passkeys. Learn more by watching Streamline sign-in with passkey upgrades and credential managers from WWDC.

Second, WebKit for Safari 18.0 adds support for using passkeys across related origins. This lets websites use the same passkey across a limited number of domains which share a credential backend.

And third, WebKit for Safari 18.0 adds support for the WebAuthn prf extension. It allows for retrieving a symmetric key from a passkey to use for the encryption of user data.

Safari 18.0 also adds support for Mobile Device Management of extension enabled state, private browsing state, and website access on managed devices. This means schools and businesses that manage iOS, iPadOS, or macOS devices can now include the configuration of Safari App Extensions, Content Blockers, and Web Extensions in their management.

WebKit for Safari 18.0 adds support for funds transfer via Apple Pay.

While it’s rare to deprecate older technology from the web, there are occasions when it makes sense. We’ve been busy removing -webkit prefixed properties that were never standardized, aging media formats that were never supported in other browsers, and more. This helps align browser engines, improve interoperability, and prevent compatibility problems by reducing the possibility that a website depends on something that’s not a web standard.

WebKit for Safari 18.0 removes support for OffscreenCanvasRenderingContext2D ’s commit() method.

WebKit for Safari 18.0 deprecates support for a number of rarely used -webkit prefixed CSS pseudo-classes and properties — and even one -khtml prefixed property.

• -webkit-alt and alt properties
• :-webkit-animating-full-screen-transition pseudo-class
• :-webkit-full-screen-ancestor pseudo-class
• :-webkit-full-screen-controls-hidden pseudo-class
• :-webkit-full-page-media pseudo-class
• :-webkit-full-screen-document pseudo-class
• :-khtml-drag pseudo-class

WebKit for Safari 18.0 also deprecates support for the resize: auto rule. Support for the resize property remains, just as it’s been since Safari 4. The values Safari continues to support include : none , both , horizontal , vertical , block , inline , plus the global values. Early versions of CSS Basic User Interface Module Level 3 defined auto , but it was later written out of the web standard.

WebKit for Safari 18.0 also deprecates support for non-standardize WEBKIT_KEYFRAMES_RULE and WEBKIT_KEYFRAME_RULE API in CSSRule .

WebKit for Safari 18.0 removes support for the JPEG2000 image format. Safari was the only browser to ever provide support.

If you’ve been serving JPEG2000 files using best practices, then your site is using the picture element to offer multiple file format options to every browser. Safari 18.0 will simply no longer choose JPEG2000, and instead use a file compressed in JPEG XL, AVIF, WebP, HEIC, JPG/JPEG, PNG, or Gif — choosing the file that’s best for each user. Only one image will be downloaded when you use <picture> , and the browser does all the heavy lifting.

We have noticed that some Content Deliver Networks (CDN) use User Agent sniffing to provide one file to each UA, offering only JPEG2000 images to Safari — especially on iPhone and iPad. If you expect this might be happening with your site, we recommend testing in Safari 18.0 on both macOS Sequoia and iOS or iPadOS 18. If you see problems, contact your SaaS provider or change your image delivery settings to ensure your website provides fallback images using industry best practices.

If you notice a broken site, please file an issue at webcompat.com .

WebKit for Safari 18.0 removes [[VarNames]] from the global object to reflect changes in the web standard, a change that now allows this code to work:

WebKit for Safari 18.0 removes support for non-standard VTTRegion.prototype.track .

WebKit for Safari 18.0 removes the last bits of support for AppCache.

When AppCache first appeared in 2009, in Safari 4, it held a lot of promise as a tool for caching web pages for use offline. It was imagined as “HTML5 Application Cache” back when HTML itself was being further expanded to handle more use cases for web applications. A developer could create a simple cache manifest file with a list of files to be cached. Its simplicity looked elegant, but there was no mechanism for cache busting, and that made both developing a site and evolving the site over time quite frustrating. AppCache also had security challenges. So new web standards were created to replace it. Today, developers use Service Workers and Cache Storage instead.

WebKit deprecated AppCache with a warning to the Console in Safari 11.0. Then in 2021, we removed support for AppCache from Safari 15.0, with a few exceptions for third-party users of WKWebView . Now we are removing those exceptions. This change to WebKit will only affect the rare web content loaded in older third-party apps that have JavaScript code which relies on the existence of AppCache related interfaces.

WebKit for Safari 18.0 removes the SVGAnimateColorElement interface, as well as the non-standard getTransformToElement from SVGGraphicsElement .

WebKit for Safari 18.0 removes support for four non-standard Web APIs:

• KeyboardEvent.altGraphKey
• AES-CFB support from WebCrypto
• KeyboardEvent.prototype.keyLocation
• HashChangeEvent ’s non-standard initHashChangeEvent() method

Deprecated some legacy WebKit notification names including:

• WebViewDidBeginEditingNotification
• WebViewDidChangeNotification
• WebViewDidEndEditingNotification
• WebViewDidChangeTypingStyleNotification
• WebViewDidChangeSelectionNotification

In addition to all the new features, WebKit for Safari 18.0 includes work to polish existing features.

Accessibility

• Fixed role assignment for <header> inside <main> and sectioning elements.
• Fixed range input not firing an input event when incremented or decremented via accessibility APIs.
• Fixed setting aria-hidden on a slot not hiding the slot’s assigned nodes.
• Fixed VoiceOver to read hidden associated labels.
• Fixed comboboxes to expose their linked objects correctly.
• Fixed VoiceOver support for aria-activedescendant on macOS.
• Fixed time input accessibility by adding labels to subfields.
• Fixed aria-hidden=true to be ignored on the <body> and <html> elements.
• Fixed datetime values being exposed to assistive technologies in the wrong timezone.
• Fixed wrong datetime value being exposed to assistive technologies for datetime-local inputs.
• Fixed ignored CSS content property replacement text when it is an empty string.
• Fixed the computed role for these elements: dd , details , dt , em , hgroup , option , s , and strong .
• Fixed hidden elements targeted by aria-labelledby to expose their entire subtree text, not just their direct child text.
• Fixed accessible name computation for elements with visibility: visible inside a container with visibility: hidden .
• Fixed updating table accessibility text when its caption dynamically changes.
• Fixed updating aria-describedby text after the targeted element changes its subtree.
• Fixed the transition property to produce the shortest serialization.
• Fixed the animation property to produce the shortest serialization.
• Fixed arbitrary 8 digit limit on a line item’s total amount.

Authentication

• Fixed navigator.credentials.create() rejects with “NotAllowedError: Operation Failed” after a conditional UI request is aborted.
• Fixed setting the cancel flag once the cancel completes regardless of a subsequent request occurring.
• Fixed drawImage(detachedOffscreenCanvas) to throw an exception.
• Fixed OffscreenCanvas failing to render to the placeholder with nested workers.
• Fixed losing the contents layer of the placeholder canvas of OffscreenCanvas when switching off the tab.
• Fixed drawImage to not alter the input source or the destination rectangles.
• Fixed toggling the visibility on a canvas parent undoing the effect of clearRect() .
• Fixed the Canvas drawImage() API to throw an exception when the image is in broken state.
• Fixed a detached OffscreenCanvas to not transfer an ImageBuffer.
• Fixed treating the lack of an explicit “SameSite” attribute as “SameSite=Lax”.
• Fixed setting white-space to a non-default value dynamically on a whitespace or a new line.
• Fixed custom counter styles disclosure-open and disclosure-closed to point to the correct direction in right-to-left.
• Fixed backface-visibility to create a stacking context and containing block.
• Fixed getComputedStyle() to work with functional pseudo-elements like ::highlight() .
• Fixed: Aliased :-webkit-full-screen pseudo-class to :fullscreen .
• Fixed: Aliased :-webkit-any-link to :any-link and :matches() to :is() .
• Fixed getComputedStyle() pseudo-element parsing to support the full range of CSS syntax.
• Fixed @supports to correctly handle support for some -webkit prefixed pseudo-elements that were incorrectly treated as unsupported.
• Fixed updating media-query sensitive meta tags after style changes.
• Fixed changing color scheme to update gradients with system colors or light-dark() .
• Fixed incorrect inline element size when using font-variant-caps: all-small-caps with font-synthesis .
• Fixed :empty selector to work with animations.
• Fixed preserving whitespace when serializing custom properties.
• Fixed updating style correctly for non-inherited custom property mutations.
• Fixed element removed by parent to end up losing the last remembered size.
• Fixed an incorrect difference between implicit and explicit initial values for custom properties.
• Fixed the contrast of Menu and MenuText system colors.
• Fixed keeping the shorthand value for CSS gap as-is in serialized and computed values.
• Fixed the style adjuster for @starting-style incorrectly invoking with a null element.
• Fixed excluding -apple-pay-button from applying to any element that supports appearance: auto and is not a button.
• Fixed missing color interpretation methods added to CSS color specifications.
• Fixed hsl() and hsla() implementation to match the latest spec changes.
• Fixed the implementation of rgb() and rgba() to match the latest spec.
• Fixed the hwb() implementation to match the latest spec.
• Fixed the remaining color types to be synced with the latest spec changes.
• Fixed carrying analogous components forward when interpolating colors.
• Fixed applying the fill layer pattern for mask-mode .
• Fixed backdrop-filter: blur to render for elements not present when the page is loaded.
• Fixed: Improved large Grid performance.
• Fixed some CSS properties causing quotes to be reset.
• Fixed an issue where input method editing would sporadically drop the composition range.
• Fixed dictation UI no longer showing up when beginning dictation after focusing an empty text field. (FB14277296)
• Fixed displayed datalist dropdown to sync its options elements after a DOM update.
• Fixed input elements to use the [value] as the first fallback step base.
• Fixed <select multiple> scrollbars to match the used color scheme.
• Fixed updating the input value when selecting an <option> from a <datalist> element. (FB13688998)
• Fixed the value attribute not getting displayed in an input element with type="email" and the multiple attribute.
• Fixed the iOS animation for <input type=checkbox switch> .
• Fixed form controls drawing with an active appearance when the window is inactive.
• Fixed constructed FormData object to not include entries for the image button submitter by default.
• Fixed the properties of History to throw a SecurityError when not in a fully active Document.
• Fixed “about:blank” document.referrer initialization.
• Fixed parsing a self-closing SVG script element. It now successfully executes.
• Fixed RegExp.prototype.@@split to update the following legacy RegExp static properties: RegExp.input , RegExp.lastMatch , RegExp.lastParen , RegExp.leftContext , RegExp.rightContext , and RegExp.$1, ... RegExp.$9 .
• Fixed String.prototype.replace to not take the fast path if the pattern is RegExp Object and the lastIndex is not numeric.
• Fixed spec compliance for Async / Await, Generators, Async Functions, and Async Generators.
• Fixed async functions and generators to properly handle promises with throwing “constructor” getter.
• Fixed return in async generators to correctly await its value.
• Fixed Symbol.species getters to not share a single JS Function.
• Fixed throwing a RangeError if Set methods are called on an object with negative size property.
• Fixed eval() function from another realm to not cause a direct eval call.
• Fixed eval() call with ...spread syntaxt to be a direct call.
• Fixed try/catch to not intercept errors originated in [[Construct]] of derived class.
• direct eval() in a default value expression inside a rest parameter creates a variable in the environment of the function rather than the separate one of the parameters;
• a ReferenceError is thrown when accessing a binding, which is defined inside rest parameter, in eval() , or a closure created in a default value expression of a preceding parameter, but only if there is a var binding by the same name;
• a closure, created in the default value expression inside a rest parameter, is created in a different VariableEnvironment of the function than its counterparts in preceding parameters which causes the incorrect environment to be consulted when querying or modifying parameter names that are “shadowed” by var bindings.
• Fixed TypedArray sorting methods to have a special-case for camparator returning false .
• Fixed programming style for bitwise and in setExpectionPorts.
• Fixed emitReturn() to load this value from arrow function lexical environment prior to the TDZ check.
• Fixed NFKC normalization to work with Latin-1 characters.
• Fixed parsing of private names with Unicode start characters.
• Fixed instanceof to not get RHS prototype when LHS is primitive.
• Fixed bracket update expression to resolve property key at most once.
• Fixed bracket compound assignement to resolve the property key at most once.
• Fixed Object.groupBy and Map.groupBy to work for non-objects.
• Fixed Array.fromAsync to not call the Array constructor twice.
• Fixed inconsistent output of Function.prototype.toString for accessor properties.
• Fixed Set#symmetricDifference to call this.has in each iteration.
• Fixed logical assignment expressions to throw a syntax error when the left side of the assignment is a function call.
• Fixed throwing a syntax error for nested duplicate-named capturing groups in RegEx.
• Fixed ArrayBuffer and SharedArrayBuffer constructor to check length before creating an instance.
• Fixed Intl implementation to ensure canonicalizing “GMT” to “UTC” based on a spec update.
• Fixed RegEx lookbehinds differing from v8.
• Fixed fractionalDigits of Intl.DurationFormat to be treated as at most 9 digits if it is omitted.
• Fixed optimized TypedArrays giving incorrect results.
• Fixed Intl.DurationFormat for numeric and 2-digit .
• Fixed navigator.cookieEnabled to return false when cookies are blocked.
• Fixed MediaSession to determine the best size artwork to use when the sizes metadata attribute is provided. (FB9409169)
• Fixed video sound coming from another window after changing tabs in the Tab Bar in visionOS.
• Fixed playback for MSE videos on some sites.
• Fixed allowing a video’s currentTime to be further than the gap’s start time.
• Fixed broken audio playback for a WebM file with a Vorbis track.
• Fixed sampleRate and numberOfChannels to be required and non-zero in a valid AudioEncoderConfig.
• Fixed media elements appending the same media segment twice.
• Fixed an issue where Safari audio may be emitted from the wrong window in visionOS.
• Fixedrejecting valid NPT strings if ‘hours’ is defined using 1 digit.
• Fixed picture-in-picture when hiding the <video> element while in Viewer.
• Fixed the return button not working after the video is paused and played in picture-in-picture.
• Fixed upgrading inactive or passive subresource requests and fetches in would-be mixed security contexts to match standards.
• Fixed incorrect Sec-Fetch-Site value for navigation of a nested document.
• Fixed loading WebArchives with a non-persistent datastore.
• Fixed Timing-Allow-Origin to not apply to an HTTP 302 response.
• Fixed print buttons with a print action implementation.
• Fixed Open in Preview for a PDF with a space in its name.
• Fixed “Open with Preview” context menu item to work with locked PDF documents.
• Fixed Greek uppercase transforms failing for some characters.
• Fixed resizing a <textarea> element with 1rem padding.
• Fixed the color correctness of the color matrix filter.
• Fixed backdrop-filter to apply to the border area of an element with a border-radius .
• Fixed intrinsic inline size calculators to account for whitespace before an empty child with nonzero margins.
• Fixed overlapping elements with flex box when height: 100% is applied on nested content.
• Fixed incorrect grid item positioning with out-of-flow sibling.
• Fixed break-word with a float discarding text.
• Fixed min-content calculation for unstyled only-child inlines elements.
• Fixed ellipsis rendering multiple times when position: relative and top are used.
• Fixed a bug for inline elements inserted in reverse order after a block in a continuation.
• Fixed the flash of a page background-colored bar in the footer when the window is resized.
• Fixed garbled bold text caused by glyph lookup using the wrong font’s glyph IDs when multiple installed fonts have the same name. (FB13909556)
• Fixed selecting Japanese text annotated with ruby in a vertical-rl writing mode table.
• Fixed support for border, padding, and margin on mfrac and mspace elements in MathML.
• Fixed the cursor not updating as content scrolls under it on some pages.
• Fixed stripping the scroll-to-text fragment from the URL to prevent exposing the fragment to the page.
• Fixed CORS bypass on private localhost domain using 0.0.0.0 host and mode “no-cors”.
• Fixed blocking cross-origin redirect downloads in an iframe.
• Fixed blocked cross-origin redirect downloads to attempt rendering the page instead.
• Fixed the SVG parser to interpret “form feed” as white space.
• Fixed error handling for invalid filter primitive references.
• Fixed displaying an SVG element inside a <switch> element.
• Fixed SVG title to have display: none as the default UA style rule.
• Fixed the UA stylesheet for links in SVGs to apply cursor: pointer matching standards.
• Fixed returning the initial value for the SVG gradient stop-color if it is not rendered in the page.
• Fixed the SVG marker segment calculations if the marker path consists of sub-paths.
• Fixed SVGLength to sync with the WebIDL specification.
• Fixed disclosure counter styles to consider writing-mode .

Web Animations

• Fixed percentage transform animations when width and height are animated.
• Fixed updating an animation when changing the value of a transform property while that property is animated with an implicit keyframe.
• Fixed display transition to none .
• Fixed cssText setter to change the style attribute when the serialization differs. (FB5535475)
• Fixed history.pushState() and history.replaceState() to ignore the title argument.
• Fixed URL text fragment directives not fully stripped from JavaScript.
• Fixed showPicker() method to trigger suggestions from a datalist .
• Fixed lang attribute in no namespace to only apply to HTML and SVG elements.
• Fixed unnecessarily unsetting the iframe fullscreen flag.
• Fixed DOM Range to correctly account for CDATASection nodes.
• Fixed getGamepads() to no longer trigger an insecure contexts warning.
• Fixed inserting a <picture> element displaying the same image twice.
• Fixed throwing exceptions in navigation methods if in a detached state.
• Fixed a minor issue in URL’s host setter.
• Fixed cloning of ShadowRoot nodes following a DOM Standard clarification.
• Fixed GeolocationCoordinates to expose a toJSON() method.
• Fixed IntersectionObserver notifications that sometimes fail to fire.
• Fixed GeolocationPosition to expose a toJSON() method.
• Fixed setting CustomEvent.target when dispatching an event.
• Fixed navigator.language only returning the system language in iOS 17.4.
• Fixed: Removed presentational hints from the width attribute for <hr> .
• Fixed an issue when inserting writing suggestions into an editable display: grid container.
• Fixed the warning message for window.styleMedia .
• Fixed resolving www. sub-domain for Associated Domains for all web apps.

Web Assembly

• Fixed initialization of portable reference typed globals.

Web Extensions

• Fixed getting an empty key from storage. (FB11427769)
• Fixed Service Workers not appearing in the Develop menu or remote Web Inspector menu. (130712941)
• Fixed web extensions unable to start due to an issue parsing declarativeNetRequest rules. (FB14145801)
• Fixed font sizes in the Audits tab.
• Fixed expanded sections of Storage to not collapse.
• Fixed Web Inspector to show nested workers.
• Fixed CSS font property values marked !important not getting overridden when using the interactive editing controls.
• Fixed an issue where the Web Inspector viewport might appear cut off.
• Fixed runtimes to be aligned in the Audit tab.
• Fixed remembering the message type selection in the Console tab.
• Fixed autocomplete for the text-indent property suggesting prefixed properties instead of each-line or hanging .
• Fixed background autocompletion suggestion to include repeating-conic-gradient .
• Fixed the list of breakpoints in the Sources tab disappearing when Web Inspector is reloaded.
• Fixed console clearing unexpectedly when Web Inspector reopens.
• Fixed console code completion to be case-insensitive.
• Fixed overflow: scroll elements to scroll as expected when highlighting an element from the DOM tree.
• Fixed showing additional Safari tabs from an iOS device in the Develop menu.
• Fixed Console and code editor completion not auto-scrolling the suggestion into view.
• Fixed search in the DOM tree view unexpectedly chaning the text display.
• Fixed clicking the “goto” arrow for computed CSS when “show independent Styles sidebar” is disabled.
• Fixed inspectable tabs from Safari in the visionOS Simulator don’t appear in Developer menu on the host macOS.
• Fixed Accessibility inspector for switch controls to report “State: on/off” instead of “Checked: true/false”.
• Fixed Gamepad API in WKWebView.
• Fixed repainting HTML elements when their width or height change in legacy WebView.
• Fixed retrieving titles containing multibyte characters.
• Fixed RTCEncodedVideoFrame and RTCEncodedAudioFrame to match the WebIDL specification.
• Fixed VideoTrackGenerator writer to close when its generator track (and all its clones) are stopped.
• Fixed WebRTC AV1 HW decoding on iPhone 15 Pro.
• Fixed black stripes with screen sharing windows.
• Fixed black stripes with getDisplayMedia captured windows when the window is resized.

Safari 18.0 is available on iOS 18 , iPadOS 18 , macOS Sequoia , macOS Sonoma, macOS Ventura, and in visionOS 2 .

If you are running macOS Sonoma or macOS Ventura, you can update Safari by itself, without updating macOS. Go to  > System Settings > General > Software Update and click “More info…” under Updates Available.

To get the latest version of Safari on iPhone, iPad or Apple Vision Pro, go to Settings > General > Software Update, and tap to update.

We love hearing from you. To share your thoughts on Safari 18.0, find us on Mastodon at @[email protected] and @[email protected] . Or send a reply on X to @webkit . You can also follow WebKit on LinkedIn . If you run into any issues, we welcome your feedback on Safari UI (learn more about filing Feedback ), or your WebKit bug report about web technologies or Web Inspector. If you notice a website that seems broken in Safari, but not in other browsers, please file a report at webcompat.com . Filing issues really does make a difference.

Download the latest Safari Technology Preview on macOS to stay at the forefront of the web platform and to use the latest Web Inspector features.

You can also find this information in the Safari 18.0 release notes .

1. iPhone Mirroring is available on Mac computers with Apple silicon and Intel-based Mac computers with a T2 Security Chip. Requires that your iPhone and Mac are signed in with the same Apple ID using two-factor authentication, your iPhone and Mac are near each other and have Bluetooth and Wi-Fi turned on, and your Mac is not using AirPlay or Sidecar. iPhone Mirroring is not available in all regions.

Media Queries: Range Syntax

Syntax improvements to make media queries using features that have a "range" type (like width or height) less verbose. Can be used with ordinary mathematical comparison operators: > , &lt; , >= , or &lt;= .

For example: @media (100px &lt;= width &lt;= 1900px) is the equivalent of @media (min-width: 100px) and (max-width: 1900px)

• ❌ 4 - 103 : Not supported
• ✅ 104 - 128 : Supported
• ✅ 129 : Supported
• ✅ 130 - 132 : Supported
• ❌ 12 - 103 : Not supported
• ✅ 104 - 127 : Supported
• ✅ 128 : Supported
• ❌ 3.1 - 16.3 : Not supported
• ✅ 16.4 - 17.6 : Supported
• ✅ 18.0 : Supported
• ✅ 18.1 - TP : Supported
• ❌ 2 - 62 : Not supported
• ✅ 63 - 129 : Supported
• ✅ 130 : Supported
• ✅ 131 - 133 : Supported
• ❌ 9 - 90 : Not supported
• ✅ 91 - 110 : Supported
• ✅ 111 : Supported
• ❌ 5.5 - 10 : Not supported
• ❌ 11 : Not supported

Chrome for Android

Safari on ios.

• ❌ 3.2 - 16.3 : Not supported
• ✅ 18.1 : Supported

Samsung Internet

• ❌ 4 - 19.0 : Not supported
• ✅ 20 - 24 : Supported
• ✅ 25 : Supported
• ❌ all : Not supported

Opera Mobile

• ❌ 10 - 12.1 : Not supported
• ✅ 80 : Supported

UC Browser for Android

• ❌ 15.5 : Not supported

Android Browser

• ❌ 2.1 - 4.4.4 : Not supported

Firefox for Android

• ✅ 127 : Supported
• ❌ 14.9 : Not supported

Baidu Browser

• ❌ 13.52 : Not supported

KaiOS Browser

• ❌ 2.5 : Not supported
• ✅ 3 : Supported