Thursday, 17 October 2013

What is the difference between the embed and object tags for embedding content in HTML5?

When you are trying to embed some content, for example a Flash file into your site, you can use the <object> tag or the <embed> tag.

Both are supported in HTML 5, so let's take a look at them in turn:

The <embed> tag

To embed a file into your page, the syntax is simply:


To pass a parameter into the plugin used to display the content, you can simply add it as an attribute:


The <object> tag

The object tag is newer than the embed tag and so has a few more features.

The basic syntax for embedding a Flash file is:


To pass parameters to the plugin, you don't use an attribute, you specify a <param> tag within the object tag itself, like this:


The object tag will also allow you to embed another webpage, but this is discouraged as the <iframe> tag is designed for that purpose.

One of the benefits of using the object tag is that if the browser doesn't support the content that you are embedding, you can add fall-back content within the object tag, which the browser will use instead:


Which one should you use?

The object tag has a number of advantages, the most important being the ability to add fallback content. From what I can see, the only reason you would use embed is to support older browsers, (IE6 and earlier).

Monday, 19 August 2013

Restricting the behaviour of an IFrame with the Sandbox Attribute: New in HTML5

One of the many new features of HTML5 is the sandbox attribute that you can add to an IFrame. This protects your users from potential malware and the annoyance of popups that do not originate from your own site.
Just by adding an empty sandbox attribute as shown above, you gain the following protection:

  • Code is treated as being from a unique and potentially dangerous origin
  • JavaScript is disabled
  • Forms will not post back
  • Plugins such as Flash will not be run
  • Links to other browsing contexts are disabled
  • The content is not able to traverse the DOM or read cookies

If that is too restrictive for you, you can add values to the attribute, space separated:

allow-forms

Allows forms to post back

allow-same-origin

Allows the content to be treated as same-origin, which means it will be able to traverse the parent DOM. You'll need script to do so though, which brings me to:

allow-scripts

JavaScript may run, but it still cannot create popups.

allow-top-navigation

Allows access to the parent browsing context. This is probably the most dangerous kind of access because it means that the IFrame may modify content on the hosting site.

allow-popups

The IFrame may create new windows or popups.


Here's an example:

In this case, the content may run JavaScript and allow form postbacks, but we are still protected against a number of other potential issues.

This is definitely good to know if you are using an IFrame to embed content from someone else's site, you should try give them the minimum permissions possible to allow their content to function.

Saturday, 17 August 2013

CSS Tip: Remembering Top, Right, Bottom, Left Order on Margin and Padding

One thing that you'll find yourself needing to remember when writing CSS is which order to write the values for margin and padding if you want to set different values for all four sides.

CSS top right bottom left margin
Do you know it off by heart yet? When I started web development, I used to remember it as spelling "trouble", but without the vowels, T-R-B-L:
CSS top right bottom left margin
This works pretty well, but then someone pointed out an even better way, the order is clockwise, from the top! For some reason I find this so much easier to remember, so I hope it helps someone out:


Popular Posts