I'm running into an issue with Drupal's CSS compression method and an attribute selector I've created for images. This is a sample of my CSSselector:

	img[align="right"],
	img[style*="float: right"],
	img[style*="float:right"]{
		padding-left:5px;
	}

All this is doing is simply adding some left padding onto images aligned to the right side of the screen. As you can see, I have two selectors for floated images, one with a space after the colon and one without. This space is essential for the selector to match. For example, if I have an image on a page like the example below only my selector with a space will match it:

<img src="/my-image.jpg" style="width: 200px; height: 150px; float: right;" />

However, after I run my CSS file through the CSS compression in Drupal, this is what my style ends up looking like:

img[align="right"],img[style*="float:right"],img[style*="float:right"]{padding-left:5px}

As you can see the compressor has removed the space from my selector. I would think that because the space was inside quote marks it would have been preserved but that is not the case. Any chance this could be easily fixed?

Comments

neRok’s picture

neRok commented
Category: bug » support
Status: Active » Fixed

I would suggest you find a better way to apply your css. If the image is coming from field_image, then you could do something like div.field_image img { float: right; padding-left: 5px;)

If you are dead set keen to keep it your way, take a look at the comments of drupal_add_css (important bit below).

* If CSS aggregation/compression is enabled, all cascading style sheets added
* with $options['preprocess'] set to TRUE will be merged into one aggregate
* file and compressed by removing all extraneous white space.

So you could set the preprocess to false for your particular css file.

Or take a look at drupal_load_stylesheet_content, as that is the function that does the actual whitespace removal. Perhaps you can tweak your code slightly to 'avoid' the regex patterns.

I believe there are also other modules that do css aggregation slightly different. Perhaps one of these will work better?

johns996’s picture

johns996 commented

Thanks for the info neRok. I'll look into the function you mentioned and see if I can figure out a tweak.

I still question weather a space within quote marks should be considered "extraneous white space". In most CSS aggregations that I've seen anything in quotes is generally preserved as-is. For that reason I still consider this a bug and I believe it is one that will affect more people once attribute selectors get a bit more popular.

neRok’s picture

neRok commented
Status: Fixed » Closed (duplicate)

Did a bit of hunting and found the problem being worked on in a more lively issue, so will close this as duplicate of #936316: CSS aggregation strips some essential whitespace within strings

gooddesignusa’s picture

gooddesignusa commented

I also ran into this issue. I'm using CKEditor and when aligning an image it uses styles to float the image. Since it uses a space between the word float and the value, I was unable to target the images with the CSS attribute selector when turning on compress CSS.

I tried figuring out a way to have CKEditor not add spaces between CSS values but it was taking too much time. I was able to use the custom filter (https://drupal.org/project/customfilter) module to search for "float: left" & "float: right" and remove the space.

I know this isn't the ideal solution but is a temporary workaround. I've included the export from my custom filter

$filter = array(
  'fid' => _customfilter_map_filter_id('1'),
  'type' => base64_decode('cmVtb3ZlX3NwYWNlc19ja2VkaXRvcl9zdHlsZXM='),
  'name' => base64_decode('UmVtb3ZlIFNwYWNlcyBmcm9tIENLRWRpdG9yIHN0eWxlcw=='),
  'cache' => 1,
  'description' => base64_decode('Q0tFZGl0b3IgYWRkcyBzcGFjZXMgYmV0d2VlbiBzdHlsZSB2YWx1ZXMuIFdoZW4gdHVybmluZyBvbiBhZ2dyZWdhdGUgJiBjb21wcmVzcyBDU1MgdGhlIHNwYWNlcyB3aWxsIGJlIHJlbW92ZWQuIFRoaXMgY2F1c2VzIGlzc3VlcyB3aGVuIHRyeWluZyB0byB1c2UgQ1NTIGF0dHJpYnV0ZSBzZWxlY3RvcnMuIEZvciBleGFtcGxlIGltZ1tzdHlsZSo9ImZsb2F0OiByaWdodCJdIHdpbGwgYmUgcmVwbGFjZXMgd2l0aCBpbWdbc3R5bGUqPSJmbG9hdDpyaWdodCJdIHdoZW4gQ1NTIGlzIGNvbXByZXNzZWQuIFRoaXMgaW5wdXQgZmlsdGVyIGxvb2tzIGZvciAiZmxvYXQ6IGxlZnQiICYgImZsb2F0OiByaWdodCIgYW5kIHJlcGxhY2VzIHRoZW0gd2l0aCAiZmxvYXQ6bGVmdCIgJiAiZmxvYXQ6cmlnaHQiLg=='),
  'shorttip' => base64_decode(''),
  'longtip' => base64_decode(''),
);

$rules[] = array(
  'rid' => _customfilter_map_rule_id('1'),
  'fid' => _customfilter_map_filter_id('1'),
  'prid' => _customfilter_map_rule_id('0'),
  'name' => base64_decode('cmVwbGFjZSBmbG9hdCBsZWZ0IGFuZCBmbG9hdCByaWdodA=='),
  'description' => base64_decode(''),
  'enabled' => 1,
  'matches' => base64_decode('MQ=='),
  'pattern' => base64_decode('L2Zsb2F0OiAobGVmdHxyaWdodCkv'),
  'replacement' => base64_decode('ZmxvYXQ6JDE='),
  'code' => 0,
  'weight' => 0,
);
johns996’s picture

johns996 commented

Nice workaround gooddesignusa. Isn't this an annoying issue? People kept asking me why all the image spacing was messed up on my site and the best answer I could give them was, it's complicated.

If you look at the other issue that mine was marked a dupe of, you'll see I made a patch to "fix" the problem with the php regex that strips out the whitespace. My patch failed testing but I'm currently running it on my production site without any issue. This was my first drupal patch so I really have no idea what went wrong with the testing but since it was a small isolated piece of code I thought it would be fine (and I was right, as far as I can tell).

dancabral’s picture

dancabral commented
Issue summary: View changes

This issue was driving me insane. From a coworker.....this works. Although probably not in older versions of IE.

.field-name-body img.media-element.file-default[style*="float:"][style*="right;"] {
margin-left:10px;
}