safari windows developer

DEV Community

Posted on Jan 23, 2021

Developing for Safari on Windows 10 / Linux

Are you a Web Developer? If yes, my bet is that you are probably developing on one of the following browsers: Chrome, Opera, Firefox, Edge, Brave or Safari.

In the end, it boils down to the big three browsers:

• Chromium based

Even though I am currently a kind of happy Firefox user, the market share of the browser is converging to zero and ultimately it seems like the browser is dying. They even decided to close the ticket regarding the install option for PWA without plans of continuing.

Beside the nagging, a lot of consumers are effectively using Safari on desktop and especially mobile. (cf. statcounter or Can I Use )

So, how do we as Web Developer test on Safari, without feeling uncomfortable? In the past I had jobs where I could make use of a local MacBook or paid services like browserstack. It felt burdensome for me to work on a macOS, mostly because I was not used to it and my peripherals were somewhere else. And even if you would have a macOS at your workplace, given the fact that most of us are working from home right now, this is no longer an option.

🤝 The solution

Have you heard of Playwright? If your answer is no, then let me tell you that Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API. In fact, the API is very simular to Puppeteer, because two of the Developers moved from Puppeteer to Playwright. (cf. Puppeteer Contributions vs. Playwright Contributions ) If your answer is yes, and if you are not using Safari yet for testing purposes as Windows or Linux user, then congratulations, you are just like me 🤡.

The solution was right in front of us and I am happy to share a little snippet to kickstart the browser, so that we all can create better applications 🚀

For anything else, please refer to the official playwright documentation.

🖼 Further improvements on Windows

If you do not want to execute the .js file everytime you want to make use of Safari, follow these steps:

• Execute the script
• Open the Task Manager, go to tab 'Details', right-click on Playwright.exe and select 'Open file location'.
• Right-click on Playwright.exe in the folder and click on 'Create shortcut'
• (optional) download Safari Icon from wikipedia , convert it to an icon, save it in the folder, right-click on the shortcut, properties 'Change Icon' and select the .ico.
• Right-click the shortcut and select 'Pin to Start'

Top comments (1)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Jan 18, 2023

I spent a lot of time and effort to find something like this. Thank you very much ❤️❤️❤️

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

How to create an animated navigation on scroll with Tailwind CSS and JavaScript

Michael Andreuzza - May 14

Firebase Functions Express Typescript Project Guide Part 1

Bernardo Cassina - May 14

Side Hustle Ideas for Developers in 2024

Travis - May 19

Scop in Javascript.

ABU SAID - May 10

We're a place where coders share, stay up-to-date and grow their careers.

• I Tried Both: Apple Watch 9 vs Fitbit Charge 6
• Best Places to Print Photos Online

Add More Features by Turning on Safari's Develop Menu

Some of Safari's best features are hidden away

Tom Nelson is an engineer, programmer, network manager, and computer network and systems designer who has written for Other World Computing,and others. Tom is also president of Coyote Moon, Inc., a Macintosh and Windows consulting firm.

In This Article

Jump to a Section

Display the Develop Menu in Safari

Using the develop menu, additional develop menu items, what to know.

• Select Safari > Preferences > Advanced > Show Develop menu in menu bar .
• To use Develop, go to the Safari menu and select Develop , between Bookmarks and Window.
• Most useful Develop options: Open Page With, User Agent, and Empty Caches.

This article explains how to display and use the Develop menu in your Safari (versions 8 through 12) web browser.

Before you can use the Develop menu, you must first make the hidden menu visible. This is an easy task, much easier than revealing the Debug menu that—prior to Safari 4—contained all the commands that are now in the Develop menu. However, don't think that the older Debug menu is no longer relevant; it still exists and contains many useful tools.

Launch Safari from the Dock or the Mac Application folder.

Open Safari's preferences by clicking Safari in the menu bar and selecting Preferences in the drop-down menu.

Click the Advanced tab in the preferences screen.

Select Show Develop menu in menu bar .

Should you ever want to disable the Developer menu, remove the check mark in the Safari > Preferences > Advanced screen.

The Develop menu appears on the Safari menu bar between the Bookmarks and Window menu items. The Develop menu is particularly handy for web developers, but casual users may also find it useful.

Some of the Develop menu items that you're likely to find the most useful include:

• Open Page With : Lets you open the current web page in any browser you have installed on your Mac. If you ever visit a website that doesn't work correctly with Safari, use this command to quickly pop over to the same web page in another browser.
• User Agent : The user agent is a string of text the browser sends to the webserver hosting the web page. If you've ever visited a web page that proclaimed that Safari wasn't supported, this is how the site knew what browser you were using. In most cases, not supported is nonsense, and using this menu item, you can change the user agent to mimic one from a different browser. You may be amazed at how many times a web page that doesn't work suddenly does, just by changing the user agent.
• Empty Caches : Safari keeps a cache of recently accessed sites. The data stored away in this cache includes all the elements of a page, which can be used to quickly render a website when you return to the page. Sometimes the cache can be old or corrupt, causing a web page to display incorrectly. Emptying the cache can fix these issues and can even help speed up Safari .

Most of the remaining menu items are probably more useful to web developers, but if you're interested in how websites are constructed, then the following items may be of interest:

• Show Web Inspector : This opens the Web Inspector at the bottom of the current page. With the Web Inspector, you can examine the elements that went into creating the page.
• Show Page Source : This displays the HTML code of the current page.
• Show Page Resources : This opens the Resource Inspector sidebar in the Web Inspector. It provides an easy way to see which images, scripts, style sheets, and other elements are used on the current page.
• Start Timeline Recording : If you want to see how a web page loads and runs, try the Start Timeline Recording option. This creates a graph showing network activity and how each site element is loaded and used. It makes for an interesting display, but don't forget to turn off the feature by selecting Stop Timeline Recording . Otherwise, you are using your Mac's resources on nonproductive tasks—unless you're a web developer.
• Enter Responsive Design Mode : Another tool for web developers is the built-in simulator that allows you to preview how your web page will look at different screen resolutions or with different devices, such as the iPad or iPhone. Simply load the page you are interested in and select Enter Responsive Design Mode to preview the page. You can try the page rendering using various devices or select a screen resolution to use. When you're done, return to the Develop menu and select Exit Responsive Design Mode .
• Experimental Features : If you're feeling brave, you can try a few of the features that may find their way into future versions of the Safari browser.

With the Develop menu visible, take some time to try out the various menu items. You'll probably end up with a few favorites that you'll use often.

Get the Latest Tech News Delivered Every Day

• How to Activate and Use Responsive Design Mode in Safari
• How to Reset Safari to Default Settings
• How to Activate the iPhone Debug Console or Web Inspector
• How to Enable Safari's Debug Menu to Gain Added Capabilities
• How to Use Web Browser Developer Tools
• How to View HTML Source in Safari
• How to View Internet Explorer Sites on a Mac
• How to Clear Internet Cache in Every Major Browser
• Speed Up Safari With These Tuneup Tips
• What Is a Home Page?
• How to Manage Cookies in the Safari Browser
• 8 Best Free HTML Editors for Windows for 2024
• How to Inspect an Element on a Mac
• What Is Safari?
• How to Change Settings in iOS Dolphin
• How to Manage the Top Sites Feature in Safari

It's time for Apple to bring back Safari for Windows

Apple ended development of Safari for Windows in 2010, but it might be time for the browser to make a comeback.

