css for safari

Controls the level of style and functionality of the site, a lower fidelity meaning less bandwidth, battery, and CPU usage. Learn more .

Custom Style Sheets in Safari

I first heard mention of adding a custom style sheet in Safari a couple months back. I honestly can’t remember where I saw it but I was reading something and, in passing, the author mentioned the idea of hiding the right sidebar on Twitter using a custom style sheet in Safari. This thing:

It’s funny how you sometimes miss the entire point of someone’s writing and selectively remember what you want, in this case “hey, I can hide that dumb module on Twitter with little effort?” I’d like to say that I have the self-discipline to avoid clicking on anything in that module, but unfortunately I am not that strong of a person. Sometimes I just get bored and something there makes me think “oh, hmm, I wonder...” and then I click it. It’s one of those things where, if it wasn’t there, it wouldn’t be a problem. Like keeping cookies right next to your desk. But it’s frictionless and easy and RIGHT THERE that I succumb. But I digress. My weaknesses are not on trial in this post.

The thought hit me: “hey I should hide that right sidebar on twitter.com using a custom style sheet in Safari!” So I did. And then I moved on with life. I never thought to write a post about it because, you know, custom style sheets in a browser? That’s old news.

But then, I recently found this post published in November of 2020 about customizing your browsing experience using custom style sheets and thought “I guess this isn’t old news just quite yet.” Plus I’m trying to write a lot more this year , so here we are.

Note: it’s worth mentioning that hiding the right sidebar in twitter isn’t a novel idea. Craig Hockenberry created a Safari extension that’ll do it for you called “Fixerrific”. Granted, like my custom style sheet, this removes the entire right sidebar, including the search box which you might actually find useful. That said, you can still access the search functionality on twitter by going to the Explore tab.

How I Did It

First off, Safari lets you specify a custom style sheet.

In case you don’t know, a custom style sheet is a bunch of CSS rules that you get to specify and then the browser will apply them to every single web page you visit .

The first thing I needed to do was open twitter.com and find out what type of CSS rule I could write to target that right sidebar. I can tell you, it wasn’t easy. Twitter has a bunch of generated classes names, which I’m assuming are quite dynamic, so finding a rule that would target the right sidebar and not change in the near future seemed like it might be tough. But then I found it: a DOM node which encompassed the entire right sidebar that had a very specific attribute data-testid="sidebarColumn" .

I can’t say for sure, but that looks like one of those attributes the QA team appends to certain elements they want to find with their automated browser tests. The whole purpose of those kinds of attributes is so the engineers won’t touch them and change their names, that way the automated tests can run for a long time without breaking. Again, I can’t make any guarantees, but this selector will probably be around for a while. So I felt pretty confident I could use that selector and not have it break in a short period of time due to twitter refactoring their DOM markup.

Once I had a selector I could use, I opened my text editor and created the following CSS file:

From there, I saved the .css file in my Dropbox folder (for backup purposes, i.e. a lazy man’s version control) then opened Safari’s preferences and selected my newly created file. A restart of Safari and boom! The sidebar was gone.

Feeling emboldened and empowered with my CSS sword of righteousness, I figured I’d go ahead and get rid of the DM/chat widget thing twitter recently introduced. It was merely visual noise to me. And fortunately, it had a similar way to be targeted: [data-testid="DMDrawer"] .

Pretty cool. Now I have a version of twitter custom tailored to me, free of a lot of distractions I don’t want to see.

Observations Nobody Asked For

If you write a lot of custom styles for sites across the web, you could start running into naming collisions. It would be neat if you could scope styles to a specific domain. Maybe there’s a way to do it? I couldn’t think of one. Imagine:

JavaScript has access to a page’s URL via window.location but AFAIK that’s not available—at least not in any standardized way—in CSS.

It's likely a terrible idea, but we have custom user style sheets, is there such a thing as a custom user scripts? Imagine giving a .js file to the browser and it runs it on every single page, like a custom style sheet. Why? Because I want to specify all my custom styles using JavaScript not CSS.

Just kidding.

But seriously, if there was something like this, I could have a script that runs on every page and sticks an attribute on the root html element with the page’s URL. Imagine:

