I created a browser extension that inserts DOM elements directly into a page, and I'd like to prevent them from being styled by any inherited CSS already in the page. At the moment, I append my a css call to the head to bring in my own styles. So far my plan has been to use obscure class/id names and create very specific rules. In some cases I've had to use !important. I feel like I'm throwing throwing my morals out the door!
Any thoughts on how I could efficiently prevent inherited styling, and yet allow the browser to render my code efficiently?
Any thoughts on how I could use an iframe to do this? I'm running PHP on the back end.
You can't prevent the cascading bit of cascading style sheets but you can define all styles so there is nothing left to inherit.
A quick way of doing this is style them how you want then use webkit's developer tools (or firebug) to view the computed styles for the elements.
Then you can just copy all of the computed styles into your stylesheet. Make sure to use unique IDs so they don't overlap with anything on the page and the styles will be very specific. Add !important ...cringing as I say this... to prevent someones weirdly specific stylesheet from overlapping and make sure your stylesheet call is added in at the end of HEAD or insert it in a style block at the end of the body to make sure it can't be overridden.
Related
I have searched Stack Overflow and found nothing about this. So here it goes
I was wondering if anyone has created server side script (PHP preferred) that can determine what css rules are required for a page to render. Something that would cross reference the HTML with a set group of css files and recreate a lighter version for a specific page.
Since Googles Update and the importance to render blocking scripts/CSS and to lighten the load I think this would be an awesome script.
I am not sure whether the tool you're asking for exists in its "pure form". The closest thing I'm aware of are unused css removal tools like this one. Such tools would accept a css file and a number of html files and remove css rules, that are not used.
Please not that the tool I've linked is designed to be used at build time, not run time. That means you would want to use it to get rid of unused css before/when you deploy your website, not on every request.
I haven't come across such a script but implementing one is not that complicated. My thoughts to implement would be like below:
You could cache the main css declarations in a server-side php array like
$css = array(".tag1"=>array(
"width: 10px;",
"height:10px;"
),
"#tag2"=>array(
"position:relative;",
"float:fixed;"
)
);
Declare a php array of css tags used in the file at the top of the page (like how you do for validation) like $cssused = array(".tag1", "#tag2");
On page load, compare the two arrays (like in_array($cssused, $css) or array_key_exists('#tag2", $css)) and load the css declarations for the tags that match in the main css array inside the <style>...</style> tags.
Whenever you make changes in the file, you have to just add/edit those in the $cssused array.
I have been trying to delve into web development. Part of this process has been incrementally tweaking things on my website, trying to learn something new with each incremental change.
The problem I'm running into with this is that as the website evolves, I end up doing away with and adding new classes to my HTML elements. Obviously, when I create these selectors in my HTML, I target them in my JavaScript or my CSS, but I often end up going back and doing away with elements. This leaves orphaned references to these selectors in my JavaScript and my CSS, as well as unnecessary/unreferenced classes and ids in the HTML.
My question is is there some utility that I can use to identify these orphaned selectors both in my CSS, HTML, and JavaScript* so that I can safely clean up these files? The solutions suggested so far are great for finding unnecessary selectors in my CSS, but don't seem to help with identifying unnecessary classes or IDs in my HTML, which is also something I'd like to do. Is there something that works both ways as described?
*It sounds like for JavaScript/JQuery there are methods, but for my purposes, my JavaScript is clean enough that I can clean it without help, so its fine if the focus is on CSS and HTML.
For CSS there is a Firefox extension that finds unused CSS selectors on a page. It has an option to spider the whole site. Version 3.01 should work with newer versions of Firefox.
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
And here's another option.
https://addons.mozilla.org/en-US/firefox/addon/css-usage/
for Javascript you are pretty much on your own.
If you are using jquery you can override the $() function calling jQuery() inside that function and checking / loging the value returned from jQuery to ensure all selectors are returning some results. But its not a deterministic way of doing things.
I use Dust-Me Selectors (official site) to find orphaned selectors in my code. Works for Firefox and Opera, unfortunately I do no think it can search JS or PHP code, but will search HTML output.
The scenario:
A homepage that is generated with PHP and a template engine.
The page is being redesigned.
The new design is based on jQuery UI.
The current CMS uses multiple templates: a page template, an article details template, a comments template etc.
The problem:
Some templates (like the article details template) generate html fragments that should use jQuery UI elements like tabs. Currently the data source of the page template does not contain any information which elements should be turned into jQuery UI elements in the main jQuery call in the documents head.
Possible solution
Add a CSS class like "jqTabs" to the html markup of the sub-templates and use the selector .jqTabs in the main jQuery script.
Question
Is this a bad idea?
BTW: "Use a different CMS" is not a valid answer, because this is not an option right now (deadline, budget,... you name it -.- ).
Not a bad idea at all.
That is one of the primary uses of classes.
A class (like and ID) can be used as both a way to style an element and / or a hook for scripting.
In this case, it might be the best possible solution, as it allows for what seems to be minimal markup changes for a wider redesign.
And it is easily reversible.
I believe that using CSS classes as hooks for JavaScript can indeed be a bad practice. The reason I say this is because this approach intermingles your CSS and JavaScript and can often lead to unnecessary confusion.
Let me explain: Right now I am working on adding new templates to an existing system which uses dynamic user controlled admin settings to control CSS properties (page width, font sizes, colors, etc). These settings can also affect JS properties (slideshow options, delay between slides, etc.).
The problem is that since so many CSS classes were used as JavaScript hooks, I am having a terribly hard time determining which classes are used for styles and which ones are used as JS hooks, and which ones are used for both! As a result, when doing a new template, it would be very difficult to start from scratch with new markup as I would be leaving out various important classes for both CSS and JS functionality.
The task would be much easier if CSS classes were ONLY used for styling, and other JS hooks were only used for JS. I envision this being accomplished with HTML5 data attributes, which would look something like this:
my link
By using the HTML5 data attributes for JavaScript hooks and the class attribute for CSS styling, we can be sure that all classes are ONLY related to CSS, and anything JavaScript related simply gets its custom attribute.
Another option I have used is prefixing any css class with js- that is ever referenced by the JavaScript. That way you would know which classes you could remove safely for styling and which ones had to remain for existing functionality.
<a href="/mylink" class="my-style-class my-other-style-class js-my-hook-1 js-myhook-2">
My link
</a>
I have problem with PHP and JavaScript/CSS.
I have database with table. The table has a descriptions of articles. I want to echo the descriptions of the articles from database. Unfortunately many of them has a JavaScript or CSS included ( Then some article text), so when I use echo, it shows all of that code (and after that text). Is there any way to not show the JavaScript/CSS part and show only the text? For example with str_replace and regular expression? If yes, can somebody write me how it should look like?
Thanks for help and let me know if u need more info (code etc.)
Use HTMLPurifier - it will remove the scripts, css and any harmfull content from your articles. Since it is a CPU-intensive operations, it's better to run article trough HTMLPurifer before saving in the database, then to run it each time you are showing the article.
If you're trying to remove tags from a user's post, you can call strip_tags. This will get rid of css links, script tags, etc. It will not get rid of the style attribute, but if you get rid of div, span, p, etc. that won't matter -- there will be no tag for it to reside on.
As has been stated by others, it is generally best to sanitize your input (data from user before it goes into the DB), than it is to sanitize your output.
If you're trying to simply hide the JS and CSS from users, you can use Packer to obfusicate Javascript from less-savvy users, use Packer and use base 62 encoding. The JS will still work but will look like jiberish. Be aware that more knowledgeable users can attempt to unobfusicate the code, so any critical security risks in the JS still exists. Don't think any JS that accesses your databases directly will be safe; instead remove database access from the Javascript for security. If the JS is just to do fancy things like move elements around the page it's probably fine to just obfuscate it.
Only consider this if YOU have complete control and awareness of all JS included with the articles. If this is something your anonmous or otherwise not 120% trusted users can upload, you need to kill that functionality and use HTML Purifier to remove any JS they might add. It is not safe to output user entered JS, for you or your users.
For the CSS, I'm not sure why you want to hide it, and CSS can't be obfuscated quite like JS can; the styles will still be in plain English, best you can do is butcher the class/id names and whitespace; outputting CSS that YOU generated isn't a real security risk though, and even if people reverse engineer it I wouldn't be that afraid.
Again, if this is something anonymous/non trusted users can ADD to your site on their own, you don't want this at all, so remove the ability to upload CSS with an article using the HTML Purifier Darhazer mentioned.
You can try the following regex to remove the script and css:
"<script[\d\D]*?>[\d\D]*?</script>"
"<style[\d\D]*?>[\d\D]*?</style>"
It should help, but it cannot remove all the scripts. Like onclick="javascript:alert(1)".
I need to add styles to my style tag in my head section. How can i add to that style tag from the view.
You'd be better off from an MVC point of view by putting these style elements in to their own stylesheet, and then inserting the sheet in the way mentioned above.
However if you must use internal CSS, this should work:
$this->addScript('extraCSS','<style type="text/css>".foo{color:red;}</style>');
extraCSS I believe is just an internal name given to the content that gets added to the $scripts_for_layout buffer.
This will appear below any JS inclusions, which can be a problem at times.
See all about adding css files using the HTML Helper here: http://book.cakephp.org/view/1437/css
Make sure you have $scripts_for_layout in the head of your layout to have cake put scripts there automatically (see the third example).
EDIT:
For style tags, see here: http://book.cakephp.org/view/1440/style
Otherwise, CakePHP uses simple PHP as the templating language in the view - so just write it using that.
Some example code and further explanation of what you'd like to do would also be helpful.