The web has changed drastically over the past decade: web apps have become more common, algorithms now dictate how most people receive content, and billions more people are now connected globally. Google has also become more dominant in that time, and has occasionally used its position in the web ecosystem and browser market in harmful ways. There have been many ideas for how to keep Google's power in check, but here's mine: Apple should make its Safari web browser cross-platform again.

You might recall that the Safari web browser used to be available for Microsoft Windows , in addition to macOS (then known as Mac OS X) and later iPhone and iPad. Apple discontinued the Windows version of Safari many years ago, but bringing it back now could provide one of the best alternatives to browsers built with Google's Chromium engine.

The Windows experiment

Apple released the first version of the Safari web browser in January 2003, as part of Mac OS X 10.3 'Panther', following the end of Microsoft's five-year deal with Apple to keep Internet Explorer as the default web browser on Mac. Even though the web browser was new, the technology powering it was not — Apple used the KHTML rendering engine as a starting point to create Safari's WebKit engine.

The browser was initially exclusive to Mac, but when the first iPhone arrived in 2007, it also included Safari. The first version for Windows, Safari 3.0, was released that same year. However, the Windows version wasn't all that great . The initial release included a security vulnerability for arbitrary code execution, which was patched less than 48 hours later as Safari 3.0.1.

Safari also felt out of place on Windows. Apple used the same (awful) compatibility layer from iTunes for Windows with the Safari port , which re-implemented the Cocoa UI, Core Foundation, Core Graphics libraries on top of Windows — similar to using Wine to run Windows programs on Linux. The result was an application that worked, but didn't match the design or expected functionality of its host operating system.

Despite the early security issues and questionable software architecture, Safari for Windows was a decent web browser. Apple advertised it was "up to twice as fast" as Internet Explorer 7, and up to 1.6x the performance of Mozilla Firefox 2 (both supposedly tested on a Intel Core 2 Duo system with Windows XP and 1GB of RAM).

Apple continued to release new Safari versions for Mac and Windows, but when Safari 6.0 was released as part of Mac OS X Mountain Lion in 2012, a Windows version was missing. Apple later quietly removed the download links for Windows Safari, seemingly marking an end to the browser's existence on non-Apple platforms. The final version was Safari 5.1, released in 2010.

The comeback

Fast forward to 2022, and the web ecosystem is better in many ways, but also far from perfect. Web apps are more capable than ever before, mostly thanks to the accelerated development of new APIs in Google Chrome. However, Google now has significant influence over the course of web browsers — Opera and Microsoft dropped development of their own rendering engines to use the same Google's Chromium engine, while newer contenders like Brave and Vivaldi used Chromium from the start.

Web browsers based on Chromium have the ability to make changes to the browser interface and engine, so Google doesn't have complete control over how they work. Each step away from Google's upstream code makes adopting new changes to Chromium more time-consuming, though. That makes development more burdensome, and more crucially, it can lead to security patches in Chromium taking a long time to show up in some browsers. One example was Kiwi Browser for Android, which was stuck on Chrome 77 for over a year.

The web needs a balance of powers to remain an open platform

The web needs a balance of powers to remain an open platform, but there are now only two major web browsers not based on Chromium: Mozilla Firefox and Apple Safari. Firefox uses its own Gecko engine, which has seen significant performance improvements in recent years. Safari still uses WebKit, and while much of Safari's popularity comes from it being the only real browser allowed on iOS and iPadOS, it has also become a proper competitor to Chrome in recent years. Apple bringing Safari to more platforms could pull back some market share from Chrome and other Chromium-based browsers.

Christian Schaefer pointed out in a blog post last year that Apple still supports the WebKit engine on Windows, mostly for embedded applications and Microsoft's Playright testing platform. Newer versions even dropped the iTunes-based monster of a compatibility layer, in favor of the cross-platform Cairo graphics library. However, these minimal builds of WebKit are only intended for site testing, and don't have common browser features like sync, tabs, or extensions.

There are reasons beyond the health of the open web for Apple to port Safari to more platforms. There are millions of people that use an iPhone or iPad, but use Windows PCs instead of Mac computers. Keeping Safari exclusive to macOS might encourage some of those people to buy a Mac, but Safari on Windows (and other platforms) could also act as a loss leader that encourages future Apple hardware purchases — much like the original iTunes for Windows nearly two decades ago. This is also a strategy that worked for Google: Chromebook sales were helped by the popularity of the Chrome browser, which itself only made Chrome more popular.

Apple has also been more willing in recent years to bring its services and applications to other platforms, even in just a limited fashion. iCloud is available for Windows, the iCloud web apps work in most web browsers, FaceTime calls can now be joined via link from non-Apple devices, Apple Music has an Android app, and so on.

Safari for Windows could give Chromium browsers some much-needed competition, while also opening up a more connected experience for Apple devices. There are still plenty of reasons for Apple to not do it, but I'd certainly like to see it happen.

How To Get Developer Tools In Safari

• Software & Applications
• Browsers & Extensions

Introduction

Safari, the sleek and innovative web browser developed by Apple, is known for its user-friendly interface and seamless integration with Apple devices. While Safari offers a smooth browsing experience for users, it also provides powerful tools for web developers to create and optimize websites and web applications. One of the key features that sets Safari apart is its built-in Developer Tools, which offer a comprehensive set of resources for web development and debugging.

Whether you are a seasoned web developer or just starting out, having access to Safari's Developer Tools can significantly enhance your workflow and productivity. These tools enable you to inspect and modify web page elements, debug JavaScript, analyze network activity, and optimize website performance, among other capabilities. By leveraging Safari's Developer Tools, you can gain valuable insights into the structure and behavior of web pages, identify and troubleshoot issues, and fine-tune the performance of your web projects.

In this article, we will delve into the process of enabling and utilizing Safari's Developer Tools for web development. We will explore the various features and functionalities offered by these tools, providing practical insights and tips for leveraging them effectively. Whether you are a web developer, designer, or simply curious about the inner workings of websites, this guide will equip you with the knowledge and skills to harness the full potential of Safari's Developer Tools.

Let's embark on a journey to uncover the hidden gems of Safari's Developer Tools and unlock the power of web development within the confines of this innovative browser . Whether you're seeking to enhance your web development skills or gain a deeper understanding of web technologies, Safari's Developer Tools are your gateway to a world of possibilities. So, without further ado, let's dive into the realm of web development with Safari as our trusted companion.

Enabling Developer Tools in Safari

Enabling Safari's Developer Tools is a straightforward process that unlocks a treasure trove of functionalities for web development. Whether you're a seasoned developer or a curious enthusiast, accessing these tools can significantly enhance your web development experience within the Safari browser .

To enable Developer Tools in Safari, follow these simple steps:

Open Safari Preferences : Launch Safari and navigate to the "Safari" menu located in the top-left corner of the screen. From the drop-down menu, select "Preferences."

Access Advanced Settings : In the Preferences window, click on the "Advanced" tab. This will reveal a set of advanced settings for Safari.

Enable Develop Menu : Within the Advanced tab, locate the option labeled "Show Develop menu in menu bar" and ensure that it is checked. This action activates the Develop menu, which houses a plethora of web development tools and features.

Verify the Development Menu : After enabling the Develop menu, you should see it appear in the menu bar at the top of the screen, alongside other Safari menu options.

Once you have completed these steps, Safari's Developer Tools will be readily accessible, empowering you to delve into the intricacies of web development and gain valuable insights into the structure and behavior of web pages.

By enabling Developer Tools in Safari, you gain access to a suite of powerful resources that can elevate your web development capabilities. From inspecting and modifying web page elements to analyzing network activity and optimizing website performance, Safari's Developer Tools provide a comprehensive toolkit for enhancing your web projects.

