CSS-TricksCSS-Tricks http://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Tue, 21 May 2013 14:04:53 +0000 hourly 1 http://wordpress.org/?v=3.5.1 Meta Tag to Prevent Search Engine Bots http://css-tricks.com/snippets/html/meta-tag-to-prevent-search-engine-bots/ http://css-tricks.com/snippets/html/meta-tag-to-prevent-search-engine-bots/#comments Thu, 02 Aug 2012 02:17:17 +0000 Chris Coyier http://css-tricks.com/?page_id=17645 To prevent all search bots from indexing a page:

<meta name="robots" content="noindex">

To prevent just Google:

<meta name="googlebot" content="noindex">

If you have control over it, you probably want to add nofollow to links that point to that page as well:

<a href="privatepage.html" rel="nofollow">Link to private page</a>

Theoretically that's not needed for Google, which claims to drop all pages with noindex from their directory. But there are more search engines out there and it doesn't hurt.…

]]> To prevent all search bots from indexing a page:

<meta name="robots" content="noindex">

To prevent just Google:

<meta name="googlebot" content="noindex">

If you have control over it, you probably want to add nofollow to links that point to that page as well:

<a href="privatepage.html" rel="nofollow">Link to private page</a>

Theoretically that's not needed for Google, which claims to drop all pages with noindex from their directory. But there are more search engines out there and it doesn't hurt.

]]> http://css-tricks.com/snippets/html/meta-tag-to-prevent-search-engine-bots/feed/ 4 Video For Everybody (HTML5 Video with Flash Fallback) http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/ http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/#comments Mon, 16 Jul 2012 00:04:05 +0000 Chris Coyier http://css-tricks.com/?page_id=17533 <!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise --> <!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 --> <video width="640" height="360" controls> <!-- MP4 must be first for iPad! --> <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video --> <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 --> <!-- fallback to Flash: --> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <!-- Firefox uses the …]]> <!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise --> <!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 --> <video width="640" height="360" controls> <!-- MP4 must be first for iPad! --> <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video --> <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 --> <!-- fallback to Flash: --> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> <!-- fallback image. note the title field below, put the title of the video there --> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want --> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a> </p>

A complete explanation at Kroc Camen's site, the originator of this technique.

]]> http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/feed/ 9 Base64 Encode of 1x1px Transparent GIF http://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/ http://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/#comments Mon, 12 Dec 2011 20:02:58 +0000 Chris Coyier http://css-tricks.com/?page_id=15547 Just in case you need one. You can stretch it out to fill space as needed.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Or a black one:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">…]]> Just in case you need one. You can stretch it out to fill space as needed.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Or a black one:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">
]]> http://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/feed/ 27 Post Data to an iframe http://css-tricks.com/snippets/html/post-data-to-an-iframe/ http://css-tricks.com/snippets/html/post-data-to-an-iframe/#comments Fri, 02 Dec 2011 03:59:39 +0000 Chris Coyier http://css-tricks.com/?page_id=15365 Doesn't take any JavaScript or anything. You just have the form's target attribute match the iframe's name attribute.

<form action="iframe.php" target="my-iframe" method="post"> <label for="text">Some text:</label> <input type="text" name="text" id="text"> <input type="submit" value="post"> </form> <iframe name="my-iframe" src="iframe.php"></iframe>

The outer page doesn't even reload. But it might appear to at first glance since many browsers run the page-loading spinner in the tab when an iframe reloads.…

]]> Doesn't take any JavaScript or anything. You just have the form's target attribute match the iframe's name attribute.

<form action="iframe.php" target="my-iframe" method="post">
			
  <label for="text">Some text:</label>
  <input type="text" name="text" id="text">
			
  <input type="submit" value="post">
			
</form>
		
<iframe name="my-iframe" src="iframe.php"></iframe>

The outer page doesn't even reload. But it might appear to at first glance since many browsers run the page-loading spinner in the tab when an iframe reloads.

]]> http://css-tricks.com/snippets/html/post-data-to-an-iframe/feed/ 34 Button With Line Breaks http://css-tricks.com/snippets/html/button-with-line-breaks/ http://css-tricks.com/snippets/html/button-with-line-breaks/#comments Tue, 27 Sep 2011 16:16:08 +0000 Chris Coyier http://css-tricks.com/?page_id=14438 You can use carriage return characters to break the line: &#x00A;

<input type="button" value="Really&#x00A;Tall&#x00A; Button">

…

]]> You can use carriage return characters to break the line: &#x00A;

<input type="button" value="Really&#x00A;Tall&#x00A; Button">

]]> http://css-tricks.com/snippets/html/button-with-line-breaks/feed/ 12