Teh webkit.css needs stomping.

Topic: Teh webkit.css needs stomping. (Read 8740 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.

Teh webkit.css needs stomping.

June 08, 2013, 03:29:57 am

This file is deprecated, like all browser-specific CSS files since the nifty "body id by browser" idea was implemented. Just remove webkit.css from the repo. You know you want to.

Re: Teh webkit.css needs stomping.

Reply #1 – June 08, 2013, 07:52:28 am

Oh and while you're at it

this stuff can go from index.template.php:

Code: [Select]

// Quick and dirty testing of RTL horrors. Remove before production build.
    //echo '
    //<link rel="stylesheet" href="', $settings['theme_url'], '/css/rtl.css?alp21" />';

That was handy when the template had the extra stuff for rtl variant css files, but you've dropped that. Not a bad idea dropping it, since most themers don't even know what rtl.css is, let alone variants for it. Anyone who actually needs rtl variant files (like if using the variant system for layout variants) will know enough to write their own code to call them.

Re: Teh webkit.css needs stomping.

Reply #2 – June 08, 2013, 08:04:26 am

Oh and it might be advisable to do this a bit differently:

Code: [Select]

// This bit of template is used by default in the main menu to create the number next to the title of the menu to indicate for example the number of unread messages
    $settings['menu_numeric_notice'] = ' [<strong>%1$s</strong>]';

Not sure it's worth hard coding the square brackets and strong tag in the template. Not a big deal if it stays, since it'll do the job for most mugs, but could also be handled just with a span and class, with all presentation handled in the css file. Random thoughts.

This is a tad peculiar too:

Code: [Select]

'current_page' => '<span class="pagelink current_pagelink"><span class="current_page"><strong>%1$s</strong></span></span>',

Why for it need span class="pagelink current_pagelink" AND span class="current_page" AND strong? Three containing elements? Ok, it'll never be able to break out and run away with all that around it, but span class="current_pagelink" should be just as effective.

Except that it's not actually a link for the current page, just a bit of text, so class="current_page" would make more sense.

ETA: Hmm. More funny critters lurking in the undergrowth.

Code: [Select]

		'expand_pages' => '<span class="expand_pages" onclick="{onclick_handler}" onmouseover="this.style.cursor=\'pointer\';"><strong> ... </strong></span>',

Can't see the need for strong tags there either, or for the mouseover for the cursor. Just having .expand_pages {cursor:pointer; font-weight: bold;} in the css should do it. Doesn't need js for the cursor.

Re: Teh webkit.css needs stomping.

Reply #3 – June 08, 2013, 02:47:07 pm

Code: [Select]

<span class="pagelink current_pagelink">

yep, that's indeed enough for styling.. the others (inner span and strong) are leftovers from implementation..

Edit: will be fixed soon,
https://github.com/elkarte/Elkarte/pull/499

Re: Teh webkit.css needs stomping.

Reply #4 – June 08, 2013, 05:14:48 pm

But it's not a link. The current page doesn't have any anchor attached to it. So, it doesn't make sense for the class names to include "link", and if you're having a current_page class to style it the pagelink class is just bloat.

Re: Teh webkit.css needs stomping.

Reply #5 – June 09, 2013, 01:47:02 am

yep, that name might be not perfect, should change it probably..
RE: the classes I left it there because of easier styling.. all elements in that section use

Code: [Select]

 .pagelink, .expand_pages {
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 1px 5px;
	background: #efefef;
	display: inline-block;
}

the current_pagelink class extends these borders &background images with another color and bold text style.

Code: [Select]

.current_pagelink  {
	color: #aaa;
	font-weight: bold;
}

We could remove that class from the HTML and move borders and background to the curren_pagelink class, but how would you add rounded borders to the first and last child if current_pagelink is the first or the last child?

Code: [Select]

.pagelinks  .pagelink:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-left: 1px solid #ccc;
}
.pagelinks .pagelink:last-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

It might be possible but I think all elements in a structure should use the same class, just for the sake of readability.

Code: [Select]

<ul class="mylist">
<li class="list_item">...
<li class="list_item active">...
<li class="list_item">...
</ul>

Re: Teh webkit.css needs stomping.

Reply #6 – June 09, 2013, 01:59:23 am

Quote from: TE – June 09, 2013, 01:47:02 amyep, that name might be not perfect, should change it probably..
RE: the classes I left it there because of easier styling.. all elements in that section use