With Developer Tools at your fingertips, you are poised to embark on an enriching journey through the realms of web development, armed with the tools and insights needed to create, optimize, and fine-tune captivating web experiences within the Safari browser.

Using Developer Tools for Web Development

Safari's Developer Tools offer a robust set of features and functionalities that empower web developers to streamline their workflows, troubleshoot issues, and optimize web projects. By leveraging these tools, developers can gain valuable insights into the inner workings of web pages and applications, ultimately enhancing the user experience and performance of their creations.

Inspecting and Modifying Web Page Elements

One of the fundamental capabilities of Safari's Developer Tools is the ability to inspect and modify web page elements in real time. By right-clicking on any element within a web page and selecting "Inspect Element," developers can access a detailed view of the HTML and CSS properties associated with that element. This feature is invaluable for understanding the structure and styling of web pages, allowing developers to make on-the-fly adjustments and see the immediate impact on the page layout.

Debugging JavaScript and Analyzing Console Output

Safari's Developer Tools include a robust JavaScript debugger, enabling developers to identify and resolve issues within their JavaScript code. By setting breakpoints, stepping through code, and examining variable values, developers can pinpoint and troubleshoot errors, ultimately improving the functionality and reliability of their web applications. Additionally, the console within Developer Tools provides a space for logging messages, errors, and warnings, offering valuable insights into the runtime behavior of JavaScript code.

Network Analysis and Performance Testing

Another powerful aspect of Safari's Developer Tools is the network panel, which allows developers to analyze network activity and optimize the performance of web pages. By monitoring network requests, loading times, and resource sizes, developers can identify opportunities for optimization, such as minimizing file sizes, leveraging caching strategies, and reducing unnecessary network requests. This capability is instrumental in creating fast and efficient web experiences for users across various devices and network conditions.

Modifying and Testing CSS in Real Time

Safari's Developer Tools provide a seamless environment for modifying and testing CSS styles directly within the browser. Developers can experiment with different styles, colors, and layouts, observing the immediate effects on web page elements. This real-time feedback accelerates the design and development process, allowing developers to fine-tune the visual presentation of their websites with precision and agility.

Leveraging Additional Tools and Resources

In addition to the aforementioned features, Safari's Developer Tools offer a wide array of resources, including the Elements panel for inspecting and editing the DOM, the Application panel for managing web storage and service workers, and the Security panel for identifying potential security vulnerabilities within web applications. These tools collectively provide a comprehensive toolkit for web developers, empowering them to create secure, performant, and visually compelling web experiences.

By harnessing the power of Safari's Developer Tools, web developers can elevate their skills, optimize their workflows, and deliver exceptional web experiences to users. Whether you are fine-tuning the layout of a responsive website, debugging complex JavaScript interactions, or optimizing the performance of a web application, Safari's Developer Tools are your indispensable companions in the journey of web development.

Inspecting and Debugging Web Pages

Inspecting and debugging web pages is a fundamental aspect of web development, and Safari's Developer Tools provide a robust set of features for this purpose. When it comes to understanding the structure and behavior of web pages, as well as identifying and resolving issues, the inspection and debugging capabilities within Safari's Developer Tools are indispensable.

Inspecting Web Page Elements

The ability to inspect web page elements is a cornerstone of Safari's Developer Tools. By right-clicking on any element within a web page and selecting "Inspect Element," developers can access a detailed view of the HTML and CSS properties associated with that element. This feature provides a comprehensive breakdown of the selected element, including its position, dimensions, styling, and any associated event listeners. This level of insight allows developers to gain a deep understanding of the composition and layout of web page elements, facilitating precise modifications and optimizations.

Modifying Web Page Elements in Real Time

In addition to inspecting web page elements, Safari's Developer Tools enable developers to modify elements in real time. By directly editing the HTML and CSS properties of elements within the Elements panel, developers can experiment with different styles, content, and layouts, observing the immediate impact on the web page. This real-time editing capability is invaluable for fine-tuning the visual presentation of web pages and rapidly iterating on design and layout changes.

Safari's Developer Tools include a powerful JavaScript debugger, which allows developers to identify and resolve issues within their JavaScript code. By setting breakpoints, stepping through code, and examining variable values, developers can pinpoint and troubleshoot errors, ultimately improving the functionality and reliability of their web applications. Additionally, the console within Developer Tools provides a space for logging messages, errors, and warnings, offering valuable insights into the runtime behavior of JavaScript code. This feature is instrumental in diagnosing and addressing JavaScript-related issues, ensuring the smooth execution of interactive and dynamic web elements.

In essence, Safari's Developer Tools provide a comprehensive suite of capabilities for inspecting and debugging web pages. From gaining insights into the structure and styling of web page elements to identifying and resolving JavaScript-related issues, these tools empower developers to create, optimize, and fine-tune web experiences with precision and efficiency. By leveraging the inspection and debugging features within Safari's Developer Tools, developers can elevate their skills, streamline their workflows, and deliver exceptional web experiences to users.

Modifying and Testing CSS and JavaScript

Modifying and testing CSS and JavaScript is a crucial aspect of web development, and Safari's Developer Tools offer a seamless environment for making real-time adjustments and testing code changes. Whether you're refining the visual presentation of a website or fine-tuning the functionality of interactive elements, Safari's Developer Tools provide a comprehensive toolkit for working with CSS and JavaScript.

Real-time CSS Modifications

Safari's Developer Tools allow developers to modify CSS styles directly within the browser, providing immediate feedback on the visual appearance of web page elements. By accessing the Styles panel, developers can experiment with different styles, colors, and layouts, observing the instant effects on the web page. This real-time editing capability accelerates the design and development process, enabling developers to iterate on visual enhancements with agility and precision.

Testing JavaScript Code

In addition to CSS modifications, Safari's Developer Tools facilitate the testing and debugging of JavaScript code. The JavaScript debugger within Developer Tools empowers developers to set breakpoints, step through code, and inspect variable values, facilitating the identification and resolution of JavaScript-related issues. By leveraging the debugging capabilities, developers can ensure the reliability and functionality of interactive elements, such as dynamic user interfaces and client-side interactions.

Performance Optimization

Furthermore, Safari's Developer Tools provide insights into the performance of CSS and JavaScript code. Developers can analyze the impact of CSS styles and JavaScript functions on web page loading times and responsiveness, identifying opportunities for optimization. By monitoring the execution of CSS and JavaScript, developers can fine-tune code to enhance the overall performance and user experience of web applications.

In summary, Safari's Developer Tools offer a comprehensive suite of features for modifying and testing CSS and JavaScript. From real-time CSS adjustments to JavaScript debugging and performance optimization, these tools empower developers to create visually compelling and functionally robust web experiences. By harnessing the capabilities within Safari's Developer Tools, developers can refine the presentation and behavior of web pages with precision, ensuring an exceptional user experience across various devices and platforms.

Network analysis and performance testing are critical components of web development, and Safari's Developer Tools provide a robust set of features for evaluating the network activity and optimizing the performance of web pages and applications.

Monitoring Network Activity

Safari's Developer Tools offer a comprehensive Network panel, which allows developers to monitor and analyze the network activity associated with a web page. This includes tracking network requests, such as HTTP requests for resources like HTML, CSS, JavaScript, images, and other assets. By examining the network waterfall, developers can gain insights into the timing and sequence of network requests, identifying potential bottlenecks and optimizing the loading process.