This would result in every page getting an attribute on the root element with the current page’s href on it.

This would allow me to scope every single one of my custom style sheet selectors to a specific domain:

Honestly, that sounds cool but impractical (not to mention the incredible security implications). It’s fun to think about though.

But hey, if I felt like disabling JavaScript, I could use this theoretical custom script functionality to run the following JavaScript on ever page I visit, just to show who really is in power:

I love old-school browser functionality like this. Can you imagine a feature like custom style sheets being proposed and implemented in today’s world? I feel like this is in Safari as a holdover from a bygone era. Could it ever get the momentum to happen today? I worry Apple might take it out sometime in the future.

All that said, if you want to read more, this post has a perspective on the history of custom style sheets in Safari that you might find interesting.

Update: 2020-01-14

I received an email from John P. Rouillard who read my question about having custom user scripts and said “You mean like greasemonkey or tapermonkey?”

I realized when I wrote that paragraph that I was merely describing what browser extensions are for. What I was trying to get at is that it would be really cool if custom user scripts were a feature of the browser, i.e. adding a custom user script was as simple as adding a custom style sheet: select a .js file on disk and boom, you’re done.

That said, maybe I’ll give one of these user scripts extensions a try. I’ve heard of greasemonkey and used it back in like 2012. But I’ve never heard of tampermonkey. Looks like it’s open source and even available for Safari . Thanks John!

DEV Community

Posted on Apr 23, 2021 • Updated on Oct 10, 2022

How to Target Specific Browsers With CSS

Web browsers are built with different rendering engines, and this causes small differences in the way your website appears between browsers. The sizing may be a little different, the colors aren't consistent, and many more things of that nature.

To counter this, we can use the following CSS to target and style specific browsers.

Chrome & Safari (Webkit)

Microsoft edge, ie11 and up, top comments (0).

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

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

Anthropic Claude with tools using Python SDK

Thomas Taylor - Apr 21

Decoding JavaScript Variables: A Comprehensive Overview

Shaon Kabir - Apr 21

Programação não é fácil, mas ao mesmo tempo é fascinante

Cris Souza - Apr 22

Earth Day Frontend Challenge

Rebeccca Peltz - Apr 24

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

Change CSS rules only in Safari

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

How to apply css rules to safari only

The solution.

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

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

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

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

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

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

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

Webmentions

You might also like these.

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

Make the first letter spread multiple lines

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

Getting started with Nx

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

How to make a UI element persistent in Gatsby

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

How to filter all MDX articles by tags

• The Best Tech Gifts Under $100
• Traveling? Get These Gadgets!

How to Activate and Use Responsive Design Mode in Safari

Access developer tools in Apple's web browser

What to Know

• To enable: Preferences > select Advanced tab > toggle Show Develop menu in menu bar on.
• To use: select Develop > Enter Responsive Design Mode in Safari toolbar.

This article explains how to enable Responsive Design Mode in Safari 9 through Safari 13, in OS X El Capitan through macOS Catalina.

How to Enable Responsive Design Mode in Safari

To enable the Safari Responsive Design Mode, along with other Safari developer tools:

Go to the Safari menu and select Preferences .

Press the keyboard shortcut Command + , (comma) to access Preferences quickly.

In the Preferences dialog box, select the Advanced tab.

At the bottom of the dialog box, select the Show Develop menu in menu bar check box.

You'll now see Develop in the top Safari menu bar.

Select Develop > Enter Responsive Design Mode in the Safari toolbar.

Press the keyboard shortcut Option + Command + R to enter Responsive Design Mode quickly.

The active web page displays in Responsive Design Mode. At the top of the page, choose an iOS device or a screen resolution to see how the page will render.

Alternatively, see how your web page will render in various platforms by using the drop-down menu above the resolution icons.

Safari Developer Tools

In addition to Responsive Design Mode, the Safari Develop menu offers other useful options.

Open Page With

Opens the active web page in any browser currently installed on the Mac.

When you change the User Agent, you can fool a website into thinking you're using another browser.

Show Web Inspector

