I have to translate this code:
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="css/ie7-style.css" /> <![endif]-->
for CakePHP. At the moment I'm using $this->Html->css('fileName') in the view file and in the default.ctp I do echo $this->fetch('css');
But what do to when i must to use a conditional css expression like above?
Thanks
If you want conditionals set inside a view file (as in not in a layout), you can do:
// in your view file
$this->Html->css('file', null, array('block' => 'ie_conditional_css'));
// in layout
<?php if ($ieConditionalCss = $this->fetch('ie_conditional_css')): ?
<!--[if lt IE 8]><?php echo $ieConditionalCss ; ?><![endif]-->
<?php endif; ?>
You just put the comments around your PHP, like this:
<!--[if lt IE 8]><?php echo $html->css('filename') ?><![endif]-->
Related
<?php if($_COOKIE['lang'] != 'en') echo '<link rel="stylesheet" href="css/'.$_COOKIE['lang'].'.css"/>'; ?>
With this above script you get the stylesheet for the language that is selected.
Like if you select France you get the stylesheet fr.css
But now I want the same for IE so I thought something like this.
<?php if($_COOKIE['lang'] != 'en') echo '<link rel="stylesheet" href="css/'.$_COOKIE['lang'].'ie.css"/>'; ?>
So now when you click on France it also opens frie.css
But what do I write in here to make it only for IE
<!--[if IE]><style>#import url('/css/ie.css');</style><![endif]-->
Thanks!
<?php
if($_COOKIE['lang'] != 'en'){
printf('<!--[if IE]><style>#import url(\'/css/%sie.css\');</style><![endif]-->', $_COOKIE['lang']);
}
?>
This is what you need to write. You can also check in PHP headers if browser is Internet Explorer.
You can use $_SERVER['HTTP_USER_AGENT'] or get_browser() function to check it in PHP.
You can use this :
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
You can refer to below line :
https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
For a wordpress shortcode I have to return a string containing HTML markup and I'm wondering what the best way to build/store it is.
My first attempt was an unreadable mess of concatenated parts like this:
$output = '<div ';
if( $atts['ID'] ) {
$output .= 'id="'.$atts['ID'].'"';
}
$output .= ' class="responsive-map icon-'.$atts['icon'].'"';
Thanks to sprintf() I could trim it down into a much more readable shape:
$format = '
<!--[if lt IE 9]>
<div %1$s class="ie responsive-map %2$s" %3$s>
<![endif]-->
<!--[if !(lt IE 9)]><!-->
<div %1$s class="responsive-map %2$s" %3$s>
<!--<![endif]-->
<iframe src="%4$s"></iframe>
</div>
';
$output = sprintf( $format, $id, $icon, $height, $content );
I wonder if there is a better way to do this, especially if the complexity of the markup and number of variable parts goes up. Usually I would simply escape the HTML but in this case that is not an option as wordpress will always place the escaped HTML at the top of a post rather than the intended placement.
First, a better approach then storing the HTML in template at all could be to use a template engine, using template files.
While you could use a double quoted multiline string, I would use a here document. You can interpolate variables like in a double quoted string:
$format = <<<EOF
<!--[if lt IE 9]>
<div $variable1 class="ie responsive-map $variable2" %3$s>
<![endif]-->
<!--[if !(lt IE 9)]><!-->
<div $variable3 class="responsive-map $variable4" $variable5>
<!--<![endif]-->
<iframe src="$variable6"></iframe>
</div>
EOF
Compared with multiline double quoted string, it improves readability, will try explain by example:
$format = "<!--[if lt IE 9]> <--- breaks indention
<div $variable1 class=\"ie responsive-map $variable2\" %3$s> <-- need to escape "
<![endif]-->
<!--[if !(lt IE 9)]><!-->
<div $variable3 class=\"responsive-map $variable4\" $variable5>
<!--<![endif]-->
<iframe src=\"$variable6\"></iframe>
</div>";
There are many ways to achieve what you want with PHP. If readability is the most important thing for you simply use HEREDOC or NOWDOC.
<?php
$output = <<<HTML
<!--[if lt IE 9]>
<div {$var} class="ie responsive-map {$var}" {$var}>
<![endif]-->
<!--[if !(lt IE 9)]><!-->
<div {$var} class="responsive-map {$var}" {$var}>
<!--<![endif]-->
<iframe src="{$var}"></iframe>
</div>
HTML;
I hope you are targeting the view part of the MVC pattern. In this case you could do use it just like this:
<!--[if lt IE 9]>
<div <?= $format ?> class="ie responsive-map <?= $id ?>" <?= $icon ?>>
<![endif]-->
<!--[if !(lt IE 9)]><!-->
<div <?= $format ?> class="responsive-map <?= $id ?>" <?= $icon ?>>
<!--<![endif]-->
<iframe src="<?= $height ?>"></iframe>
</div>
It's important that you hold this source in a seperate file form our controller and models which hold the actual logic and data.
Here you can find an introduction: http://php-html.net/tutorials/model-view-controller-in-php/
Due to not understanding the #import query for responsive behaviour IE8 is incorrectly displaying some of my wordpress website - http://dev1.markdavies.eu . To solve this I'd like to try having a separate style sheet for IE8/7/& 6 and have found the following code
<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->
However I don't know which php file I should put it in. Or even if this is the best way to go about. Please could anyone advise.
I am using a child theme and am reasonably well conversed with the file structure and css, HTML and php code.
Thanks
Add the appropriate conditional comment to your theme’s header.php file right after the call to the theme’s default stylesheet.
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!--[if IE 7]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/ie7.css" media="screen" type="text/css" />
<![endif]-->
Then upload your new IE-specific stylesheet (ie7.css in the example above) to your theme folder.
For child theme, use:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href=" <?php echo get_stylesheet_directory_uri(); ?>/ie.css" />
<![endif]-->
Thank you for your help everyone. Although it's not a child theme, the header.php uses the following form to call the style sheet;
<title><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
So the last answer by vel did the trick. I inserted the conditional statement as follows;
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style-ie.css" type="text/css" media="all"/>
<![endif]-->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
Out of interest, does it matter if it goes before or after the 'ping back' line of code? It seems to work for me either way.
I'm having some trouble with IE8 recognising some CSS that is generated from a PHP file and then included in my sites header. This CSS works perfectly in all other browsers I've tested but it simply won't apply in IE8.
If I move the dynamic CSS into my main css files - it works fine.
By dynamic, I mean the the CSS is generated from PHP. I'm already using respond.js to enable media queries in IE8 which is working because if I put this CSS in my main file - the CSS works.
However, if I put non-media query styles in the same file - it does apply. So this must be an issue with respond.js not seeing that responsive CSS.
When I 'View Source' the file has definitely included as it's printed in there but for some reason IE8 won't apply the styles. It doesn't show in Developer Tools.
Basically, the CSS should display a black menu bar at the top of the page when the browser window is narrower than 782 pixels.
You can see the full thing at: http://sandbox.benpalmer.me/flow/test/
The head of my document looks like this (this is a Wordpress theme/template):
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 <?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 <?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9 <?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <![endif]-->
<!--[if IE 9]> <html class="no-js lt-ie10 <?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="<?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php wp_title( '|', true, 'right' ) . bloginfo('name'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <?php
wp_head();
include(locate_template('assets/css/dynamic.css.php')); ?>
<!--[if lt IE 9]> <?php
if($theme_settings['modernizr-version'] == 'none'): ?><script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/js/vendor/modernizr.min.js"></script><?php endif; ?>
<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/js/vendor/selectivzr.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/js/vendor/respond.js"></script>
<![endif]-->
</head>
<body <?php body_class(); ?>>
The include(locate_template('assets/css/dynamic.css.php')); file that is being included is set up like this:
<?php
/*
| --------------------------------------------------------------------
| Primary Navigation
| --------------------------------------------------------------------
*/
/* Breakpoint
| -------------------------------------------------------------------- */ ?>
<style type="text/css">
#media all and (max-width: <?php echo get_theme_mod('nav-primary-breakpoint', '782px'); ?>) {
#wrapper {
margin-top: 42px;
}
.admin-bar #wrapper {
margin-top: 88px;
}
#mobile-header {
display: block;
}
#menu-primary {
display: none;
}
.drawer {
margin-top: 42px;
padding-top: 42px;
top: -42px;
}
}
</style>
This one has me stumped - I've been Googling for an hour which brought up suggestions of changing my DOCTYPE, making sure my comments are ended properly etc but nothing has worked so far.
I suppose that by "dynamic CSS" you mean CSS media queries. If so, the answer is very simple:
IE8 does not support media queries.
There are some JS polyfills that solve the issue, the most famous one is perhaps respond.js.
EDIT
From the discussion in comments: It seems that the issue is caused by the fact, that Respond.js can read CSS from linked stylesheets only, not from inlined CSS.
This question already has answers here:
PHP DOMDocument error handling
(5 answers)
Closed 9 years ago.
I would like to have different outputs if the file is called by Ajax or not.
For that I have this code witch works fine:
/* AJAX check */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$content = get_content();
die($content);
}
my function for filtering the contend is this:
function get_content(){
//$file = file_get_contents('index.html'); //works better but i get only errors
$dom = new DomDocument();
$dom->loadHTML($_SERVER['REQUEST_URI']); //or $file
$section= $dom->getElementsByTagName('section');
return $section->item(0)->nodeValue;
}
my output is always empty.
Whats wrong here?
!!!I'am not looking for DOMDocument error handling!!!!
What I do for now is:
/* decide what the content should be up here .... */
/* AJAX check */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
/* if ajax, show only content of the section tag */
$file = file_get_contents($_SERVER['SCRIPT_FILENAME']);
$section = preg_replace("/.*<section[^>]*>|<\/section>.*/si", "", $file);
die($section);
}
/* not ajax, show page.... */
and it seems to work. I do not know it is the best solution because somewhere in this forum I read that its better to realise that with DomDocument().
Any suggestions are welcome?
Here is the html-file:
<!doctype html>
<!-- Determine browser JS free -->
<!-- HTML5 Mobile Boilerplate -->
<!--[if IEMobile 7]><html class="no-js iem7"><![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!-- HTML5 Boilerplate -->
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="shortcut icon" href="img/base/favicon.html" />
<link rel="apple-touch-icon-precomposed" href="img/base/apple-touch-icon-57x57-precomposed.html" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/base/apple-touch-icon-72x72-precomposed.html" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/base/apple-touch-icon-114x114-precomposed.html" />
<script src="/js/libs/modernizr.custom.js"></script>
<!--[if (IE 7)]>
<link rel="stylesheet" href="/css/fallback/icons-ie7.css">
<![endif]-->
</head>
<body >
<section role="main">
<header class="hero-banner">
<img class="resize" src="/img/base/spacer-hero.png" rel="/img/designers/banners/cloe-banner3.jpg" alt="Cloe" />
<noscript><img src="/img/designers/banners/cloe-banner3.jpg" alt="Cloe" /></noscript>
<hgroup>
<h1>Claudia</h1>
<h2 class="text-hl">Designerin</h2>
</hgroup>
</header>
</section>
<footer role="contentinfo">
<p><small>©2013 joe</small></p>
<p><small>Our website uses delicious cookies to improve your experience. We'll assume you're ok with that.</small></p>
</footer>
<!-- jQuery from Google's CDN with local fallback -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/libs/jquery-1.8.3.min.js"><\/script>')</script>
<script src="/js/libs/wfl.js"></script>
<!-- Initialises scripts from plugins.js and helper.js -->
<script src="/js/script.js"></script>
<!-- Google Goggles -->
</body>
</html>
You can turn the errors of by setting internal errors to true:
$doc = new DOMDocument;
$before = libxml_use_internal_errors(true);
$doc->loadHTML($html);
libxml_use_internal_errors($before);
You then won't have the errors logged any longer. In your case most likely you've got display errors enabled which might be okay for development, but on your production server, please switch to error logging otherwise your website would reveal too much data to the outside.
See as well:
PHP DOMDocument error handling