Testing a DotNetNuke skin
| Images | Font Sizes | Web Developer Tools | Browser Testing | Validating Skins | W3C's Online Tools | Validating HTML via File Upload | Validating CSS via File Upload | Web Developer Tool and Conclusion |  | Validating CSS via file upload (http://jigsaw.w3.org/css-validator/)
This is an easy method for validating your CSS. You can simply upload your CSS file for your skin without making any changes to the CSS file.
Using the DNN-Blue skin.css file, we can see that the validator has picked up a few errors:
- Property moz-border-radius- doesn't exist
This code is just for Mozilla based browsers, and allows you to add rounded corners to the border of an element, so this is not an error. You can remove this if you do not wish to display rounded corners.
The next errors state:
- Line: 74 Context : .MainMenu_MenuBar
- Invalid number : cursor hand is not a cursor value : hand
You will notice that it provides a link for the cursor item, which provides further information regarding the error.
It is stating that ‘hand’ is not a value for the cursor property. If we examine the CSS, we can see that it has the values:
cursor: pointer;
cursor: hand;
These two values have been stated for browser compatibility, you can view further information here.
Following these errors, the next error is related to DXImageTransform
You will find that VWD will also highlight the filter attribute:
filter:progid:DXImageTransform.Microsoft.Shadow(color='#696969', Direction=135, Strength=3);
This is because the filter attribute is only offered for Internet Explorer browsers, so again this is not an actual CSS error.
Underneath the list of errors are a list of warnings, which you can decide whether or not to implement at your own discresion, such as specifying background colours etc.
The CSS validator is a useful tool that can pick up errors that you may not notice, I have certainly found it very useful when creating my own CSS files.
These errors raise an interesting topic. If you use CSS that is specifically for a browser, will it affect your skin design if that particular effect does not work in other browsers?
You need to carefully consider your design and make sure that you do not become reliant on certain CSS properties that are only available in certain browsers.
The CSS properties that are used within the DNN-Blue skin help to enhance the design if you are viewing the skin within certain browsers, while also not being reliant upon a certain effect if the browser does not support the CSS property. |
|
|