proper way to style elements without css

Question

EDIT: Yes, I know I used the word "proper". But that doesn't necessarily mean it is opinion based. If you are undecided on the proper way to do so, please vote me down. But if you feel there is only one proper way to do so, please let me know. Thanks

I am creating an image plugin for tinymce and/or other html editors which allows the user to upload an image and style it. The user can define various qualities of the image such as alt, title, height, width, src, vertical margin, horizontal margin, and border. Upon uploading an image, my application will insert it with the appropriate qualities. Furthermore, my application needs to be able to select an image already in the editor space, and be able to determine the existing image qualities.

Given this scenario, it seems like an external CSS file is not appropriate. Agree?

I am under the impression that alt, title, and src should all be html attributes.

What about height and width? How about vertical margin (top and bottom), horizontal margin (left and right), and border (width and style)?

wysiwyg markup always has lots of inline styles, yours won't be any better or worse... — dandavis, Jun 24 '15 at 05:09
@dandavis So width, height, padding, etc should be inline styles and not properties? — user1032531, Jun 24 '15 at 05:11
you can use `width` and `height` attribs for images , but the other stuff will be in the `style` attrib — dandavis, Jun 24 '15 at 05:13
That is what I was leaning toward, but never had a concrete reason why to do so. Just curious. Would you mind giving me your rational? — user1032531, Jun 24 '15 at 05:14
There is already an answer for that sub-question here: http://stackoverflow.com/questions/1247685/should-i-specify-height-and-width-attributes-for-my-imgs-in-html — light, Jun 24 '15 at 05:45
There is no reason you can't store the styles in an external file. You can use getComputedStyle to find out what has been applied to the image. http://stackoverflow.com/questions/1169967/inherited-css-values-via-javascript — BuzzCloudAU, Jun 24 '15 at 05:49

score 1 · Accepted Answer · answered Jun 24 '15 at 05:40

An external CSS, i.e. default styles declared by the application, is STILL appropriate for some properties.

What I would do is to define the default image style using CSS, e.g.

.uploaded-section img {
    display: block;
    width: 100%;
    max-width: 100%;
}

Then allow the uploaded content to have inline styles. You just have to note that inline styles, e.g. <img src="bla" style="width:640px">, overrules CSS styles.

The considerations here are:

which properties do you want to allow the user define? [code your editor to allow these props]
And if the user doesn't define all the properties, what is the default style? [put inside your CSS]

And yes, alt, title, and src should all be html attributes. There is no way to make them CSS properties, is there?

...my application will insert it with the appropriate qualities

I believe you mean "properties". Quality has a different meaning.

What about height and width? How about vertical margin (top and bottom), horizontal margin (left and right), and border (width and style)?

Nobody can tell you if these properties should be controllable by users, i.e. made as inline styles. You or your designer should tell you that, based on the page layout and design theme / style.

Thanks Light. Looks like your take is if it might be overridden, make it a style. Note that comments and links on my original question state to make width/size an attribute to assist the browser. — user1032531, Jun 24 '15 at 13:20

proper way to style elements without css

1 Answers1