Categories
Apple Browsers CSS Design Interaction Interface macOS Pro Bono Portfolio

Safari Responsive Design Mode Polish

Here's the UI as seen in Safari Technical Preview 41, released October 4, 2017.

Safari Technical Preview 41 Responsive Design Mode

Revised Responsive Design Mode

Revised Safari Responsive Design Mode
Safari Responsive Design Mode - device icon hover showing rotate icon
  • Add a bandwidth throttling menu:
    1. Default Network
    2. High-Speed Cellular
    3. Low-Speed Cellular
    4. Offline
  • Improve the contrast of the selected viewport setting in a style consistent with the Web Inspector
  • Show a rotate icon when hovering on a device icon
  • Align label baselines
  • Add a screen mode menu for iPads that would allow selection from:
    1. Full Screen
    2. Primary
    3. Secondary
    4. Split View

    This provides an explicit UI for using the iPad multi-tasking modes and would allow users to switch between portrait and landscape orientations of different iPad models while staying in a multi-tasking view. In STP 41, you can skip cycling through the iPad multi-tasking modes by Option-clicking the iPad icon.

Categories
Browsers CSS macOS

Future Condensation

If installed on your system, this text should be displayed in Futura Condensed, a nice sans-serif. If you are looking at this page in Firefox or Opera on OS X, it appears in that face. Safari and the latest nightly build of WebKit (13244) use the standard Futura. Setting font-stretch: condensed; has no effect.

Filed as WebKit bug #7709.

Categories
Browsers CSS General

Further design butchery!

Comments? Suggestions?

Categories
Browsers CSS Misc.

Unsupported CSS in Safari 1.0

It appears that Safari does not support the text-decoration property within a span that is set to display: none until hovered (on which it is set to display: block, a la Eric Meyer’s css/edge).

I’ll post the files which revealed this issue in a day or two.

I also have seen some problems with the word-spacing property, which is supported, according to the MacEdition CSS2 support table.