CSS reset?

[MindGamer]

Not specifically a GSAP question... but relevant to all GSAP ads:  I'm trying to figure out if it's customary to include CSS reset within HTM5 ad code.

 

Obviously, it's important to control for style inheritance -- but is that something that's typically done at the creative level?

 

Or is that something that's typically handled by an ad server?

 

On a more macro level: Anyone know of a basic style guide for delivering HTML5 ad creative? (Facebook, Google, etc).

 

 

Thanks

[Oliver16Years]

As I know CSS reset is needed only when You want to use buttons, selects and other GUI elements in Your ad. But since I am using only .png, .jpg, .svg and div assets I never bother with reset the browser predefined stuff.

[Dipscom]

I have seen banners from other people that contain style resets out in the wild.

 

Personally, I think it is unnecessary given that the majority of time in a banner you're working with DIV and image tags absolutely positioned.

 

If you are fortunate enough to be allowed to use web-fonts and/or your creatives have other elements, just like Oliver has said, then it is a good idea but, there isn't any reason to reset everything. Just reset/normalise the elements you'll be using. 

 

And, no, as far as I am aware, the Ad server does no stylesheet reseting/normalising.

 

As for your macro level question. I don't quite understand what is it that you're asking.

[Jonathan]

If you are just using an <img> tag and a <div> like Dipscom advised. Then i would also make sure that your <img> tag has either the attribute border="0" on your <img> tag. Or apply the CSS equivalent inline or in a stylesheet.. img { border: 0 none transparent; }

 

This will prevent the ugly default browser defined style for a border around the <img> tag.

 

[WarenGonzaga]

A really good answer! 

[emmanuelulloa]

This is my basic css reset for all banners:

<style type="text/css" media="screen">
*, *:before, *:after, html, body {
	border: 0;
	margin: 0;
	padding: 0;
	box-sizing: content-box;
}
a {
	text-decoration: none;
	color: #000;
	border: none;
}
div {
	position: absolute;
	display: block;
}
.banner {
	display: block;
	position: absolute;
	overflow: hidden;
	width: 298px;
	height: 248px;
	background-color: #FFF;
	border: 1px solid #666;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	perspective:1000;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
}
</style>

[Jonathan]

Hello emmanuelulloa..

 

You might want to have transform-style: preserve-3d to be transform-style: flat in your reset CSS rules.

 

This way you don't have to deal with certain browser bugs and expected browser behavior for having that preserve-3d on an element by default.

 

The best way to only apply transform-style: preserve-3d when you need it within your tween. This way GSAP can set it to transform-style: flat when it is not needed.

 

It should only be used if your element is in a constant 3D state. But it's better to just apply it via JS GSAP when needed!