Technical Tips: IE Tweaks Sources and Related Posts
Eki 30

Technical Tips: CSS-Techniques

CSS Yorum Yorum Yapın
  • You can specify body tag ID. “In most cases placing an ID in the body tag will allow you manipulate CSS presentational items and markup elements by page by page basis. Not only will you be able to organize your sections you will be able to create multiple CSS presentations without changing your markup from template to template or page to page.” [Ryan Parr, Invasion of Body Switchers]
  • You can create columns with equal heights with CSS. Equal Height Technique: a method to make all columns appear to be the same height. But without the need for faux column style background images. Faux Columns: with background images.
  • You can align vertically with CSS. “Say you have a navigation menu item whose height is assigned 2em. Solution: specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box!” [Evolt.org]
  • You can use pseudo-elements and classes to generate content dynamically. Pseudo-classes and pseudo-elements. Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. You can use :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after and more.
  • You can set <hr> to separate posts beautifully. “Restyling the horizontal rule (<hr>) with an image can be a beautiful addition to a web page. [CSS: Best Practices]
  • You can use the same navigation (X)HTML-code on every page. “Most websites highlight the navigation item of the user’s location in the website. But it can be a pain as you’ll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds?” [Ten More CSS Tricks you may not know]
  1. XHTML:
  2. <ul>
  3. <li><a href="#" class="home">Home</a></li>
  4. <li><a href="#" class="about">About us</a></li>
  5. <li><a href="#" class="contact">Contact us</a></li>
  6. </ul>
  • Insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section.
  1. CSS:
  2. #home .home, #about .about, #contact .contact
  3. {
  4. commands for highlighted navigation go here
  5. }
  • You can use margin: 0 auto; to horizontally centre the layout. “To horizontally centre an element with CSS, you need to specify the element’s width and horizontal margins.” [Roger Johansson]
  1. XHTML:
  2. <div id="wrap">
  3. <!-- Your layout goes here -->
  4. </div>
  1. CSS:
  2. #wrap {
  3. width:760px; /* Change this to the width of your layout */
  4. margin:0 auto;
  5. }
  • You can add CSS-styling to RSS-feeds. “You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd. [Pete Freitag]
  1. <?xml version="1.0" ?>
  2. <?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
  3. ...
  • You can hide CSS from older browsers. “A common way of hiding CSS files from old browsers is to use the @import trick. [Roger Johansson]
  1. @import "main.css";
  • Always declare margin and padding in block-level elements. [10 CSS Tips]
  • Set a width OR margin and padding. “My rule of thumb is, if I set a width, I don’t set margin or padding. Likewise, if I’m setting a margin or padding, I don’t set a width. Dealing with the box model can be such a pain, especially if you’re dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.” [Jonathan Snook]
  • Avoid applying padding/borders and a fixed width to an element. “IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width. [CSS Crib Sheet]
  • Provide print styles. “You can add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:
  1. <link rel="stylesheet" type="text/css" href="print.css" media="print">
  2. or
  3. <style type=”text/css” media=”print”> @import url(print.css); </style>
  • This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability. More about CSS-based print-Layouts. [20 pro tips]

Kaynak: Smashingmagazine



Yorum Yazın

Yorum yapmak için giriş yapmalısınız.