Page MenuHomePhabricator

Create handheld stylesheet
Closed, ResolvedPublic

Description

Author: ayg

Description:
Currently we have no stylesheet for handheld devices. The CSS will devolve
pretty well if the device doesn't support stylesheets, but if it tries to
interpret the screen stylesheets we use now, that will be actively *worse* due
to the enormous floating navigation bars. Probably what we want is the content
starting at the very top, or close to it, with a prominent "jump to nav" link,
and ideally the search bar at the top at least for the main page.


Version: unspecified
Severity: enhancement

Details

Reference
bz7020

Related Objects

StatusSubtypeAssignedTask
ResolvedNone
ResolvedNone

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 9:22 PM
bzimport set Reference to bz7020.
bzimport added a subscriber: Unknown Object (MLST).

ayg wrote:

Useful pages:

http://www.htmldog.com/ptg/archives/000055.php
http://my.opera.com/community/dev/mini/phones/

CSS could be used to improve the layout for those UAs that do support it. JS
could perhaps be used to collapse floated images with a "show" button, too, for
those that support JS (because scrolling past huge images is probably annoying).
Enwiki could use autohiding for infoboxes as well.

Opera Mobile actually deals with Wikipedia pages quite gracefully as-is. An
emulator is available in recent desktop copies of Opera.

anyfile wrote:

Would be useful, untill a css specific to "handheld" media type is developed, to
have this media type force to use the same css of the print media type?

That is replace in the HTML of each page, the line that starts with

<link rel="stylesheet" type="text/css" media="print" href="

with a line starting with

<link rel="stylesheet" type="text/css" media="print, handheld" href="

(sorry, I do not know where to hack in the code, so I can not provide you a patch)

ayg wrote:

(In reply to comment #2)

Would be useful, untill a css specific to "handheld" media type is developed, to
have this media type force to use the same css of the print media type?

I couldn't see why. They're quite different media; in particular, print has a
much larger canvas, as well as effectively unlimited bandwidth and processing
power (since it's not real-time), and they're also static (can't deal with links
or scrolling, etc.). Those handheld browsers that support CSS are generally
designed to try figuring out how to deal with screen stylesheets, and won't deal
nearly as well with a print stylesheet.

Unless you were suggesting to just use the same file for both, and give each its
own part via @media declarations within the stylesheet itself. I don't see much
point in that; saving a few bytes on every page load?

ayg wrote:

Okay, I checked something in for Monobook in r18777. It seems to be working
pretty decently on Opera Mini, but that was clever enough to avoid the floats
and so on already. I suppose I'll FIXED this when I make comparable stylesheets
for the other skins.

The duplication of code between the screen/handheld stylesheets kind of annoys
me. I could fix that up by just loading the whole thing for both and using
suitable @media declarations, of course. That would probably be best . . .

ayg wrote:

More changes, see r18949 (also r18965). Still Monobook-only.

herd wrote:

(In reply to comment #5)

More changes, see r18949 (also r18965). Still Monobook-only.

There was an odd change to monobook/main.css in r18948 (line 773):

http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/monobook/main.css?r1=18903&r2=18949
"display: block;"

This puts the portlet links in #p-navigation at odds (different spacing/padding)
with every other left-side link portlet (toolbox, other languages, and
MediaWiki:Sidebar).

For a simple example of this, try this in your user/monobook.css on en.wp:

.portlet a {background-color: #ccffcc; }

#p-tb a, #p-interaction a, #p-navigation a { text-decoration: underline; }

Screenshot: http://test.wikipedia.org/wiki/Image:Portletfunky.gif

ayg wrote:

That wasn't a change, I was just reshuffling existing code (and I believe I un-reshuffled it later,
anyway). That style was added by tomgilder, r11305. Offhand I can't think what the point might be.

ayg wrote:

Removed the stylesheet in r24163 after David Storey from Opera said it was screwed up, which I believed, given how little testing it got. His comments on a handheld stylesheet:

Removing the handheld stylesheet entirely would probably be the best
option for now. If you have time later you can play with it using
the small screen option in opera desktop and the opera mini simulator
(once we've removed the hack we have in place). We can help you with
any issues. As Safari doesn't support handheld, it would be best to
include a media query with the handheld declaration, such as:

<link media="handheld, screen and (max-device-width: 480px)"
href="mobile.css" type="text/css" rel="stylesheet" />

That will make opera and iphone safari pick up the handheld
stylesheet. You may need to add meta tags to disable Safari's zoom
feature 9I don't have a iPhone to test how it handles media queries
etc).

Fixed by Brion in r40414 I believe. Resolved as such.