adguard safari 17

AdGuard for Safari 4+

Adblock and privacy, adguard software limited.

• 4.6 • 21.5K Ratings

Screenshots

Description.

More than 35,000,000 AdGuard users enjoy the better, faster, and safer Internet. The ad blocker extension clears all ads in Safari and fights data tracking to protect privacy. Unlike other major ad blockers, AdGuard provides some extra features you are used to having with the traditional (now deprecated) extensions: ● Manage protection from Safari ● Choose among popular filter lists ● Add custom filter lists ● Create your own filtering rules ● Manual blocking tool ● Whitelist websites in one click AdGuard for Safari is based on the Safari native content blocking API, which makes it lightning fast. KEY FEATURES ◈ Blocking Ads Remove all kinds of ads from Safari browser easily. We have plenty of ad blocking filters and even an ability to manually remove ANY element on the page that you don't like. ◈ Blocking Trackers Make your personal information protected by blocking known trackers. ◈ Blocking Annoyances Tired of all the «Like» buttons and similar widgets infesting all of your frequented web pages? Just enable AdGuard "Social Media filter" and forget about them. ◈ Faster Browsing Speed By preventing ads, annoyances, and trackers from loading when you visit a certain page, AdGuard makes browsing smoother and faster. ◈ Free and Open Source AdGuard for Safari is a free and open source software. The source code is available on Github: https://github.com/AdguardTeam/AdguardForSafari

Version 1.11.18

The filter developers said that this version blocks ads more effectively thanks to updated Scriptlets. Should we take their word for it or get the new version and see for ourselves?

Ratings and Reviews

21.5K Ratings

Good Set & Forget Ad Blocker

Clean, simple, and easy to understand. I use on my Mac as well as my iOS devices. Great Apple citizen. Recent updates have made this much easier to use via the built in system controls. Also a big handy feature for me is the ability to quickly, permanently block elements on a webpage just by selecting them, great for navigating poorly designed websites with elements that cover others especially on mobile. However 4 out of 5 times when a website won't work or load it's because this is blocking some linked script or tracking redirect, which is sometimes annoying, especially when you have to do it several times every time such a link is clicked, but the app is just doing its job of blocking sketchy connections that I don't want and that's more a fault of the web at large.

Some annoying bugs, please fix!

This app appears to do a great job and what it sets out to do, but there is an annoying bug that renders this quite frustrating on a fresh boot: when this app is set to open at login, it does NOT honor the "hide" setting checkbox under System Preferences --> Users and Groups --> Current User --> Login Items --> "hide" checkbox next to AdGuard for Safari. Normally, when the system is rebooted and this box is checked, the app can launch, but without the application window opening in front of the user. Please fix this, so that the app can launch at login without popping up its preferences window each time! Finally, as a feature request, please support Catalina auto dark mode, and please allow for iCloud-based settings syncing... thanks!

BEST Ad Blocker for Mojave

After upgrading to Mojave, I found Safari has completely changed its mechanism of extensions. All of my ad block plug-ins now only function in very limited manners (no filter setting, no element inspections etc.). And I feel particularly annoyed -- I browse Chinese websites frequently, yet almost all ad blockers would never succeed in removing ads in foreign languages unless you set up filters manually. Yet as I said before, all most all ad blockers under Mojave are too succinct to offer such advanced features. Thankfully, I finally found this lovely, amazing, elegant, useful, powerful AdGuard. The pre-installed language-specific filer lists are totally incredible. To Mojave users, if you're reading this review, pls stop searching for other ad blockers. AdGuard is THE BEST!

App Privacy

The developer, Adguard Software Limited , indicated that the app’s privacy practices may include handling of data as described below. For more information, see the developer’s privacy policy .

Data Not Collected

The developer does not collect any data from this app.

Privacy practices may vary, for example, based on the features you use or your age. Learn More

Information

English, Amharic, Arabic, Bengali, Bulgarian, Catalan, Croatian, Czech, Danish, Dutch, Estonian, Filipino, Finnish, French, German, Greek, Gujarati, Hebrew, Hindi, Hungarian, Indonesian, Italian, Japanese, Kannada, Korean, Latvian, Lithuanian, Malay, Malayalam, Marathi, Norwegian Bokmål, Persian, Polish, Portuguese, Romanian, Russian, Serbian, Simplified Chinese, Slovak, Slovenian, Spanish, Swahili, Swedish, Tamil, Telugu, Thai, Traditional Chinese, Turkish, Ukrainian, Vietnamese

