Monday, November 26, 2007

Multiple background images for safari only

<html>
<head>
<style>
div.test
{
background-image: #00ffff url(img.jpg) , url(ibm.jpg) ;
display:block;
background-repeat: repeat-y;
background-position: top left, top right;
width: 485px;
height: 400px;
border: 1px solid #000000;
}

</style>
</head>
<body>
<div class="test">Hello this is Vijayta Panchal, from delhi...</div>
</body>
</html>
Posted by at No comments:

Attach icons to anything with CSS 

a[href $='.pdf'] {
 padding-right: 18px;
 background: transparent url(icon_pdf.gif) no-repeat center right;
}

This would attach a pdf icon to the right of any hyperlink who's URL ended in '.pdf' like this. This was pretty exciting and heady stuff. It meant I could show the file type visually with that application's icon just by including a few lines in my master css file. I didn't have to worry about it at all in my html, css would add the icon for me automatically.

This trick makes use of what the official specifications call "attribute selectors".For instance in our above example we have our anchor tag which says to style this element for anchors and then, defined by brackets, [href $='.pdf'], we see if the anchor has an href attribute and if it does if that attributes value ends in '.pdf'.

This works with any attribute. For instance...


span[id ^='google'] {
  background-color: green;
}



Any span which has an id which starts with 'google' will be assigned a green background.

The kicker is that the attributes can be made up. That is you can create your own attributes. For instance, as I integrated askthecssguy's icons into my site I found his solution to work extremely well with mail and document types (pdf, word, excel, etc.), but because the ability to match and exclude substrings was so limited it didn't work very well for automatically detecting internal and external links.

I worked around this by creating my own attribute called icon and then matched it in css like this.



