All Posts in css3

April 18, 2014 - Comments Off on Lightweight Drag and Drop for iOS with CSS3 Translate

Lightweight Drag and Drop for iOS with CSS3 Translate

This post explores issues we experienced with a recent project, involving jQuery UI’s draggables and how we solved it using CSS3 translate and javascript touch events.

In the midst of full production, we discovered an issue with iPad handling the combination of jQuery UI “draggables” and high quality images (for using jQuery UI with iPad touch events).

As production had already begun, we needed a shim to would work alongside what was already built, and replace the jQuery UI functionality on iOS devices.

We performed tests, sectioning off the drag and drops from the rest of the project and realized that, even one large background image severely affected the performance of the dragging animation on iOS devices. Scale that up to a production size eLearning platform and we suffered serious memory bleeds, causing Mobile Safari to crash instantly.

We googled far and wide but could find no solution. (HTML5 drag and drop would not fit the bill as it would require rebuilding everything we had done so far.)

And so we resolved to build a jQuery plugin and were pleasantly surprised to discover this undertaking was much simpler than first anticipated. Not only that, but our solution meant that, aside from changing the script which controlled these activities, we did not have to change any of the markup already written for dozens of pages.

Development

This blog post was a great jumping off point, it had done much of the hard work for us, showing us how to tie a touch event to a moving element. Despite being a great resource, the script animates with the “top” and “left” properties. While these work on all platforms, they use a lot of CPU power, too much for the poor iPad. And so we updated the code to use CSS3 translate. This change was light and day. iOS webkit hardware accelerates CSS translates through the GPU and the performance improvement was significant.

Next we needed to add functionality to drop a “draggable” inside a “droppable”. This was done in two steps. First we added an initialization for “droppable” elements which would calculate the coordinates of the “droppable” and store these values in the data attribute of that element. Next we added an event handler for dropping an element, which finds if the last touch event occurred inside the bounds of a “droppable”. If this is the case, then we translate the “draggable” to sit on top of the “droppable”.

Along the way we added certain functionality specific to our project such as populating an object named “dragInput”, which contains the placement of any dragged items and can then be compared against another object which holds the correct matches for a quiz style drag and drop activity.

Conclusion

Since integrating this into our project, I have tried to extend the plugin by adding mouse event listeners. There are limitations, such as dropping an element when the mouse escapes the bounds, despite the ‘mousedown’ event still being active. I have seen this behavior elsewhere. jQuery UI must use event listeners on the window to make up for this deficiency. Although I bemoan jQuery UI’s use of pre-CSS3 techniques, having tried to replicate the functionality with mouse events, I appreciate the depth of their project. The touch events were comparatively robust and behaved as expected.

CSS transforms are very powerful and although confusing at first glance, they give web developers exciting possibilities for creating native like experiences within browsers. By using transforms, our drag activities went from crashing the iPad to outperforming jQuery UI draggables on a desktop.

I hope this post proves helpful and I will continue to develop the plugin, as time and persistence permit.

Check out the github here.

Published by: georgebrassey in The Programming Mechanism
Tags: ,

November 20, 2009 - Comments Off on Live blogging Standards.Next: CSS3 for Working Web Designers

Live blogging Standards.Next: CSS3 for Working Web Designers

Håkon Wium Lie

Photos and discussion of CERN and Tim Berners-Lee. How the web was actually developed by Tim at CERN. Pretty hilarious.

CSS a response to potential destruction of HTML's markup language with presentation elements. Currently CSS still relies too heavily on images and the occasional table hack.

HTML5 + CSS3 = WEB8. CSS3 is not a single specification, a series of specifications.

CSS1 could style text in an element. Some borders. A revolution when it came out.

For this presentation, Håkon is using a special build of Opera that isn't publicly available.

text-shadow. Web font: Safari, Firefox and Opera.

Håkon believe web fonts is going to be the big new thing. Will create a pre- and post-font Web.

@import url(path/to/font);
font-family:Cardiff;

IE is the only one that does not not support this. Argument now breaks out between Håkon and Pete LePage

IE has supported a broad range of fonts since IE 4, but .EOT. However, the above @import is all TTF. IE uses .EOT because font foundries want support for DRM. Check out Fontdeck and Typekit.

At Standards.Next, IE pledged support to add support to TTF along with EOT.

rgba()

background: rgba(0, 0, 255, 0.4); See Molly's presentation.

A review of Opera's support for the CSS 3 features discussed by Andy Budd.

Opera Unite

Turns browser into a server. Allows people to access your machine via http://. Can be quite useful.

It's not the cloud. This service is close to machine and useful for local collaboration. Millions of phones use Opera. Peer-to-peer model. Can take picture and easily

Question/Answer

Q: When will the geolocation build be integrated with the shipping version?

A: Not sure; no date yet. Will probably not occur until the standard is more fixed.

Published by: jeffreybarke in The Programming Mechanism
Tags: , , ,

November 20, 2009 - Comments Off on Live blogging Standards.Next: RGB, HSL and Transparency in CSS3