Resource Size and Loading Times

The Network panel within Safari's Developer Tools provides detailed information about the size and loading times of individual resources. Developers can assess the impact of resource sizes on web page performance, identifying opportunities to optimize assets for faster loading. By analyzing the loading times of resources, developers can prioritize critical content and streamline the delivery of essential assets, ultimately enhancing the overall user experience.

Safari's Developer Tools empower developers to optimize the performance of web pages by identifying and addressing potential performance bottlenecks. By leveraging the insights from the Network panel, developers can implement strategies to minimize file sizes, leverage browser caching, and reduce unnecessary network requests. Additionally, developers can assess the efficiency of third-party integrations and external resources, ensuring that web pages load quickly and responsively across various devices and network conditions.

Network Throttling

One of the standout features of Safari's Developer Tools is the ability to simulate different network conditions using network throttling. Developers can emulate various network environments, such as 3G , 4G, or slower connections, to assess the performance of web pages under different bandwidth constraints. This capability enables developers to optimize web pages for a wide range of network conditions, ensuring a consistent and reliable user experience for diverse audiences.

In essence, Safari's Developer Tools provide a comprehensive suite of capabilities for network analysis and performance testing. By monitoring network activity, assessing resource sizes and loading times, optimizing web page performance, and simulating network conditions, developers can create fast, efficient, and responsive web experiences. Leveraging the insights and tools within Safari's Developer Tools, developers can fine-tune the performance of web pages, ultimately delivering exceptional user experiences in the ever-evolving landscape of the web.

In conclusion, Safari's Developer Tools serve as a gateway to the intricate world of web development, offering a rich array of features and functionalities that empower developers to create, optimize, and fine-tune web experiences with precision and efficiency. By enabling and leveraging these tools, developers gain valuable insights into the structure, behavior, and performance of web pages, ultimately enhancing the user experience and functionality of their web projects.

From inspecting and modifying web page elements to debugging JavaScript, analyzing network activity, and optimizing performance, Safari's Developer Tools provide a comprehensive toolkit for addressing the diverse challenges of web development. The seamless integration of real-time editing, debugging, and performance analysis within the browser environment streamlines the development process, allowing developers to iterate on design and functionality with agility and precision.

Furthermore, the ability to simulate network conditions and assess the impact of resource sizes on web page performance equips developers with the tools needed to create fast, efficient, and responsive web experiences across various devices and network environments. This capability is instrumental in ensuring a consistent and reliable user experience, regardless of the user's location or network conditions.

By harnessing the power of Safari's Developer Tools, developers can elevate their skills, optimize their workflows, and deliver exceptional web experiences to users. Whether it's refining the visual presentation of a website, debugging complex JavaScript interactions, or optimizing the performance of a web application, Safari's Developer Tools are indispensable companions in the journey of web development.

In essence, Safari's Developer Tools not only provide a window into the inner workings of web pages but also empower developers to craft immersive, performant, and visually compelling web experiences. As the web continues to evolve, Safari's Developer Tools stand as a testament to Apple's commitment to providing developers with the resources and capabilities needed to thrive in the dynamic landscape of web development.

In the ever-expanding digital ecosystem, Safari's Developer Tools remain a steadfast ally for developers, offering a robust platform for innovation, creativity, and excellence in web development. Whether you're a seasoned developer or an aspiring enthusiast, Safari's Developer Tools invite you to embark on a journey of discovery and mastery, shaping the future of the web one line of code at a time.

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.

• Crowdfunding
• Cryptocurrency
• Digital Banking
• Digital Payments
• Investments
• Console Gaming
• Mobile Gaming
• VR/AR Gaming
• Gadget Usage
• Gaming Tips
• Online Safety
• Software Tutorials
• Tech Setup & Troubleshooting
• Buyer’s Guides
• Comparative Analysis
• Gadget Reviews
• Service Reviews
• Software Reviews
• Mobile Devices
• PCs & Laptops
• Smart Home Gadgets
• Content Creation Tools
• Digital Photography
• Video & Music Streaming
• Online Security
• Online Services
• Web Hosting
• WiFi & Ethernet
• Browsers & Extensions
• Communication Platforms
• Operating Systems
• Productivity Tools
• AI & Machine Learning
• Cybersecurity
• Emerging Tech
• IoT & Smart Devices
• Virtual & Augmented Reality
• Latest News
• AI Developments
• Fintech Updates
• Gaming News
• New Product Launches

How to Use Email Blasts Marketing To Take Control of Your Market

Learn to convert scanned documents into editable text with ocr, related post, how to make stairs planet coaster, how to rotate camera in planet coaster, how to make a good roller coaster in planet coaster, where is the minecraft folder, how to update minecraft windows, how to update minecraft education edition, related posts.

How To Inspect On IPhone Safari

How To Install Safari On Apple TV 4

How To Download Video On Safari

How To Inspect Page On Safari

How To Test Website On Safari On Windows

How To Enable Inspect In Safari

How To Change Location In Safari

How To Open Developer Tools On Safari

Recent stories.

Top Mini Split Air Conditioner For Summer

Comfortable and Luxurious Family Life | Zero Gravity Massage Chair

Fintechs and Traditional Banks: Navigating the Future of Financial Services

AI Writing: How It’s Changing the Way We Create Content

How to Find the Best Midjourney Alternative in 2024: A Guide to AI Anime Generators

How to Know When it’s the Right Time to Buy Bitcoin

• Privacy Overview
• Strictly Necessary Cookies

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Exclusive Deal: Get 20% Off On All Products With Coupon Code ! SALE20

Achieving Safari Compatibility on Windows: Emulation Tools and Workaround Strategies

While Apple discontinued the development of Safari for Windows in 2012, testing web applications in Safari remains important for developers targeting Mac and iOS users. This article explores various emulation tools and workaround strategies to achieve Safari compatibility testing on Windows systems.

Safari Emulation Tools

Emulation tools simulate the behavior of Safari or macOS environments on a Windows system, allowing you to test and debug compatibility issues. Here are some popular emulation tools and their features:

Remote Testing Services

Cloud-based or remote testing services are essential for effective browser compatibility testing. Here are a few notable ones:

LambdaTest is an AI-powered test orchestration and execution platform that lets you run manual and automated tests at scale with over 3000+ real devices, browsers, and OS combinations. It allows developers to test their web applications on Safari running on real Mac machines.

• Features : Live interactive testing, automated Selenium testing , and visual regression testing. It also offers a built-in issue tracking system and integrates with popular collaboration tools.
• Benefits : Test your website on real Safari browsers without the need for macOS hardware.
• Usage : Access Safari browsers on LambdaTest’s platform and perform comprehensive testing to ensure compatibility.

Virtual Machines

Virtual machines (VMs) are software-based emulations of physical computers, allowing you to run macOS and Safari on a virtualized environment within a Windows system. This approach provides a native Safari testing environment but requires a valid macOS license and sufficient hardware resources.

macOS Virtual Machine Setup

• Requirements : Create a macOS virtual machine on Windows using software like VMware Workstation or VirtualBox.
• Setup Steps : Obtain a macOS installation image (e.g., macOS Mojave) legally. Configure a new virtual machine with the macOS image, allocate resources, and install necessary drivers.
• Benefits : Running macOS on a virtual machine enables direct testing of Safari and macOS-specific features on a Windows host.

Parallels Desktop

