[RFC|Merged] Rounded corners via css

These requests for comments/change have lead to an implemented feature that has been successfully merged into the 3.1/Ascraeus branch. Everything listed in this forum will be available in phpBB 3.1.
User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

[RFC|Merged] Rounded corners via css

Post by Arty » Mon Jan 16, 2012 10:35 am

Introduction

Prosilver has rounded corners. It was created when browsers didn't support border-radius, so it was made by images added to corners of container blocks. These days all browsers support border-radius, except for IE 7 and IE 8.

IE7 users base is almost gone, IE8's users base is steadily going down and by the time phpBB 3.1 is released, it will be irrelevant.

Proposal

I suggest to switch from corner images to border-radius.

Pros
  • Cleaner HTML code
  • Using border-radius for what it is intended to do instead of images
Cons

IE7 and IE8 users will see square blocks.

Patch

Ticket: http://tracker.phpbb.com/browse/PHPBB3-10734
Pull request: https://github.com/phpbb/phpbb3/pull/674
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
Ger
Registered User
Posts: 270
Joined: Mon Jul 26, 2010 1:55 pm
Location: 192.168.1.100
Contact:

Re: [RFC] Rounded corners via css

Post by Ger » Mon Jan 16, 2012 2:42 pm

+1. Would be a much better approach to rounded corners.
Arty wrote:small hack for IE 7 and IE 8
--//--
For IE 7 and IE 8 if RFC I mentioned above is implemented, corners can be added by altering HTML code via JavaScript. phpBB 3.1 already has jQuery built in, so it will be easy to do:

Code: Select all

$(document).ready(function()
{
    $('.oldie').find('.forabg, .panel, .forumbg, .post').prepend('<span class="corners-top"><span></span></span>').append('<span class="corners-bottom"><span></span></span>');
});
Or something like that.
--//--
Cons
IE7 and IE8 users with JavaScript disabled will not see rounded corners. I doubt there are many such users.
Actually, I suggest a JS solution shouldn't be provided at all. According to the global statcounter IE6,7 and 8 users are rapidly decreasing in number; about 26% in january 2012. Following the current trend, i think that by the tim 3.2 is released (probably not the next year) there will be no more than 5-10% of global useage of those versions (including the expected release of IE10). Most of those users will probably know that their browser is absolete.

Therefore I propose to follow the system of graceful degradation: users with older browsers don't get all the eyecandy they need, in this case the rounded corners. Instead they'll see rectangle corners. It has no affect at the functions or the basic display of the site, so phpBB still supports those browsers. This also prevents clutter of extra JS needed just to support some old-fashioned users that should have updated long ago.
Above message may contain errors in grammar, spelling or wrongly chosen words. This is because I'm not a native speaker. My apologies in advance.

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: [RFC] Rounded corners via css

Post by Arty » Mon Jan 16, 2012 2:49 pm

That will be true for 3.2, but I'll try to implement this as soon as possible so it would make it into 3.1. All RFCs are posted in 3.2 because in 3.1 forum users don't have permission to create new threads.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
Ger
Registered User
Posts: 270
Joined: Mon Jul 26, 2010 1:55 pm
Location: 192.168.1.100
Contact:

Re: [RFC] Rounded corners via css

Post by Ger » Mon Jan 16, 2012 3:09 pm

In that case, full support for IE8 is indeed needed.
However, I suggest that at the time 3.1 reaches BETA status, the browser stats will be checked for IE8> and the JS fix will be evaluated. There's no need for indefinite support for all browsers.
Above message may contain errors in grammar, spelling or wrongly chosen words. This is because I'm not a native speaker. My apologies in advance.

User avatar
jsebean
Registered User
Posts: 165
Joined: Wed Nov 17, 2010 1:40 am
Location: Atlantic Canada

Re: [RFC] Rounded corners via css

Post by jsebean » Mon Jan 16, 2012 3:13 pm

+1

CSS3 FTW! :lol:
-Jonah

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: [RFC] Rounded corners via css

Post by Arty » Mon Jan 16, 2012 3:14 pm

Ger wrote:However, I suggest that at the time 3.1 reaches BETA status, the browser stats will be checked for IE8> and the JS fix will be evaluated. There's no need for indefinite support for all browsers.
Unless 3.1 is delayed by 4-5 years, I don't see this happening. IE7/8 support is a must have for now.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
Vinny
Style Customisations
Style Customisations
Posts: 126
Joined: Thu May 20, 2010 4:01 am
Location: Brazil
Contact:

Re: [RFC] Rounded corners via css

Post by Vinny » Tue Jan 17, 2012 1:04 am

++1.

The current CSS rounded corners are only for IErggg :evil: . Do you plan to use the prefixes for browsers? (-webkit, -moz, -ms, etc...)

User avatar
Arty
Registered User
Posts: 970
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: [RFC] Rounded corners via css

Post by Arty » Tue Jan 17, 2012 1:14 am

Prefixes aren't needed for recent versions of all browsers. The only browser that is still being used that requires prefix is Firefox 3.6, but not many people use it and by time 3.1 will be released it will probably completely disappear.
Formerly known as CyberAlien.

Free phpBB styles | Premium responsive XenForo styles

User avatar
nextgen
Registered User
Posts: 128
Joined: Sat Jul 24, 2010 4:59 am
Location: Guatemala
Contact:

Re: [RFC] Rounded corners via css

Post by nextgen » Tue Jan 17, 2012 3:02 am

+1
*Imagine a signature super spectacular.*

User avatar
Dragosvr92
Registered User
Posts: 624
Joined: Tue May 31, 2011 12:08 pm
Location: Romania
Contact:

Re: [RFC] Rounded corners via css

Post by Dragosvr92 » Tue Jan 17, 2012 6:05 am

I think your javascript solution is a bit dirty. Theres no need to do that just to support border radius on the dumb IE Browsers.
As an alternative you could use CSS3 PIE to make border radius work in all IE Browsers besides IE9 Which already supports Border radius and some other CSS3 Properties, but its lame anyways compared to newer browsers like FF etc :D
Previous user: TheKiller
Avatar on Memberlist 1.0.3

Post Reply