This is how you can show the user agent with Server Side Includes:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>SSI Page</title>
</head>
<body>
<!--#echo var="HTTP_USER_AGENT" -->
</body>
</html>If you share a link of a website on Facebook, then Facebook will display the title, description and an image of that website. If you are a webmaster, then you can define what will be shown on Facebook. Let’s have a look at my example:
<title>Der Blog von Benny Neugebauer</title> <meta name="description" content="Benny Neugebauer schreibt in seinem Blog über Tipps und Tricks in der Webentwicklung. Zu den Themen zählen JavaScript, Java, PHP, HTML5, SEO und Photoshop." /> <meta name="medium" content="blog" /> <link rel="image_src" href="http://www.bennyn.de/images/logo.png" / >
Explanation:
- Facebook will show the standard HTML title of your webpage.
- You can set description, which will be shown. It can be 160 characters long but to be compatible with the Google search, it should not be longer than 130 characters.
- It is recommended to determine the type of your website. Possible values are: audio, image, video, blog, news and mult (multiple).
- Finally you can set a thumbnail picture for your website. The size should be 100×100 pixels.
Here is the final result of my customization:
More information can be found in the Facebook Share documentation.
Server Side Includes (SSI) is a server-side scripting language which runs on Apache (with mod_ssi), some Java Application Servers (see Server Side Include in GlassFish) and also on Microsoft Internet Information Services (IIS). Here are a few examples of how to use SSI:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Server Side Includes</title>
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }
</style>
</head>
<body>
<!-- http://httpd.apache.org/docs/2.0/howto/ssi.html -->
<!--#set var="name" value="Benny Neugebauer" -->
<!--#set var="text" value="My name is ${name}." -->
<!--#set var="accountBalance" value="\$72.72" -->
<p>
<!--#echo var="name" --><br/>
<!--#echo var="text" --><br/>
My account balance is: <!--#echo var="accountBalance" -->
<br/><br/>
<!--#if expr="${name} == 'Benny Neugebauer'" -->
<b>Hey Benny!</b>
<!--#else -->
<em>Who are you??</em>
<!--#endif -->
<br/>
<!--#if expr="{$name} = /[a-zA-Z]/" -->
Your name contains just letters. Yay!
<!--#endif -->
<br/><br/>
</p>
<p>
<!-- Print some CGI variables... -->
<!--#echo var="HTTP_USER_AGENT" --><br/>
<!--#echo var="SERVER_NAME" --><br/>
<!--#echo var="REMOTE_ADDR" --><br/>
</p>
</body>
</html>Ein Code sagt mehr als tausend Worte:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Centering a Div horizontally and vertically</title> <style type="text/css"> html { background-color: black; } body { width: 100%; height: 100%; position: static; /* don't make it relative! */ } #centered { position: absolute; height: 396px; width: 400px; margin: -198px 0px 0px -200px; /* 50% height, 0px, 0px, 50% width */ top: 50%; left: 50%; background-color: violet; border: 1px solid white; } </style> </head> <body> <div id="centered"></div> </body> </html> |
Mit dem Internet Explorer 8 hat Microsoft die Kompatibilitätsansicht eingeführt. Mit der Kompatibilitätsansicht wird die Rendering-Engine des Internet Explorers auf eine Vorversion gestellt, wodurch Webseiten, die für ältere IE-Versionen entworfen wurden, besser angezeigt werden können. Der “Compatibility Mode” wird durch ein Icon in der Adresszeile eingeschaltet.
Kompatibilitätsansicht im IE9
Für Webdesigner ist das Icon der Kompatibilitätsansicht ein Dorn im Auge, da es aussieht wie ein zerrissenes Dokument und dadurch der Eindruck entsteht, dass etwas mit der eigenen Webseite nicht in Ordnung ist. Um das Icon zu entfernen, muss die eigene Webseite selbst den Kompatibilitätsmodus bestimmen. Dazu wird der kompatible User-Agent als Meta-Tag für den Internet Explorer im head-Bereich der Seite angegeben:
1 2 3 4 | <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > <title>My Web Page</title> </head> |
Die gezeigte Variante stellt die Render-Engine des Internet Explorers auf die Version von Internet Explorer 7 um, was dazu führt dass beispielsweise ein Internet Explorer 9 die Webseite anzeigt wie der IE7.
Möchte man sich nicht auf eine spezielle IE-Version festlegen, sondern immer die Aktuellste benutzen, so muss folgender Eintrag gemacht werden:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
Vor ein paar Tagen wollte ich ein modernes HTML-Submenü bauen, welches aufklappt, wenn man mit der Maus über einen Menüpunkt fährt.
Auf diversen Seiten habe ich gesehen, dass viele diese Technik mit JavaScript realisieren. Ich finde das übertrieben, da sich dieser Effekt auch mit der CSS “hover”-Eigenschaft für Listenelemente lösen lässt (Stichwort: Suckerfish CSS). Das funktioniert aber nur in aktuellen Browsern.
Der Internet Explorer 6 unterstützt die “hover”-Eigenschaft nämlich nur für Anker. Wie ich leider feststellen musste, gibt es noch weitere Besonderheiten die man beachten muss. Nach 2 Stunden Arbeit habe ich dann aber einen Code entwickelt, der barrierefrei (ohne den Einsatz von display:none und visibility:hidden) ist und problemlos in Firefox und Internet Explorer 6-7 funktioniert (andere Browser wurden nicht getestet).
Screenshot:
0