5

CSS architecture (for Drupal 8) says:

Never apply widths or heights except to elements that natively have these properties (e.g. images).

I use CSS properties like width:100% often with images. It seems much easier to get to than the markup most of the time. Does this guideline mean I should not being doing this? If so, is the only solution overriding a template file to get at the HTML element properties?

3
  • 2
    There are two good answers below, so I will just leave a comment. I think that doc is misleading. IIRC, width/height are only on HTML "replaced elements", and that line should be a bit more specific and mention that, which would clear things up.
    – mpdonadio
    Commented Aug 19, 2016 at 0:34
  • 1
    @mpdonadio what does the IIRC in your comment stand for? After doing some research I found IIRC could stand for many different things which makes your comment a bit ironic.
    – No Sssweat
    Commented Aug 19, 2016 at 0:53
  • 2
    @NoSssweat IIRC == If I Recall Correctly
    – mpdonadio
    Commented Aug 19, 2016 at 1:07

3 Answers 3

5

What I understand is, it is suggesting opposite to what you are interpreting.

Lets take a look again.

Never apply widths or heights except to elements that natively have these properties (e.g. images).

So, it is saying that, you can apply the height and width to image freely as the Height and Width are the default property of images. This you can understand as all images has some width and some height. So they are intrinsic property of image.

Now, lets take other proof, why you can apply Height and Width to image. If you see the Drupal's core feature, Image Style at Admin/Config/Media/Image style, there you can specifiy as many image style as you want with different Width and Height.

enter image description here

Hence this feature allowing the facility to change the dimensions of same image with different Image styles - AND how this is happening, simply by changing the height and width, So this is the core feature.

Hence, image comes in the category of except in your highlighter following statement.

Never apply widths or heights except to elements that natively have these properties (e.g. images).

So, you can freely use width and height to Images.

5
  • Ha! Brilliant. Thank you for the additional justification as well. Commented Aug 18, 2016 at 17:49
  • To be fair, the wording could be better.
    – Insane
    Commented Aug 19, 2016 at 0:28
  • @CodeNext Just that I understood how the OP misunderstood it.
    – Insane
    Commented Aug 19, 2016 at 13:21
  • 1
    @Insane, I updated the docs to make this particular line more clear. Commented Aug 19, 2016 at 15:15
  • @Insane and chrisshattuck Glad it is done. Thanks @Insane to point out. @Insane The improvement and constructive comment is always welcomed, and it is encouraged. But just to point out, if you comment under any particular answer, It primarily targets that answer. Hence reading your comment "To be fair, the wording could be better." I started finding what is wrong in my the answer and I started searching the word...;). Hence if you would have added that comment, under main question, it would have make more sense. Again this also became a case like chrisshattuck's question....Hahaa...
    – CodeNext
    Commented Aug 19, 2016 at 16:33
5

Do note that those guidelines apply to

Drupal core and contributed modules

(emphasis mine).

They don't apply to themes.

The point of the document is to make sure that CSS implemented by module developers isn't awkward for themes to override.

The decisions you make in your own theme are your call. So if you want to apply widths to images, apply away.

Incidentally, the CSS formatting guidelines are intended for themers, so they're worth a read. Even those examples use widths in selectors that are unlikely to refer to images, so you can safely assume the other guidelines don't apply here.

Heck, if they did, we wouldn't be able to create responsive themes.

1
  • Nice information indeed, Knowledgeable..
    – CodeNext
    Commented Aug 18, 2016 at 22:03
0

You must use width and height proterties.

The main reason is than after load the html, your browser will render the page but the images are not there.

If you use size properties, the page will use the right layout because the browser knows how big are the images before they are loaded. If you don't use size properties, your page will look like a mess until images are loaded.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.