Displays all a web page's resources, including CSS information and DOM metrics.

Show Error Console

Displays JavaScript , HTML, and XML errors and warnings.

Show Page Source

Lets you view the source code for the active web page and search the page contents.

Show Page Resources

Displays documents, scripts, CSS, and other resources from the current page.

Show Snippet Editor

Lets you edit and execute fragments of code. This feature is useful from a testing perspective.

Show Extension Builder

Helps you build Safari extensions by packaging your code accordingly and appending metadata.

Start Timeline Recording

Lets you record network requests, JavaScript execution, page rendering, and other events within the WebKit Inspector.

Empty Caches

Deletes all stored caches within Safari, not only the standard website cache files.

Disable Caches

With caching disabled, resources are downloaded from a website each time an access request is made as opposed to using the local cache.

Allow JavaScript from Smart Search Field

Disabled by default for security reasons, this feature allows you to enter URLs containing JavaScript into the Safari address bar.

Get the Latest Tech News Delivered Every Day

• Add More Features by Turning on Safari's Develop Menu
• How to Reset Safari to Default Settings
• How to Activate the iPhone Debug Console or Web Inspector
• How to View Internet Explorer Sites on a Mac
• How to Use Web Browser Developer Tools
• Speed Up Safari With These Tuneup Tips
• How to View HTML Source in Safari
• How to Change the Default Search Engine in Chrome for iOS
• What Is Safari?
• How to Enable Safari's Debug Menu to Gain Added Capabilities
• How to Manage Cookies in the Safari Browser
• How to Use Reading Mode on an iPhone or iPad
• How to Inspect an Element on a Mac
• How to Modify Text Size in the Safari Browser on a Mac
• Keyboard Shortcuts for Safari on macOS
• How to Disable JavaScript in Safari for iPhone

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

Baseline 2022

Since March 2022 , this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

• See full compatibility
• Report feedback

The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme.

Before standardization, this property allowed elements to be shown as widgets, such as buttons or check boxes. It was considered a misfeature and authors are encouraged to use only standard keywords now.

Note: If you wish to use this property on websites, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies. In older browsers, even the keyword none does not have the same effect on all form elements across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

For the following keywords, the user agent selects the appropriate styling based on the element. Some examples are provided, but the list is not exhaustive.

Hides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded.

Acts as none on elements with no special styling.

One of menulist-button or textfield . Both of these values are equivalent to auto on elements with no special styling.

Possible values are button , checkbox , listbox , menulist , meter , progress-bar , push-button , radio , searchfield , slider-horizontal , square-button , and textarea . Keywords which are the equivalent of auto for maintaining compatibility with older browsers.

Non-standard values

The following values may be operational on historical browser versions using -moz-appearance or -webkit-appearance prefix, but not on the standard appearance property.

• Firefox entries indicate support using -moz-appearance .
• Chrome, Edge and Safari entries below indicate release version support for values used with the -webkit-appearance vendor-prefix property.
• Values with an asterisk (*) have clear intents for removal.
• Y{version} : indicates a value is supported up to and including {version}
• N{version} : support was removed in a release earlier than {version}
• a blank cell indicates that support was never added

Formal definition

Formal syntax, apply custom styling.

The following example shows how to remove the default styling from a checkbox and select element, and apply custom styling. The appearance of the checkbox is changed to a circle, and the select element shows how to remove the arrow indicating that the list can be expanded.

Specifications

Browser compatibility.

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

• prefers-color-scheme

CSS Individual Transform Properties in Safari Technology Preview

The WebKit blog details how to use individual CSS Transform properties in the latest version of Safari Technology Preview. This brings the browser in line with the CSS Transforms Module Level 2 spec , which breaks out the translate() , rotate() and scale() functions from the transform property into their own individual properties: translate , scale , and rotate .

So, instead of chaining those three functions on the transform property:

…we can write those out individually as their own properties:

If you’re like me, your mind immediately jumps to “why the heck would we want to write MORE lines of code?” I mean, we’re used to seeing individual properties become sub-properties of a shorthand, not the other way around, like we’ve seen with background , border , font , margin , padding , place-items , and so on.