a[icon ^="out"] {
  padding-right: 20px;
  background: transparent url(http://www.hunlock.com/images/external.gif) no-repeat center right;
}

This looked for an attribute called icon and if the value began with "out" it
would show a little external icon beside the link like this.

HREF="someurl.com" icon="out">

Now that was pretty cool because it meant that I could define a visual icon to show beside my links just by adding my own attribute to my anchor, I could also add other icons as they became needed like popups or a magnifier. And the neat thing is that I could use them or not, as I wanted.

The epiphany came when I realized I could do the selection without needing a tag. What that means is that...



[icon ^="out"] {
  padding-right: 20px;
  background: transparent url(http://www.hunlock.com/images/external.gif) no-repeat center right;
}

now worked with ANY tag which had icon="out" as an attribute, be it or .

Now the conditional elements of the selectors are limited (which is the reason I had to opt for custom attributes), but they are powerful. The biggest obstacle is you can only match true, not false -- that is you can only look for what's there, not what's not. Here's an overview of the conditional syntax.



[foo]        -- Has an attribute named "foo"
[foo="bar"]  -- Has an attribute named "foo" with a value of "bar" ("bar")
[foo~="bar"] -- Value has the word "bar" in it somewhere ("blue bar stools")
[foo^="bar"] -- Value begins with "bar" ("barstool")
[foo$="bar"] -- Value ends with "bar" ("I was at the bar")
[foo*="bar"] -- Value has bar somewhere ("I was looking for barstools")  

With these simple selectors you can attach any style you want to any
object
either automatically (as in the case of checking for a file extension
in a HREF
attribute) or manually (by creating your own attributes). You can have
more than one attribute selector as well. For instance
[foo^="foo"][foo$="bar"] { background-color: blue } would style
anything
that had an attribute with a value which begins with foo and ends in
bar.


All by adding icon="out" to my tag like this...
Posted by at No comments:

Conditional comments for Internet Explorer AND non-IE browsers

The following statement will tell you if you are using Internet Explorer or not and if so which version.
Not unusual you may say, until you look closer and realise that Microsoft Conditional Comments are recognising non-IE browsers!

You are NOT using Internet Explorer

You can also target different versions of Internet Explorer AND non Internet Explorer.

If you are using either IE6 or a non IE browser then you will see the following text.
If you are using IE5.x or IE7 then you will not see any text.

You are using EITHER Internet Explorer version 6
OR a non-IE browser

And finally you can target specific IE browser AND non-IE browsers but feed a mixture of information to both.
The following will feed extra text to IE6 which will not be seen by non-IE browsers.

You are using a non-IE browser

IE6 will see 'You are using IE6 and not a non IE browser' and non-IE browsers will see 'You are using a non IE browser'. IE5.x and IE7 will see 'You are using'.

I don't know what use this last one will be but there may be an occasion when it will come in handy.


Information

The above text is generated using just conditional comments. There is no CSS, javascript, PHP or any other programming language involved.

This is just a demonstration of how Internet Explorer's conditional comments can be used to identify non-IE browsers and serve them with markup that will be hidden from Internet Explorer.

I have used this method in my most recent version of the CSS only dropdown menu.
The xhtml

The xhtml code for the normal conditional comments is straightforward as set out by Microsoft.

< !--[if IE]>
<>You are using Internet Explorer
< ![endif]-->
< !--[if IE 5]>
<>Version 5< /h1>
< ![endif]-->
< !--[if IE 5.0]>
<>Version 5.0< /h1>
< ![endif]-->
< !--[if IE 5.5]>
<>Version 5.5< /h1>
< ![endif]-->
< !--[if IE 6]>
<>Version 6< /h1>
< ![endif]-->
< !--[if IE 7]>
<>Version 7< /h1>
< ![endif]-->

I have found that the following code will allow you to target non-IE browsers

< !--[if !IE]>
<>You are NOT using Internet Explorer< /h1>
< !--

..and finally to target non-IE and a specific IE browser
(or any combinations using lte lt or gt gte).

< !--[if IE 6]>
<>You are using EITHER Internet Explorer version 6<>
OR a non-IE browser< /h1>
< !--

<>You are using
< !--[if IE 6]>IE6 and not < !-->
a non-IE browser
<!--< /h1>
Posted by at No comments:

Tuesday, November 6, 2007

CSS Properties

Text and Fonts

* font
* font-family
* font-size
* font-weight
* font-style
* font-variant
* line-height
* letter-spacing
* word-spacing
* text-align
* text-decoration
* text-indent
* text-transform
* vertical-align
* white-space

Colours and Backgrounds

* color
* background-color
* background
* background-image
* background-repeat
* background-position
* background-attachment

The Box Model - dimensions, padding, margin and borders

* padding, padding-top, padding-right, padding-bottom, padding-left
* border, border-top, border-right, border-bottom, border-left
* border-style, border-top-style, border-right-style, border-bottom-style, border-left-style
* border-color, border-top-color, border-right-color, border-bottom-color, border-left-color
* border-width, border-top-width, border-right-width, border-bottom-width, border-left-width
* outline
* outline-style
* outline-color
* outline-width
* margin, margin-top, margin-right, margin-bottom, margin-left
* width
* height
* min-width
* max-width
* min-height
* max-height

Positioning and Display

* position
* top
* right
* bottom
* left
* clip
* overflow
* z-index
* float
* clear
* display
* visibility

Lists

* list-style
* list-style-type
* list-style-image
* list-style-position

Tables

* table-layout
* border-collapse
* border-spacing
* empty-cells
* caption-side

Generated Content

* content
* counter-increment
* counter-reset
* quotes

Paged Media

* page-break-before
* page-break-after
* page-break-inside
* orphans
* widows

Misc.

* cursor
* direction
* unicode-bidi

The Whole Shebang

* background
* background-attachment
* background-color
* background-image
* background-position
* background-repeat
* border
* border-collapse
* border-color
* border-spacing
* border-style
* border-width
* bottom
* caption-side
* clear
* clip
* color
* content
* counter-increment
* counter-reset
* cursor
* direction
* display
* empty-cells
* float
* font
* font-family
* font-size
* font-style
* font-variant
* font-weight
* height
* left
* letter-spacing
* line-height
* list-style
* list-style-image
* list-style-position
* list-style-type
* margin
* max-height
* max-width
* min-height
* min-width
* orphans
* outline
* outline-color
* outline-style
* outline-width
* overflow
* padding
* page-break-after
* page-break-before
* page-break-inside
* position
* quotes
* right
* table-layout
* text-align
* text-decoration
* text-indent
* text-transform
* top
* unicode-bidi
* vertical-align
* visibility
* white-space
* widows
* width
* word-spacing
* z-index
Posted by at No comments:

Display Property

The display property sets how/if an element is displayed.

Display Value
  • none - no display at all.
  • inline - An inline box.
  • block - A block box.
  • inline-block - effectively a block box inside an inline box. Not supported by Mozilla at time of writing. IE will only apply inline-block to elements that are traditionally inline such as span or a but not p or div. Loopy.
  • run-in - Either an inline or block box depending on the context. If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. Crazy. Not supported by IE/Win or Mozilla at the time of writing.
  • list-item - the equivalent of the default styling of the HTML li element.
  • table - a block-level table - the equivalent of the default styling of the HTML table element. Not supported by IE.
  • inline-table - an inline-level table. Not supported by IE.
  • table-row-group - the equivalent of the default styling of the HTML tbody element. Not supported by IE.
  • table-header-group - the equivalent of the default styling of the HTML thead element. Not supported by IE.
  • table-footer-group - the equivalent of the default styling of the HTML tfoot element. Not supported by IE.
  • table-row - the equivalent of the default styling of the HTML tr element. Not supported by IE.
  • table-column-group - the equivalent of the default styling of the HTML colgroup element. Not supported by IE.
  • table-column - the equivalent of the default styling of the HTML col element. Not supported by IE.
  • table-cell - the equivalent of the default styling of the HTML td or th elements. Not supported by IE.
  • table-caption - the equivalent of the default styling of the HTML caption element. Not supported by IE.
Posted by at No comments:

Monday, November 5, 2007

advance CSS

Advance CSS Presentation Covered the following contents
1. Introduction
2. Box Model
3. The CSS box model is made up of four parts:
4. Box Model Issues
5. Styling List (CSS navigation)
6. CSS button
7. Rounded corner without images
8. Working with divs
9. Float
10. Clear
11. Tableless designs
12. CSS Hacks
13. Some Important hacks
14. !important
15. CSS box model hack
16. @import “non-ie.css” all;
17. Grouping styles
18. Nested Styles
19. Conditional CSS (With Examples)
20. Conditional CSS
21. Validation
22. Overview of XHTML
23. How do I convert to XHTML?”
24. Benefits to XHTML

http://docs.google.com/Presentation?id=dd4zbfn5_65hqrdm&invite=gzr6b99
Posted by at No comments:

Thursday, October 25, 2007

Easy Selector Hacks

Most in-CSS hacks deal with selector bugs. The following is a list of browser version ranges and the beginnings of selectors that are known to select elements in them. Note that because these hacks rely on browser bugs or missing features, results may vary in some lesser-known or future browsers. All of these selectors use valid CSS.

IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}

Note that the hack for IE 7 and below is actually two separate selectors: one for IE 7 and one for IE 6 and below. The rest of the desired selector must be added to both parts of the hack. The two parts cannot be combined with a comma, because IE 6 and below will fail to correctly parse the selector and won't be targetted.

Some of these selectors require that the document has a doctype but no processing instructions (including XML declarations). This is the ideal setup to prevent IE 6 from going into quirks mode anyway.

The above selectors will select either the html or body element. This should be used as the start of your full selector. For example, if your desired selector is #foo .bar and you want it to apply only to IE 7, your resulting selector will be *:first-child+html #foo .bar.

Warning: Due to the nature of the Opera-specific selector and Internet Explorer 7's incorrect handling of :first-child, it is very possible that the html:first-child selector may also select in a future version of Internet Explorer, so be careful when using it. This selector also relies on a bug, so it may be fixed in a future version of Opera. This page also describes an alternative method that is more of an issue to implement but may be somewhat more dependable considering the likely priorities of bug fixing.
Posted by at No comments:
Posted by at No comments:

Conditional comments in CSS

Due to its relatively poor level of standards support, Internet Explorer tends to be the subject of most CSS hacks. Luckily, as of version 5, it deliberately supports a rather safe-to-use hack called “conditional comments”. Conditional comments are specially constructed HTML comments that Internet Explorer on Windows may treat differently from other browsers, optionally based on IE's version number. They can cause Internet Explorer to ignore the markup between comments or to include part of a comment as if it was regular markup. Conditional comments apply specifically to browsers using Internet Explorer's Trident layout engine, meaning IE-based browsers like Maxthon and Avant handle them like Internet Explorer does while browsers using other layout engines see them simply as regular comments. Internet Explorer on the Mac uses a different layout engine and doesn't support conditional comments.

The most beneficial aspect of conditional comments is that you are not relying on browser bugs when using them. When you use CSS hacks that rely on browser bugs, you run into the possibility of those bugs being fixed at an unwanted time or other browsers showing the same bugs. Conditional comments only work in browsers that specifically support them and claim to be based on Internet Explorer, which in this case all known browsers are honest about.

There are two forms of conditional comments: positive and negative. A positive conditional comment will expose the included markup only to web browsers that match the condition (meaning only the selected versions of Internet Explorer). A negative conditional comment will expose the markup only to web browsers that don't match the condition (meaning all non-IE web browsers and any versions of IE that the condition didn't match). Note that, since versions of IE older than IE 5 don't support conditional comments, you may get unexpected results in those browsers.

