Mysticpixels

Living life…the cool way !

Archive for the ‘UI’ Category

Browser Specific Hacks

leave a comment »

/***** Selector Hacks ******/

/* IE 6 and below */
* html #uno  { color: red }

/* IE 7 and below */
*:first-child+html #dos { color: red } 

/* IE 7 and modern browsers */
html>body #tres { color: red }

/* Modern browsers (not IE 7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below */
html:first-child #cinco { color: red }

/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }

/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background: #FFDECE; border: 2px solid #ff0000  }
}

/***** Attribute Hacks ******/

/* ie6 and below */
#once { _color:blue }

/* ie7 and below */
#doce { *color: blue } /* or #color:blue */

/* 'Modern Browsers' includes IE8, whether you agree or not.. 🙂 */
Advertisements

Written by Ranjith

April 26, 2009 at 5:05 am

Posted in UI

Equal height columns using CSS

with one comment

Dealing with table-less layouts can prove to be tedious, when it comes to equal height multi-column layouts. There are a lot of ways in which you can create equal height columns and they all work pretty well. But when it comes to semantic coding and standard approach, a solution that is purely CSS based is most preferred.

Here is a CSS based solution for creating equal height columns.

The idea here is extending the smaller column with an arbitrary value (higher than the longest column), and applying overflow:hidden to the parent container, so as to hide the overflown content of the column that we had extended. Moving more closer to the concept, let me explain the approach. Refer to the screenshot given below while reading the rest of this post.

Here i have used a two column layout as example. In this layout, the body part of the page, is having lot of content than the navigation column to the left. Assuming that relevant clearing methods are used to develop this layout, normally, the navigation column to the left will be having much shorter length than the content container (unless you give a specified height for each page to match the heights, which is not preferrable). What we would do is, to give the navigation container an arbitrary padding-bottom value and confusing the browser by giving a negative margin-bottom, of the same value, so that the browser assumes that the height of the container is only same as the content in the container, but still the height increases taking into account the padding and margin specified. Now having given the desired height to the navigation container, we now need to hide the xtra height of the container. For this, we give overflow:hidden, to the parent container that holds both of the containers (content container and the navigation container)

Sample Code:

