Magento Imagine Awards 2019 Finalist

Web Developer Combats CSS Sprites and SVN issues

iWeb CSS developers are now using CSS sprites for adding graphical buttons and headings to websites, including the National STEM Centre elibrary. STEM is also the first project which we have started extensively using SVN branches to allow simultaneous development of new functionality.  Here is what we have learnt about getting the two to play together nicely.

When new functionality requires a new button or heading to be added to a sprite it gets added to the image that is checked out in the CSS developers branch.  They will add the new image to the bottom, to prevent having to alter any CSS for the other images.  The work gets committed and all seems fine and dandy.  Meanwhile another developer, working on a different set of features on a different branch may also need to add some buttons and headings to the images.  They will add them to the bottom of their image and commit to their branch.

When these branches need to be merged together, the images should conflict.  However, as they are binary files, svn cannot compare them or attempt to merge them.  What actaually happens is it will overwrite the oldest one with the newest one.  If the person merging isn’t paying close attention, this can be missed and bits of the image go missing.

By carefully checking files after a merge, you can sport that there are, in fact, two versions of the same image.  There is no way to resolve this other than manually editing the image to add all the required headings from both versions.  Whichever way you do this, it is going to break someones CSS code – more headaches!

To protect my own sanity, I came up with the idea of making the images directory an svn external.  This means it is a separate svn checkout which is pointed to from the main checkout.  As soon as a change to an image is committed, is is available to all the other developers regardless of which branch they are working on.  Hurray, no more having to merge images!

Subscribe via email

Sign up to get notifications of new posts by email.

Share this article

Posted in Development, eCommerce

Other posts you might like

Most open source content management systems (CMS) such as Magento and WordPress have the ability to add additional functionality through the…

What is Responsive Web Design Ethan Marcotte’s excellent “A List Apart” article coined the term “Responsive Web Design” all the…

Conferences allow us to look outwards, to recharge our enthusiasm for the web and to inspire us to continue making…

Call us on 01785 279920

Our friendly Magento experts are happy to answer your questions.

Follow us!

Get the latest eCommerce news, reviews and expert advice in your inbox.

To find out more about how we use your data, read our Privacy Policy