I have maybe ten .php files that make up the main pages of my website and 20 .css files all in all. I noticed that when I made a submit button in one file, it adopted the attributes of a .css file that I had not linked through the normal html way.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
However, I have referenced other .php files like this:
include('config.php');
And then in config I referenced many other files in some kind of tangled web.
Does that mean that css is passed on through the PHP include method - and that in multiple layers? e.g. if I referenced a file in config.php that didn't directly reference a css file, but instead another php file which maybe DID directly reference css.
I have to apologize if this is a slightly confused question, it's just my mind cannot comprehend this... CSSCeption...
Consider this... If you go to your site and right click the page and click view source. You will see your entire document, including any items that might be included.
Think of it in this way. An include, is a sort of way of saying, at this position in the document, there should be other things. It looks for the file you include and takes it's contents, whatever that is, and sticks those contents where the include is, it will do this with every include until it finally reaches the end of the document.
In this way, it brings in HTML that has your CSS files linked, and then it reads the HTML that it just brought in, and it applies those CSS files styles to the entirety of the document after all of the HTML has been loaded.
First of all you must know that CSS doesn't "know" what php means, CSS defines HOW HTML elements are to be displayed. So it will take place after the web server converts all your php code into html.
Related
I've been reading about dynamic stylesheets and have stumbled across several options, including sass, and less. But my question is why not just turn my stylesheet.css into stylesheet.css.php and simply use php variables. Then, I avoid all the dependency issues associated with all these other approaches.
Am I overlooking some serious problems by doing it this way?
There is the argument of code re-use: when writing PHP code to generate CSS, you're effectively duplicating (some) of the logic behind things such as sass and less. Why would you do that when there's a widely-used, tested and complete alternative available?
Another thing is performance. Standard CSS files are served by your web server with sane headers regarding caching by the browser. Your browser will not download that same CSS file each time, it just gets it from the browser-side buffer. By default, PHP is not cached at all (and you usually wouldn't want it to be). This means that, by default, your PHP-generated CSS would not be cached, incurring extra load on your server and extra waiting time for your client. While some of this can be solved (including sane header output in the PHP code that generates your CSS), some of it cannot (the overhead of the web server starting up PHP, for example).
Am I overlooking some serious problems by doing it this way?
I host all static assets on a CDN, which you should too. CDNs don't do PHP.
Also: caching, runtime performance, minification
PHP variables used in inline CSS code
Using PHP variables in CSS has many advantages, one of them is that you don't have to learn a new syntax. The use of PHP variables in CSS code is a known practice already implemented in many frameworks, themes, and other website-related scripts.
The most common use is in inline CSS. Here is an example of inline CSS making use of PHP variables:
<html>
<head>
<style>
.class {
color: <?php echo $text_color; ?>
}
</style>
</head>
<body>
</body>
</html>
This technique is usually used when the PHP variable represents a user setting set via an admin interface. One practical example would be in a WordPress Theme where the user can set the background or text color via the theme's backend.
PHP variables in an external CSS file
When it comes to external CSS files, it is also possible to use PHP variables, but in order to avoid PHP from parsing your CSS file each time it is retrieved, you would have to save the output to a static file like stylesheet-processed.css.
Both SASS and LESS need to be parsed before being saved to a ".css" file. The same goes for your PHP file, which you would execute and save the output to a static ".css" file, just like the other syntax.
Parsing CSS files is a very common practice and is widely used on many websites, and most well known websites. It is usually done to increase site's performance by minifying (~25% saving) the CSS code, combine multiples files into one (less HTTP requests), and gzip (~80% saving) the resulting files.
Here is an example of how you would use PHP variables in a file named stylesheet.php, and save the result to stylesheet.css:
<?php
// Get the parsed CSS code with the
$processed_CSS = file_get_contents('http://www.example.com/stylesheet.php')
// Save the processed CSS to a static CSS file
file_put_contents('stylesheet.css', $processed_CSS);
Put the above PHP code into a file named "parse-css.php" and access it through your web browser in order to create or update the resulting static CSS file.
And then in your HTML code you would include stylesheet.css instead of stylesheet.php.
You could improve your parser to make it minify the CSS code too, for example using the CSSMin PHP class.
I have a js file that has the code for navigation for a site with ~600 pages..
Now I want to change the menu(colors, background, links etc) and I don't want to edit the JS file as the code here is like using images for the menu..so I was thinking that I will create a php file or html file and then call it inside that js file. Is this something possible?
Please advise.
You could have the js render an iframe instead of an img and pass along the url to the php/html.
You need to understand the difference between PHP, HTML and JS. They each occupy a different domain in web programming. PHP is for server side logic, HTML is a structural language and JS is an action-oriented language intended to function on top of the HTML that exists in the page (and may be rendered in JS).
All programmers have at one point tried to "hack" code like you are doing, by trying to find a band-aid fix to a complicated solution. It is not worth it. You will lose performance in the best of cases and either fail outright or lose browser compatibility and user interface quality the vast majority of the time.
In short, take your time and edit the JS. You can always do a find/replace on images to strip them out and insert CSS class declarations in their place. Do it right and you'll save yourself a big headache later on.
I've been trying to wrap my head around a good way to do this, but so far have come up empty, and needed some guidance.
Basically, what I have at the moment is a style selector, which gives 10 pre defined styles for the site that a user can choose from. Most of them are grotesque, and are merely proof of concept.
This is controlled by PHP and mysql. When a user logs in, and slects a non-default style, it is added against their user record in the DB. The site then refreshes, and loads the selected style.
It works really well, but now I want to try and have some granular control. For example, I would like users to be able to pick their own header background colour, heading text colour, sub heading colour and some font sizes.
It is a fairly trivial thing, and if I can't find a way to implement it, then so be it.
My initial thought was to have a table that has columns for each customizable part of the size, e.g. font size, colours etc. In the table, would be a record for each user. They then use some interface to pick and choose what they want, and then add it to the table.
My issue, was then what to do with the values that I retrieve from the DB. I would have liked to insert them straight into a CSS file, but I don't think this is possible without some server configuration changes, that I couldnt get to work.
So does anyone have any suggestions on the best way to do this, if there is any way at all.
Regards
Eds
The most obvious option to me would be to build a PHP script that would generate the stylesheet on the fly. This would only get called if there is a record in the table for that specific user that holds all the user-specific styles.
So for example, between your <head></head> you could put:
<?php if($user_has_style): ?><link rel="stylesheet" href="user_style.php" /><? endif; ?>
This calls the user_style.php script and generates the stylesheet needed.
You will have to add the correct headers to the output of the PHP stylesheet, which are:
<?php header("Content-type: text/css"); ?>
This website might be of some use, if you choose this method: http://mou.me.uk/2008/08/03/generating-dynamic-stylesheets-on-the-fly-using-php/
You have several ways to do this.
You may specify CSS properties directly in the style attribute of HTML tags, but that can quickly become tedious as you might have to insert code in scattered areas in the middle of your content, making maintenance harder.
You can also put all style definitions between <style></style> tags inside the <head> section, which partly eliminates the disadvantage of mixing content with presentation.
Finally, it is also possible to produce CSS files with PHP using database informations. Rename your stylesheet something.php, then put this at the top of the file :
<?php header('content-type: text/css'); ?>
This tells PHP that the content it will generate needs to be sent as a CSS file, so that the user's browser knows that it's a stylesheet. All that's left to do is to correctly reference your "mutable" stylesheet in the PHP script that holds your HTML content :
<link href="../layout/css/something.php"
rel="stylesheet" type="text/css" media="all" />
This will allow you to use this kind of things in your "CSS" file :
body
{
background-color:
<?php echo $userstyle['color']; // Retrieved from database somewhere above ?>;
}
However, if you care about performance, the latter solution may need some improvement using the Cache-control header, to avoid reloading the CSS file whenever the user follows a link in your website.
You can put CSS into html file in two ways. You can either put the code in the header under <style> tag or you can put css on a specific item like <body style="background-image:url('file.png')">. Both ways you do not need css file that is separated from .html file :)
is there a way to load css and/or javascript files from outside of the public web directory?
for example on my hosting service i have /public_html but don't want these files to exist in the public directory and want them in a directory outside of the public directory in a sibling directory /system (i am using codeigniter) within the /system/application/view/
Ultimately, Javascript and Stylesheets are processed on the client side. For that reason, there is no solution that would truly hide your javascript or CSS from the public.
One possible solution is to load the required CSS/ Javascript file via PHP using something like file_get_contents() and then outputting that directly to the page using inline styles / scripts.
This doesn't really solve your problem of hiding the code / styles from the public though. It would give you the option of filtering all code and styles through some kind of packer or obfuscatory, although there's no reason you couldn't do that with your static files (and at much less of a processing expense)
Yes -- in a way -- and Minify [http://code.google.com/p/minify/] is one approach.
Look at line 39 of the config file [http://code.google.com/p/minify/source/browse/trunk/min/config.php]. Here you will see where your minified cache sits outside of the web root. Now, I do not know if the source JS and CSS can sit in the same directory as the cache.
Not without a public facing proxy.
You will need to file_get_contents() or include them and then serve them to your page.
You can not just do ../../system and get above the DOCROOT.
They need to be processed by the browser, so they need to be accessible.
If you want to hinder people viewing your source in a human readable way, check out CSS minify and JS packer. These of course are only obfuscating the code. Anyone determined will be able to read your JavaScript and see what it does.
Why don't you want people to read your CSS or JavaScript?
I know what you mean twmulloy, it seems inconsistent to have 'view' related information in different places. However, consider that the JS and CSS files are resources that support the views, rather than parts of the view themselves.
That said, you can achieve what you want in a number of ways. One might be to write a controller that accepts requests for your JS/CSS assets and outputs a header and data from the relevant place (a view file, the database, anywhere in fact). However, this is inefficienty compared to just accepting the 'untidiness' of popping the files in a subfolder of the root level public_html. I, like many commentors above, feel this is the best solution for its speed and appropriateness; just having an 'assets' directory at the same level as the 'system' one, with images, css, js etc inside. You could use an alias or virtual folder to make things feel better for you...
However, there is a third way. There are libraries that do something JUST like what you want, with the added benefit of Minify (from the accepted answer) and compression, or whatever you fancy. The two libraries I know of are called AssetLibPro and Carabiner, and these allow you to specify an asset path (as you want), and then you load your JS and CSS files (with groups e.g. screen, print if needed). They then serve up all related CSS/JS etc as one file; compressed, minified, cached... whatever you need.
Carabiner: http://codeigniter.com/wiki/Carabiner/
AssetLibPro: http://codeigniter.com/forums/viewthread/78931/
I am scraping a website with HTML with php that retrieves a page and removes certain elements to only show a photo gallery. It works flawlessly for every browser BUT any version of IE (typical ;)). We can fix the problem by rewriting the .css file, but we cannot implement it into the head of the php as this will be overwritten by the .css file from the websites server. How would we go about hosting our own version of the .css file so that our website will be displayed using OUR version? Would be swap something out with a filter?
Cheers!
You do realize that it may not really be a scraping problem? It's sounds like a straightforward page display problem.
Worrying about scraping might be a red herring. After you have scraped you have some HTML (and possibly some CSS) ... does that validate at W3C? I realize that is no guarantee, but it is an indicator (I know that IE doesn't always display valid pages properly, but sometimes it's a "gotcha" when other browsers seem to display invalid HTML/CSS properly).
If it's valid then maybe you should look back at your scraping. If you already removes certain elements to only show a photo gallery then maybe you can also remove the CSS from the HTML header (or wherever) and reaplce it with your own?
If you're already scrapping the website, why not just use PHP to omit their CSS file and write your own in its place? Alternatively, you could write your own CSS file just below their's in the <head> so it overwrote their styles.
This is just another thing to check, but if one of the elements you're removing is comments, you could unwittingly be pulling out ie only stylesheets that are between conditional comments. Another thing to look at is paths. Maybe one of their stylesheets has a relative path that you can't call from your server. You would need to make that an absolute path for it to work.
Really, you should probably take a close look at the source of the original page and your formatted source side by side. You could be pulling out something that's should be left in.
You ask how you could remove their css... you do it the same way you remove the other elements you're pulling out. Just pull out style tags and tags that link to stylesheets.
Aside from that I would just write some styles to fix it and stick it them anywhere after the existing css is called. (Like every one else here mentioned)
Just add another CSS header and mark your styles as !important to override the original ones?