Kompx.com or Compmiscellanea.com

HTTP to HTTPS redirect in .htaccess

Web servers : Apache + nginx

Redirecting from all domain names of a web site to its web address with HTTPS and the domain with www. The names to be redirected from are:

  • Both with and without www - URL with HTTP
  • Without www - URL with HTTPS

Server configuration: Apache + nginx. SSL is enabled. SSL-certificate is purchased, approved and installed. That is, everything is up and running. So it is just the HTTP to HTTPS redirection that is left to get ready and start up. Directives for .htaccess file:

RewriteEngine On

RewriteCond %{HTTP:HTTPS} !on [NV]

RewriteRule ^(.*)$ https://www.domain.tld/$1 [R=301,L]

RewriteCond %{HTTP_HOST} !^www\.

RewriteRule ^(.*)$ https://www.domain.tld/$1 [R=301,L]

HTTP to HTTPS redirect in detail

-- Enable runtime rewriting engine:

RewriteEngine On

-- If HTTPS is not present:

RewriteCond %{HTTP:HTTPS} !on [NV]

-- Then replace HTTP + domain (with or without www) with HTTPS + domain with www:

RewriteRule ^(.*)$ https://www.domain.tld/$1 [R=301,L]

-- If HTTPS is present, but domain name has no www (the case when https://domain.tld is entered in address bar):

RewriteCond %{HTTP_HOST} !^www\.

-- Then replace it with HTTPS + domain with www:

RewriteRule ^(.*)$ https://www.domain.tld/$1 [R=301,L]

Notes

  • RewriteCond %{HTTP:HTTPS} !on [NV] is not the only way to detect if HTTPS is not present. Moreover, for some server configurations other directives may be more suitable, like RewriteCond %{SERVER_PORT} !443 for example. The point is to find out somehow if HTTPS is not on. So it should probably be checked by practice what is going to work in a particular case.
  • Apache Module mod_rewrite docs: http://httpd.apache.org/docs/current/mod/mod_rewrite.html

Aliosque subditos et thema

 

CSS. Target Opera only

 

CSS targeting Opera web browser only: This text is red in Opera HTML / XHTML. Code: <p>This text is red in Opera</p> CSS. Code: doesnotexist:-o-prefocus, p {color: #f00;} The -o-prefocus pseudo-class allows styling elements for Opera browser only. The code is placed in the common CSS file, not in a separate one as it is in case of Internet Explorer conditional comments. Source: http://www.opera.com/docs/specs/presto2.12/css/o-vendor/ [ 1 ] Opera 3.5 - 5.0 ignores "doesnotexist:-o-prefocus" and reads code as p {color: #f00;}. Opera 6.0 - 9.4 ignores the whole code starting "doesnotexist". [ 2 ] Internet Explorer 5.5+, Firefox 1.0+, Google Chrome, Safari 3.1+, SeaMonkey 1.0+, Netscape 7.2+, Mozilla 1.5+ ignore the whole code starting "doesnotexist". Older browsers like Internet Explorer before 5.5 or Netscape before 7.2 or Mozilla before 1.5 seem to ignore the uncommon, Opera 9.5+ specific code ("doesnotexist:-o-prefocus") and apply styles to what they understand - here it is the p tag; making the text in it red. [ 3 ] The text is red in Dillo 3.0.1 as well.

CSS rollover. Changing background image position

 

CSS rollover. Changing background image position. Example: CSS rollover. Changing background image position HTML / XHTML. Code: <div class="example"> <a href="css-rollover-changing-background-image-position.htm">CSS rollover. Changing background image position</a> </div> CSS. Code: .example {position: relative; top: 0px; left: 0px; height: auto; width: 100%; white-space: nowrap; padding: 10px 20px 10px 20px;} .example a {height: 35px; width: 100%; font-size: 24px; line-height: 35px; color: #006; text-decoration: none; text-align: right; display: block; background: url("bgimg.png") no-repeat left top;} .example a:hover {color: #c00; background: url("bgimg.png") no-repeat left bottom;} Background image: CSS rollover Changing background image position The concept : 1. A link with width and height declared explicitly (here it is 100% and 35px), plus display: block - this makes a 100% by 35px rectangle, the whole area of which is a hyperlink. Line-height is declared explicitly as well, equal to the rectangle's height (35px here) - it helps to have the same vertical alignment of the link text across various web browsers. Text-align: right is added to move the link text to the right in the the link block. (The link block area is highlighted in green to make it more obvious) CSS rollover. Changing background image position 2. An image for the link block area background with height equal to two heights of the link block area is created. The image has two parts, the upper one and the lower one, each of height equal to the height of the link block area; here it is 35px. 3. The background image URL is added to the background CSS property of the link. The CSS background property values of no-repeat and left position the background image to the left of the link block area. The CSS background property value of top places the upper part of the background image on the same level as the link text. 4. The background image URL is added to background CSS property of the link's :hover pseudo-class. The CSS background property values of no-repeat and left of the link's :hover pseudo-class position the background image to the left of the link block area. The CSS background property value of bottom of the link's :hover pseudo-class places the lower part of the background image on the same level as the link text, when a user moves the mouse pointer over the link block area. So, when there is no mouse pointer over the link block area, the upper part of the background image is placed on the same level as the link text. When there is a mouse pointer moved over the link block area, the lower part of the background image gets on the same level as the link text. Mouse out - the upper part is displayed, mouse over - the lower part shows up. And no need to preload any additional images. CSS rollover.