+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Data atribute or CSS style in HTML document (/showthread.php?tid=5809398)
Data atribute or CSS style in HTML document - Helltoy - Mar 8, 2018
Hy,
I want let user to customize his profile page (like background color/image, text color and so on).
I would like to know what is the best solution for this. Should I use "data attributes" or I should simply add "style" into html document.
With data attributes i should have javascript but I don't see point of using it (maybe I miss something) if I can simply add styles.
Can anyone suggest me solution for this?
Code
<div class='test' data-bg-color="red" >teste</div>
//script to change body colorCode
<div class='test' style="background-color: red; >teste</div>Thanks.
RE: Data atribute or CSS style in HTML document - ryan⚜ - Mar 8, 2018
Don't quote me, but I'm pretty sure it's better to use class selectors unless you're trying to store data or just need customize a specific element. I personally don't even use them unless I'm working on existing site, makes it way easier.
RE: Data atribute or CSS style in HTML document - Rushax - Mar 8, 2018
For my custom built WordPress themes, I just echo out the field they want as inline if it's for e.g a background image. No need for messing about/adding more files than needed, what's the point imo.
RE: Data atribute or CSS style in HTML document - Nachfolger - Mar 8, 2018
If you're selecting from a premade list, always use a styled class. It's not even recommended that you would allow user input that lets them choose the color from an input. You're opening yourself up to a world of vulnerabilities.
Let them select a list of colors (Eg. Colors 1-8) and send the ID to a server. Never take the input at face value (Eg. <option val='#FFFFFF'></option>), use something like "<option val='1'></option>" and let the server make the relation between colors.
1 = #fff,
2 = #000,
etc
As for the classes etc, why would you iterate through the data attributes to apply the classes/styling? Makes no sense. Just do it at the time of loading using either a class (I would recommend that, for sake of simplicity) or inline styling.
RE: Data atribute or CSS style in HTML document - Helltoy - Mar 9, 2018
Thanks all for help.
(Mar 8, 2018 07:19 PM)Nachfolger Wrote: It's not even recommended that you would allow user input that lets them choose the color from an input. You're opening yourself up to a world of vulnerabilities.
This is exactly what i want to do (let user to chose any color). Make input field where user can "write" color hex code for specific element.
I don't understand what you thought by "opening yourself up to a world of vulnerabilities" because I would add some input check (to make sure that user wrote color hex code).
RE: Data atribute or CSS style in HTML document - Rushax - Mar 9, 2018
There is color pickers available in HTML5.
Depends what sort of backend your working with I guess for this sort of question though.
https://www.w3schools.com/colors/colors_picker.asp