CSS for the parent container: outerWrapper{overflow:hidden; border:solid 1px 000;}
CSS for navigation container: navWrapper{background-color:#BDF0FF;margin:0 0 -500px 0;padding:10 10 500px 10;}
CSS for contentcontainer:contentWrapper{background-color:#FFFFEC;padding:10px;}

Hope this is useful

Written by Ranjith

October 20, 2008 at 8:26 pm

Posted in UI

The browser war has a new joinee – GOOGLE CHROME !

with one comment

Suddenly there has been an announcement and a sudden launch of a new browser to the world of hacks and compatibility, making life more challenging for the web developers around the world. Will it be a new ground of web experience for the netizens around ? Well…we need to wait and watch…

Im taking about the launch of the new browser ‘CHROME’ by google,  yesterday. The service went live at 12 Noon PT yesterday and is available for Windows Vista and XP – for now. Mac and Linux versions are coming soon. It will launch in 122 countries and 43 languages. It is also fully open-source.

I just downloaded the app and this blog comes right from the  cute and clean tab of CHROME. Its a clean and simple interface and google has kept its consistency around the theme that they normally follow – SIMPLE and EASY TO USE. Actually this sudden launch of this new member of the google family was reportedly because of a leakage of information about the browser project that was under progress in google for the last 2 years and the corporate has told that it is a ‘huge investment’ for the company.

 

There are many pros and cons about chrome, but one thing is clear. It has a long way to go,for being at par with the other players in the arena.  Here are some updates

  • Tabbed browsing, as it has become a norm by now 😉
  • Addressbar cum Search bar (In chrome it is the ‘omnibar’ that functions as both an address bar and a search bar)
  • Newly created tab showing recently visited site links and screeshots increasing the usability
  • Total security from intrusions through web, as chrome has an additional security layer that makes it inaccessible for those bad guys around to access your system registry via web

One major disadvantage would be the absence of effective extensions which firefox has in abundance. But never to underestimate, im expecting wonders from the search engine sultan !

Courtesy : ZDNET Blog

Written by Ranjith

September 3, 2008 at 12:21 am

Posted in Techie, UI

Matching HTMLs ‘Pixel Perfect’ly with visual design

leave a comment »

At times i have wondered, if there is a better way to match the visual comps from graphic designers to the HTML / XHTML pages that the web-developers code. Navigating using ‘Ctrl+Tab’ and using ‘Calipers’ are indeed working out, but there should be some other better ways to do that…and that is what exactly the page, that i happened to visit after googling for a while, had to tell me

PIXEL PERFECT

This firefox extension that allows web developers to easily overlay a web composition over top of the developed HTML/XHTML. By toggling the composition on and off, the developer can visually see how many pixels they are off in development. Pixel Perfect also has an opacity option, so that you can view the HTML below the composition. Being able to see both the composition and the HTML, you can now simultaneously use Firebug while Pixel Perfect is still in action.

http://www.pixelperfectplugin.com/about/

Written by Ranjith

August 26, 2008 at 9:46 pm

Posted in Techie, UI

My Technorati profile

leave a comment »

Written by Ranjith

July 29, 2008 at 2:13 pm

Posted in UI

Creating CSS menus on the Fly !

leave a comment »

This is insane ! This is a boon too 🙂

The first feeling that came to mind when this article opened in my 17 ” monitor, was ‘ASTONISHMENT’. How easy have they made creating CSS menus ! This really is a great tool to work with, saving lots and lots of coding time for projects. It makes cssing look a child’s play with the sort of approach they’ve followed. A wizard based approach to create css menus….great job

Have a luk CSS ers 🙂 : http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

Written by Ranjith

July 24, 2008 at 10:32 am

Posted in UI

Access Keys – Accessible Navigation

with 2 comments

Making a web experience memorable and more accessible to all the users out there is really a daunting task. There are huge amount of techniques and approaches, that can be applied to a web presence to make it more accessible. Here is one among them – ‘ACCESS KEYS’
‘Access keys’ offer a convenient mechanism for people with motor skill disabilities , such as Cerebral palsy, Parkinson’s disease, Alzheimer’s disease, etc., to access links or interface elements without having to cycle through all of the other links and interface elements in the content. With this technique, we assign shortcut keys that enable various functionalities of an application/page (only certain tags support accesskey), and hence avoids the need to move the cursor to the button or link and hence saves a lot of time and improves the workflow and user experience.

REFERENCE

http://www.w3.org/TR/REC-html40/interact/forms.html#adef-accesskey

SYNTAX

Access keys can be implemented, by including the keyword <accesskey = character > within the tag, where the character will be a single character from the document set.

Eg.

<FORM action=”…” method=”post”>
<P>
<LABEL for=”fuser” accesskey=”U”> User Name </LABEL>
<INPUT type=”text” name=”user” id=”fuser”>
</P>
</FORM>

This would implement the accesskey for the label, and enables the user to navigate to the corresponding textbox, by pressing ‘browser-specific key’ + ‘U’. This means there are some browser keys/Key combinations, that needs to be pressed before the character mentioned in the accesskey tag, inorder to activate the element.

Here are some keys for accesskey activation in various common browsers

IE – ‘Alt’ + ‘character’
FF – ‘Shift+ Alt’ + ‘character’

HOW IT WORKS ?

Pressing an access key assigned to an element gives focus to the element. The action that occurs when an element receives focus depends on the element. For example, when a user activates a link defined by the A element, the user agent generally follows the link. When a user activates a radio button, the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc.

BROWSER SUPPORT

Again there are some differences in the way ‘accesskey’ works in various browsers.

  • In IE, using the access key typically only gives focus to the element. If the element is a link, it is not followed. The user can thus move to a link (e.g., in order to proceed by tabbing then), as separately from following it, which can be activating by hitting the Enter key when the focus is on the link. The implementation of accesskeys on IE is not very consistent. For example, using an accesskey for a checkbox does not just focus on it but also toggles its setting.
  • FF follows the link, when accesskey is specified in an anchor tag.
  • Opera doesn’t support access keys
  • Netscape follows a link when an access key is used
  • On Netscape 6, the support is similar. Using an access key to select a link causes the link to be followed. And it seems that access keys are not supported for form buttons
  • In IE on the Mac platform, access key is performed with the control key, in combination with the key specified in the accesskey attribute. For links, the implementation follows the link rather than just setting focus on it.

MORE RESOURCES

http://juicystudio.com/article/firefox2-accesskeys.php
http://www.cs.tut.fi/~jkorpela/forms/accesskey.html

Written by Ranjith

July 15, 2008 at 10:41 am

Posted in UI