• Developer Website
• App Support
• Privacy Policy

More By This Developer

AdGuard — adblock&privacy

AdGuard VPN – Unlimited & Fast

AdGuard Pro — adblock&privacy

• Short Guides
• Privacy Policy

How to Block Ads and Tracking on iOS 17 with AdGuard DNS

Welcome to the future – iOS 17 is here! The newest version of iOS comes packed with features like system-wide drag and drop, new Dynamic Island capabilities, and improvements to Messages, Mail, and more. But iOS 17 still delivers ads and sends usage data back to Apple. Thankfully, with a few quick settings changes, you can leverage AdGuard DNS to block ads and protect your privacy across all your apps and browsers on iOS 17.

Recent Released: How to Use ChatGPT on iOS and the Best ChatGPT Apps for iPhone

Intro – What AdGuard DNS Does

AdGuard DNS is a free, alternative DNS (Domain Name System) service that filters out ads, tracking scripts, malware sites, and other unwanted content before it reaches your device. By routing your iOS 17 device’s web traffic through AdGuard’s DNS servers instead of your ISP’s default DNS servers, AdGuard can block a large percentage of ads, trackers, and threats that would normally display in your apps and load in your mobile browsers.

The best part is that configuring AdGuard DNS only takes a couple minutes, requires no apps or profiles to manage, and works across your entire iOS system, not just your browsers. Let’s check out how to set it up!

How to Enable AdGuard DNS on iOS 17

Enabling AdGuard DNS on your iPhone, iPad, or iPod running iOS 17 only takes a few taps:

• Open Settings > Wi-Fi and tap the “i” icon next to your connected Wi-Fi network.
• Scroll down and tap on Configure DNS.
• Tap Manual.

Tap Add Server and enter:

• Tap Save in the upper right corner, then tap Done.

That’s it! Your iOS 17 device is now routing all domain name lookups through AdGuard DNS’s filtering servers.

The Immediate Benefits

As soon as you complete the steps above, you’ll notice:

• Advertisements blocked in apps and browsers
• Decreased web page load times
• Protection from malware and phishing sites
• Improved privacy with less tracking and analytics scripts loading

The difference can be immediately seen in Apple’s own apps like News and Stocks, which normally contain ads. Apps like Facebook and Safari will also be ad-free.

How to check if AdGuard DNS is working on iOS?

Check adguard dns status on ios.

To verify that AdGuard DNS is active and blocking ads, you can:

• Open Safari and go to AdGuard’s test page.
• Scroll down and look for “AdGuard DNS” – it should say “Running” if enabled.
• The test page also shows your current DNS server and filtering status.

You can also install the AdGuard for iOS app and enable system-wide ad blocking. This will let you see and control your DNS filtering across all apps, not just Safari.

How to switch between different DNS servers on AdGuard for iOS?

Switching between dns servers on ios.

If you want to switch between AdGuard DNS and another DNS provider:

• Go to Settings > General > VPN & DNS > DNS.
• Tap on your preferred DNS server.
• It will now override any DNS set individually in apps.

This allows you to easily swap between DNS services right from your iOS settings.

How to Disable AdGuard DNS on iOS

If you want to disable AdGuard DNS filtering:

• Go back to your Wi-Fi settings.
• Tap on Configure DNS.
• Tap on Automatic to revert back to the default DNS.

You can also disable it in the AdGuard app under DNS Protection settings. This will turn off DNS filtering across your entire iOS device.

How to turn off AdGuard DNS for a specific app on iOS

Unfortunately there is no native way to disable AdGuard DNS on a per-app basis on iOS. Since AdGuard DNS is configured at the network level, it impacts all traffic and apps equally.

However, there are a couple potential workarounds:

• You can temporarily switch your DNS settings to use your ISP’s default DNS instead of AdGuard. This will disable filtering for all apps, but you can then open the app you want ads enabled on. Just remember to switch back to AdGuard DNS when done.
• For apps that allow configuration of a custom DNS server, like some browsers, you can manually set that app to use a different DNS so it ignores the system-wide AdGuard settings. Traffic from that app would route through the custom DNS and not be filtered.
• On a jailbroken iOS device, there may be tweaks that can override DNS on a per-app basis. But this would require a jailbreak.