• Features : Parallels Desktop is a commercial virtualization software that allows you to run macOS alongside Windows on a single machine.
• Benefits : It provides seamless integration between macOS and Windows environments, making it easier to test Safari compatibility on a Windows system.
• Usage : Install Parallels Desktop on your Windows machine, create a macOS virtual machine, and test your web projects in Safari.

VMware Fusion

• Features : VMware Fusion is another virtualization software designed for macOS.
• Benefits : It offers similar capabilities to Parallels Desktop, allowing you to run macOS and Safari on a Windows PC for testing purposes.
• Usage : Set up VMware Fusion, create a macOS virtual machine, and conduct thorough testing to ensure Safari compatibility.

Workaround Strategies

Workaround strategies involve techniques that developers can implement to handle Safari compatibility issues on Windows effectively. Here are some key strategies:

A. CSS Vendor Prefixes

-webkit- prefix for safari-specific styles.

Safari, especially older versions, requires vendor prefixes like -webkit- for certain CSS properties to render styles correctly.

• Example : -webkit-transition: background-color 0.3s ease;

Autoprefixer for Automatic Vendor Prefixing

Autoprefixer is a tool that automatically adds necessary vendor prefixes to your CSS during the build process.

• Usage : Integrate Autoprefixer into your development workflow using build tools like Gulp, Grunt, or webpack.

B. JavaScript Feature Detection

Modernizr library.

Modernizr is a JavaScript library that detects browser features and provides classes in the HTML document based on feature support.

• Usage : Include Modernizr in your project, and use its feature detection capabilities to handle Safari-specific features or fallbacks.

Custom Feature Detection Code

Develop custom JavaScript code to detect specific features or browser behaviors relevant to Safari compatibility.

• Usage : Write JavaScript functions or use browser feature detection APIs to check for Safari-specific features and implement appropriate actions or fallbacks.

C. Graceful Degradation and Progressive Enhancement

Providing fallback options for unsupported features.

Implement graceful degradation by providing fallback options or alternative content for features not supported in Safari or older browser versions.

• Usage : Use CSS techniques like feature queries (@supports) or conditional comments in HTML to target specific browsers and provide fallback styles or content.

Enhancing the Experience for Supported Browsers

Embrace progressive enhancement by enhancing the user experience for browsers that support advanced features or standards.

• Usage : Use feature detection to apply enhancements selectively, such as adding animations, transitions, or interactive elements for modern browsers while maintaining a functional experience in older or limited browsers.

Testing and Debugging

Here are methods and tools to ensure your website works smoothly across different browsers, including Safari:

A. Safari Developer Tools

Web inspector.

Web Inspector is a built-in tool in Safari Developer Tools that allows you to inspect and debug web pages.

• Usage : Use Web Inspector to inspect HTML elements, view CSS styles, debug JavaScript code, and analyze network requests. It helps identify and fix layout issues, CSS rendering problems, JavaScript errors, and performance issues specific to Safari.

Console and Debugging

Safari Developer Tools include a console for logging messages, errors, and warnings during website execution.

• Usage : Use the console for debugging JavaScript code, checking variable values, and identifying runtime errors. Debugging in Safari’s console helps troubleshoot JavaScript issues, detect compatibility problems, and ensure code functionality across browsers.

B. Cross-Browser Testing Methodologies

Manual testing.

Manual testing involves manually checking your website on different browsers and devices to identify compatibility issues.

• Usage : Open Safari on a Windows system (using emulation tools or a macOS VM) and navigate through your website to test its functionality and appearance.

Automated Testing with Tools like Selenium

Automated testing uses scripts or test cases to automate browser interactions and validate website functions across multiple browsers.

• Usage : Use tools like Selenium WebDriver to write automated test scripts that simulate user actions (e.g., clicking buttons, filling forms) on Safari browsers. Automated testing improves testing efficiency, reduces manual effort, and ensures consistent testing across different browser versions and platforms, including Safari on Windows.

LambdaTest: Comprehensive Cross-Browser Testing Solution

LambdaTest is a trusted cloud-based testing platform designed for cross-browser compatibility testing. It offers a range of features to enhance your testing process:

• Browser Testing on Real Safari Browser Online : Test your website on real Safari browsers running on real machines, ensuring accurate cross-browser compatibility from legacy to the latest versions.
• In-Built DevTools : Use LambdaTest’s in-built DevTools to debug web applications across multiple devices with different screen sizes, ensuring optimal performance and functionality.
• Network Throttling : Check your mobile view website’s responsiveness under different network profiles to ensure a seamless user experience across varying network conditions.
• 24/7 Support : Benefit from LambdaTest’s 24/7 in-app customer chat support and email support, ensuring prompt assistance and resolution of any testing-related queries or issues.
• Geolocation Testing : Test your website or mobile account from different geoIPs to verify the user experience across different locations and ensure consistent performance globally.
• 120+ Integrations : Integrate LambdaTest effortlessly with your testing stack using a wide array of 120+ out-of-the-box integrations, enhancing your testing capabilities and workflow efficiency.
• Parallel Testing : Run Selenium scripts on a grid of real Safari browsers online, boosting browser coverage and testing efficiency. Access desktop and mobile Safari browsers simultaneously for faster test execution and improved testing coverage.
• Private Real Device Cloud : Test on a private real device cloud with dedicated iOS and Android devices exclusively for your team, ensuring 24×7 availability and highly secure testing environments behind your firewall.
• Test Safari Browsers Online on Windows Machines : Test on all Safari browsers on Windows machines directly from your own machine without the need to download or install anything, eliminating the hassle of Safari simulators.

Achieving Safari compatibility on Windows is a critical aspect of web development to ensure a seamless user experience across different platforms and browsers. It’s crucial to ensure Safari compatibility as it is a widely used browser, especially among macOS users. Continuous testing and iteration are also essential for maintaining optimal cross-browser compatibility. Regularly test your website using emulation tools, such as LambdaTest, and implement workaround strategies like CSS vendor prefixes and JavaScript feature detection to address Safari-specific issues. Iterate on your testing approach based on feedback and changes in browser behavior to ensure a consistently excellent user experience across Safari and other browsers.

Hi! We are A WP Life, we develop best WordPress themes and plugins for blog and websites.

Safari for Windows 10: How To Get and Install It

Plus, why you shouldn't do this

If you use a Mac or an iPhone, it’s hard to pick a different browser over Safari. It’s incredibly fast, uses minimal resources, and respects user privacy. But if you also use a PC, you won’t have the luxury of installing Apple’s flagship browser on Windows since the Cupertino-based tech giant does not develop Safari for the Windows PC. That’s a major issue when your gear consists of cross-platform products.

What you can do is install an older version of Safari on Windows 10 or 11, although we highly advise against that due to compatibility and security-related issues. The best and safest option is to sync your browsing data from Safari to Chrome or Edge on your PC via iCloud for Windows. Setting up macOS on your PC and using Safari that way is another feasible option.

Download and Install Safari on Your Windows PC

Apple halted the development of Safari for Windows in 2012. However, the final version of the browser (Safari v.5.1.7) is freely available on the internet, so you can quickly download and install it on your Windows 10 or 11 PC. The problem? It’s terribly slow and dated, lacks compatibility with most web apps, and poses security risks. You also can’t sync your browsing data, so it’s not a solution if you want to access bookmarks and passwords.

Regardless, the steps below will walk you through downloading and installing Safari on your Windows 10/11 PC. But unless you just want to have a feel of how Safari looked almost a decade earlier, we recommend you stay away from it.

1. Download the Safari installer from a software download portal such as Uptodown , Filehippo , or TechSpot . It weighs in at 36.7MB. Unfortunately, Apple no longer supports Safari for Windows, so you can’t get it from an official source.

