Tag Archives: CSS3

Making Your Pop-up Pop!

Making your pop-up pop!

Want to make a beautiful pop-up to match your map or website? With a little elbow grease, CSS, and a keen eye for design, it’s easy. Here’s how you can skin the ArcGIS API for JavaScript pop-up widget. The pop-up … Continue reading

Posted in ArcGIS Online, Developer, Mapping, Web | Tagged , , , , , , , , , , , , , , | 2 Comments

Hardware accelerated map navigation with CSS3

One of the enhancements to the ArcGIS API for JavaScript at version 2.6 is the use of CSS3 transforms while panning and zooming a map. When enabled, there is a subtle animation and fade when images that make up tiled map layers are added to or removed from the map. You can see this in one of the simple SDK samples. This is similar to how the other ArcGIS web APIs, for Flex and Silverlight, operate.

There are both aesthetic and performance benefits from using the latest and greatest in CSS. Aesthetically, the transition between map levels is more pleasing due to a fade animation. For performance, some webkit and mobile browsers use hardware acceleration when a webpage uses CSS transforms. This is especially beneficial on older versions of iOS.

Like other new HTML5 and CSS3 capabilities, transforms are not yet consistently implemented across browsers. For a complete rundown of browser support, check out caniuse.com’s browser support chart for CSS3 transforms. While that’s a good reference, there are some subtleties to the current implementations. In Chrome on XP, there’s an existing bug that will hopefully be addressed by Chrome 17 in early 2012. For Firefox, version 10 (also due in early 2012) should bring full support for transforms.

Version 2.6 of the ArcGIS API for JavaScript uses CSS3 transforms by default where they’re supported. The API will automatically use CSS3 transforms for the following browsers:

Posted in Services | Tagged , , | Leave a comment