Chapter 3. Rendering HTML and CSS


This chapter covers

  • Outputting HTML to the publisher’s page
  • Methods for loading styles
  • Writing conflict-free HTML and CSS
  • Techniques for presenting content using iframes

In the previous chapter, you learned how to load your third-party JavaScript code on the publisher’s page, load supporting JavaScript files, and pass parameters from the publisher’s page to your script. At this point, there’s still nothing to see; your code is executing on the publisher’s page, but you haven’t added a single visual element to the DOM. It’s time to fix that. In this chapter, we’ll cover the steps involved in actually rendering HTML and CSS on the publisher’s page.

Now, not all third-party scripts will make use of rendering. Analytics trackers, web service API wrappers, and other passive scripts won’t require any rendering at all. In those cases, most of the content in this chapter might not apply. But in the case of the Camera Stork product widget, there won’t be much of an application if users can’t see it.

3.1. Outputting HTML

3.2. Styling your HTML

3.3. Defensive HTML and CSS

3.4. Embedding content in iframes

3.5. Summary