Live blogging Standards.Next: RGB, HSL and Transparency in CSS3

Molly Holzschlag

RGB: Additive synthesis

Red, Green, Blue: Add colors to get result color. In print world, subtractive. Remove color to get result. R + G + B = white

RGB color notation

RGB in percentage values or RGB in integer values. Not equivalent; so don't use both (mix in a single rule)!

NOT rgb (60, 100, 50%);

Firefox and Opera will ignore the incorrect rule. Safari and IE (5–now) will attempt to correct and end up with a severely washed-out result.

HSL color

Hue, saturation and lightness. Easier and more intuitive way to get to colors we want as designers. Value from 1–360, then adjust saturation and lightness.

  • Hue value comes first, using the hue's angle on the color wheel as represented by an integer.
  • Saturation comes next, using the percentage of saturation you'd like
  • Lightness is next, using the percentage of lightness you' like

HSL advantages

  • Not CRT specific
  • Easier, more intuitive to work with
  • Working with a set of colors allows for easy palette creation
  • Reduces errors
  • Reduces dependency on charts and other value lookup tools

As adjust saturation, lightness, base-hue remains the same.

RGBA and HSLA

Alpha transparency for both RGB and HSLA.

Notation is the same in both. a value is alpha transparency from 0–1.

Allows for fully opaque to fully transparent.

hsla(0, 100%, 50%, .25)

Supported by Firefox, Webkit and Opera.

Questions/Answers

A: Best article out there on HSLA is Wikipedia. Useful to have the color wheel.

Q: Why is a value decimal instead of percentage?

A: Not sure. No one remembers a discussion about it.

Q: Is this part of the spec?

A: Yes. It is all part of the CSS3 color module.

Published by: jeffreybarke in The Programming Mechanism
Tags: , ,

November 20, 2009 - Comments Off on Live blogging Standards.Next: CSS3 Mastery

Live blogging Standards.Next: CSS3 Mastery

Andy Budd

Border radius

-webkit-border-radius: 30px;

Safari, Chrome, Webkit suppot it. Gecko does as well, but the syntax a bit different. IE 9 to support border-radius as well.

  • Currently not supported in Internet Explorer
  • Problems with images overlapping corners

Border image

border-image: url(border.png 25% 12% 30% 20%;
-webkit-border-image
-moz-border-image

An ad-hoc discussion of why vendor-specific extensions exist:

  • Useful for testing out features, instead of a general release and then breaking general release codes.
  • To become a proper standard, must exist with two different implementations.

Multiple background images

Example Silverback app

background-image: url(path), url(path);
background-position: 150% 0, 40% 0;

Older browsers get no background a'tall.

Borders and backgrounds are coming soon (general release).

Gradients and reflections

Buttons are generally bitmap images. Can now create a beautiful button using gradient and reflection purely in CSS.

-webkit-gradient(linear, left top, left bottom, from(#abe143), to(#cccccc));
-webkit-box-reflect: below 2px;

[Will need to do some demos of these things]

box-shadow

Box shadow property attaches one or more shadows to box. Offset, size, blur and spread. Can also do inset box shadows. Exactly the same as working with box shadows in Photoshop.

Example: http://2010.uxlondon.com/

Transforms

Can scale, rotate, flip, skew, etc. Can use translate to create animations/move over time

Demos: http://remysharp.com/demo/rubiks/
http://webkit.org/blog-files/leaves/

Questions

Q: Box-shadow has recently been removed from the spec, even though it has been implemented. Should we use it or not?

A: When younger, Andy Budd would have said, "If it's not in the spec, don't use it." Now, he's more tolerant. Not as impressed with the W3C as he once was. Doesn't always give designers what they need.

Molly: It has been difficult to get designers involved with the creation of the spec. As a volunteer, tech spec heavy group, difficult to keep designers active.

Q: Regarding animations, between JavaScript, Canvas, SVG and CSS, what do you think the best technology to bet on is?

A: Easiest is best, why Andy favors CSS.

Q: For individuals, CSS might be easy, but not so for large organizations where designers/developers have a large codebase to absorb. And what about object-oriented CSS? And mixins, variables, etc? (Nicole Sullivan's work)

A: Andy is opposed, because CSS is used more often by designers than programmers. Thinks it's an interesting concept, but not necessarily the answer.

Having gone from table-based design to CSS-based layouts, works well with 5-6 page templates, but with very large sites, doesn't necessarily scale. This is where an object-oriented CSS approach comes in use.

Andy thinks the framework is not useful. There is no one size fits all framework. He develops site-specific frameworks. A lot of libraries and components that are re-usuable, but specific to site.. Hates Blueprint, 960.

Q: Tips/techniques on testing?

A: Creates a central page that uses all components. Creates a type of regression testing. If change anything, can scan that page to see if anything is broken. Testing does not occur at the end of the process; testing should be occurring throughout the process. This includes cross-browser. Use VMware.

Published by: jeffreybarke in The Programming Mechanism
Tags: , ,