But the WebKit team outlines some solid reasons why we’d want to do this:

• It’s simpler to write a single property when only one function is needed, like scale: 2; instead of transform: scale(2); .
• There’s a lot less worry about accidentally overriding other transform properties when they’re chained together.
• It’s a heckuva lot simpler to change a keyframe animation on an individual property rather than having to “pre-compute” and “recompute” intermediate values when chaining them with transform .
• We get more refined control over the timing and keyframes of individual properties.

The post points out some helpful tips as well. Like, the new individual transform properties are applied first — translate , rotate , and scale , in that order — before the functions in the transform property.

Oh, and we can’t overlook browser support! It’s extremely limited at the time of writing… basically to just Safari Technology Preview 117 and Firefox 72 and above for a whopping 3.9% global support:

The post suggests using @supports if you want to start using the properties:

That’s the code example pulled straight from the post. Modifying this can help us avoid using the not operator. I’m not sure that’s an improvement to the code or not, but it feels more like progressive enhancement to do something like this:

That way, we clear the shorthand functions and make way for the individual properties, but only if they’re supported.

Individual CSS Transform Functions

Get Value of CSS Rotation through JavaScript

Now that css custom properties are a thing, all value parts can be changed individually.

Having the separate properties is great, it probably will produce less code not more (think overrides that used to reproduce everything they don’t override) and help make code more modular. Why they needed yet another syntax is beyond me. What we gain without colons we lose in cognitive overhead.

My kingdom for a CSS syntax unification. Lists should be either comma separated or not. Slashes are not a list item delimiter. Properties start with a name, are defined with the value after a colon. Functions are functions and have a name and accept a (rule-following delimited) list of parameters. Nested structures have braces. Once all that exists, shorthand/longhand follows a simple rule: shorthand is sugar for longhand.

Chrome also supports individual transform properties behind the Experimental Web Platform features flag, which can be enabled from chrome://flags :

I’m personally a bit mixed about their utility. I’d go for “really useful in some cases, but most of the times not an option”.

My biggest problem is they can only get applied in a certain order (and, save for some exceptions, transform order matters). Which is not the order I most often apply transform functions in. I normally use transforms to distribute elements in a logical pattern in 2D or 3D. This means starting with one or more rotations and only then applying a translation. And here we also have the issue that, when I distribute items in 3D, I normally first have a rotatey() , then a rotatex() and this only allows for a single rotation. And of course there’s the possibility of filling out the matrices, multiplying them, getting the trace and computing everything else that’s needed to combine them into a single rotate3d() . But that’s a pain.

However, one case where I find them useful is where I only have a single rotation and a uniform scale that I want to animate and I need different timing functions for the two. Like in the case of this cube animation or for these triangular openings .

Release Notes for Safari Technology Preview 193

Apr 24, 2024

by Jon Davis

Safari Technology Preview Release 193 is now available for download for macOS Sonoma and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.

This release includes WebKit changes between: 276610@main…277149@main .

Accessibility

Resolved issues.

• Fixed hidden elements targeted by aria-labelledby to expose their entire subtree text, not just their direct child text. ( 276864@main ) (125634439)
• Fixed accessible name computation for elements with visibility: visible inside a container with visibility: hidden . ( 277004@main ) (125738704)
• Fixed the Grid track sizing algorithm logical height computation avoid unnecessary grid item updates. ( 276633@main ) (124713418)
• Fixed the style adjuster for @starting-style incorrectly invoking with a null element. ( 276993@main ) (125837628)
• Fixed the value attribute not getting displayed in an input element with type="email" and the multiple attribute. ( 276895@main ) (125221858)
• Fixed inconsistent output of Function.prototype.toString for accessor properties. ( 276904@main ) (125739577)
• Fixed intrinsic inline size calculators to account for whitespace before an empty child with nonzero margins. ( 276875@main ) (122586712)
• Fixed overlapping elements with flex box when height: 100% is applied on nested content. ( 276880@main ) (125572851)
• Fixed block containers that are scroll containers to default to unsafe alignment. ( 276929@main ) (125742095)

New Features

