Safari is the default browser in Mac used by mere 3.7% of the Internet users. Apple claims users can browse 2 hours more and view Netflix videos 4 hours more with Safari compared to Chrome or Firefox. There are also lots of new features introduced like pinning a tab and muting audio from the tab. But as a developer or web site owner you may need to look for the source code frequently and in this article we will explore how to view webpage source CSS and HTML in Safari.

Enabling Developer Menu

By default the developer options are disabled in Safari which means you will not see the “Develop” menu, “Inspect Element” when right clicking and the whole developer console options. Launch Safari and navigate to the menu “Safari > Preferences… > Advanced Tab” and enable the option “Show Develop menu in menu bar”. This will enable the “Develop” menu and all other features required to view webpage’s source.

Apply some CSS styles only in the Safari browser. Web browsers contain bugs and defects, some of them unique to each browser. Forcing those defects on purpose is one of the best tricks to apply some CSS styles only in some specific browsers, such as Safari.

Enable Develop Menu in Safari

Viewing Webpage Source

Once the “Develop” menu is enabled, open the webpage you want to view the source. Similar to other browsers just right click and chose “Show Page Source” or “Inspect Element” option. This will open the Web Inspector console at the bottom of the page.

Web inspector can also opened using the shortcuts “Option + Command + I” when the “Develop” menu is enabled.

Using Web Inspector Console in Safari

The web inspector when docked at bottom of the page will look like below having multiple sections:

Css Hack For Mac Safari Only

Safari Web Inspector

1. Dock the web inspector console to right side, bottom or open it in a separate window to use as per your convenience.

Safari Css Hack For Mac Pro

2. Click on the reload button to load the page and download button to download the web archive of the page to your local Mac. Using this download option you can get the local copy of any webpage for later analysis.

3. The tab panels have many panels like elements, network, resources, timeline, debugger, storage and console. Click on the required panel to view the related information.

Css Hack Edge

4. Based on the selected tab the details can be viewed under this left panel. For example, the resources tab will show all resources like fonts, images, stylesheets and scripts used on the page.

5. This right panel shows the corresponding detailed information for the section on the left panel. For example, selecting the “Resources” tab and then “Stylesheets” will list down all the external stylesheets used on the page. Click on any stylesheet to view the source in the right side panel.

Inspecting Elements

Right clicking on any of the element on the page will show “Inspect Element” option and clicking on it will open the web inspector. Under “Elements” tab move the mouse and the corresponding element on the page will get highlighted. Once the element is selected the corresponding CSS of the element can be viewed under “Styles” tab on the right side panel.

The “Styles” tab has three dropdown values – “Styles-Computed, Styles-Rules and Styles-Visual”. The “Styles-Rules” option helps to show individual CSS class as can be seen in Chrome and Firefox. You can enable, disable, modify individual CSS properties of the element directly and see the impact the web page.

Viewing on Responsive Modes

Safari makes it easy to view the webpages on different types of display generally used to test the responsiveness of the webpage. Click on the “Enter Responsive Design Mode” option available under “Develop” tab or use keyboard shortcuts “Option + Command + R”. You can view the display on different devices like iPhone, iPad and other Macs.

Safari Responsive Mode

Safari also offer to choose the user agent to render the page on all latest browsers like Chrome, IE11, Edge and Firefox on iOS, Mac and Windows platforms. Responsive mode can be exited either with keyboard shortcuts “Option + Command + R” or from the menu “Develop > Exit Responsive Design Mode”.

In the current situation it’s a challenging task for the web developers to build websites which is compatible with different and popular browsers available (like IE, Firefox, Mozilla, Safari, Google Crome, Opera etc…)

Different browsers have their different ways of serving the web page content and may create problem while using some CSS properties to get a desired output. To avoid these kinds of problems there is are solutions which are called “CSS hacks” and which are also different for different browsers. Using CSS hack is not recommended as per the W3C validation rules but in some cases we have to use them to get our task done. I knew about CSS hack for IE, Firefox but I came across CSS hack for Safari which I was not aware of and as Safari is one of the mostly used browser in world so I think this information might help others as well to overcome from these kind of browser compatibility issues.

While working on one of my projects I faced a problem where Safari browser was not supporting one of CSS properties and was distrorting the layout, however, it was worknig fine in IE and Firefox. To fix this I had to use a CSS hack for Safari. Here is an simple example which you can test quickly and see the difference.

– Create an HTML file and name as you want, then copy and paste the following code to your file:

The page background will show orange in Safari 3+, Chrome and Opera (< 9.5) browsers. In all other browsers it should show pink.

– Now try opening the file in Firefox/IE and Safari and see the difference. The page background is different in Safari from the background shown in IE.

If you look in web for CSS hack for Safari then you might find different ways like using body:nth-of-type(1) or body:first-of-type which can be used to apply specific CSS property for Safari but these properties are also supported by Firefox 3.5x.

Counter-strike Source Hack

So here the CSS hack I have used is “@media screen and (-webkit-min-device-pixel-ratio:0) ” and here are the few stpes how to use it:
– You don’t need write your entire class inside “@media screen and (-webkit-min-device-pixel-ratio:0){}”. As shown in the above example you can just write the required property that you want to apply for Safari. In the above example from the all of the CSS properties of body I want to only change the background-color for Safari so I just specified the CSS classname/ID and the property with different values.
– I also noticed one more limitation which you might need to be careful while using this is the way it is written needs to stay like this which means your new property needs to be written in between “@media screen and (-webkit-min-device-pixel-ratio:0){}” but if you are using any code minifier to minify your CSS file then it will try to remove the extra spaces used which will create problem and this property will not be effective.

Css Target Mobile Safari

I hope this information will be helpful. Your comments and suggestions are appreciated.