The only native option is to fully disable AdGuard DNS system-wide if you need to allow ads in certain apps. There is no setting in iOS to disable DNS filtering for only specific apps unfortunately. Let me know if you have any other questions!

Q1. Does AdGuard DNS slow down my connection speed?

Nope! AdGuard DNS maintains fast response times and should not impact your web browsing or streaming speeds. The only thing you’ll notice is pages loading faster without heavy ads bogging things down.

Q2. What are the IP addresses again?

AdGuard DNS uses two servers:

176.103.130.130

176.103.130.131

Q3. Does this only work on Wi-Fi?

AdGuard DNS will filter traffic on both Wi-Fi and cellular data. The filtering protection remains active whenever your device is online.

Q4. Can I use another DNS service?

Absolutely! You can use Cloudflare (1.1.1.1 / 1.0.0.1) or NextDNS instead. The steps are the same – just change the IP address to the ones for the DNS provider you want to use.

AdGuard DNS is a quick, free way to block ads and protect your privacy across iOS 17 without any profile management or apps required. Configure it in less than a minute and immediately enjoy a faster, more private ad-free mobile experience!

Share this:

• X (Twitter)

You Might Also Like

Elon musk threatens to ban ios devices over apple’s openai partnership, is apple intelligence only on iphone 15, apple intelligence compatibility: enabling an ai-powered future, chip by chip, what is open ai apple and how does it work, how to upgrade to ios 18, 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.

• More Networks

Sign in to your account

Username or Email Address

Remember Me

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

AdGuard for Safari app extension

AdguardTeam/AdGuardForSafari

Folders and files, repository files navigation.

The most advanced ad blocking extension for Safari

Free and open source, highly customizable and lightning fast ad blocking extension.

AdGuard for Safari

Ad blocking extensions for Safari are having hard time since Apple started to force everyone to use the new SDK. AdGuard extension is supposed to bring back the high quality ad blocking back to Safari.

Unlike other major ad blockers, AdGuard provides some extra features you are used to have with the traditional (now deprecated) extensions:

• Managing protection from Safari
• Choose among popular filter subscription
• Custom filters
• Creating your own filtering rules
• Manual blocking tool
• Allowlisting websites

AdGuard for Safari is based on the Safari native content blocking API, which makes it lightning fast, but somewhat limited in capabilities. For instance, Safari limits the number of rules a content blocker can have.

Better yet, there is a full-fledged AdGuard for Mac

With all above said, there is a solution that is even more effective than AG Safari extension. I mean, of course, AdGuard for Mac . It can:

• filter your traffic in all browsers and apps on your Mac
• have an unlimited number of filter rules
• provide a better filtering quality (due to the lack of browser API restrictions)

You can try it out for free .

How to build AdGuard for Safari

AdGuard for Safari consists of three parts:

• An Electron application.
• Safari Content Blocker extension
• Safari Toolbar icon extension

Prerequisites

• MacOS 13.1 or above
• Xcode 14.3 or above
• Xcode Command Line Tools
• Node.js v18.17.1 or higher

Also, you need to install these packages globally:

• electron-packager
• electron-osx-sign

How to build

To run application in development mode.

Install local dependencies by running:

How to debug the app

Debug window.

Launch the application via:

Open menu View -> Toggle Developer Tools

Debug main process

Launch the application via

Open URI chrome://inspect in Chromium

Then add a network target localhost:5858 via button "Configure" and select this target below.

Build and run in production mode

Replace the following line in file ./AdGuard/Config.xcconfig

where <YOUR APPLE DEVELOPER COMMON NAME> is your codesign identity

Make sure your system Nodejs version higher v8.9.4.

Steps to check it: if you use nvm run

Open AdGuard.xcworkspace in Xcode and run building project

How to run tests

Preparing and building adguard., environment requirements.

• MacOS 13.1+
• Xcode 14.3+
• Install Xcode command line tools
• Install the ruby module bundler if it is not in the system
• Fastlane manages development and distribution certificates according to the documentation described in fastlane match . The file ./fastlane/env.default contains variables ( SENSITIVE_VARS_PATH , APP_STORE_CONNECT_API_KEY_PATH ) that define the paths to files with private information necessary for fastlane match to work. Create these files in a hidden location with the appropriate contents and specify their paths in the these variables.
• You need to run the configure.sh dev script, which will install the necessary components and certificates locally.