2. Double-click the downloaded SafariSetup executable file.

3. Select Next on the Safari Setup’s Welcome screen.

4. Accept the license agreement and select Next .

5. Specify if you want to add Safari as a desktop shortcut or not. Also, decide if you prefer it as the default browser on your computer (we recommend you don’t select this option). Select Next to continue.

6. Pick an install directory (or leave the default folder path) and select Install .

7. Wait for the Safari installer to finish installing Safari on your computer. Then, select Finish .

After installing Safari, you can choose to open it by double-clicking the Safari icon on the desktop. Or, you can open it by selecting Safari on the Start menu’s programs list.

Despite being almost ten years old, Safari for Windows doesn’t look too out of place. To the top, you have the familiar URL bar (you can’t use it to perform searches, however), a Bookmarks strip underneath, and a dedicated Search bar on the left corner. By default, new tabs display frequently visiting sites in thumbnail format—you can use the Top Sites and History tabs to switch them and your browsing history.

Selecting the cog-shaped icon at the right corner of the screen reveals the Safari menu, where you can choose to customize the toolbar, access your browsing history, launch a private browsing window, and so on.

Selecting Preferences opens the Preferences pane, which provides options to modify the homepage, pick a default search engine, adjust privacy settings, manage extensions (although extensions support is non-existent), etc.

What the browser does not allow is to sign in with an Apple ID. That makes it impossible to sync your browsing data from an iPhone or Mac. Even if the functionality were present previously, Apple probably would’ve stopped you from signing in to it by now.

During our Safari tests on Windows, the browser started showing its age. Most websites took a long time to load, while web apps (such as YouTube and Google Maps) simply failed or prompted us to switch to a compatible browser. Other than for basic web browsing, it was practically useless.

Safari for Windows also hasn’t received security updates in almost a decade, so we recommend that you don’t attempt to use it for any sensitive activities such as banking or shopping.

Sync Safari Browsing Data via iCloud for Windows

If your gear consists of a PC and iPhone or Mac, you can sync your passwords and bookmarks from Safari with Google Chrome and vice-versa by installing iCloud for Windows. That’s the most convenient method for accessing your browsing data on each platform.

iCloud for Windows also offers password syncing for Microsoft Edge and bookmarks syncing for Mozilla Firefox. However, only Chrome receives support for both.

If you don’t have iCloud for Windows on your PC, you can get it via the Microsoft Store or the Apple website . If you already have it, make sure to upgrade it to at least version 12.5 or later (you can do that via the Microsoft Store’s Downloads and updates screen or by running the Apple Software Update applet).

With iCloud for Windows up and running, open the iCloud app and check the boxes next to Passwords and Bookmarks . You can also activate additional iCloud services such as Photos and Drive if you want.

Follow that by installing the iCloud Passwords on Google Chrome or Microsoft Edge. The former lets you insert and save passwords to the iCloud Keychain. You can also use the iCloud Passwords app (which installs automatically alongside iCloud for Windows) to manage your passwords in Windows. On the other hand, the iCloud Bookmarks extension syncs passwords between Chrome/Firefox and Safari.

Download: iCloud Passwords (Chrome)

Download: iCloud Bookmarks (Chrome)

Download: iCloud Passwords (Edge)

Download: iCloud Bookmarks (Firefox)

Run Safari via a macOS Virtual Machine

If you want to use the most recent version of Safari on your PC (perhaps to test a feature or extension), the only way you can do that is by running macOS via virtualization software. However, the procedure is not convenient. For starters, Mac’s operating system is not natively supported by most VM software, so installation generally relies on workarounds relying on additional software. Also, it requires lots of free disk space and uses up system resources, not to mention that virtual machine guests generally run sluggishly compared to the host operating system.

If you still want to go ahead and install macOS, the easiest way to do that is by following the instructions within this macOS Virtualbox project on GitHub. It lets you install macOS Catalina as a virtual machine via a Bash script. We’ve condensed it into the following steps:

1. Download and install Oracle VM VirtualBox on your PC (it’s free).

2. Download and install Cygwin with the following dependencies (you can select them during installation).

3. Download the macos-guest-virtualbox.sh bash script from GitHub.

4. Open the Cygwin Terminal. Then, drag and drop the bash script and press Enter .

5. Follow the on-screen instructions to set up macOS as a virtual machine on your PC.

After the setup procedure, you can open and use Safari by selecting the Safari icon on the Mac’s Dock. Before you do that, however, it’s a good idea to update macOS and Safari. To do that, open the Apple menu and select System Preferences > Software Update > Update Now .

iCloud for Windows Is the Most Convenient

Although it’s possible to download and install Safari on your Windows 10/11 computer, we recommend you stray away from it. The security risks alone make it impractical, and it’s not like you can use it for any serious web browsing anyway due to compatibility issues.

Since the most likely reason you would want to install Safari involves syncing your passwords and bookmarks, using iCloud for Windows is the only viable alternative. But if you do have the time and just want to try out the latest version of Safari, your best option is to set up macOS as a virtual machine on your PC.

Dilum Senevirathne is a freelance tech writer and blogger with three years of experience writing for online technology publications. He specializes in topics related to iOS, iPadOS, macOS, and Google web apps. When he isn't hammering away at his Magic Keyboard, you can catch him binge-watching productivity hacks on YouTube. Read Dilum's Full Bio

Read More Posts:

Leave a Reply

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

Safari User Guide

• Get started
• Go to a website
• Bookmark webpages to revisit
• See your favorite websites
• Use tabs for webpages
• Import bookmarks and passwords
• Pay with Apple Pay
• Autofill credit card info
• View links from friends
• Keep a Reading List
• Hide ads when reading
• Translate a webpage
• Download items from the web
• Add passes to Wallet
• Save part or all of a webpage
• Print or create a PDF of a webpage
• Interact with text in a picture
• Change your homepage
• Customize a start page
• Create a profile
• Block pop-ups
• Make Safari your default web browser
• Hide your email address
• Manage cookies
• Clear your browsing history
• Browse privately
• Prevent cross-site tracking
• See who tried to track you
• Change Safari settings
• Keyboard and other shortcuts

Use the developer tools in the Develop menu in Safari on Mac

If you’re a web developer, the Safari Develop menu provides tools you can use to make sure your website works well with all standards-based web browsers.

If you don’t see the Develop menu in the menu bar , choose Safari > Settings, click Advanced, then select “Show features for web developers.”

Open Safari for me

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

Join our free community Discord server here !

🤖 Level up your chatbot knowledge with our latest AI course.

🐸 What's happening at Treehouse? 💚

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here .

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

General Discussion

Torger Angeltveit

Safari on windows 10 for developers.

Hi, i wanna make my website fit for safari, but i'm developing on Windows machine. Is it possible to download a real version of safari for windows? Or is there any other way i can develop for safari without having a mac?

Raz Damaschin

Apple used to have a Safari version for windows but they killed the project a while back. You can however use something like https://www.browserstack.com/ to test your website on different browsers.

Posting to the forum is only allowed for members with active accounts. Please sign in or sign up to post.

WebKit Features in Safari 17.5

May 13, 2024

by Jen Simmons

Happy May! It’s time for another release of Safari — our third significant update of 2024. With just a month until WWDC24 and the unveiling of what’s coming later this year, we are happy to get these 7 features and 22 bug fixes into the hands of your users today.

