I am writing my own MVC implementation and I am facing a problem including local CSS files. Basically all requests in my applications are going to a method which is decomposing them in order to get a controller and action. For example:
localhost:8888/items/list
this request will be redirected to my index.php where I have:
Application::start($_SERVER['REQUEST_URI']);
Then the request is decomposed to get the controller 'items' and action 'list'
So far all good and I didn't realise the problem as I was using bootstrap from CDN. However now if I include in my html something like:
<link rel="stylesheet" type="text/css" href="/css/style.css">
This will go to my method again and it will not work.
What I tried is to check if the URI contains 'css' and if it does just include the file with:
if(preg_match('/css/',$uri)){
include "../webroot/$uri";}
This worked in terms of loading the css but the css is ignored. Also I get
"Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8888/css/style.css"."
The problem is even bigger if I try to include images although with images at least I am able to display them but again through 'include'. Any ideas how to fix this ?
P.S I know that the problem is most likely because the css is loaded as text file, however I don't know how to get this working with my current setup
Try header("Content-type: text/css; charset: UTF-8"); with file_get_contents instead of include like this
if(preg_match('/css/',$uri)){
header("Content-type: text/css; charset: UTF-8");
if(!$file = file_get_contents("http://localhost:8080/project_name/webroot/$uri")) return 0;
echo $file;
}
Related
I have a PHP page that will output CSS dynamically based on the URL parameters, e.g., cssgen.php?package=10.
I then include the output as a style-sheet in another file, by putting in the following line in the header:
<link type="text/css" rel="stylesheet" href="cssgen.php?package=10" class="notranslate">
In the css-generating PHP file I have included the below headers to signify that the content delivered is CSS:
header('Content-type: text/css; charset=utf-8');
header('X-Content-Type-Options: nosniff');
This work as expected in the sense that the styles reach the page and are correctly applied. However, in the dev console in Edge, I find under Issues and then under Compatibility the complaint that:
'content-type' header media type value should be 'text/html', not 'text/css'.
Any ideas why the issue is raised? And how I can correct it?
I'm using AltoRouter to route my urls to the correct files. Now basically here, I describe my problem already.
On one page, I have an alert included, styled by bootstrap.
It's defined as simple as that:
$('#wrongPasswordDiv').html('<br/><div class="alert alert-danger" id="wrongPWAlert" role="alert">Falsches Passwort. Bitte erneut versuchen!</div>');
Also, before, Bootstrap css file is included:
<link rel="stylesheet" type="text/css" href="/bootstrapcss" />
bootstrapcss is routed to the correct css file using AltoRouter and this line of code:
$router->map('GET','/bootstrapcss','vendor/twbs/bootstrap/dist/css/bootstrap.css','bootstrapcss');
Now, in console, it throws a warning saying Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost/bootstrapcss".
If I use the complete path to the css file, a CDN or remove the DOCTYPE, its working fine. But I don't wanna do either of those variations... Removing the doctype, might damage other functions and if I would use the complete css path, then I wouldn't need the routing...
Any ideas how I could send the Content-type: text/css header, in order to get it working?
You should send the proper Content-Type before you send the response content. I don't know much PHP so I may not read the CSS in the best way, but this is a working example:
Using this route:
$router->map('GET','/bootstrapcss','example.css','bootstrapcss');
And then while matching:
$match = $router->match();
if($match['name'] === 'bootstrapcss'){
header("Content-Type: text/css");
$fileName = $match['target'];
echo file_get_contents($fileName);
return;
}
For context, I have a full example here: https://gist.github.com/kobi/09eaeeecb3406b193a84a674218798a9
This is based on the basic example on AltoRouter: https://github.com/dannyvankooten/AltoRouter/tree/master/examples/basic
I have the following code for my html file:
<html>
<head>
<link rel='stylesheet' href='css/style.php' media = "screen"/>
</head>
<body>
<h1 id="foo">My h1 foo element</h1>
</body>
<html>
And for my php file:
<?php
header("Content-type: text/css; charset: UTF-8");
$asd = '#0000ff';
?>
h1#foo {
color: <?php echo $asd;?>;
}
I've followed some tutorials and this is the simplest one i could make but somehow the output is not working the way it should be. Did i miss anything?
P.S. if i was gonna use php variables in css, can it be sort of dynamic? i mean inside the php body, can i overwrite the value of the php variable used in css and the output would change?
Help would be much appreciated ty!
Works fine for me ^^
Use this syntax:
cssman.php
<?php
ob_clean();
header('Content-Type: text/css');
header('Cache-Control: no-cache, must-revalidate');
error_reporting( 0 );
// These are just to show you can use dynamic values and such:
$type = isset($_GET['type']) ? $_GET['type'] : '';
$theme = isset($_GET['theme']) ? $_GET['theme'] : '';
/** Simply print or echo your css here **/
ob_end_flush();
?>
Try your output first, by navigating to the .php file manually. If there is no content at all, there is most likely a mistake in the PHP code, for debugging you could add error repporting (don't forget to also ini_set('display_errors',1), else errors will only be logged).
Then add it to your view:
your view
<style type="text/css">
#import "/Library/Stylesheets/cssman.php?type=cms" screen;
/* any aditional files here aswell */
</style>
you can do it like
echo"
<style>
h1#foo {
color: ".$asd.";
}
</style>
";
Firstly, to include a php file this syntax is absolutely wrong:
<link rel='stylesheet' href='css/style.php' media = "screen"/>
To include a Css file we use following syntax:
<link rel='stylesheet' href='css/style.css' media = "screen"/>
and include a php file we use:
<?php
include_once "a.php"; // this will include a.php
?>
Instead of using PHP to manage the CSS, you may want to consider one of the CSS preprocessors which are specifically intended for that purpose. It also dissociates your client side code from the server side technology.
http://lesscss.org/
https://learnboost.github.io/stylus/
http://sass-lang.com/
Another approach worth considering is to break up the CSS into several files. You can have a common file that applied to all pages on all devices, one that contains the colors, another that manages the layout, perhaps some device specific ones.
The code you post works as expected. The title with id=foo goes blu. The only problem is that it doesn't use the .css extension for a css file. To solve this you could put in css folder a .htaccess with instructions to Apache Web Server to use Php interpreter also for the css files (look this link).
However probably for dynamic-ly change it from php, you mean change the value (e.g after a user input or some other events).
BUT If I understand well your question the answer is no.
Php can only preprocess your page, it can't modify dynamicly your page after it is loaded by the browser from the user. In addiction, using the code above your variable $asd can only be changed in the style.php AND before that it is used in the code.
I suggest you to use javascript instead, it's a lot easier. Use some javascript library like jQuery, to that kind of job.
I have a stylesheet link that looks like below:
<link rel="stylesheet" href="/example/get_page.php?location=bla.css" id="main_ss" />
get_page.php just gets a URL using file_get_contents():
if (isset($_GET['location'])) {
echo file_get_contents('/example/styles/' . $_GET['location']);
}
I can see that the stylesheet file is being fetched properly (for example the text of the file is showing in firebug when I expend the link tag) but for some reason it is ignored by the browser. If I just fetch the CSS file directly of course everything works.
The code can be seen here: www.specman-verification.com/example/bla.html
Any leads? I'm at loss here.
Add the Content-type header like this (do this before you output anything):
header("Content-type: text/css");
Your code is just trying to load the script get_page.php. To load the CSS file you need:
<link rel="stylesheet" type="text/css" href="/example/bla.css" />
(or similar depending on the actual path to your CSS file). In other words the href attribute needs to specify the path to your spreadsheet file, not the HTML page file.
You need to do it the right way. I understand what you're doing here. You need a good mechanism to dynamically load external CSS and have the result display normal html in the browser output.
Follow the instructions on this url: http://www.warpconduit.net/2009/05/12/dynamically-load-css-and-js-files-using-php/
This will at least get you to have a mechanism to load external css file with php dynamically. You're definitely missing steps in your code.
I am using php to generate a css file, declaring a header like:
<?php
header("Content-type: text/css; charset: UTF-8");
?>
and passing the url from index.php like:
<link href="http://www.site.com/css.php?style_profile=2" media="screen" rel="stylesheet" type="text/css" />
I can't get this file to validate from the w3c css validator because it doesn't recognize the file type. This is the error I keep getting:
Unknown error org.w3c.www.http.HttpInvalidValueException: Invalid content type.
Is there any way to get this to validate without manually pasting the css data? If not, is there any other validation service that will recognize a css.php file (or one with get vars attached, if that is the issue causing the error)? I'd really like to be able to validate by link and not have to cut and paste the css for every single page on my site.
I don't know if this will resolve your problem (unable to test right now), but it is something that I noticed:
According to the W3 spec, your PHP header is incorrect, and it should read charset=utf-8.