MyBB Community Forums

Full Version: Simplifying CSS3.css
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
After looking at css3.css content i have noticed a large amount of code that can be chopped up with:
- attribute selectors
- by dropping vendor prefix support

If you open that file you'll notice 112 lines that can be reduced by 50%. Vendor prefixes for border-radius property can be dropped since mayor browsers like IE (from v9), Chrome, Opera (both Next and 12.xx series), Safari and FF support this property without their respective vendor prefixes. Attribute selectors are supported in all modern browsers.

Another suggestion is to remove css3.css and move that content into global.css (there's no point loading css3.css globally when you can just paste few more lines in global.css


tr td[class*="trow"]:first-child {
 border-left:0;
}

tr td[class*="trow"]:last-child {
 border-right:0;
}

.tborder {
 border-radius:7px;
}

.thead_collapsed {
           border-radius:6px;
}

.thead:first-child {
 border-radius:6px 0px 0px 0px;
}

.thead:last-child {
 border-radius:0px 6px 0px 0px;
}

.thead:only-child {
 border-radius:6px 6px 0px 0px;
}


tr:last-child td.tfoot:first-child {
  border-radius:0px 0px 0px 6px;
}

tr:last-child td.tfoot:last-child {
  border-radius:0px 0px 6px 0px;
}

.button, .textbox, input[type=text], input[type=submit], select, textarea, fieldset, .editor_control_bar, blockquote,
.codeblock, input.invalid_field, input.valid_field, .pm_alert, .red_alert, .popup_menu,
.postbit_buttons > a{
     border-radius: 6px;
}

.post.classic .post_author {
  border-radius:0px 6px 6px 0px;
}

.popup_menu .popup_item_container:first-child .popup_item {
  border-radius:6px 6px 0px 0px;
}

.popup_menu .popup_item_container:last-child .popup_item {
  border-radius:0px 0px 6px 6px;
}

.pagination a {
  border-radius: 6px;
}

.pollbar {
  border-radius: 3px;
}
You need to know your audience. Arstechnica says that IE 6 and 8 are still in high use.
Anyone who has a basic knowlage about modern technology will know that IE6, IE7 and IE8 are outdated and old browsers without support for modern web standards. IE6 came out before a decade, IE7 before 6 years and IE8 5 years ago. Even Microsoft decided to start a campaign ( https://www.modern.ie/en-us/ie6countdown ) in order to persuade end user to switch to modern browser. This is 2014, a time for new development standards like responsive design and HTML5 markup which requires modern browsers and not something that is decade old. And my suggestion was a trimmed version of what was available before.
I agree with this and think that IE 8 should be the minimum supported browser in the future. Even google doesn't support IE 8 and lower anymore.
If we dropped support for IE 8, we could also use jquery 2 which is about 11kb smaller. (hey, every bit makes a difference).

I'm all for forcing security and modernness on the world by telling them their browser is outdated and dead.
+1 - just drop ancient browsers
According to this IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified. IE8 doesn't even support border-radius property so removing vendor prefixes like -webkit- and -moz- won't even make any difference on IE8. Supporting IE6 and old browsers is like trying to bring dinosaurs back to life.
I don't understand something - from one side modern designers want to move with the times and drop support for old browsers (nothing against that), but from another they try to minify everything as if people were still using 128 kbps modem or similar connections.. That's a rarety unless we're talking about mobile devices, but MyBB 1.8 is still faaaaaaar away from being mobile-friendly, so removing multiple lines from a cached CSS file doesn't really matter. And theme designers are able to do it themselves.

Additionally, 1.8 was supposed to work with older browsers, it's too late to change our plans now.
(2014-07-14, 06:53 PM)Destroy666 Wrote: [ -> ]I don't understand something - from one side modern designers want to move with the times and drop support for old browsers (nothing against that), but from another they try to minify everything as if people were still using 128 kbps modem or similar connections.. That's a rarety unless we're talking about mobile devices, but MyBB 1.8 is still faaaaaaar away from being mobile-friendly, so removing multiple lines from a cached CSS file doesn't really matter. And theme designers are able to do it themselves.

Additionally, 1.8 was supposed to work with older browsers, it's too late to change our plans now.

By simplifying it (i'm reffering to my suggestion) older browser support isn't dropped since border radius is supported in:
Opera - from v 9.5 (12.xx series [Presto layout] don't use -o- prefix / Next [15 +, Blink layout] support border-radius)
-Firefox - from 3.6 (and that was years ago, -moz- prefix was dropped 4 years ago [?])
-Chrome / Safari -support for border radius was available for years
IE11, IE10, IE9 - border support since IE9
IE8, IE7, IE6 - they don't support border radius (nor css3.css contain any hacks for these versions).

We are talking about browser versions that are obsolete and support isn't even provided by their developers.

Also

tr td[class*="trow"]:first-child {
 border-left:0;
 }

is equal to

tr td.trow1:first-child,
tr td.trow2:first-child,
tr td.trow_selected:first-child {
 border-left:0;
}



and

.popup_menu .popup_item_container:first-child .popup_item {
  border-radius:0px 0px 6px 6px;
}

is equal to





.popup_menu .popup_item_container:first-child .popup_item {
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}





My point is that there is a simple way to get this done.


Since you are talking about old browsers support

in

.thead_left {
    border-top-right-radius: 0;
}

.thead_right {
    border-top-left-radius: 0;
}

there isn't any -moz-, -o- or -webkit- vendor prefix.
I think anyone that cares much about their browsing experience has switched from IE6-8 (A free choice). Internet loading speed isn't necessarily related to someone caring about their experience, it's unavoidable in certain locations, and more expensive.

That said I honestly don't care either way, it doesn't really impact load performance enough to matter.

Combining css3.css and global.css would be useful, though.