Missing icons in browsers that don't support web fonts (IE7, IE9 Mobile, Opera Mini)

[celloexpressions]

Dashicons don't work on IE9 Mobile, which is the only browser available on Windows Phone 7 devices. ​Apparently IE9 Mobile does not support web fonts.

We need to either provide fallback PNGs for the most critical icons (such as the menu-toggle) or officially drop support for IE9 Mobile, which otherwise works. I don't think we can say we support this browser without at least some icons because there is no indication of how to access the admin menu and TinyMCE is unusable.

[celloexpressions]

Screen-picture (no screenshots in WP7) of Dashboard in Windows Phone 7 / IE9 Mobile

[celloexpressions]

Add New Post screen in Windows Phone 7 / IE9 Mobile

[celloexpressions]

Previously: #23985.

[SergeyBiryukov]

Related: #26377

[celloexpressions]

Replying to SergeyBiryukov:

Related: #26377

And note that since this is the only browser available on Windows Phone 7, we need to actually do something about it (or drop support for the device), unlike with Opera Mini. Ie, Browse Happy isn't helpful. These devices are very much still around and in use.

[nacin]

And note that since this is the only browser available on Windows Phone 7, we need to actually do something about it (or drop support for the device)

We need to figure out something here.

[azaozz]

Was talking about this with @iammattthomas yesterday: need to add detection of browsers that don't support @font-face. Modernizr has some code that apparently fails (false positive) on Win phone 7 (​https://github.com/Modernizr/Modernizr/issues/538). So seems we will need to do UA sniffing.

[azaozz]

In 26369.patch: JS based test for browsers that don't support @font-face. Adds a class no-font-face to the html element.

Edit: this may be better as a PHP based test that adds the class on the body.

[matt]

Isn't it better to test capabilities than user agents?

[azaozz]

As much as I could find out, the capability test fails with false positive for ​several browsers (IEMobile 9, Android 2.1, etc.).

[azaozz]

Thinking this should be left for 3.9. Even when adding a CSS class for devices that don't support @font-face, most of admin-bar.css, editor.css and the menu CSS has to be reverted and rebuild to once again support image icons.

[nacin]

As pointed out by MarkJaquith, Microsoft is dropping support for WP7 in September. But, it still kinda sucks to render the toolbar so useless for the only browser on those devices. If we can't avoid targeting them for the responsive CSS somehow, heck, I'd rather just hide the toolbar entirely for them.

I'm not against a wontfix, but it doesn't hurt to see what a cheap patch could look like. I don't think we need to deal with image icons, or anything like that. The aim at this point should be minimally functional, not pretty. I don't care if it is just .no-font-face span.label { display: inline !important }. (Or, as said above, .no-font-face #wpadminbar { display: none }.)

[nacin]

#26377 was marked as a duplicate.

[nacin]

Manpower appreciated. :-)

[azaozz]

26369.3.patch is "half-way" for testing, covers only the toolbar.

[azaozz]

In 26369.4.patch, when no @font-face support:

• Editor: show the old button icons.
• Admin menu: hide the icon divs, the menu is quite usable.
• Toolbar: add spans with the same text as the titles to the top level items and show them (overflow: hidden).

[celloexpressions]

26369.4.patch​ is a good start, except the toolbar part isn't working (still looks unchanged).

Here's a quick list of icon-placeholders we can hide (since WP7 shows rectangles in their place, and not important enough for fallbacks):

• post format icons on edit.php
• add media button's icon (already has text)
• all of the icons in the Publih metabox
• post format metabox icons
• click-to-add widget checkmark

Icons that we need fallbacks for:

• Expand/collapse icons on metaboxes
• x's (for example, in the tags metabox)
• close icon for the media modal (not that it's particularly usable)
• image editing tools
• add new theme
• theme details modal previous/next arrows, close icon
• widgets expand/collapse
• plugin update available icon (on plugins.php)

FYI things that really don't work on WP7, so don't need to bother:

• Customizer
• Press this

We can actually make it look fairly presentable with css tweaks at this point. In fact, I think the update'll still provide a better experience for these users than the old admin design, even with the removal of a lot of icons.

[azaozz]

...the toolbar part isn't working.

Right, was my error. The class wasn't outputted on the #wpadminbar div. 26369.5.patch fixes this and seems to work properly (replacing icons with some text) as far as I can test.

[azaozz]

In 26369-ie.css.patch make IE7 somewhat usable.

[azaozz]

In 26369.6.patch: move the regex test for no @font-face to JS. If we go with this, the editor icons block from 26369-ie.css.patch is not needed.

[ocean90]

Can't we simply hide #wp-admin-bar-comments and #wp-admin-bar-updates if .no-font-face exists? The current string "0 comments awaiting moderation" is too long and you will see just the "0".

[azaozz]

Yeah, 0 is not that helpful, but a number there would work? In ie7 currently seeing "About Site 3 35 Add Howdy".

[jtsternberg]

Looks like a fix just landed in modernizer for the windows mobile @font-face false-positive: ​https://github.com/Modernizr/Modernizr/pull/1147#issuecomment-30030743

[azaozz]

In 26369-ie.css.2.patch: also set the Dashboard columns to two for IE7.

[azaozz]

In 26369.7.patch: combined the IE7 and older mobile tweaks, remove the extra span from top toolbar items. The only remaining hack is for the admin menu toggle button (the word Menu is hard-coded). On phones should look something like this:

[iammattthomas]

Tested and confirmed this works for me in IE7 on Windows XP, IE 9 mobile on Windows Phone 7, IE 10 mobile on Windows Phone 8, and IE 11 on Surface.

[azaozz]

In 26819:

Make older mobile browsers and IE7 usable:

• Text labels in the toolbar.
• Image icons in the visual editor.
• Some IE7 structural css fixes.

Fixes #26369.

[TobiasBg]

Is that min-width: without a property value on purpose (because it's maybe some IE hack)?
​http://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/ie.css?rev=26819#L215

[SergeyBiryukov]

Replying to TobiasBg:

Is that min-width: without a property value on purpose (because it's maybe some IE hack)?

It's a typo: ​https://irclogs.wordpress.org/chanlog.php?channel=wordpress-dev&day=2013-12-11&sort=asc#m752053. Feel free to create a new ticket.

[TobiasBg]

Done: #26563
Thanks, Sergey!