There are several exciting new CSS features in Safari 17.5, including text-wrap: balance , the light-dark() color function, and @starting-style , plus the ability to use feature queries with @import rules. Let’s look at how you can put each one to use.

Text wrap balance

On the web, with its flexible container widths, inconsistent lengths of content, and variation between browsers, it can feel impossible to avoid having text wrap in such a way that too few words end up all by themselves on a very short last line.

When type was set by hand, typographers would painstakingly avoid this undesirable result by manually moving content around. Over the decades, web developers have tried a series of different tricks to avoid orphans in CSS, in HTML, in JavaScript, and in content management systems. None work very well. The attempts usually feel hacky, laborious, and fragile.

To solve this and other frustrations, the CSS Working Group has defined three new options that you can use to change how text will wrap. You can switch from default wrapping to another style with text-wrap . WebKit for Safari 17.5 adds support for the first of these new options — balancing.

The text-wrap: balance rule asks the browser to “balance” the lines of text and make them all about the same length.

You can see how now the text no longer fills the containing block — there’s a large amount of space on the right of the words. This is expected, and something you’ll want to think about as you decide when to use text-wrap: balance .

Where exactly each line of text will break when using text-wrap: balance may be slightly different in each browser. The CSS Text level 4 web standard leaves it up to each browser engine team to decide which algorithm they want to use in determining how exactly to wrap balanced text.

It can be computationally expensive for the browser to count characters and balance multiple lines of text, so the standard allows browsers to limit the number of lines that are balanced. Chromium browsers balance 6 or fewer lines, Firefox balances 10 or fewer, while Safari/WebKit balances an unlimited numbers of lines.

For now, Safari does not balance text if it’s surrounding a float or initial letter. And Safari disables the balancer if the content contains preserved tabs or soft hyphens.

Text wrap shorthands and longhands

The text-wrap property is actually a shorthand for two longhand properties: text-wrap-style and text-wrap-mode .

The text-wrap-mode property provides a mechanism for expressing whether or not text should wrap.

The wrap value turns it on, and the nowrap value turns it off, just like the values for white-space . (In fact, text-wrap-mode is the newly introduced longhand of white-space .) WebKit added support for text-wrap-mode: wrap and nowrap in Safari 17.4 .

The text-wrap-style property selects how to wrap. The initial value is auto — asking text to wrap in the way it has for decades. Or, you can choose a value to switch to another “style” of wrapping.

WebKit for Safari 17.5 adds support for text-wrap-style: balance , stable , and auto .

Of course, the text-wrap shorthand is a way to combine text-wrap-mode and text-wrap-style and declare them together. If you write text-wrap: balance it’s the same as text-wrap: wrap balance , meaning: “yes, please wrap, and when you do, please balance the text”.

Full support will eventually include three properties and six values. No browser supports everything yet, so be sure to look up support for the text-wrap , text-wrap-mode , and text-wrap-style properties, as well as the balance , pretty , stable , auto , wrap , and nowrap values.

The balance , pretty , and stable values will simply fall back to auto in browsers without support, so progressive enhancement is easy. You can use these values today, no matter how many of your users don’t yet have a browser with support. They will simply get auto -wrapped text, just like they would if you didn’t use text-wrap . Meanwhile, those users with support will get an extra boost of polish.

Dark mode and the light-dark() color function

More and more, users expect websites and web apps to support dark mode . Since Safari 12.1 , the prefers-color-scheme media query has given you the ability to write code like this:

Or perhaps you’ve used variables to define colors for both light and dark mode at once, making it easier to use them everywhere.

Well, now there’s a new option — the light-dark() function. It makes defining colors for dark mode even easier.

First, inform the browser you are providing a design for both light and dark modes with the color-scheme property. This prompts the browser to switch the default user agent styles when in dark mode, ensuring the form controls appear in dark mode, for example. It’s also required for light-dark() to work correctly.

Then, any time you define a color, you can use the light-dark() function to define the first color for light mode, and the second color for dark mode.

You can still use variables, if you’d like. Perhaps you want to structure your code like this.

An often-asked question when learning about light-dark() is “does this only work for colors?” Yes, this function only works for colors. Use the prefers-color-scheme media query to define the rest of your color-scheme dependent styles.

Starting style

WebKit for Safari 17.5 adds support for @starting-style . It lets you define starting values for a particular element. This is needed to enable a transition when the element’s box is created (or re-created).

In the above example, the background-color will transition from transparent to green when the element is added to the document.

Many developers are excited to use @starting-style along with display: none interpolation. To do so, WebKit also needs to support animation of the display property, which has not yet shipped in Safari. You can test this use case today in Safari Technology Preview .

Features queries for importing CSS

WebKit for Safari 17.5 adds the supports() syntax to @import rules. Now you can conditionally import CSS files based on whether or not there’s support for a certain feature.

For example, you could load different stylesheets based on whether or not CSS Nesting is supported .

Or you could load certain CSS files when a browser does not have support for Cascade Layers . (Note that any @import rules with layer() will automatically be ignored in a browser without layer support.)

Or simply test for a feature. Here, these layout styles will only be loaded if Subgrid is supported .

WebKit for Safari 17.5 adds support for AV1 to WebCodecs when an AV1 hardware decoder is available.

WebKit for Safari 17.5 adds WebGL support for EXT_conservative_depth and NV_shader_noperspective_interpolation .

WKWebView adds support for logging MarketplaceKit errors to the JavaScript console. This will make errors easier to debug.

Bug Fixes and more

In addition to these new features, WebKit for Safari 17.5 includes work polishing existing features.

Accessibility

• Fixed a bug preventing VoiceOver word echoing in some text fields. (122451549) (FB13592798)
• Fixed flickering with multiple accelerated animations and direction changes. (117815004)

Authentication

• Fixed excludeCredentials property being ignored during a passkey registration request. (124405037)
• Fixed the proximity calculation for implicit @scope . (124640124)
• Fixed the Grid track sizing algorithm logical height computation avoid unnecessary grid item updates. (124713418)
• Fixed any @scope limit making the element out of scope. (124956673)
• Fixed native text fields becoming invisible in dark mode. (123658326)
• Fixed fallback native <select> rendering in dark mode. (123845293)
• Fixed scrolling for an element when a video element with pointer-events: none is placed over it. (118936715)
• Fixed HTML5 <audio> playback to continue to the next media activity when in the background. (121268089) (FB13551577)
• Fixed AV1 to decode in hardware on iPhone 15 Pro. (121924090)
• Fixed audio distortion over internal speakers when streaming content in web browsers. (122590884)
• Fixed firing loadeddata events for <audio> and <video> on page load. (124079735) (FB13675360)
• Fixed adjusting the size of the scrollable area when changing betwen non-overlay and overlay scrollbars. (117507268)
• Fixed flickering when showing a layer on a painted background for the first time by avoiding async image decoding. (117533495)
• Fixed line breaking before or between ruby sequences. (122663646)
• Fixed mousemove events in an iframe when the mouse is clicked from outside the iframe and then moves into it while the button is held down. (120540148) (FB13517196)
• Fixed several issues that caused Web Push to not show notifications when the web app or Safari was not already running. (124075358)

Web Inspector

• Fixed info and debug buttons not appearing in the Console Tab until new console messages are displayed. (122923625)
• Fixed WebCodecs to correctly use the VP9 hardware decoder. (123475343)
• Fixed no incoming video in Teams VA. (124406255)
• Fixed the camera pausing occasionally when torch is enabled. (124434403)

Updating to Safari 17.5

