Web Dev Questions That Don't Need Their Own Thread v4

[lkymky]

[QUOTE=Goz3rr;43953307]

header("Content-type: text/css");

extensions shouldn't matter[/QUOTE]
PERFECT, I thought there would be an obvious reason why people don't do this.

I would use SASS but or LESS but the idea is I just want to fix the one problem of, double the code gets sent to the browser.
You guys already are aware of this but
In chrome

 @keyframes fadeIn {from {opacity:0.2;} to {opacity:1;} }

is completely useless, as in Firefox

@-webkit-keyframes fadeIn {from {opacity:0.2;} to {opacity:1;} }

is completely useless, so why am I sending them this data.

Obviously if it was that small It wouldn't matter; But I'm planning on using extremely long animation sequences and double the code will actually be a sizable difference in performance.
Minified or written in LESS or SASS in the first place, that is going to be a problem.

[QUOTE=KmartSqrl;43954036]
If code readability is important why are you writing code that is hard to read? I wouldn't do CSS rules all on one line unless you're only using one rule. The amount of filesize that you're saving by doing that is incredibly minimal and it makes it a lot harder to scan through your rules. I'd be irritated if someone handed me CSS like that. If you want it minified, minify it, but don't keep your source like that.[/QUOTE]

I wouldn't, I don't know why but using this method (It isn't perfect right now, id have the selectors sorted too)
Is much nicer to read and easier to work with.

I really really get annoyed by single lines being occupied by a

 } 

Its easier to read the CSS just by the fact that you don't have to scroll everywhere to find something, grouping Classes and ID's to one part of the document is a breeze this way.
Thankfully CSS you can code the way you want; What is irritating to one person, might be the preffered way to another.

Deleted an element from the page? Find its Class and...
Shift + End, Delete; done.

Rather than dragging the mouse across lines and lines of "neat" CSS code.

[Shadow801]

[QUOTE=lkymky;43956661]Stuff[/QUOTE]

Do you understand that if you use PHP you're still going to be outputting double the code anyway? Whatever you do, you're going to need to include the prefixes.

Your IDE will likely give errors if you put PHP into your CSS. Also, please ignore whoever suggested browser sniffing.

Your concept regarding the way CSS should be formatted into a document isn't how it should be done and is counter productive, if you are coding correctly it should be easy to navigate.

[lkymky]

[QUOTE=Shadow801;43956727]Do you understand that if you use PHP you're still going to be outputting double the code anyway? Whatever you do, you're going to need to include the prefixes.

Your IDE will likely give errors if you put PHP into your CSS.[/QUOTE]
I don't care if it just shows highlighting for PHP, I didn't like LESS or SASS because my IDE at the time would try to syntax highlight using CSS rules and once I got fancy with it the highlighting was all off and incorrect.
I never touched SASS or LESS afterwards because I don't like them.

[QUOTE=Shadow801;43956727] Also, please ignore whoever suggested browser sniffing.[/QUOTE]
PHP does some extra work, and the client gets the correct website,
What is wrong with the browser sniffing? [I](I mean facepunch does it for every single post)[/I]

I was thinking I might just find a way to insert the prefixes with an if statement, with either jquery or PHP if the website is being rendered via webkit.
I've wanted to put in browser sniffing for other reasons than this, so it will be a likely component of my website

But if this is going to cause more problems; than I would like to know beforehand because this is likely the route I will be taking.

[QUOTE=Shadow801;43956727]Your concept regarding the way CSS should be formatted into a document isn't how it should be done and is counter productive, if you are coding correctly it should be easy to navigate.[/QUOTE]
I find it much more productive, What is your point based on?

[TrinityX]

-snip-

[asantos3]

Chrome and opera are now blink and not webkit, you know what that means? It means some people who were working in webkit moved to the google project because they want some things changed, like removing old code and css vendor prefixes.
You are trying to do browser sniffing? Serving a specific css version for each browser? Good luck maintaining that in the future: you will need to make a normal version without prefixes, a webkit version, a firefox version, sometimes a IE version and then you will visit the site a few months later and doesn't work because chrome removed the vendor prefix in keyframes or, for example, you put a firefox version with -moz-appearance but later it becomes a standard so you need to remove the prefix in your code.

Didn't understand if you knew but sublime text as plugins and you can install [url=https://sublime.wbond.net/]package control[/url] and after you can install lots of plugins from their repository, like less and sass support.

