CSS: Targeting Safari 3 only

Although Safari 3 tends to render layouts the same as the other leading popular browsers, it prefers to use it’s “aqua” button styling for standard sized form buttons.

One solution for this is to set a dimension (width or height) to the button.

To target Safari 3 in CSS you can use the following to add or override any existing attributes, such as the height of a button:

@media screen and (-webkit-min-device-pixel-ratio:0) {
	button {
		height: 40px;
	}
}

If required, multiple selectors can be added into a single block.

One Reply to “CSS: Targeting Safari 3 only”

  1. Just in case, here’s also a way to target Opera. The first declaration hits Safari as well so you need to go back and reset Safari. There have been a few times that I needed to hit just Opera and this solves it.


    /* Opera and Safari */
    @media all and (min-width: 0px) {
    #id { background: #99e; }
    }
    /* Reset Safari */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    #id { background: #ede; }
    }

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s