Astuces Google et Windows 10: CSS IE10 Geometric Transform for Tilted Text in a given angle

Today my IE9/Windows 7 Pro updated automatically to IE 10. In appearance Internet Explorer 10 presents little differences from IE 9. Nethertheless, I noticed some programming changes in CSS style sheet syntax from IE9.

IE 10 will not take these modifications into account if you put on the <head> section this IE10 Into IE7 Compatiblity Mode meta:

Following are what I've observed to share with you with my great pleasure.

The matrix transform, ie, filter: progid:DXImageTransform.Microsoft.Matrix does no more work, transform is adopted in IE10, similar to WebKit derivatives like Google Chrome, Firefox, Safari and Opera. To get a tilted text at an angle of 60°, like VIP ?

one can use this class under IE9:


VIP ?

with the class defined as thus:

.tiltText {
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=-0.8660, M21=0.8660, M22=0.5, sizingMethod='auto expand');
 -webkit-transform: rotate(60deg);
 -moz-transform: rotate(60deg);
 -o-transform: rotate(60deg);
 bottom: 0;
 color: #ff0000;
 display: block;
 font-weight: normal;
 height: 30px;
 white-space: nowrap;
 width: 70px;
}

It does not work under IE10, one has to add transform instruction:

.tiltText {
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=-0.8660, M21=0.8660, M22=0.5, sizingMethod='auto expand');
 transform: rotate(60deg);
 -webkit-transform: rotate(60deg);
 -moz-transform: rotate(60deg);
 -o-transform: rotate(60deg);
 bottom: 0;
 color: #ff0000;
 display: block;
 font-weight: normal;
 height: 30px;
 white-space: nowrap;
 width: 70px;
}

We let filter: in place in order to fit the IE9 users.

IE 10 takes into account the input field Placeholder attribute, like this:
Buttons are no more slightly rounded as under IE 9, but they are all strictly rectangular, with a beautiful hover effect.
IE 10 remains COM compatible. As one can pilot the IE navigator using Visual Basic for Application (VBA), such as integrated in Microsoft Access 2007 and better.
```
Dim myIEObject
Set myIEObject = CreateObject("InternetExplorer.Application")
myIEObject.Navigate "https://www.paypal.com"
'
' Do other instructions under IE10.
' ... 
'
Set myIEObject = Nothing
'
' ...
'
```
This is an important superiority over Google Chrome, Firefox, Safari and Opera that are not manipulable from Visual Basic, as they are not integrated perfectly into Windows OS. For example, using IE10, one can log in automatically to his PayPal account with username + password authentication. This is not possible with Google Chrome, Firefox, Safari or Opera.
There is not yet the mouse right-click contextual menu as can be expected: "Inspect element", as does Google Chrome. Rather, you have to press F12 key to activate the development tools window, and use arrow tool to pick up an HTML element for inspection.
The password input field is provided with a black trait eye. If one press on it, the clear text is shown. It reappears as hidden text when you release the mouse, a practical tool.

Try it under IE10

Astuces Google et Windows 10

vendredi 3 mai 2013

CSS IE10 Geometric Transform for Tilted Text in a given angle

Following are what I've observed to share with you with my great pleasure.

Aucun commentaire:

Enregistrer un commentaire