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
– dandavis, Commented Jun 24, 2015 at 5:09
@dandavis So width, height, padding, etc should be inline styles and not properties? — user1032531
– user1032531, Commented Jun 24, 2015 at 5:11
you can use width and height attribs for images , but the other stuff will be in the style attrib — dandavis
– dandavis, Commented Jun 24, 2015 at 5: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
– user1032531, Commented Jun 24, 2015 at 5:14
There is already an answer for that sub-question here: stackoverflow.com/questions/1247685/… — light
– light, Commented Jun 24, 2015 at 5:45

light · Accepted Answer · 2015-06-24 05:40:13Z

1

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.

answered Jun 24, 2015 at 5:40

light

4,3173 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1032531 Over a year ago

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.

Collectives™ on Stack Overflow

proper way to style elements without css

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related