2012年12月28日 星期五

IE only stylesheet and hacks


As a web developer one of our biggest challenges is to make web design look the same or at least similar for all browsers. Most of the browsers renders almost identical but we have one mind bugging little nasty thing called Internet Explorer, we can’t ignore this browser as it is the standard browser in Windows so it has a lot of users and of course Microsoft made extra hard for us so that every version has its own life. There are a few ways to tackle this thing, most common once are with conditional tags or CSS hacks.

What is and how to use conditional stylesheets

Reason is graphical issues and they need to be fixed. It also verifies in html and is accepted by Microsoft. It’s also possible to less-than/greater-than targeting multiple versions at once.

Syntax

Needs to go in your with all the other CSS linked files. Syntax should be familiar, just regular HTML comments. Opening >!–[if IE]< and closing >![endif]–<. “!” stand for not, so !IE means not IE. “gt” means “greater then”, “gte” means “greater then or equal”, so >!–[if gte IE 8]< means IE8 or higher. Then we have “lt” means “lower than” and “lte” means “lower than equal.

Examples

<head>
<!-- TARGET ALL IE -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->
 
<!-- TARGET ALL NON IE BROWSERS -->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
 
<!-- TARGET ONLY ONE SPECIFIC VERSION, IN THIS CASE IE 6 -->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
 
<!-- TARGET ONLY ONE SPECIFIC VERSION, IN THIS CASE IE 5.5 -->  
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
 
<!-- TARGET IE 6 AND LOWER -->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
 
<!-- TARGET IE 8 AND HIGHER -->
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
</head>

CSS hacks, only if you must

Hacks are used in your general stylesheet file, it is not recommended to use but sometimes it makes the life easier.
/* HIDE FROM IE 6 AND LOWER */
#selector { width/**/: 320px; }
html > body #selector { width/**/: 320px; }
 
/* HIDE FROM IE 7 ONLY */
#selector { _width: 300px; }
 
/* IE 6 ONLY */
* html #selector { width: 240px; }
 
/* IE 7 ONLY */
*+html #selector { width: 300px; }
 
/* IE-8 ONLY */
#selector { width: 300px\0/; }
 
/* IE-7 & IE-8 */
#selector { height: 300px\9; }

Hack vs conditional stylesheets

Hacks are against web standards and should be carefully used, I’ll say it’s wrong to use them and should always be avoided.

Plus for conditional stylesheets

If you call you self a web developer and do care of your end product, you do need them. Using conditional styelsheets is the only way you can get a good result in all IE browsers. I’ll say this is the most boring part as a developer, most time consuming and frustration work. Don’t know how many times I’ve been swearing at Microsoft doing this kind of work. I always try and use greater-than/less-than to target multiple versions, its a great tool.

What about IE 6?

Probably one of the most challenging browsers to work with, I dropped support for this browser years ago, so have also big corporations and governments so I’ll say its safe to ignore IE 6. You can visit theThe Internet Explorer 6 Countdown to see if you target areas has a lot of users. If you targeting China I say you must tackle this bugger.
張貼者： 於 沒有留言:
標籤： , , , ,

How to block/allow IP addresses behind a load balancer with htaccess


When it comes to restrict your website, there are many ways to achieve that and one of the simplest methods is with your htaccess file. But it can be a little bit tricky when you’re in a cloud environment such as the Amazon Cloud and you are using the Elastic Load Balancer.

Normally you would put something like below to allow for two IP address
Order allow,deny
Deny from all
Allow from 11.11.11.11
Allow from 22.22.22.22
That works great as long as you don’t sit behind a load balancer, then the system will always think you are coming from the load balancers IP which we don’t want to block. Apache stores the client IP in an environment variable called X-FORWARDED-FOR, here’s an example to allow for the same IP addresses as above.
SetEnvIF X-FORWARDED-FOR "11.11.11.11" AllowIP
SetEnvIF X-FORWARDED-FOR "22.22.22.22" AllowIP
Order deny,allow
Deny from all
Allow from env=AllowIP
If you want to do the opposite and block just use “Deny from env=AllowIP”
There is also a second option with mod_rpaf which can alter the header and put the X-FORWARDED-FOR value in the Client IP.
Also be careful when using PHP and checking against remote IP, $_SERVER['REMOTE_ADDR'], in this case that will contain the load balancers IP. To get the real value try and use
$_SERVER['HTTP_X_FORWARDED_FOR'] instead.
張貼者： 於 沒有留言:
標籤： ,

Securing WordPress Dashboard using .htaccess behind CloudFlare (or any other CDN)


You may wish to increase the security of your WordPress blog by doing this, or you may not. It’s a matter of preference. Before today I never bothered, but since I wanted to figure out how it can be done, now it makes no sense to remove the extra security.
In all cases, there are 2 areas that can be locked down from 2 separate .htaccess files. These are:
  • /wordpress/.htaccess to secure the wp-login.php file (used to log in).
  • /wordpress/wp-admin/.htaccess to secure everything under the wp-admin directory.
I want to allow only a few IP addresses to be able to access these areas. This is how it’s done without a cloud:
1
2
3
4
5
6
7
# add the following lines to /wordpress/.htaccess
<Files wp-login.php>
    order deny,allow
    deny from all
    allow from 93.75.252.219
    allow from 110.170.50.32
</Files>
1
2
3
4
5
# add the following lines to /wordpress/wp-admin/.htaccess
order deny,allow
deny from all
allow from 93.75.252.219
allow from 110.170.50.32
Access to the login and admin areas of your website are now restricted to only the IPs you allow. If however, you are using a service like CloudFlare, the above will not work because apache can’t see your (the visitor’s) IP address. Let’s fix this:
1
2
3
4
5
6
7
8
# add the following lines to /wordpress/.htaccess
<Files wp-login.php>
    SetEnvIf X-FORWARDED-FOR 93.75.252.219 allowedip
    SetEnvIf X-FORWARDED-FOR 110.170.50.32 allowedip
    order deny,allow
    deny from all
    allow from env=allowedip
</Files>
1
2
3
4
5
6
# add the following lines to /wordpress/wp-admin/.htaccess
SetEnvIf X-FORWARDED-FOR 93.75.252.219 allowedip
SetEnvIf X-FORWARDED-FOR 110.170.50.32 allowedip
order deny,allow
deny from all
allow from env=allowedip
Apache is now reading your IP address and setting the allowedip environment variable which is then whitelisted on the last line.
Note that you should *not* rely on this security measure alone since an IP address you have whitelisted can and may be spoofed. Always monitor your access logs and combine this with other security methods (such as basic authentication for example) to further increase security.


Source: http://blog.ergatides.com/2011/09/07/securing-wordpress-dashboard-using-htaccess-behind-cloudflare-or-any-other-cdn/#ixzz2GKPcUHyG
張貼者： 於 沒有留言:
標籤： , ,
訂閱： 文章 (Atom)