Safari 17.5 is available on iOS 17.5 , iPadOS 17.5 , macOS Sonoma 14.5 , macOS Ventura, macOS Monterey and in visionOS 1.2.

If you are running macOS Ventura or macOS Monterey, you can update Safari by itself, without updating macOS. On macOS Ventura, 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 17.5, 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, or your WebKit bug report about web technologies or Web Inspector. 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 17.5 release notes .

• a. Send us an email
• b. Anonymous form
• Buyer's Guide
• Upcoming Products
• Tips / Contact Us
• Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

Apple Releases Safari Technology Preview 194 With Bug Fixes and Performance Improvements

Apple last week released a new update for Safari Technology Preview , the experimental browser Apple first introduced in March 2016. Apple designed the ‌Safari Technology Preview‌ to test features that may be introduced into future release versions of Safari.

The current ‌Safari Technology Preview‌ release is compatible with machines running macOS Ventura and macOS Sonoma , the latest version of macOS that Apple released in September 2023.

The ‌Safari Technology Preview‌ update is available through the Software Update mechanism in System Preferences or System Settings to anyone who has downloaded the browser . Full release notes for the update are available on the Safari Technology Preview website .

Apple's aim with ‌Safari Technology Preview‌ is to gather feedback from developers and users on its browser development process. ‌Safari Technology Preview‌ can run side-by-side with the existing Safari browser and while designed for developers, it does not require a developer account to download.

Get weekly top MacRumors stories in your inbox.

Popular Stories

iMessage Down for Some Users [Update: Service Restored]

Troubling iOS 17.5 Bug Reportedly Resurfacing Old Deleted Photos

iPhone 16 Pro Max Looks This Much Bigger Beside iPhone 15 Pro Max

iOS 17.5 Bug May Also Resurface Deleted Photos on Wiped, Sold Devices

OLED iPad Pro Users Report 'Grainy' Displays, But It May Not Be a Defect

iPhone Emulators on the App Store: Game Boy, N64, PS1, PSP, and More

Next article.

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

Apple News+ improvements, cross-platform tracker alerts, website app downloads for the EU, and more.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

AI-focused improvements, new features for Calculator and Notes, and more.

Action button expands to all models, new Capture button, camera improvements, and more.

Other Stories

3 days ago by Tim Hardwick

4 days ago by Tim Hardwick

6 days ago by Juli Clover

6 days ago by Tim Hardwick

• Firefox Developer Edition

Welcome to your new favorite browser. Get the latest features, fast performance, and the development tools you need to build for the open web.

Firefox Developer Edition — English (US)

• Windows 64-bit
• Windows 64-bit MSI
• Windows ARM64/AArch64
• Windows 32-bit
• Windows 32-bit MSI
• Linux 64-bit
• Linux 32-bit

Your system may not meet the requirements for Firefox, but you can try one of these versions:

Firefox Developer Edition is no longer supported on Windows 8.1 and below.

Please download Firefox ESR (Extended Support Release) to use Firefox.

Download Firefox ESR 64-bit

Download Firefox ESR 32-bit

Firefox Developer Edition is no longer supported on macOS 10.14 and below.

• Download for Linux 64-bit
• Download for Linux 32-bit

Using Debian, Ubuntu or any Debian-based distribution? You can set up our APT repository instead .

Firefox Developer Edition automatically sends feedback to Mozilla. Learn more

The browser made for developers

All the latest developer tools in beta in addition to features like the Multi-line Console Editor and WebSocket Inspector.

A separate profile and path so you can easily run it alongside Release or Beta Firefox.

Preferences tailored for web developers : Browser and remote debugging are enabled by default, as are the dark theme and developer toolbar button.

Inactive CSS

Firefox DevTools now grays out CSS declarations that don’t have an effect on the page. When you hover over the info icon, you’ll see a useful message about why the CSS is not being applied, including a hint about how to fix the problem.

Firefox DevTools

The new Firefox DevTools are powerful, flexible, and best of all, hackable. This includes a best-in-class JavaScript debugger, which can target multiple browsers and is built in React and Redux.

Master CSS Grid

Firefox is the only browser with tools built specifically for building and designing with CSS Grid. These tools allow you to visualize the grid, display associated area names, preview transformations on the grid and much more.

Fonts Panel

The new fonts panel in Firefox DevTools gives developers quick access to all of the information they need about the fonts being used in an element. It also includes valuable information such as the font source, weight, style and more.

Design. Code. Test. Refine.

Build and perfect your sites with firefox devtools.

Inspect and refine code to build pixel-perfect layouts.

Learn more about Page Inspector

Learn more about Web Console

Powerful JavaScript debugger with support for your framework.

Learn more about JavaScript Debugger

Monitor network requests that can slow or block your site.

Learn more about Network Monitor

Storage panel

Add, modify and remove cache, cookies, databases and session data.

Learn more about Storage Panel

Responsive Design Mode

Test sites on emulated devices in your browser.

Learn more about Responsive Design View

Visual Editing

Fine-tune animations, alignment and padding.

Learn more about Visual Editing

Performance

Unblock bottlenecks, streamline processes, optimize assets.

Learn more about Performance Tools

Find memory leaks and make your application zippy.

Learn more about Memory Tools

Style Editor

Edit and manage all your CSS stylesheets in your browser.

Learn more about Style Editor

Feedback makes us better. Tell us how we can improve the browser and Developer tools.

Join the conversation

Get involved

Help build the last independent browser. Write code, fix bugs, make add-ons, and more.

Download the Firefox browser made for developers

View in English

Meet Safari Web Extensions on iOS

Safari extensions

Enhance and customize the web browsing experience on iPhone, iPad, and Mac with Safari extensions. Using powerful native APIs and frameworks, as well as familiar web technologies such as HTML, CSS, and JavaScript, you can easily create Safari extensions in Xcode and distribute them on the App Store in the Extensions category. Xcode 12 and later supports the popular WebExtension API and includes a porting tool to make it easy to bring your extensions to Safari.

Blocking content

Give users the ability to block certain content types on Safari iOS, iPadOS, and macOS. Built with Xcode, these app extensions are designed for speed and don’t slow down browsing. And because extensions never see what webpages users visit, user data is protected.

Learn about content blockers

Web extensions

Extend the web-browsing experience by allowing Safari to read and modify web page content. Now supported in iOS 15 and iPadOS 15, Safari web extensions are available on all Apple devices that support Safari. These extensions are built with Xcode and can communicate and share data with native apps — so you can integrate app content into Safari or send web data back to your app to create a unified experience.

Learn about Safari web extensions

Distributing and managing extensions

The Extensions category on the App Store for iPhone, iPad, and Mac showcases Safari extensions, with editorial spotlights and top charts to help people discover and download great extensions from the developer community. When your Safari extension is ready to be released, upload it to App Store Connect for distribution on the App Store. Apple reviews all extensions and updates to ensure they work reliably. Before submitting for review, make sure to read the guidelines for extensions .

Get started with App Store Connect

Converting extensions from other browsers

Web extensions that work in browsers other than Safari can be converted to support Safari on Apple platforms. Run the command-line web extension converter to create an Xcode project configured with a macOS app and/or iOS or iPadOS app that includes an extension that can be enabled in Safari.

Learn about converting a web extension for Safari

Upgrading macOS Safari web extensions to support iOS and iPadOS

It's easy to upgrade an existing macOS Safari web extension to also support iOS and iPadOS. Simply rerun your project through the command-line web extension converter tool with the --rebuild-project option. This will create a new Xcode project based on your existing project that includes extensions for these platforms.