I am developing a site using PHP, XHTML strict, and jQuery that will be flexible to support both mobile and desktop devices, using the Responsive Web Design approach and serving different stylesheets using the min-device-width property.
<link rel="stylesheet" href="css/960.css" type="text/css" media="screen and (min-device-width: 480px)" />
But the site will need to have a link to toggle the "desktop" and "moblie" view. I have a basic idea of how this could be done using jQuery, but would prefer a solution in php for devices that don't support JavaScript.
PHP isn't too hard to implement this with. If you were to use a link, like so...
Desktop view
Then in your page script...
//test for stylesheet parameter
if(isset($_GET['view']))
{
//save and set it in the session
$stylesheet = $_GET['view'];
$_SESSION['stylesheet'] = $stylesheet;
}
elseif(isset($_SESSION['stylesheet']))
{
//parameter not sent, so get it from the session
$stylesheet = $_SESSION['stylesheet'];
}
Later, you select your stylesheet code based on this $stylesheet variable.
if($stylesheet == 'desktop')
{
echo '<link rel="stylesheet" href="/css/desktop.css" type="text/css" />';
}
elseif($stylesheet == 'mobile')
{
echo '<link rel="stylesheet" href="/css/mobile.css" type="text/css" />';
}
else
{
echo'<link rel="stylesheet" href="css/960.css" type="text/css" media="screen and (min-device-width: 480px)" />';
}
You could use a SESSION variable for that. The following example assumes there are two stylesheets mobile.css and desktop.css
Testing the argument, and setting up the session.
<?php
session_start();
if(isset($_GET['style']))//Tests the argument
{
if($_GET['style']=="desktop")//This to prevent passing wrong arguments
{
$_SESSION['style']=$_GET['style'];
}
if($_GET['style']=="mobile")//This to prevent passing wrong arguments
{
$_SESSION['style']=$_GET['style'];
}
}
?>
<head>
blah
<?php
if(isset($_SESSION['style'])
{
echo '<link rel="stylesheet" href="'.$_SESSION['style'].'.css" type="text/css" media="all" />';
}
?>
</head>
Your link to switch from/to desktop CSS.
Desktop version
Mobile version
Well, why not just include the appropriate stylesheet depending on a query parameter, or session variable or UA etc etc
//Code that figures out what type is
$css = '';
switch ($type) {
case 'mobile':
$css = '<link rel="stylesheet" href="css/960.css" type="text/css" />';
break;
case 'touch':
$css = '<link rel="stylesheet" href="css/960-mobile.css" type="text/css" />';
break;
case 'desktop':
default:
$css = '<link rel="stylesheet" href="css/960-full.css" type="text/css" />';
break;
}
In your view
echo $css;
NOTE This is only an example. Ideally you shouldn't be constructing your whole link html in PHP, but not knowing any of your implementation details, it will suffice. Best way to do it would be to name your CSS files in a standard manner with only a -type at the end to differentiate where each file is used and just pass the $type variable to the view.
Is this what you're looking for?
Related
I would like to import a css stylesheet in a page depending on a php condition (or other), this condition is based upon the domain URL.
For example, if the page loaded is "mydomain.com/about-us" import a "css/about-us.css" file.
I have tried with this code, but it does not work.
<?php
$url = $_SERVER['REQUEST_URI'];
if (strstr($url, "mydomain.com/about-us/")) {
include '/css/about-us.css';
}
?>
How can I import, or use a <style> tag conditionally?
solution correct:
the correct solution is use only the page name, so if you page is mydomain.com/about-us/
use " /about-us/" only.
now have other question, with the code posted you can import css for specific page , but I noticed that if the domain is mydomain.com/about-us/team.html example in the page team.html load also the css of "about-us" how load the css for about-us only in the page mydomain/about-us/ ??
How you can read here, strstr will return a string or FALSE. You can change it like this:
<!DOCTYPE html>
<head>
<?php
if (strstr($_SERVER['REQUEST_URI'], "mydomain.com/about-us/")!=false) {
echo '<link rel="stylesheet" type="text/css" href="/css/about-us.css">';
} ?>
</head>
...
</body>
</html>
Or:
<!DOCTYPE html>
<head>
<style type="text/css">
<?php
if (strstr($_SERVER['REQUEST_URI'], "mydomain.com/about-us/")!=false) {
echo file_get_contents('/css/about-us.css');
} ?>
</style>
</head>
...
</body>
</html>
In the first example your CSS is included through the <link> tag, in the second, the PHP-script loads your CSS file into the script-tags. You can not use include because it will load another php file and execute where it was included. You should use my first example, because it is more server-friendly because the CSS file doesn't need to be read. Your page will be faster.
You can add a stylesheet to the page with PHP by including this in the <head> of your html document:
<?php
echo '<link rel="stylesheet" type="text/css" href="' . $file . '">';
?>
Where $file is the name of the css file. You're going to have to provide some more information as to what you're trying to do for a better answer.
Update
The variable $_SERVER[REQUEST_URI] only gives the requested page, not the whole domain. From the PHP manual,
'REQUEST_URI'
The URI which was given in order to access this page; for instance, '/index.html'.
So the code should look as follows:
<?php
$requested_page = $_SERVER['REQUEST_URI'];
if ($requested_page === "/about-us" || $requested_page === "/about-us/") {
echo '<link rel="stylesheet" type="text/css" href="/css/about-us.css">';
}
?>
This will test if the requested page is "/about-us" (the client is requesting the "about-us" page) and if it does, the link to the stylesheet will be echoed.
use this:
<?php
$url = $_SERVER['REQUEST_URI'];
if (strstr($url, "mydomain.com/about-us/"))
{
// output an HTML css link in the page
echo '<link rel="stylesheet" type="text/css" href="/css/about-us.css" />';
}
else
{
// output an HTML css link in the page
echo '<link rel="stylesheet" type="text/css" href="/css/another.css" />';
}
?>
you can also do this to import the css contents directly, but probably some media/images links can break:
<?php
$url = $_SERVER['REQUEST_URI'];
if (strstr($url, "mydomain.com/about-us/"))
{
// output css directly in the page
echo '<style type="text/css">' .file_get_contents('./css/about-us.css').'</style>';
}
else
{
// output css directly in the page
echo '<style type="text/css">' .file_get_contents('./css/another.css').'</style>';
}
?>
I am looking for a way to use an If statement to call a certain custom style
something like
if ( is_page('page-id') ) {
"line to call stylesheet2.css";
}
Any ideas?
This should work for you:
if(is_page('page-id')){
echo '<link rel="stylesheet" type="text/css" href="my.css">';
}else {
echo '<link rel="stylesheet" type="text/css" href="another.css">';
}
Hi guys I have some logic here that does not seem to be working for me. Currently I am trying to use two different stylesheets in wordpress. Here is the logic:
<?php
$url = "$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
if ($url=="theurl.com")
{
?><link rel="stylesheet" type="text/css" href="stylesheetforthispage.css" /><?;
}
else
{
?><link rel="stylesheet" type="text/css" href="stylesheetforotherpages.css" /><?;
}
?>
My problem is that the URL that I am trying to use the other stylesheet for is the homepage, and everytime I try this logic is does not seem to work? All help would be appreciated, thanks in advance!
<?php
if ($_SERVER["REQUEST_URI"] == "/")
echo '<link rel="stylesheet" href="/css/homepage.css" type="text/css"/>';
else
echo '<link rel="stylesheet" href="/css/other-pages.css" type="text/css"/>';
?>
I'm trying to set up a conditional system which programatically detects both the browser (using the USER_AGENT string) and the platform (using PHP-Mobile-Detect). My current setup looks roughly like this:
<DOCTYPE html>
<html>
<head>
<?php
include("Mobile_Detect.php");
$detect = new Mobile_Detect();
?>
<?php if($detect->isiPad()) {
echo '<link rel="stylesheet" href="/style/iPad.css" type="text/css">';
}
else
{
echo '<meta charset="UTF-8">
<link rel="stylesheet" href="/style.css" type="text/css">;
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== false)
{
echo '<link rel="stylesheet" href="../style/splash-webkit.css" type="text/css">';
}
//and so on for other browsers
[etc]'
}
The obvious problem that occurs here, is the conflict between the 's. The echo under else, rather than ending at the end of my <style> tag, as I would want it to, ends at the first ' to appear in the code, which, as it were, is in the first USER_AGENT declaration.
How can I bypass this issue?
You missed a ' at the end of this line:
<link rel="stylesheet" href="/style.css" type="text/css">;
Replace it with:
<link rel="stylesheet" href="/style.css" type="text/css">';
You are using single and double quotes nicely though. However, if you do need to use the same quotes, you can always escape them with a \. For example, this would also work:
echo '<meta charset=\'UTF-8\'>';
Try this and let me know then
else
{
echo '<meta charset="UTF-8"><link rel="stylesheet" href="/style.css" type="text/css">';
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== false)
{
echo '<link rel="stylesheet" href="../style/splash-webkit.css" type="text/css">';
}
//and so on for other browser
}
Is there any way to differentiate IE7 versus IE6 using PHP's get_browser() function?
You can do so as such:
$browser = get_browser();
if($browser->browser == 'IE' && $browser->majorver == 6) {
echo "IE6";
} elseif($browser->browser == 'IE' && $browser->majorver == 7) {
echo "IE7";
}
A quick look to the official get_browser() documentation would of answered your question. Always read the documentation before.
I read that get_browser() is a relatively slow function, so I was looking for something speedier. This code checks for MSIE 7.0, outputting "Otay!" if true. It's basically the same answer as the previous post, just more concise. Fairly straightforward if statement:
<?php
if(strpos($_SERVER['HTTP_USER_AGENT'],'MSIE 7.0'))
echo 'Otay!';
?>
Below is a complete example taken from here.
$browser = get_browser();
switch ($browser->browser) {
case "IE":
switch ($browser->majorver) {
case 7:
echo '<link href="ie7.css" rel="stylesheet" type="text/css" />';
break;
case 6:
case 5:
echo '<link href="ie5plus.css" rel="stylesheet" type="text/css" />';
break;
default:
echo '<link href="ieold.css" rel="stylesheet" type="text/css" />';
}
break;
case "Firefox":
case "Mozilla":
echo '<link href="gecko.css" rel="stylesheet" type="text/css" />';
break;
case "Netscape":
if ($browser->majorver < 5) {
echo '<link href="nsold.css" rel="stylesheet" type="text/css" />';
} else {
echo '<link href="gecko.css" rel="stylesheet" type="text/css" />';
}
break;
case "Safari":
case "Konqueror":
echo '<link href="gecko.css" rel="stylesheet" type="text/css" />';
break;
case "Opera":
echo '<link href="opera.css" rel="stylesheet" type="text/css" />';
break;
default:
echo '<link href="unknown.css" rel="stylesheet" type="text/css" />';
}
If your logic is to decide what stylesheets or scripts to include, it maybe worth going the HTML route of conditional comments:
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
That way you get around any custom browser strings and the like. More info at QuirksMode.
I found a different, really simple solution for a PHP IE6 conditional that I was able to edit for my own purposes:
<?php
// IE6 string from user_agent
$ie6 = "MSIE 6.0";
// detect browser
$browser = $_SERVER['HTTP_USER_AGENT'];
// yank the version from the string
$browser = substr("$browser", 25, 8);
// if IE6 set the $alert
if($browser == $ie6){
// put your code here
}
?>
The full script can be found here:
http://www.thatgrafix.com/php_detect/