Page MenuHomePhabricator

Make brackets in section edit links accessible to CSS
Closed, ResolvedPublic

Description

Demonstration of CSS pseudo-element generated brackets wrapping an edit link.

At present section edit links are wrapped by brackets in the HTML content, like so:

<span class="mw-editsection">[<a href="/w/index.php?title=Talk:Example&amp;action=edit&amp;section=1" title="Edit section: Example">edit</a>]</span>

This makes the links difficult to restyle effectively (for example, I have several links in the interface appearing as buttons) because the end result will always be cluttered by the brackets.

I propose replacing the brackets in HTML with brackets generated by CSS pseudo-elements, as in the attached demonstration. This would allow stylesheet authors to remove them if desired. It could also allow a new preference setting for users to hide the brackets if they don't like them.

Considerations:


Version: 1.22.0
Severity: enhancement

Attached:

Details

Reference
bz48256

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 1:21 AM
bzimport set Reference to bz48256.

As is the way of these things, I naturally found a workaround immediately after filing this bug. The existing brackets can be hidden using CSS, as follows:

.mw-editsection {

visibility: hidden;

}

.mw-editsection a {

visibility: visible;

}

However, this is something of a kludge, and I still think it would be better to specify them in CSS as outlined above.

(In reply to comment #0)

  • Browser support: generally very good.

http://caniuse.com/#feat=css-gencontent
However, versions of IE prior to 8 do not support generated content. I don't
know what our policy is regarding supporting older versions of Internet
Explorer.

Per https://www.mediawiki.org/wiki/Compatibility#Browser we still kind of support IE6 and 7. Making it not work on them would certainly cause various en.wp dinosaurs to shout at me, so I didn't do that.

Thanks Bartosz - I thought that was probably the case. I guess a better question for me to ask would be, do we do any conditional comment stuff to serve up specific stylesheets to older versions of IE? That doesn't directly impact upon this suggestion, I guess, but it will be useful for me to bear in mind when filing future bugs.

(In reply to comment #3)

do we do any conditional comment stuff to
serve up specific stylesheets to older versions of IE?

Monobook includes conditional stylesheets for IE6 and IE7, Vector and other skins don't (they do use some pure CSS hacks, though).

I was wondering if it would be viable to wrap each bracket itself in <span class=mw-editsection-bracket />?

Changing the summary to "Make brackets in section edit links accessible to CSS", as due to IE6 issues mentioned above, as well as CSS-less accessibility, I believe pseudoelement selectors are not the best way to do this. I'll implement my suggestion above shortly.

Related URL: https://gerrit.wikimedia.org/r/64365 (Gerrit Change Id27555c6dee250eafeefa97ae8927438fd65b8d7)

Thanks Bartosz. If IE6/7 ever become such an antique that we stop supporting them (we can dream can't we?) then I'll come back to this to suggest going the pseudoelement route.

(In reply to comment #7)

Thanks Bartosz. If IE6/7 ever become such an antique that we stop supporting
them (we can dream can't we?) then I'll come back to this to suggest going
the
pseudoelement route.

I wonder whether we can stop supporting older IE with JavaScript disabled?

In this way we can just bundle stuff like https://code.google.com/p/ie7-js/ and use whatever we like.

Change 64365 merged by jenkins-bot:
Make brackets in section edit links accessible to CSS

https://gerrit.wikimedia.org/r/64365

Yay, merged. Scott, after 1.22 is released (or already right now if you use the bleeding edge version) you can just use .mw-editsection-bracket { display: none; } to hide the brackets entirely and be able to style the section edit links on your own.

I'm pretty sure replacing those with CSS pseudoelements will have to wait a few more years ;)

IE6 is still supported as Grade C. For the UI this requires:

In the front-end this means content is presented in a readable manner, and to some extent user actions can be performed, but these browsers do not get JavaScript features.

IE6 does not support CSS pseudo elements. When the brackets are generated by pseudo elements the brackets are missing in the UI in the IE6. But I think this is still a readable manner.

The support table should be updated; IE6 cannot connect to WMF wikis any more (there's an HTTPS protocol mismatch: IE6 only supports SSL 2/3, whereas WMF servers ony support TLS 1.0+; and WMF servers don't spport any of the cipher suites supported by IE6), therefore it's pointless to continue offering any level of support for IE6.

That's behind a configuration option that anyone still using IE6 is unlikely to have any idea even exists, much less what it does or be willing to toggle it; it's worth noting that Qualys SSL Labs does not regard IE6 as supporting TLS 1.0 for the purposes of their SSL/HTTPS user agent capabilities and tests.

The support table should be updated; IE6 cannot connect to WMF wikis any more (there's an HTTPS protocol mismatch: IE6 only supports SSL 2/3, whereas WMF servers ony support TLS 1.0+; and WMF servers don't spport any of the cipher suites supported by IE6)

@Dinoguy1000: Uh? If you have https://phabricator.wikimedia.org/T147199 and https://phabricator.wikimedia.org/T147202 in mind then IE6 only does not work on Windows XP anymore, if I get it correctly. Also see https://wikitech.wikimedia.org/wiki/HTTPS/Browser_Recommendations

MediaWiki is not only for the WMF wikis. But not supporting the TLS connection to the WMF server is a additional good argument to use CSS pseudo elements although IE6 does not show them. Pseudo elements is a possibility to solve T175977: Prevent web crawler from indexing buttons in content.

@Dinoguy1000: Uh? If you have https://phabricator.wikimedia.org/T147199 and https://phabricator.wikimedia.org/T147202 in mind then IE6 only does not work on Windows XP anymore, if I get it correctly. Also see https://wikitech.wikimedia.org/wiki/HTTPS/Browser_Recommendations

Are there any non-XP platforms with significant IE6 usage? Qualys only lists it for XP (twice, for some reason), and I wasn't able to find any usage stats that broke down by browser version and OS. I also wasn't able to find information on protocols and cipher suites supported by IE6 on non-XP platforms.

@Dinoguy1000: Uh? If you have https://phabricator.wikimedia.org/T147199 and https://phabricator.wikimedia.org/T147202 in mind then IE6 only does not work on Windows XP anymore, if I get it correctly. Also see https://wikitech.wikimedia.org/wiki/HTTPS/Browser_Recommendations

Are there any non-XP platforms with significant IE6 usage? Qualys only lists it for XP (twice, for some reason), and I wasn't able to find any usage stats that broke down by browser version and OS. I also wasn't able to find information on protocols and cipher suites supported by IE6 on non-XP platforms.

I think Vista shipped with IE7.

For watchers, I just filed T268900: Clean up section edit link brackets since <IE9 is not supported in group C.