Code: [Select]
 .pagelink, .expand_pages {
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 1px 5px;
	background: #efefef;
	display: inline-block;
}
the current_pagelink class extends these borders &background images with another color and bold text style.

Code: [Select]
.current_pagelink  {
	color: #aaa;
	font-weight: bold;
} 

How about this?

Code: [Select]

 .pagelink, .expand_pages, .current_page {
	border: 1px solid #ccc;
	border-left: none;
	padding: 1px 5px;
	background: #efefef;
	display: inline-block;
}
.current_page {
	color: #aaa;
	font-weight: bold;
}

QuoteWe could remove that class from the HTML and move borders and background to the curren_pagelink class, but how would you add rounded borders to the first and last child if current_pagelink is the first or the last child?

Would have to try this live, but shouldn't this work just as well?

Code: [Select]

.pagelinks  span:first-child {
	border-radius: 4px 0 0 4px;
	border-left: 1px solid #ccc;
}
.pagelinks span:last-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

Re: Teh webkit.css needs stomping.

Reply #7 – June 09, 2013, 02:05:06 am

mhh, yes.. will try it

Re: Teh webkit.css needs stomping.

Reply #8 – June 09, 2013, 02:09:58 am

Another option: maybe you could do the roundy border on the pagelinks div itself, and just set left borders on the spans, with no left border on the first child. That should, in theory, be faster to process. Last child is the slowest out of first, only and last.

ETA: Or.............................

why have a div and spans anyway? Why not just a ul, or one of the nifty new HTML5 tags?

Re: Teh webkit.css needs stomping.

Reply #9 – June 09, 2013, 02:16:19 am

Example:

Code: [Select]

<menu><a>Previous shiz</a><a>1</a><a>2</a><span>Ok so you have one of the buggers for the current page</span><a>4</a><a>Next shiz</a></menu>

Antechinus hasn't dug too deeply into all the new HTML5 tags, so this is just an idea.

Re: Teh webkit.css needs stomping.

Reply #10 – June 09, 2013, 03:11:39 am

yep, using <nav> + childs seems to be the best option for semantic, anyway we'd need an <ul> and <li> inside.
The content is a list of elements, using <ul> and <li> seems just logical.

Re: Teh webkit.css needs stomping.

Reply #11 – June 09, 2013, 03:20:19 am

The nav tag is apparently for primary navigation stuff, like main menu and footer link directory. Wouldn't really suit for minor stuff like page links, AFAICT.

Also, I can't see the point of using a new html5 tag just as bloat to wrap an old block level element like ul. I'd either use just menu + anchors (html5 minimal markup) or just ul and li (old style but arguably just as good).

If you get into putting new html5 tags around existing elements that will do the job, it's really just divitis all over again IMO. Seems that way to me anyway. "Best practice" for this new stuff seems to be still evolving.

Re: Teh webkit.css needs stomping.

Reply #12 – June 09, 2013, 03:29:16 am

Ah. Looks like I might be wrong about menu. It's not currently supported by any browsers anyway.

Looks like it'd have to be nav.

W3 says "The nav element represents a section of a document that links to other documents or to parts within the document itself; that is, a section of navigation links."

ETA: MDN says "The HTML Navigation Element (<nav>) represents a section of a page that links to other pages or to parts within the page: a section with navigation links."

So that would be cool for page links I suppose, if "the document" is taken as being the topic rather than the post. Who knows?

Menu will take li as child though, which would be very cool if someone supported it.

Re: Teh webkit.css needs stomping.

Reply #13 – June 09, 2013, 05:07:45 am

Would this work for you?

Code: [Select]

	<menu class="pagination">
		<li class="prev_page"><a href="prev">previous page</a></li>
		<li><a href="page1"></a></li>
		<li class="active">2</li>
		<li><a href="page3">3</a></li>
		<li class="expand_pages"><a href="expand">...</a></li>
		<li><a href="page20">20</a></li>
		<li><a href="page20">20</a></li>
		<li class="next_page"><a href="next">next page</a></li>
	</menu>

Re: Teh webkit.css needs stomping.

Reply #14 – June 09, 2013, 05:46:39 am

It'd work for me, but unfortunately it wont work for any browser that I know of. The menu tag apparently has zero browser support at the moment.

http://caniuse.com/#search=menu