• Added support for PopStateEvent’s hasUAVisualTransition . ( 277001@main ) (125849073)
• Fixed cloning of ShadowRoot nodes following a DOM Standard clarification. ( 277066@main ) (125917138)

Web Inspector

• Fixed Console and code editor completion not auto-scrolling the suggestion into view. ( 277034@main ) (124979790)
• Fixed search in the DOM tree view unexpectedly chaning the text display. ( 277073@main ) (125797803)

Your Guide to Private Browsing in Safari

Private browsing is often misunderstood, but it can be a helpful feature if you know what’s what.

Quick Links

What private browsing does in safari, how to use safari private browsing on iphone and ipad, how to use safari private browsing on a mac, how to disable safari private browsing on iphone and ipad, how to disable safari private browsing on a mac, key takeaways.

• Private Browsing in Safari hides browsing history, autofill details, downloads, and locks tabs after inactivity.
• Safari on Mac groups private and non-private tabs, while on iPhone it shows all tabs regardless of mode.
• To use Private Browsing in Safari, identify it by a dark address bar, "Private" indicator, or "Private" next to the site URL.

Most browsers offer a private browsing mode that aims to keep the websites you view off the record. But what exactly does it do in Safari and how do you get the best out of it?

First and foremost, Private Browsing keeps the website pages you visit out of your History . The aim is to prevent someone else from seeing which pages you have visited if they have access to your phone or computer.

In Safari, Private Browsing does a lot more than just hide URLs. It also:

• Prevents recent searches from showing up in your history.
• Stops remembering details you enter in forms for autofill.
• Keeps downloaded items from appearing in your Downloads list.
• Locks private tabs after a period of inactivity.
• Adds tracking and fingerprinting protection.

However, it’s important to note that Private Browsing does not stop you from being tracked altogether. Websites you visit will still be able to use various methods to track you, and will still have access to all data that you send them.

On macOS, iOS, and iPadOS, Safari groups private tabs together, and separates them from non-private tabs. On Mac, each Safari window is either private or non-private, and can have as many tabs as you want.

On iPhone, you can switch between private and non-private modes, each of which shows all tabs belonging to that mode.

You can spot when you’re viewing a private tab with these signs:

• The address bar has a dark background. This may be less noticeable if you’re using Dark Mode .
• On Mac, you’ll see a prominent Private indicator in the title bar.
• On iPhone, you’ll see Private alongside the site URL at the bottom of your screen.

The steps to enter Private Browsing mode are nearly identical on an iPhone and iPad. The only difference is that the tab icon is at the bottom of the screen on iOS and the top on iPadOS.

• Long-press the tab icon (two overlapping pages) on the bottom-right (iPhone) or top-right (iPad) of your screen.
• Tap the New Private Tab menu item.
• If locked, enter your passcode to unlock Private Browsing.

You can enter Private Browsing mode on macOS using either a menu item or a keyboard shortcut:

• Open the File menu and choose New Private Window .
• Alternatively, use the keyboard shortcut Shift + Cmd + n .
• Use the browser as you normally would. Any tabs you open from this window will open in the same window, in private mode.

You may want to prevent users of an iPhone or iPad from using Private Browsing mode at all. To do so:

• Open the Settings app.
• Tap on Screen Time .
• Under RESTRICTIONS , click on Content & Privacy Restrictions .
• If not already enabled, press the toggle next to Content & Privacy Restrictions to enable.
• Tap Content Restrictions .
• Change the Web Content setting to Limit Adult Websites .

The option to enter private mode will now be gone.

On macOS, the wording of certain options differs slightly, but the overall process is near-identical to iOS:

• Open System Settings via the Apple menu.
• Click on Screen Time in the left panel.
• Under the Restrictions section, click on Content & Privacy .
• Click Content Restrictions .
• Change the Access to Web Content setting to Limit Adult Websites .

Private Browsing will now be unavailable in Safari, although any existing private windows will stay open.

Of course, anyone can re-enable Private Browsing using the same process, in reverse. However, you can use Screen Time’s Lock Screen Time Settings option to set a passcode and enforce the setting permanently.