Technique #1:
Single index.php file which includes header.php, navigation.php, footer.php and content files depending on URL variable.
Problems #1:
You can't add individual .CSS files specific to your content pages because they have to be added in the main index.php file and may conflict with other content pages.
If you have javascript's needed for specific content pages you MUST load all potentially used JS files in the index.php file. This means you unnecessarily load JS files for content pages where they aren't needed.
Technique #2:
template.php file for each major page of website which includes header.php, navigation.php, footer.php. Content is not included via a file but rather the template file is used as the content file.
Problems #2:
Any changes made to the the template has to be duplicated to every other major page manually.
I started using technique #1 until I ran into major javascript issues. I am now considering moving to technique #2 and just dealing with template changes as necessary.
What technique do you use and how do you solve the CSS/JS include issue?
I tend to have one CSS for the whole web site or at most 2 CSS file when a unique CSS file will be very long. In such case, I define in the first CSS file the general ayout of the web site and the common structure shared by the web site pages, and in the second CSS file I will define the layout specific to a page or to an object.
Related
I'm working on a project that needs to have a header in all pages, I decided to use php for that and I have an external one JavaScript file. My problem is when the changed content on the html page page JavaScript start running function on that page, but it should not. I am interested how using one JavaScript file on multiple html pages, but there is no conflict. There is a solution to get around this, but it's not good. Plus I have light and dark mode on html pages, so I do not think it's good to create more JavaScript files with the same code :) thanks
Very new to the world of HTML and I will try to phrase this question as best as I can.
Currently, I am creating a website. For each page I am creating, I have 2/3 pages - 1 I save the HTML file in, the other I save the file .css/.js.I make sure to keep the name of the file the same and in turn, it edits my html page as I wish it to do. So I therefore have a folder with 2/3 files made up of HTML, CSS and Javascript. Is this the correct way, or should I have everything saved together in a .html file?
Reasons for separation:
Separate JS - Reuse it on other pages
Separate CSS - Able to give the site a new fresh look easily along with reuse
Separate HTML - Focus on content not look.
Also should be mentioned CSS/JS could be cached if used on multiple pages on your site
First and main rule :
A web developer should be able to change the markup in an HTML
template without worrying about accidentally breaking a CSS rule or
some JavaScript functionality.
So Yes, your html, css, js files should be separate.
I need to convert a website page with all of it's external stylesheets to a single html with inline css (not for email use but to include styled portions of that page into another website's page), I've found so far CssToInlineStyles wich does most of the job very well, but I still have to merge all stylesheets into one file and then pass it to that class.
scrapbook for firefox seems fine, only drawback : no contol over changing urls of resources (images in html or in css) it make a whole snapshot of the webpage available offline with no overrides
I'm trying to optimize my website. I have a few plugins to include (jquery plugins with CSS), and my own javascript code.
Now I have the CSS in separate files for different plugins, as I downloaded them. And if I need one on the actual page, I generate code to include that. The same with the JS files. But when it comes to render a complex page with a lot of stuff, 9 CSS files can be called and 7 or 8 JS files, each of which are HTTP requests.
Should I put the CSS into one big file to reduce the number of included CSS files? But then everything will be interpreted by the browser even if the current page doesn't need so much stuff.
I've thought of a third way: generate CSS and JS files with PHP. Then it'll be always one JS and one CSS file, and only with the things which are needed. Or is it an absurd way?
What do you say, which to use to reduce page load time?
It is better to include all CSS in a file and all JS in a file and the minify them using many online services that minify and compress CSS and Javascript. this will reduce the number of http requests as well as volume of data to be downloaded.
If you generate CSS with php then the CSS and JS should be downloaded with every page and generating them takes some time, but if you pack them in one file it downloads once and the browsers caches it.
if your site has many different sections and packing all css in a file makes a huge file then you can pack CSS in two or three file and in each section load the related one.
reducing number of http request is very important.
I think your last solution is the best one.
Generate one js file and one css file from php, and don't forget to minimized/gziped them :)
Here is a very good article about optimization : http://developer.yahoo.com/performance/rules.html
This depends largely on how your users use your page. If most of the users just view one page then it makes sense to only send them the stuff that they need to display that one page (combining everything into as few requests as possible). On the other hand if most of users view multiple pages then it makes sense to send them more than they need so they will already have the CSS&JS on the next page view. But in this case you have to make sure that you are always generating the same CSS&JS with the same URI, so that the browser will not re-download the same content under a different name. You also have to setup proper HTTP caching.
What I usually do is split JS/CSS in two parts. Every page has a "common.css" and "common.js", which has stuff that every page needs (header/footer/... styles for CSS, and then jquery/common js/... for JS). Then every subpage has it's own JS&CSS that has just the stuff you need for that page (if required).
For me, the best way is somewhere in the middle - for CSS files, you better grab them all, join and compress to one file. For JS code - make for example 3+ files: one with compressed and joined external libs, one with your common stuff, and maybe next files for each bigger section - but I dont think its needed. Maybe splitting your JS code on part needed before user login, and after user login.
Remember to minify and consider asynch loading (with LAB.js for example).
Oh, and this php script... I dont think it is good idea - better use/write some script which joins and minifies your statics on compile (or deploy, or even run by hand), so there is no need to generate everythin over and over again.
I have been working on a web page and would like to load multiple stylesheets in an external library.
Unfortunately, this library has many CSS files spread under the same folder.
The names are complicated and its such a pain to manually link it one by one.
As it
<link type="text/css" href="site/libraries/folder/highlight-areas.css"></link>
...
Is there a shortcut that loads all CSS files on the same page within the folder site/libraries/folder
I know how to do this with Ruby on Rails but that is another domain.
Is there a similar technique available on the client side?
Thanks in advance
Would the CSS #import function help you? It allows you to import a CSS file into another, so you could create one master CSS that links to the rest of library styles.
Not as such, no. Javascript does not have access to server-side information at all. (And thank goodness!) However, if you wanted to, there is nothing to stop you from:
Creating a page in some server-side scripting language that either:
A. Grabbed the contents of all of the .css files inside of site/libraries/folder and served them up as one CSS file upon request.
B. Sent your client-side script a list of all of the names of the .css files in the folder so it can load them when needed.
Set up a script in your deployment phase that either:
A. Updates your .js, .css, or .html files with the names of the .css files you want to use.
B. Concatenates all of your .css files into one file and deploys that to your server.
Each of these approaches has strengths and weaknesses. 1A requires processing time for every request (unless you cache the results, in which case you might want to consider just going for 2B) 1B will not work for clients with Javascript disabled. Both 2A and 2B require that you always run your deploy scripts after you make an edit. So it's really up to you.
Just an idea (not tested):
setup the htaccess file to allow listing the directory contents of the stylesheets directory
parse the result to extract the file names
inject the link tags using document.write