Check certificates names in Scripts/ExportOptions.plist

SafariConverterLib dependency

For converting rules to content-blocker format we use an external library as a binary built from https://github.com/AdguardTeam/SafariConverterLib/ , that ConverterTool binary should be placed in ./libs/ .

You use ./Scripts/download-lib.sh to download the latest release version of that binary from Github.

Common issues

https://developer.apple.com/documentation/security/notarizing_your_app_before_distribution/resolving_common_notarization_issues

Use fixed electron-osx-sign

How to release standalone builds

• update version package.json and AdGuard/standalone.xcconfig or AdGuard/standalone-beta.xcconfig
• notarize builds
• publish release on Github
• refresh updates/updates.json and release.json in gh-pages branch

Build application

• mas -- Mac App Store
• beta -- standalone beta
• release -- standalone release
• [--notarize=0] -- optional parameter to skip notarization

Output directory build contains:

• Adguard for Safari.app -- signed and notarized app.
• Adguard for Safari.app.zip -- zip of signed and notarized app.
• Adguard for Safari.xcarchive -- app archive.
• Adguard for Safari.xcarchive.zip -- zip of app archive
• version.txt -- version info (CI requirement).
• updates.json -- json file with updates info.
• release.json -- json file with updates info.

Clean install

• Disable all AdGuard for Safari extensions in Safari browser settings and close browser
• Close AdGuard for Safari
• ~/Library/Application Support/AdGuardSafariApp
• ~/Library/Containers/ - all directories started with com.adguard.safari.AdGuard (if there’s any)
• ~/Library/GroupContainers/TC3Q7MAJXF.com.adguard.safari.AdGuard
• ~/Library/Preferences/com.adguard.safari.AdGuard.plist
• Quit all “AdGuard” and “cfprefsd” processes in Activity monitor
• Reinstall AdGuard for Safari

Releases 91

Contributors 17.

• JavaScript 78.2%
• Objective-C 14.8%
• Objective-C++ 0.8%

Filtering doesn’t work and ads aren’t blocked

This article is about AdGuard for Safari, which safeguards only your Safari browser. To protect your entire device, download the AdGuard app

In some cases, filtering may not work and ads may still be displayed even though AdGuard for Safari and the proper filters are enabled. This usually happens when something goes wrong with filter updates due to Safari bugs.

How to fix ​

• Open Safari.
• Click Safari in the left upper corner menu.
• Click Settings… → Extensions .

• Restart Safari.
• Return to Settings... → Extensions and re-enable the content-blocking extensions.
• Open AdGuard for Safari app.
• Go to Filters .
• Click Check for updates .
• Do not close the AdGuard for Safari window until the filters are updated.

If this doesn’t help and ads are still not being blocked, please contact our support at [email protected] .

If you only have problems with a specific page or website, you can report it directly from the browser: click the AdGuard for Safari icon next to the Safari search bar, and then click Report an issue .

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Understanding the latest Webkit features in Safari 17.4

Compared to other modern web browsers, Safari is a bit slower in rolling out feature updates, possibly due to Apple’s cautious approach or reliance on the slower-evolving Webkit rendering engine. Since these features are not user-facing and mainly concern developers, Safari’s slow-paced implementation of new features and updates can largely impact the overall DX.

Although skipping Safari to deploy apps faster may sound smart from a developer’s point of view, it may backfire since Safari holds a significant position in the Apple ecosystem and has a sizeable market share.

The good news is that Safari has been continuously improving and rolling out new features more frequently this year. The Safari 17.4 update brought in almost 46 modern features and over 145 bug fixes, followed swiftly by the 17.5 update with significantly fewer development-centric updates.

This article highlights all the major development-specific updates in Safari 17.4 that you, as a web developer, should be aware of. Let’s dive right in.

CSS features

Safari 15.4 and subsequent releases have introduced and maintained important CSS features, like cascade layers , container queries , the :has() pseudo-class, and the subgrid .

With Webkit 17.4, Safari continues to improve the DX by adding support for additional CSS features that were previously expected but unavailable. Below, you’ll find a breakdown of some of the major CSS features and updates you will experience with Safari 17.4.

