Custom JS/CSS Best Practices
Permalink
I just wanted to throw this out there to bounce some ideas around. I've had a few instances recently where I've needed to add some custom Javascript (both separate .js files and code within the page) and CSS to a page on my C5, and I'm trying to determine the best way to do that without adding this code to the theme itself (I've got hundreds of pages using this single theme so I'd hate to add it in there if it's only needed on a couple of pages).
So...what do you guys think would be the best practice in a situation like this. With regard to JS, I've been using the HTML block and adding the code in that way, but that still doesn't take care of linking to the external files. And with CSS its not considered valid XHTML to add <style> elements within the <body> element, so even though most (if not all) browsers will still interpret it, I'd be nice to have valid code.
Any thoughts?
So...what do you guys think would be the best practice in a situation like this. With regard to JS, I've been using the HTML block and adding the code in that way, but that still doesn't take care of linking to the external files. And with CSS its not considered valid XHTML to add <style> elements within the <body> element, so even though most (if not all) browsers will still interpret it, I'd be nice to have valid code.
Any thoughts?
Yeah, an "Add to Header" block could be pretty cool/useful. Actually - maybe we could get Elyon to modify his Code Blocks add-on (http://www.concrete5.org/marketplace/addons/code-blocks/) to simply have an option to either render inline or render in <head>. I'll PM him :)
What about the header content attribute, adds what ever you put in it in the head tag
Well, the header content attribute is nice, but it's not really that good for adding code that's more than a single line, which was more what I had in mind. Plus the ability to pull JS files from within the C5 file manager would I think be ideal too.
Forgive my ignorance, but aren't JS files cached? Once it's loaded, the browser holds on to it. When it's requested again it just uses the one that has been cached.
I always assumed it didn't matter if the page url was different as long as the url to the js file stayed the same.
I always assumed it didn't matter if the page url was different as long as the url to the js file stayed the same.
True, but my thinking that is that even if it's cached, it just seems like bad practice to load files you don't actually need. Plus, when you're adding the actual Javascript itself (rather than linking to an external file), this could possibly break code on pages that don't need it if you're trying to do it from within a theme.
Very true. Didn't think about stuff breaking.
Honestly, I'd have to ask why the code was needed. If its for a block template... well, put it with the block template.
Otherwise, just us an HTML block? If it needs to be in the header than use the following code:
Honestly, I'd have to ask why the code was needed. If its for a block template... well, put it with the block template.
Otherwise, just us an HTML block? If it needs to be in the header than use the following code:
<script type="text/javascript"> ccm_addHeaderItem('<blah>blah();</blah>'); ccm_addHeaderItem('http://path/to/file.js', 'JAVASCRIPT'); ccm_addHeaderItem('http://path/to/file.css', 'CSS'); </script>
> With regard to JS, I've been using the HTML block and adding the code in that way,
> but that still doesn't take care of linking to the external files.
Why not? You can certainly add a script tag that references an external JS file - just as you would do in the doc head.
> And with CSS its not considered valid XHTML to add <style> elements within the
> <body> element
That's certainly true, despite the fact that C5 itself does it. It not valid and is bad practice. I would suggest adding the code to your master CSS style sheet.
-Steve
> but that still doesn't take care of linking to the external files.
Why not? You can certainly add a script tag that references an external JS file - just as you would do in the doc head.
> And with CSS its not considered valid XHTML to add <style> elements within the
> <body> element
That's certainly true, despite the fact that C5 itself does it. It not valid and is bad practice. I would suggest adding the code to your master CSS style sheet.
-Steve
Maybe a single page with a controller that does the same thing?