Is it possible to create a new property in CSS? For example, say you're developing a control that displays a photo and you want to add a property to css to control what style frame to have around the photo. Something like:
#myphoto { frame-style: fancy }
Is there some way to do this in a cross browser compatible manner, and how would you define whether the style inherits or not?
EDIT: It's a custom control - your JS code would deal with the style - I'm not expecting the browser to magically know what to do. I want the user to be able to style the control with CSS instead of JS.
Sure, why not. Check this out as an example: http://bililite.com/blog/2009/01/16/jquery-css-parser/
You may also be able to get away with using CSS classes instead of properties. Not sure if that works for what you're doing.
You can't. Browsers interpret CSS based on how their layout engines are coded to do so.
Unless you took an existing open source engine like WebKit or Gecko, added custom code to handle your custom CSS and made a browser that used your customized layout engine. But then only your implementation would understand your custom CSS.
Re your edit: it'd depend on whether you're able to read that style somehow. Typically browsers just instantly discard any properties they don't recognize, and CSS is not normally reachable by JavaScript because CSS code is not part of the DOM.
Or you could look at Jordan's answer.
If you'd prefer a straight JavaScript solution that uses no JS libraries, you could use the query string of a background-image to keep "custom properties" inside your CSS.
HTML
<div id="foo">hello</div>
CSS
#foo {
background: url('images/spacer.gif?bar=411');
}
JavaScript
getCustomCSSProperty('foo', 'bar');
Supporting JavaScript Functions
function getCustomCSSProperty(elId, propName)
{
var obj = document.getElementById(elId);
var bi = obj.currentStyle ? obj.currentStyle.backgroundImage : document.defaultView.getComputedStyle(obj, null).getPropertyValue('background-image');
var biurl = RegExp('url\\(["\\\']?([^"\\\']+)["\\\']?\\)').exec(bi);
return getParameterByName(propName, biurl[1]);
}
function getParameterByName(name, qs) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(qs);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
Demo:
http://jsfiddle.net/t2DYk/1/
Explanation:
http://refactorer.blogspot.com/2011/08/faking-custom-css-properties.html
I've tested the solution in IE 5.5-9, Chrome, Firefox, Opera, and Safari.
Related
I have tried giving css by using .style() method but it doesn't work. So please help me in customizing and making it look better
There's nothing special about the <select> elements that p5js creates. And the .style() function works fine with them. So it is not clear what you are having difficulty with:
let sel;
function setup() {
noCanvas();
sel = createSelect();
sel.position(10, 10);
sel.option('foo');
sel.option('bar');
sel.option('baz');
sel.style('background-color', 'orange');
sel.style('border-radius', '3px');
sel.style('width', '200px');
sel.style('padding', '0.5em');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
Browsers don't allow you to style the items list that appears when a select is expanded, so if you want to customize the appearance further you will need to do some extensive CSS and JavaScript customization. See: https://www.w3schools.com/howto/howto_custom_select.asp for example.
Let's say for example I'm going through my stylesheet but I can't remember what element a certain CSS selector affects.
Is there any method, tool, or anything that I could do/use to find out what exactly it is affecting?
Thanks!
I just opened up a random bootstrap template site and did what you where asking for.
Open up your chrome browser (I prefer this as I feel this is easy to debug both Jquery and css) and Press F12, you will get a developer window as in the image.
Switch to the console tab.
Use Jquery selector to select all
the intended elements (you can use the same css selector here too
but just place them inside $('')) Eg: $('.tab-content') I am trying to find out all the elements with the class tab-content
The result is all the elements
of that selector.
NOTE: This appraoch woud require you to have Jquery loaded into your page. Else the script will throw an error saying $ is not defind.
In addition to using your browser's development tools, there are two easy ways to do it that should work in almost any browser (no matter how bad the developer environment).
Visually
Temporarily set a border or background color for the selector, like:
border: 1px solid red;
Or:
background: red;
This makes it very easy to find the affected elements.
Programmatically
On the JavaScript console, use:
// Replace with something that prints the relevant details
var stringify = function(element) { return element.innerHTML; };
// Iterate over all affected elements and print relevant info
var affectedElements = document.querySelectorAll('.your .selector');
var len = affectedElements.length;
console.log('Elements affected: ' + len);
for (var i = 0; i < len; i++) {
var affectedElement = affectedElements[i];
console.log(
'Element ' + (i+1) + ':\n' +
stringify(affectedElement) + '\n\n');
}
The inspection of elements feature of the browser is meant for the purpose you want.
1.Open up the index file in any browser(preferably Mozilla Developer edition),
2.Right click and Inspect element,
3.Then open the compiled stylesheet. Find out the style element you want to check the effect of.
4. Go back to inspection, remove/add CSS properties and see the effect in real time.
The other way is to use Adobe brackets. It's live preview feature will highlight the section that involves the code snippet, you point your cursor to.
I have an ExtJS form that uses hbox-layout containers to create sentences that contain form inputs and there is a requirement to disable the form under certain conditions. The hbox-layout containers have a series of radio, text, checkbox, and textfield components. You can see an example on jsfiddle.
This is an answered question here on SO that doesn't fully work for me because if you disable something that isn't a field (like the text component I'm using) the disable style is different - it appears to mask the component instead of just graying out the text. When nested components are disabled, the mask gradients stack. Examples of this scenario are illustrated on this jsfiddle.
Is there a way to override how text handles its styling when it becomes disabled? I think that may be the easiest solution.
You'll have to handpick each style fix, but yes that's completely possible. Just addCls to give a hook for your CSS...
For example, using the following CSS:
.my-disabled-ct text {
opacity: .3;
}
You can give a similar disabled look both to fields and text items with the following code:
var rootCt = Ext.getCmp('lotsOfItems');
rootCt.query('field').forEach(function(field) {
field.disable();
});
rootCt.query('container').forEach(function(ct) {
ct.addCls('my-disabled-ct');
});
You should probably avoid using disable on field since Ext put a mask over them then (though you could probably hide it with CSS).
You could add the class and target the CSS directly to text items however, why not? In this case, you would query for 'text' and use addCls on them, with this kind of CSS:
text.my-disabled-cls {opacity: .3;}
That goes without saying that you'll restore your components look to "not disabled" by removing the CSS class with the same query and the removeCls method.
Say I'm embedding a bit of HTML code in an existing website. I'd like to know what CSS classes are already available. Currently I could do this as follows:
View the source for the page
Search for links that include .css files
Browse the contents of those until I find a useful class
That's tedious, and not exhaustive.
What's a better way?
EDIT You can also do this in Chrome:
Inspect Element
Select "Resources" tab
Navigate to Frames/../Stylesheets
View contents of individual stylesheets
I guess what I'm looking for is a higher level, interpreted view of the CSS styles available: not simply the contents of the CSS files. So if one style was defined identically in multiple places, I'd only want to see it twice. If two different styles applied to the same element, I'd want to see the two side by side.
Let's assume I can't do this by embedding code.
Press F12 in Chrome and select a magnifying glass.
In IE it's Also F12 and then select a little arrow.
Firefox has a similar feature or you can download Firebug which is great for web developers.
I think Web Developer plugin for firefox might be help you. You can add it from here.
The W3 CSS validator tool http://jigsaw.w3.org/css-validator/ will show all available css styles available to a webpage you specify, underneath a list of faulty styles.
copy this code immediately before the closing tag of the page's body :
I got code from here: http://snipplr.com/view/6488/
Tested in Chrome
//CODE
<div id="allclasses" style="text-align:left">
</div>
<script type="text/javascript">
var allTags = document.body.getElementsByTagName('*');
var classNames = {};
for (var tg = 0; tg< allTags.length; tg++) {
var tag = allTags[tg];
if (tag.className) {
var classes = tag.className.split(" ");
for (var cn = 0; cn < classes.length; cn++){
var cName = classes[cn];
if (! classNames[cName])
{
classNames[cName] = true;
}
}
}
}
var classList = [];
for (var name in classNames)
classList.push(name+'<br />');
document.getElementById('allclasses').innerHTML = classList.sort();
</script>
The title pretty much says what I'm looking to do, but to elaborate a little more, I want to apply some CSS to a class called prochart-colitem for users who do not have javascript enabled.
The reason? I am using percentages for column widths to equal 100%, then using javascript to subtract 2 pixels from each div for a border that is also added.
If there's no javascript enabled, the columns + borders equal more than 100% of the parent div, and I need to subtract a couple pixels from a class to make it fit in the parent div to no-js users.
Any easy way to do this? I tried <noscript> with <style> inside of that, no luck.
One way to approach it is by always adding a CSS class to the elements you wish to have a specific style and then, once loaded, run some JavaScript to remove those classes from the elements with that class.
As an example (I use jQuery here for simplicity's sake but this can obviously be done without a JS library):
$(document).ready(function()
{
$(".nonJsClass").each(function()
{
$(this).removeClass("nonJsClass");
}
}
Where the 'nonJsClass' has CSS rules that will now only apply if the user doesn't have JS enabled.
You could add a class to the body tag, that triggers your desired CSS when JS is not enabled, then right after the body tag, remove it with JS.
Thus users with JS support won't see the effects of the special class.
Including a stylesheet inside a noscript tag was not possible before HTML5, but it is now (as long as you do it in the "head" of the document).
http://adapt.960.gs/
In the case of JavaScript being purposefully disabled or unavailable, stylesheet defaults can be served via , which is perfectly valid in the for HTML5.
scunliffe's answer is good. An alternate way would be to write a CSS style that only displays if JavaScript is enabled and only targets the div you want, using class chaining:
.prochart-colitem.js-enabled {
/* your JS-specific styles */
}
You can then use jQuery, for example, to add that additional class:
$(document).ready(function() {
$('.prochart-colitem').addClass('js-enabled');
});