Syntax

The syntax for conditional comments is as follows:

Positive

Negative
HTML

condition is one of the following:

IE
Any version of IE
lt IE version
Versions less than version
lte IE version
Versions less than or equal to version
IE version
Only version version
gte IE version
Versions greater than or equal to version
gt IE version
Versions greater than version

version is the version of Internet Explorer, typically 5, 5.5, 6, or 7

HTML is the HTML to be included if the condition does or doesn't match, depending on the type of conditional comment. When included, the HTML is placed right where the conditional comment is in the source.

For negative conditions, can be replaced with --> if the condition is simply IE. The longer version is only needed when Internet Explorer might parse the contents.

The directive is not available in XML, so it is illegal to use it in XHTML. A solution would be to split it up into two special conditional comments: XHTML where XHTML is the same both places. Note that Internet Explorer 7 and below don't yet recognize XHTML as a form of XML, so this is merely forward-looking.
Posted by at No comments:

CSS Hacks

Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it's best to know what your options are and weigh the consequences appropriately. The purpose of this article is to describe some of the CSS hacks, also called CSS filters, with the least significant potential consequences.
Posted by at No comments:

CSS Presentation

Material of CSS Presentaion
1. Introduction of CSS.
2. Use of Style Sheets
3. Example of every type of CSS
4. Consistent Appearance & Ease of Maintenance
1. Increase Accessibility
2. Apply Additional Effects (with examples)
3. Replace Non-standard Tags
4. Reduce Web Page File Size
6. Keep it in mind when using CSS
7. Type of CSS (with Example code)
8. Apply Additional Effects
9. CSS Rules
10. CSS selectors (in details)
11. Browser Support
12. CSS and Accessibility

Click here to View the Power Point Presentation on CSS
Posted by at No comments:

Monday, September 17, 2007

Multiple Styles Will Cascade Into One 


Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the  element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.  
  
 Cascading Order
  
 What style will be used when there is more than one style specified for an HTML element?
   
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 
 
  1. Browser default
  2. External style sheet
  3. Internal style sheet (inside the  tag)
  4. Inline style (inside an HTML element)
 
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the  tag, in an external style sheet, or in a browser (a default value).
Posted by at 2 comments:

Style Sheets Can Save a Lot of Work

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!

CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

Posted by at No comments:

What is CSS?

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles are normally stored in Style Sheets
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save you a lot of work
  • External Style Sheets are stored in CSS files
  • Multiple style definitions will cascade into one
Posted by at No comments:

Sunday, August 19, 2007

Hi all

i am starting this blog to share my CSS knowledge to all of you. I hope it will create a give and take relationship of CSS knowledge
Posted by at No comments:
Subscribe to: Posts (Atom)