Style scoping

Style scoping simplifies CSS specificity and overriding by allowing the creation of style boundaries. It provides the @scope  rule and the :scope selector to target DOM subtree elements with loosely coupled selections.

Keep in mind that style scoping is still an under-developed feature. However, considering its benefits, some of the major browsers have already started providing support for style scoping, including Safari 17.4.

You can now use the @scope at-rule in Safari to apply scoped styles to a particular selector and encapsulate the styles within it. The below code covers an example of how scoped styles simplify working with different component patterns that have similar elements while keeping the styles encapsulated and less specific:

For a more illustrated explanation, you should explore and compare the following demos. This first CodePen demonstrates the leaking styles problem:

See the Pen A demo of CSS styles leaking out by Rahul C ( @_rahul ) on CodePen .

Meanwhile, here is its solution using scoped styles:

See the Pen Style leaking fixed with @scope rule by Rahul C ( @_rahul ) on CodePen .

In the future, this approach is expected to help developers create easily maintainable and reusable components without relying heavily on naming methodologies like BEM .

The improved :has() pseudo-class

One of the best additions in CSS Selectors Level 4 was the :has()  pseudo-class , which allows you to select the parents inside-out based on their children. The :has() pseudo-class is now widely supported in all modern browsers, including Safari 15.3 and beyond.

It’s now a bit more polished in Safari 17.4. You can now use :link and :any-link pseudo-classes as an argument to :has() to specify the criteria of an element having a link of a certain nature, which was not possible in the earlier versions:

But there’s a catch. The :any-link pseudo-class is still pretty new and has varying levels of support across different browsers. Its sole purpose is to select links regardless of their visited state. Since it’s still in its experimental phases, it might not perform as expected.

The inconsistent browser support for :link and :any-link makes their use with :has() unreliable, which can result in :link selecting everything and :any-link and :visited not selecting anything at all. As a result, you should use them with caution.

Vertical writing mode for form elements

Safari now supports vertical writing mode for form controls. This mode allows text boxes, buttons, sliders, progress bars and other form elements to be displayed vertically, which is particularly useful for CJK scripts and languages.

Vertical writing mode supports elements such as button , textarea , progress meters, input , and <select> . Here’s an example of how to use it:

The result might look something like the following:

See the Pen Demonstrating vertical-rl writing-mode by Rahul C ( @_rahul ) on CodePen .

It’s worth noting that the <select> box popup will always be displayed the same way, regardless of its writing mode, as it is normally displayed. If you are working with vertical mode, you might also find it helpful to read about vb and vi viewport units .

Content alignment inside blocks and tables

Another interesting addition to modern-day CSS is to be able to align the element’s content without having to be concerned much about its display.

The align-content property now works out of the box to align the content vertically within its block-level or table-level parent. Currently, block-level alignment is well-supported on Chrome and Firefox, while Safari 17.4 fully supports the alignment in both block and table formatting contexts.

Here’s an example usage of the align-content property:

See the Pen Using `align-content` prop in block-level elements by Rahul C ( @_rahul ) on CodePen .

Better text handling

The traditional white-space property in CSS determines and controls two tasks: collapsing whitespaces and wrapping lines. In the ever-evolving world of CSS, these tasks are expected to have separate properties for better context and more granular control.

There are now two separate properties to control each of these tasks — white-space-collapse and text-wrap-mode — which are also pretty much self-explanatory in what they do:

Note that the text-wrap-mode  property currently lacks support in Chromium-based browsers. Also, the letter-spacing and word-spacing props on Safari can now have percentage values relative to the font size, which is a nice addition when it comes to typography.

Transition for discrete properties

From CSS4 onwards, the developers can enable transitions for discrete CSS properties like display and content-visibility using the allow-discrete transition behavior.

The feature is new to Safari and has yet to settle down and become stable. It has great potential to redefine the general interaction design in the browser without needing JavaScript for interactivity.

Over 200k developers use LogRocket to create better digital experiences

Here’s an example of how to use it:

However, keep in mind that Safari still does not support display  and some other major discrete properties through the allow-discrete behavior of CSS transitions.

Check out this example of list-style , another discrete CSS property, using the allow-discrete transition behavior and changing values after the delay added by the transition duration:

See the Pen list-style with allow-discrete transition behavior by Rahul C ( @_rahul ) on CodePen .

Custom properties support for ::backdrop

Safari is perhaps the first browser that enables you to apply CSS variables or custom properties to the ::backdrop pseudo-element. Note that ::backdrop is only supported by certain special elements like dialogs, popovers, or anything that enters full-screen using the FullScreen API.

Again, you need to use this feature mindfully, as it’s unavailable with other major browsers:

Better error highlighting

The new ::grammar-error and ::spelling-error pseudo-elements allow the developers to decorate spelling and grammar errors in user-inputted text if the browser provides the spell-check facility.

Although previously unsupported, these under-developed features are now available for you to play with in Safari 17.4. You can highlight spelling and grammatical errors in text added through HTML text-field , textarea , and contenteditable elements and attributes. For example:

Here’s the result:

HTML features

Some browser features, such as source prioritization of media, are often delayed due to the browser’s inability to provide the necessary support and APIs. The recent Safari update has improved its capabilities, which have affected the usage, functionality, and usefulness of the following HTML features.

Native switch

The native checkbox switch looks like an unconventional feature at the moment, as it’s not at all supported anywhere other than Safari. It’s said that support for the native switch is expected everywhere soon, as the switch pattern is becoming more common in frontend design systems.

You can implement this native switch in Safari just by adding a switch attribute to the checkbox input in your web pages as shown below:

The native switch also allows you to customize itself using the ::track and ::thumb pseudo-elements. Furthermore, unlike the CSS trickery we do normally to emulate the checkbox switch, we can use the labels separately which is pretty neat.

Horizontal rules inside <select> elements

Normally, you’ll find using horizontal rules inside the <select> element a bit unconventional, even though modern browsers actually allow you to do so. Modern browsers support this behavior to improve the way option groups are grouped and separated, which also helps users read and scan them efficiently.

Here’s a simple example of this behavior, which should work well in Chrome 119+, Firefox 122+ and Safari 17.4+:

See the Pen Horizontal Rules inside Select Inputs by Rahul C ( @_rahul ) on CodePen .

However, this behavior is not supported universally yet. You should rely on the traditional approach by adding borders as a fallback to optgroups to show the distinction and spacing between the <select> element’s options.

Source prioritization in videos

Safari added media extension support for WebCodecs HEVC and VP8/VP9 video, along with Vorbis audio codec support for iOS and iPadOS. With this support for additional media formats, Safari now also allows you to prioritize video sources directly through your HTML markup.

For instance, in the code below, the browser will go through the list of sources and choose the first source it can play based on the video format support and the media query provided. It will keep moving down the list to find a playable source; if it doesn’t, it will show just a fallback message at the end:

JavaScript features

There are a number of bug fixes and new introductions in JavaScript features and different JavaScript APIs in Safari 17.4. Let’s go through some of the major ones.

Ownership transfer in the ArrayBuffer API

Webkit has improved how effectively its JavaScript ArrayBuffer API manages the buffer ownership. It did so by adding two new methods for enhanced responsibility: transfer and transferToFixedLength , both of which are ready to be used in Safari 17.4.

Previously, multiple variables referencing an ArrayBuffer object could lead to unwanted behavior. The new ownership concept ensures a single owner using these new transfer methods, which is as simple as shown in the code below:

AbortSignal composition with the any method

In modern JavaScript, the AbortSignal interface serves as a communication channel between the code initiating an operation and the operation itself. It allows for a graceful cancellation of async operations such as network requests, timeouts, and more.

The any method is a new feature of the AbortSignal interface that accepts multiple AbortSignals as an array and acts as a combined signal for all these inputs. It returns a single AbortSignal object that gets triggered when any of its input signals are aborted:

The withResolvers method

Traditionally, creating and resolving promises involved defining an executor function within the Promise constructor. However, this is a bit of a messy practice now.

More great articles from LogRocket:

• Don't miss a moment with The Replay , a curated newsletter from LogRocket
• Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
• Use React's useEffect to optimize your application's performance
• Switch between multiple versions of Node
• Discover how to use the React children prop with TypeScript
• Explore creating a custom mouse cursor with CSS
• Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

To simplify the creation of promises with explicit resolve and reject handlers, you can now use the Promise.withResolvers method to return an object containing a new promise object, along with functions that you can call to resolve and reject the promise from anywhere in your code:

The checkVisibility method

The checkVisibility method is a general Web API feature in modern browsers. This method categorizes an element as visible or not visible in the viewport by considering multiple CSS factors like opacity , visibility , content-visibility , display , and more.

With Webkit 17.4, Safari now provides a bit of partial support to this method where you may use the checkOpacity and checkVisibilty parameters to determine specific property values. However, the checkContentVisibility parameter is not yet supported.

Here’s an example of how to use this method:

Better array grouping

The Object.groupBy() method gets full support in Safari 17.4 which makes it easy to group datasets as can be seen below:

You should check out this demo and observe the inputs along with the corresponding output in the developer console to see Object.groupBy in action.

A similar method, Map.groupBy , is also now available in Safari. This method returns a Map object instead.

The setHTMLUnsafe() method

The setHTMLUnsafe method is a new way to completely replace the contents of an element, shadow root, or document with a provided HTML string.

The use of “unsafe” in the method implies one potential risk to use this method: it doesn’t sanitize the HTML it injects, which — if not managed carefully — could make it vulnerable to XSS attacks.

Accessibility features

With all the hard work you put into your websites and web apps, it’s critical to ensure that all users can view and interact with your web content . Let’s discuss some of the accessibility enhancements in Safari 17.4.

Better screen reader support

The new Safari update now avoids unnecessary announcements for certain ARIA landmark roles when navigating to landmarks using the rotor.

It consistently announces the focus of form elements with the VoiceOver screen reader and provides additional information about form controls such as checked checkboxes and radios. The live region ARIA elements now support announcements, making real-time updates more accessible.

Alternative generated content

Developers often use Unicode characters or images in ::before , ::after , and ::marker pseudo-elements for different purposes. By default, these don’t convey anything about the element itself.

To ensure that elements with dynamically generated content are accessible to screen readers and other assistive technologies, you can add alternative generated content using the content property directly:

This significant accessibility enhancement is now supported by all major browsers, including Safari 17.4, and is expected to receive some semantic sugar in future updates.

Performance features

As developers, we’re constantly looking for ways to improve performance, much of which relies on the browser’s capabilities. The Safari 17.4 release supports this with a few enhancements, which we’ll go through below.

JavaScript execution

Safari claims numerous architectural improvements have resulted in a noticeable performance boost in version 17.4 compared to previous versions. We have to wait for some developer feedback on JavaScript performance in the new Safari, as there are no JavaScript execution benchmarks available currently.

Rendering performance

WebGL in Safari now features improved Multisample Anti-Aliasing (MSAA) rendering, which results in smoother 3D graphics.

Additionally, nested workers are enabled for flexible multi-threading. Some new extensions have also been added for better clip control, different polygon modes, additional polygon offsetting control, and prevention of primitive clipping based on depth.

Better Web Inspector

The Web Inspector in the new Safari has been updated with a bunch of crucial improvements, including:

• Grouped source map load errors to simplify debugging by grouping related errors in the console
• Lockdown mode font load logging to aid in troubleshooting by logging messages when font loading is blocked

Other enhancements likely include various bug fixes, performance optimizations, and potential UI tweaks for a smoother debugging experience.

Web browsers can help make the lives of developers easier by continuously adding new features that allow them to focus more on utilizing the actual features rather than using polyfills.

At the time of writing this article, Safari introduced the 17.5 technical preview, released it as a stable version, and then introduced the 17.6 technical preview. This reflects the frequent updates and rapid development by Webkit developers to improve the browser engine and Safari as a whole.

Do you consider Safari feature support when working on projects? How do these recent updates in Safari affect your workflow? Share with us in the comments section.

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Using PocketBase to build a full-stack application

PocketBase is a performant Go-based tool that comes with essential features like user auth, file uploads, access control rules, and more.

The top tools for implementing e-commerce search in React

Explore top frontend tools for implementing e-commerce search functionality with React demo implementations.

Signals vs. ngOnChanges for better Angular state management

Angular is evolving in some exciting ways. Explore how signals enhance state management compared to the “old” approach using ngOnChanges .

An advanced guide to Vitest testing and mocking

Use Vitest to write tests with practical examples and strategies, covering setting up workflows, mocking, and advanced testing techniques.

Leave a Reply Cancel reply