I recommend you work with sass+[url=http://compass-style.org/]compass[/url].

How to sass+compass
- Install ruby in your machine (in windows with [url=http://rubyinstaller.org/]RubyInstaller[/url])
- Fire up the terminal or the "Start Command Prompt with Ruby" if you're in windows.
- Type "gem install compass" to install it.
- To create a new project just type "compass create NameOfTheProject"
- Type "compass watch" so it detects the changes.
- To compile your stylesheets for production just type "compass compile -e production --force". It will remove [url=http://i.imgur.com/VprYapK.png]line comments[/url] that are useful debugging.

Vendor Prefix Mixins
Always include "@import "compass/css3";" if you want to work with mixins in compass.
- Your own [url=http://i.imgur.com/0SDuEV0.png]keyframe mixin[/url].
- Built in [url=http://i.imgur.com/UCCyS0p.png]opacity mixin.[/url]

Short story: Every browser discards unknown vendor prefixes, the prefix can be removed in future versions, not even insignificant disc space you will save doing your way, the clients don't care and if you take the mixin approach it will save you considerable time.

[Shadow801]

[QUOTE=asantos3;43958256]Chrome and opera are now blink and not webkit, you know what that means? It means some people who were working in webkit moved to the google project because they want some things changed, like removing old code and css vendor prefixes.
You are trying to do browser sniffing? Serving a specific css version for each browser? Good luck maintaining that in the future: you will need to make a normal version without prefixes, a webkit version, a firefox version, sometimes a IE version and then you will visit the site a few months later and doesn't work because chrome removed the vendor prefix in keyframes or, for example, you put a firefox version with -moz-appearance but later it becomes a standard so you need to remove the prefix in your code.

Didn't understand if you knew but sublime text as plugins and you can install [url=https://sublime.wbond.net/]package control[/url] and after you can install lots of plugins from their repository, like less and sass support.

I recommend you work with sass+[url=http://compass-style.org/]compass[/url].

How to sass+compass
- Install ruby in your machine (in windows with [url=http://rubyinstaller.org/]RubyInstaller[/url])
- Fire up the terminal or the "Start Command Prompt with Ruby" if you're in windows.
- Type "gem install compass" to install it.
- To create a new project just type "compass create NameOfTheProject"
- Type "compass watch" so it detects the changes.
- To compile your stylesheets for production just type "compass compile -e production --force". It will remove [url=http://i.imgur.com/VprYapK.png]line comments[/url] that are useful debugging.

Vendor Prefix Mixins
Always include "@import "compass/css3";" if you want to work with mixins in compass.
- Your own [url=http://i.imgur.com/0SDuEV0.png]keyframe mixin[/url].
- Built in [url=http://i.imgur.com/UCCyS0p.png]opacity mixin.[/url]

Short story: Every browser discards unknown vendor prefixes, the prefix can be removed in future versions, not even insignificant disc space you will save doing your way, the clients don't care and if you take the mixin approach it will save you considerable time.[/QUOTE]

This.

I can't think of a point in time where I've ever had to use browser sniffing for compatibility, I would much rather find the root of the problem or the best practice solution, which is never browser sniffing.

[supersnail11]

[QUOTE=lkymky;43956661]I would use SASS but or LESS but the idea is I just want to fix the one problem of, double the code gets sent to the browser.
You guys already are aware of this but
In chrome

 @keyframes fadeIn {from {opacity:0.2;} to {opacity:1;} }

is completely useless, as in Firefox

@-webkit-keyframes fadeIn {from {opacity:0.2;} to {opacity:1;} }

is completely useless, so why am I sending them this data.

Obviously if it was that small It wouldn't matter; But I'm planning on using extremely long animation sequences and double the code will actually be a sizable difference in performance.
Minified or written in LESS or SASS in the first place, that is going to be a problem.[/QUOTE]

You'll save a few kilobytes, at most. This is 2014, even the most budget internet plan can handle that.

[KmartSqrl]

[QUOTE=lkymky;43956661]I would use SASS but or LESS but the idea is I just want to fix the one problem of, double the code gets sent to the browser.[/QUOTE]

You're blowing this out of proportion. If your server is gzipping static files (like it should be) when they are sent, then this duplication is going to get squashed down and [B]barely[/B] impact the filesize at all.

[QUOTE=lkymky;43956661]I wouldn't, I don't know why but using this method (It isn't perfect right now, id have the selectors sorted too)
Is much nicer to read and easier to work with.

I really really get annoyed by single lines being occupied by a

 } 

Its easier to read the CSS just by the fact that you don't have to scroll everywhere to find something, grouping Classes and ID's to one part of the document is a breeze this way.
Thankfully CSS you can code the way you want; What is irritating to one person, might be the preffered way to another.

Deleted an element from the page? Find its Class and...
Shift + End, Delete; done.

Rather than dragging the mouse across lines and lines of "neat" CSS code.[/QUOTE]

Break stuff in to multiple files based on the piece of the site you are styling and concatenate them in to one big file during your build/deploy process if you need better organization.

By sticking everything on one line you're preventing source control diffs from showing the specific change that was made as easily:
[img]http://www.theparticlelab.com/assets/2010/diff-multi-4f363dae0736286eab1ff91285f3ff0f.png[/img]
vs
[img]http://www.theparticlelab.com/assets/2010/diff-single-aaa808eaac3346a38b70e4d2b05e7925.png[/img]

Being able to quickly look at the list of selectors is kind of a moot point because you can press cmd+r in sublime text to instantly navigate all your selectors in the current file with the keyboard (which will always be faster than scrolling through looking for it). And if you're not using sublime, litterally every text editor in existence lets your cmd+f, which, again, will be faster.

If you're completely deleting rules from your CSS often enough that you need to code in a certain style to optimize that process, then you're doing something wrong and problably need to be writing your CSS more modularly.

It [B]is[/B] mostly personal preference, but I think writing them all on one line has way more downsides than writing one rule per line does.

[editline]18th February 2014[/editline]

[QUOTE=lkymky;43957031]I don't care if it just shows highlighting for PHP, I didn't like LESS or SASS because my IDE at the time would try to syntax highlight using CSS rules and once I got fancy with it the highlighting was all off and incorrect.
I never touched SASS or LESS afterwards because I don't like them.[/QUOTE]

This sounds hilariously ignorant. "I couldn't get syntax highlighting working so I don't like them"

[QUOTE=lkymky;43957031]
PHP does some extra work, and the client gets the correct website,
What is wrong with the browser sniffing? [I](I mean facepunch does it for every single post)[/I]
[/QUOTE]

Browser sniffing is [B][I]never[/I][/B] the best solution. It's not reliable. You have to keep up on it when new browsers are released otherwise you might end up serving the wrong styles to the wrong browsers. You are focusing on the wrong things right now honestly. You've got a [I]long[/I] way to go before you need to be worrying about things like the extra bytes vendor prefixes are costing you.

Generally speaking, if you can't vocalize the problem with a standard way of doing something, you should be following the standard until you understand the domain it's applied to well enough to know why you want/need to deviate from the standard. I don't think you're at that point yet. You need to learn things the "right" way first. If something is a standard across something the size of the internet, there's generally a reason for that.

[lkymky]

[QUOTE=KmartSqrl;43961647]
-- Stuff --
[/QUOTE]

Many assumptions are made here, to be honest I was hoping for a shortcut or shorthand way to write a single property and I get a barrage of different opinions about weather or not I should adopt another feature.
I don't like SASS or LESS because I don't like them. Not because they don't have syntax highlighting, [I]how fucking retarded do you think I am?[/I][/impolite]

I just see these suggestions as overlycomplicated. I'm sorry to have occupied the past page with these ongoing arguements.
I'm going to choose the solution that I feel works for me, you're welcome to reccomend and give points to your criticisms [I]which you have[/I]
However this ongoing arguement is going to lead me nowhere in productive discussion.

I shall be taking notes on the items you have suggested because I do respect you and your opinions.
However i've been lead down a path to making a fool of myself

At this time I'm going to continue studying different solutions to this problem and I have not chosen one yet.
So Ill deal with the few extra kilobytes.

[QUOTE=asantos3;43958256]
-- Stuff --
[/QUOTE]

Your points about futureproofing does have me thinking of adopting SASS actually. It would be able to support any browser as they change, as long as no brand new new codes are made, correct?

[KmartSqrl]

[QUOTE=lkymky;43964347]Many assumptions are made here, to be honest I was hoping for a shortcut or shorthand way to write a single property and I get a barrage of different opinions about weather or not I should adopt another feature.
I don't like SASS or LESS because I don't like them. Not because they don't have syntax highlighting, how fucking retarded do you think I am?[/impolite][/QUOTE]

You said yourself that you have barely used them so you're at least a little retarded if you've already decided you don't like them haha. To me it sounds like you're just intimidated by them since you haven't used them yet and are choosing to not use them moving forward because of that. Sass is, hands down, one of the best things you can learn as a front-end dev as far as the impact it can have on your quality of work.

[QUOTE=lkymky;43964347]I just see these suggestions as overlycomplicated. I'm sorry to have occupied the past page with these ongoing arguements.
I'm going to choose the solution that I feel works for me, you're welcome to reccomend and give points to your criticisms [I]which you have[/I]
However this ongoing arguement is going to lead us nowhere in productive discussion.

I shall be taking notes on the items you have suggested because I do respect you and your opinions.
However i've been lead down a path to making a fool of myself

[editline]18th February 2014[/editline]

At this time I'm going to continue studying different solutions to this problem and I have not chosen one yet.
So Ill deal with the few extra kilobytes.[/QUOTE]

No one is setting you up to make a fool of yourself but you. You asked how to do something, we told you the best way to do it, and you told us you didn't want to do it that way (even though it is absolutely the best way to do it)

Like I said, don't worry about the kilobytes right now. Worry about building cool stuff and putting it out there. Worry about learning new tools and learning the industry standard ways to do certain things, and learning how to ship products. It doesn't matter if a page takes 0.003ms longer to download because you had vendor prefixed rules in your CSS if you're not building things and putting them in front of people. Ship ship ship!

[stringy]

[QUOTE=KmartSqrl;43961647]You're blowing this out of proportion. If your server is gzipping static files (like it should be) when they are sent, then this duplication is going to get squashed down and [B]barely[/B] impact the filesize at all.

Break stuff in to multiple files based on the piece of the site you are styling and concatenate them in to one big file during your build/deploy process if you need better organization.

By sticking everything on one line you're preventing source control diffs from showing the specific change that was made as easily:
[img]http://www.theparticlelab.com/assets/2010/diff-multi-4f363dae0736286eab1ff91285f3ff0f.png[/img]
vs
[img]http://www.theparticlelab.com/assets/2010/diff-single-aaa808eaac3346a38b70e4d2b05e7925.png[/img]

-snip-
[/QUOTE]

I agree completely, but in git at least you can use --word-diff to get intra-line changes. This isn't an excuse for packing more than 80 characters on a line, or not making your whitespace semantic; I only mention it because I use it myself often enough to quickly get a more complete picture of what actually changed.

[Shadow801]

Side point, if you use Grunt.js to compile your CSS you can actually use something called autoprefixer to automatically add prefixes based on the Can I use database.

[url]https://github.com/ai/autoprefixer[/url]

I've never used it personally, I prefer to use mixins, but a colleague has and he said it works nicely.

Also if you've never used Grunt, have a look into it, it's a life saver.

[rieda1589]

I was initially very reluctant to use a CSS preprocessor... I thought, how can a preprocessor understand what I'm intending to do. Surely I could write better CSS by hand?

Maybe this is true some of the time, but oh my god you do not understand the value of a preprocessor until you use one. SASS is amazing. Use it.

[Stonecycle]

[QUOTE=rieda1589;43968948]I was initially very reluctant to use a CSS preprocessor... I thought, how can a preprocessor understand what I'm intending to do. Surely I could write better CSS by hand?

Maybe this is true some of the time, but oh my god you do not understand the value of a preprocessor until you use one. SASS is amazing. Use it.[/QUOTE]

If I'm getting how Sass works correctly, it's a little converter that you write a file in Sass, run it through the "compiler" for lack of a better word, and it spits out a *.CSS file. Correct?

[editline]e[/editline]

The answer to my questions [b]always[/b] come up right after I ask. No matter how hard I search before, it'll come up in plain sight just by asking.

[quote]Once you start tinkering with Sass, it will take your preprocessed Sass file and save it out as a normal CSS file that you can use in your web site.[/quote]

[lkymky]

[URL="http://leafo.net/scssphp/"]http://leafo.net/scssphp/[/URL] I'm adding this. Then to recode the stylesheets...
I'm stuck on a mac though so I can't get anything done... :suicide:

Is there any way to get an HTML5 compatible browser to work on leopard?
[URL="http://facepunch.com/showthread.php?t=1366879"][elsewhere][/URL]

[djjkxbox360]

Get 10.6.8 like he said and you should definitely be able to get one

[krail]

I'm a noob at this and I've tried googling but I don't really know how to word this properly, so stupid question time:

how do I set css attributes in an external sheet for an element (eg hyperlinks), but only for a certain group/region (inside the 'menu' div)?

[Killervalon]

[QUOTE=krail9;43993760]I'm a noob at this and I've tried googling but I don't really know how to word this properly, so stupid question time:

how do I set css attributes in an external sheet for an element (eg hyperlinks), but only for a certain group/region (inside the 'menu' div)?[/QUOTE]

#menu a {
    color: pink;
}

#menu a:link {
    color: pink;
}

Also, since you seem new, you can use a comma for multiple

#menu a, #menu a:link {
    color: pink;
}

[commander204]

[QUOTE=krail9;43993760]I'm a noob at this and I've tried googling but I don't really know how to word this properly, so stupid question time:

how do I set css attributes in an external sheet for an element (eg hyperlinks), but only for a certain group/region (inside the 'menu' div)?[/QUOTE]

This is called your selector, and what you want is specificity.

.menu a {
  color: red;
}

For example will color all links as red, but only if they are a children of a .menu.

[Fulcrum]

[QUOTE=krail9;43993760]I'm a noob at this and I've tried googling but I don't really know how to word this properly, so stupid question time:

how do I set css attributes in an external sheet for an element (eg hyperlinks), but only for a certain group/region (inside the 'menu' div)?[/QUOTE]

.your-region-class .your-element-class {
background: red;
}

That will apply to all .your-element-class in that region.

For children of that region and not children of its children use
.your-region-class > .your-element-class {
background: red;
}

Double ninja'd

To make my post useful heres a handy dandy rather snazzy css cheat sheet.
[url]http://coolhomepages.com/images/blog/cheat-sheets/css-cheat-sheet-v2.png[/url]

Remember not to rely on :hover for menus since tablets/mobile don't handle it very well.

[Maqtiah]

Am I the only one targeting things like this when I need to be 100% specific? I literally see no one doing it.

.menu>a {
     color: pink;
}

[buhbang]

Most useful page for css selectors [url]http://www.w3.org/TR/selectors/#selectors[/url]

[commander204]

[QUOTE=Moofy;43994756]Am I the only one targeting things like this when I need to be 100% specific? I literally see no one doing it.

.menu>a {
     color: pink;
}

[/QUOTE]

Sure if you want a really specific selector. But often those links are inside a list, so not the direct childs.

[Maqtiah]

[QUOTE=commander204;43995058]Sure if you want a really specific selector. But often those links are inside a list, so not the direct childs.[/QUOTE]

It's just an example, usually I target like this:

nav>ul>li>a {
     color: pink;
}

[rieda1589]

[QUOTE=Moofy;43995078]It's just an example, usually I target like this:

nav>ul>li>a {
     color: pink;
}

[/QUOTE]

Sometimes, but CSS specificity is read from right to left, so the more selectors you a add, the slower it gets.

Your code above would search for all 'a' elements on the page, then check which are in an 'li', then which 'li's are in a 'ul', then which 'ul's are in a 'nav'.

It's much faster to do

nav a {}

or even

.menu-link {}

[Maqtiah]

[QUOTE=rieda1589;43996071]Sometimes, but CSS specificity is read from right to left, so the more selectors you a add, the slower it gets.

Your code above would search for all 'a' elements on the page, then check which are in an 'li', then which 'li's are in a 'ul', then which 'ul's are in a 'nav'.

It's much faster to do

nav a {}

or even

.menu-link {}

[/QUOTE]

I was pretty sure it was the other way around, oh well I guess you learn something new everyday!

[djjkxbox360]

I wouldn't say it's read right to left. For "nav>ul>li>a " I would say it looks for a nav element, then looks for ul elements in nav elements, then looks for li elements in those ul elements, then a elements in those li elements. Of course, in the way css is actually processed it may actually be read right to left, but I've never delved deep into how these things work

[KmartSqrl]

[QUOTE=djjkxbox360;44000250]I wouldn't say it's read right to left. For "nav>ul>li>a " I would say it looks for a nav element, then looks for ul elements in nav elements, then looks for li elements in those ul elements, then a elements in those li elements. Of course, in the way css is actually processed it may actually be read right to left, but I've never delved deep into how these things work[/QUOTE]

We're talking about the way the browser actually interprets it in the back-end, not the way it's read. The simpler your CSS selectors, the better your performance is going to be.

[djjkxbox360]

Ah ok, my mistake, that was just the way I read it in my head because left to right is easier for me to comprehend

[krail]

[QUOTE=Killervalon;43993818]

#menu a {
    color: pink;
}

#menu a:link {
    color: pink;
}

Also, since you seem new, you can use a comma for multiple

#menu a, #menu a:link {
    color: pink;
}

[/QUOTE]

thanks guys, though I realise now I could have just given the links a class and styled that :v:

[editline]22nd February 2014[/editline]

I'm having another issue now, I've got div that I want to go across the whole top of the screen, but it has this like gap around it, even though I've set the margin to 0:

[img]https://dl.dropboxusercontent.com/s/ubzsgcep5sr2xhs/site1.png[/img]

[img]http://puu.sh/75q9S.png[/img]

I don't know how well you can see it, the page has a grey background and the red should go all the way to the edges