CSS tips & tricks

Web 2.0 Design Guide

dangerouskicker — Sat, 04 Oct 2008 06:21:30 +0000

currenty web 2.0 design is in trande, actually right now its outdate then to its used by designer, still many new designers are having problem with web 2.0 designing style, here with brief about web 2.0 designing points with screenshots.

Web 2.0 Design Points

1. Simplicity

2. Central layout

3. Fewer columns

4. Separate top section

5. Solid areas of screen real-estate

6. Simple nav

7. Bold logos

8. Bigger text

9. Bold text introductions

10. Strong colours

11. Rich surfaces

12. Gradients

13. Reflections

14. Cute icons

15. Star flashes

Web Style Sheets CSS tips & tricks

dangerouskicker — Sat, 04 Oct 2008 06:13:38 +0000

The ‘:target’ pseudo-class

A URL normally points to a page. But when the URL ends in “#something” it targets a specific element in that page. Browsers typically try to make sure that the targeted element is visible and if possible at the top of the screen.

With the ‘:target’ selector, you can add a specific style to the target element, so that it gets more attention.

But you can do more. You can hide or display elements based on whether they are the target or not. Below is an example. It shows a little menu with four items and each item is linked to some text. But at first no text is shown. Each item is a link to an element with a target ID (#item1, #item2…) and those elements are only visible when they are the target of the current URL.

Try to click on the menu items and also look at the location bar of the browser to see the current URL.

This is the element that corresponds to item 1. It should not be visible, unless you followed a link that explicitly targeted “#item1″.

If you jumped to item 2, then this element should be visible.

This element is visible if you clicked on the third menu item. The element has a URL, that you can use elsewhere as well. You can put it in some other Web page and jump directly to this item.

Here is how it works. There are two important parts, the HTML source and the ‘display’ property. First the HTML document. It has some links and elements with corresponding IDs:

item 1 item 2 item 3 clear

... item 1...

... item 2...

...

The style rules first hide all the Ps inside the DIV, but then override that for the P that is the current target:

div.items p {display: none}
div.items p:target {display: block}

That’s all. The example above goes on to add some colors, margins, borders, etc., so that it looks more like a menu. You can look at the source of this page to see how it is done.

Actually, we added ‘:not(:target)’, to assure that only CSS3 browsers will hide the element. So the better rules are these:

div.items p:not(:target) {display: none}
div.items p:target {display: block}

A tabbed interface

Once you understand the above, it is not so hard to play around and create a real “tabbed” interface: a set of style rules that not only shows different content based on which button was pressed, but also changes the appearance of the button itself.

Here is an example. It doesn’t use ‘display: none’, but ‘z-index’. If you want to know how it works, just do a “view source”…

Tab 1

One might well argue, that…

Tab 2

… 30 lines of CSS is rather a lot, and…

Tab 3

… that 2 should have been enough, but…

Default

… it works!

Google Web browser beta version

dangerouskicker — Wed, 03 Sep 2008 06:29:00 +0000

MOUNTAIN VIEW, California (Reuters) – Google Inc is challenging Microsoft Corp with its own Web browser that lets users run many applications that once worked only when installed on local PCs, executives said on Tuesday.

Google introduced a public trial version of its new browser software, Chrome, which is designed to handle not just text and graphics, but more complex computer programs.

Chrome, available in 43 languages in 100 countries at http://www.google.com/chrome, has been designed to download software and Web pages faster than existing browsers. It even allows users to keep working when one of its windows crashes.

This represents Google’s long-anticipated head-on attack on Microsoft and its Internet Explorer, which has three-quarters of the Web-browsing market. Google has backed Mozilla Corp’s Firefox browser, which holds about 18 percent of the market.

Google engineers and executives call Chrome a “fresh take on the browser,” a 15-year-old technology that is supplanting 25-year-old desktop software as the basic way users interact with computers.

“You actually spend more time in your browser than you do in your car,” said Brian Rakowski, group product manager for Google’s browser project.

Chrome was seen by analysts as partly a defensive move due to Google’s fear that the recently upgraded Internet Explorer 8 (IE 8) could be used to lock out Google. Google’s core business of Web search and related advertising depends on browsers.

A Microsoft executive said IE 8 gives users control over how and where they navigate, improves their day-to-day browsing experience, and keeps people safe from new security threats.

“Microsoft understands that Web browsing is crucially important for hundreds of millions of people, which is why we invest in Internet Explorer so heavily,” Dean Hachamovitch, general manager of Internet Explorer, said in a statement.

CHALLENGE TO MICROSOFT WINDOWS?

Google co-founder Sergey Brin said Chrome was designed to address the shift to using software from within a Web browser rather than as locally installed computer applications running inside Microsoft Windows or some other operating system.

“I think operating systems are kind of an old way to think of the world,” Brin told a group of reporters after the news conference at Google’s Mountain View, California headquarters. “They have become kind of bulky, they have to do lots and lots of different (legacy) things.”

Google believes any task done in a standalone desktop computer application can be delivered via the Web and Chrome is its bet that software applications can be run via a browser.

“We (Web users) want a very lightweight, fast engine for running applications,” Brin said.

“The kind of things you want to have running standalone (on a computer) are shrinking,” he said, adding that he still edits photos on his computer rather than using a Web program.

The story behind Google Chrome

OOGLE BORROWS FROM APPLE, FIREFOX

Chrome borrows liberally from other browsers running open-source software code, including Apple Inc and Firefox, and company officials said they planned to fully share Chrome code with other developers.

“We have borrowed good ideas from others,” Google Vice President of Product Management Sindar Pichai said. “Our goal here was to bring our point of view, but do it in a very open way.”

Because Chrome relies on Apple’s open-source WebKit software for rendering Web pages, it can run any application that runs on Apple’s Safari Web browser, Pichai said.

“If you are a webmaster, and your site works in Apple Safari then it will work very well in Google Chrome,” he said.

Greg Sterling, a Web analyst with Sterling Market Intelligence, said Google’s entry into the browser market has echoes of the bruising “browser wars” of the late 1990s, when Microsoft crushed Web pioneer Netscape Communications.

But while the competition between Microsoft and Google is likely to produce many improvements for consumers, the likely fallout from the battle will be other browser makers that have only recently begun to pry market share away from Microsoft.

Sterling said Firefox could become a victim of “friendly fire” from Google as many of its users are the same early adopters who are most likely to switch and try a new browser.

“Firefox has softened up and paved the way for Google. Without Firefox, Chrome would not be possible,” Sterling said.

Brin said Google planned to continue to work closely with Mozilla, whose primary financial backing has come from Google in recent years. He said he hoped to see future versions of Chrome and Firefox become more unified over time.

Chrome organizes information into tabbed pages. Web programs can be launched in their own dedicated windows.

Among Chrome’s features is a special privacy mode that lets users create an “incognito” window where “nothing that occurs in that window is ever logged on your computer,” according to a Google promotional guide.

Fixing the Firefox dotted link when is clicked

dangerouskicker — Tue, 26 Aug 2008 07:12:00 +0000

i was always founding problem in clicking in firefox, its always shows dotted line, even if i placed display:block, then its shows all area of clicking, for that i found one solutions, just place in a: tag outline:none; so on future you will not find dotted line when you click on link in firefox. the code is displayed blow.

.menu a:active { outline: none; }

also you can place it like below example

.menu a:active { outline: none; }

also you can define globally like example below

a { outline:none;}

hoping it will Fixing the Firefox dotted link when is clicked

CSS hack for Firefox only

dangerouskicker — Mon, 23 Jun 2008 11:37:00 +0000

Firefox 2.0 or older

If you need to make pre-Acid2 Firefox behave, you can safely use this:

#hackme, x:-moz-any-link {styles for Firefox 2.0 here}#hackme, x:-moz-any-link, x:default {restore styles for Firefox 3.0 and newer}

This hack will apply rules to #hackme element. You can change the first selector (#hackme) in each rule to anything else, but don’t touch the ones with x.

Example

For 9 versions support for inline-block in Gecko was FUBAR. The closest equivalent wouldn’t respect line-height. The workaround:

#menu a {display:inline-block; line-height:2em;}#menu a, x:-moz-any-link {display:-moz-inline-box; padding-top:0.5em;}#menu a, x:-moz-any-link, x:default {display:inline-block; padding-top:0;}

Firefox 1.0 or older

#hackme, x:-moz-any-link {styles for Firefox 1.0 here}#hackme, x:-moz-any-link, x:only-child {restore normal styles for newer versions}

Same as above — you can change #hackme to whatever you need, but leave other selectors in the same group as they are.

How do these work?

CSS error handling rules require browsers to drop entire rule if any of the selectors is not recognized. :-moz-any-link is a selector private to Gecko, so all non-Gecko browsers see it as parse error. :default has been added in Firefox 3.0 (Gecko 1.9), nly-child has been added in Firefox 1.5, so they’re unknown to earlier versions of Firefox/Gecko.

CSS Hacks (for IE 7, IE 6, Opera, etc)

dangerouskicker — Fri, 06 Jun 2008 12:24:00 +0000

The following CSS selectors are considered workarounds and hacks for specific web browsers.

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 {}

How to Apply Hacks

If you want to add 10px; padding to a div element called #rightpanel specifically for IE 7, then you can use the following hack:

*:first-child+html #rightpanel { padding: 10px; }
want to apply the padding just for IE 6, then its as following way:

* html #rightpanel{ padding: 10px; }

Note that CSS Hacks are not recommended due to their dependence on browser bugs and therefore they should only be used as the last resort. CSS Hacks will not be valid for CSS W3C validation

handling cross-browser min-width/max-width/And Height Issues

dangerouskicker — Sun, 16 Mar 2008 11:21:00 +0000

Internet Explorer and issues on width and height

This text below is good preparation for handling the IE height/width
issues. The wiki now comes into a div in geoT that has controlled width
expansion.

Put the css in the head with conditionals and you’re set. IF it goes in
the CSS linked page it will work but invalidate the CSS. This has been
fixed in IE7 so your conditional can target “less than IE7″

Minimum width for a page

A very handy CSS command that exists is the min-width command, whereby
you can specify a minimum width for any element. This can be
particularly useful for specifying a minimum width for a page.

Unfortunately, IE doesn’t understand this command, so we’ll need to come
up with a new way of making this work in this browser. First, we’ll
insert a

under the tag, as we can’t assign a minimum width
to the :

Next we create our CSS commands, so as to create a minimum width of 600px:

#container
{
min-width: 600px;
width:expression(document.body.clientWidth

The first command is the regular minimum width command; the second is a
short JavaScript command that only IE understands. Do note though, this
command will cause your CSS document to invalidate so you may prefer to
insert it into the head of each HTML document to get round this.

You might also want to combine this minimum width with a maximum width:

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth 1200? “1200px” : “auto”);
}

IE and width & height issues

IE has a rather strange way of doing things. It doesn’t understand the
min-width and min-height commands, but instead interprets width and
height as min-width and min-height – go figure!

This can cause problems, because we may need boxes to be resizable
should more text need to go in them or should the user resize text. If
we only use the width and height commands on a box then non-IE browsers
won’t allow the box to resize. If we only use the min-width and
min-height commands though then we can’t control the width or height in IE!

This can be especially problematic when using background images. If
you’re using a background image that’s 80px wide and 35px high, then
you’ll want to make sure that the default size for a box using this
image is exactly 80 x 35px. However, if users resize the text then the
box size will need to expand gracefully.

To resolve this problem, you can use the following code for a box with
class=”box”:

..box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

All browsers will read through the first CSS rule but IE will ignore the
second rule because it makes use of the child selector command9. Non-IE
browsers will read through the second one and will override the values
from the first rule because this CSS rule is more specific, and CSS
rules that are more specific always override those that are less specific.