set certain styles if content is loaded in iframe

I’ve seen this attempted with media queries if the iframe dimensions are exactly known, but if you’re dealing with other queries for mobile devices and/or shooting for a more fluid, responsive layout, this can get tricky.

I’ve also seen some some baroque style sheet switchers that inject stylesheet links if a parent frame is detected.

u y no use cascade

What you should simply do is detect the parent frame, give the <html> tag a class (or <body>, and have your special styles in your regular stylesheet. (P.S. You have too many stylesheets, my friend)

// set <html> to class "framed" so we can style it appropriately
if (top !== self) {
  document.documentElement.className="framed";
}

So maybe then

/* in an iframe */
	
	.framed body {
		background-color: #fff;
		padding: 0;
	}
	
	.framed #pagewrap {
	max-width: 100%;
	padding: 0;
	border: 0;
	}
	
	.framed footer img {display: none}

What say you?