Interesting -webkit CSS Properties


A few weeks back I touched on a handful of Mozilla-specific CSS properties that I found to be interesting. This week I'd like to share a few WebKit-specific CSS properties that make me all tingly inside.

-webkit-touch-callout
The -webkit-touch-callout property allows you to dictate what does or doesn't happen when a user taps and holds on a link on iOS. The default value is default and tap-holding on a link brings up the link bubble dialog; by using the value of none, that bubble never comes up.

copya.js-only {
  -webkit-touch-callout: none;
}
This would be very useful on apps that use A elements which aren't traditional links, but simply trigger AJAX / JavaScript functions.

-webkit-user-drag
The -webkit-user-drag property specifies that an entire element should be draggable instead of its contents:

copy/* no dragging at all */
.content p.noDrag {
  -webkit-user-drag: none;
}

/* drags entire element, not the text/selection */
.sidebar div.elDrag {
  -webkit-user-drag: element;
}
-webkit-appearance
Using the -webkit-appearance property, you can make a SPAN tag look like a radio button, or textarea, or SELECT dropdown, or any of the other 50 supported properties.

copyspan.lookLikeRadio {
  -webkit-appearance: radio;
}

span.lookLikeTextarea {
  -webkit-appearance: textarea;
}

span.lookLikeScrollbar {
  -webkit-appearance: scrollbartrack-horizontal;
}
Wanna see this one in action? Check out my post: WebKit-Specific Style: -webkit-appearance.

-webkit-text-security
Who knew you could customize the character which hides password characters?

copyinput[type="password"] {
  -webkit-text-security: square;
}
Not necessarily useful but interesting that WebKit gives us this ability.

-webkit-user-select
The -webkit-user-select property allows us to prevent users from selecting text within a given element:

copydiv {
  -webkit-user-select: none;
}
Preventing selection within a node can be helpful when on nodes which you prefer only be clicked.

I disliked browser-specific functionality when I was younger because I had the wrong mentality; you use them as enhancers, not for core functionality. Have a favorite WebKit-specific CSS property? Share it!

css, html, javascript

Now that you've optimized your website structure for print and you've isolated the content worth part of your page, you can move forward with optimizing your page content for print. Remember that we included our "main" style sheet with the media "all," meaning that those properties will carry over into print. Essentially, we are readjusting our settings for print. Readability is our central goal.

Adjust Your Heading Tag Properties
If you've optimized your website for search engine optimization you're probably using your "h" tags to the fullest. Realize that you wont have color options when your site is in printed mode -- few people print in color. I recommend limiting your heading to <h1> through <h3>. After three headings, the printed result will lose some organization. Padding, margin, border, and font-size will be important. Make sure your <h1> tag is large enough to make it known that it is the subject of the printed piece. For the <h2> tag, I recommend using a bottom-border property to establish the tag as the second heading. The <h3> will be the same size or slightly larger than the paragraph text. All tags will be in bold. To make things easier, I recommend using margin and setting the padding to 0; the two properties control the same function for printing and it will be easier to just use one. I recommend very little margin below the heading with exception to the <h1> tag. I use the following:

copyh1,h2,h3  { font-weight:bold; }
h1    { font-size:24px; }
h2    { font-size:16px; border-bottom:1px solid #ccc; padding:0 0 2px 0; margin:0 0 5px 0; }
h3    { font-size:13px; margin:0 0 2px 0; }

Adjust Your Paragraph Tag Properties
Most people don't do anything too drastic with their paragraph tags but there are some properties you can optimize. The line-height, padding, and margin will be the most important properties to address. I also recommend setting the bottom margin of the paragraph to a value more than the line-height. Lastly, adjust the font-size to a reasonable ratio to your headers and use a standard font-family if you aren't already. I use the following:

copyp    { font-size:11px; font-family:times new roman, serif; margin:0 0 18px 0; }

Format Your Links
Print doesn't allow for fancy formatting of links like we've come to enjoy on the screen, so we can keep these simple by simply adding the necessary text-decoration declaration:

copya    { text-decoration:underline; }


Advanced Link Formatting
I call this advanced for a couple of reasons. First, you're relying on CSS not currently supported by all browsers -- Internet Explorer 6 is your adversary here. The following will be completely ignored by IE6 and lower. Second, some programmers don't like the idea of CSS-generated content. Purists, please skip this section.

Showing the user a link may not be good enough. What if you'd like them to know the URL of the link? Simply add the following to your print stylesheet:

copya:link:after, a:visited:after { content: " (" attr(href) ") "; font-size: 90%; }

Adjust Any Custom Classes
Look through your custom CSS classes to make sure none of your other settings will cause your page to look unorganized.

Your web site is now ready to go to print! Be sure to abuse the "Print Preview" option of each browser to ensure maximum readability.

The HTML

The tooltip structure consists of five elements:

<div class="uiContextualDialogPositioner uiContextualDialogLeft" style="top: 20px; left: 600px;">
  <div class="uiOverlay uiContextualDialog uiOverlayArrowRight" style="width: 347px; top: 0px; ">
    <div class="uiOverlayContent">
      <div class="uiOverlayContentHolder">
        {content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}
      </div>
    </div>
    <div class="uiOverlayArrow" style="top: 15px; margin-top: 0px;"></div>
  </div>
</div>

The root element dictates the position of the tooltip (which is most likely injected to the body). The sole child element controls the width of the tooltip. That element contains two elements: the content container and the and the arrow node (which I've changed from an I element to a DIV). The last, innermost DIV element will hold the content and provide padding.

The CSS

The CSS to create the tooltip layout is actually very minimal:

body {
  font-size: 11px;
  font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
  color: #333;
  line-height: 1.28; 
  text-align: left;
  direction: ltr;
}


.uiContextualDialogPositioner, .uiContextualDialogPositioner .uiContextualDialog {
  position: absolute;
  z-index: 200;
}


.uiContextualDialogLeft .uiContextualDialog {
  right: 0;
}


.uiOverlayArrowRight {
  padding-right: 10px;
}


.uiOverlay {
  position: relative;
  z-index: 200;
}


.uiContextualDialog, .uiContextualDialog:focus {
  outline: 0 solid transparent;
}


.uiOverlayContent {
  background: white;
  border: 1px solid #8C8C8C;
  border: 1px solid rgba(0, 0, 0, .45);
  border-bottom: 1px solid #666;
  -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  position: relative;
}


.uiOverlayContentHolder {
  padding: 10px;
}


.uiOverlayArrow {
  position: absolute;
  overflow: hidden;
}


.uiOverlayArrowRight .uiOverlayArrow {
  background-image: url(sprite.png);
  background-repeat: no-repeat;
  background-position: -177px -309px;
  height: 16px;
  right: 2px;
  width: 9px;
}

The content pane contains the majority of the CSS rules, include the box-shadow and border, both of which use rgba color for a more detailed effect. Showing and hiding of the tooltip may be done via CSS key-frames or JavaScript -- the choice would be up to the individual implementing the tooltip.

Why Show This?
Two reasons. The first is that I appreciate well-coded features like this. The second, more important reason, is that I'll be creating a JavaScript-powered version of this functionality which accounts for content size, position on page, stacking/z-index management, etc. Do I create as a jQuery and MooTools plugin? Do I create it as a standalone JavaScript project. Let me know your thoughts!


artikel By : http://davidwalsh.name/facebook-tooltip