I wonder what the the part ::-webkit-search-decoration do in the CSS selector for input[type="search"]::-webkit-search-decoration?
And why is this causing en DOM Exception error?
function is(selector, element) {
var div = document.createElement("div"),
matchesSelector = div.webkitMatchesSelector;
return typeof selector == "string" ? matchesSelector.call(element, selector) : selector === element;
}
is('input[type="search"]::-webkit-search-decoration', document.body);
It allows you to make search boxes look uniform across multiple browsers. Chrome for instance has default styling for search boxes that does not fit into some designs.
here is a good link on the topic.
http://geek.michaelgrace.org/2011/06/webkit-search-input-styling/
It just makes your search box little bit styled.As it is one of the property for css3 then it will not work on every browser.
Have a look in this link
http://css-tricks.com/webkit-html5-search-inputs/
Related
Basically I want to create a reusable component which can be slightly modified from the outside in react:
SomewhereElse.tsx
...
<FooComponent width={200}>
...
FooComponent.tsx
interface IFooProps {
//default width of 150px
width?: 150;
//default margin of 5px
margin?: 5;
}
interface IFooState{
checked: boolean;
}
class FooComponent extends Component<IFooProps, IFooState> {
constructor(props: IFooProps) {
super(props);
...
}
...
render(): ReactElement {
return (
<div className="foo-component"
data-width={this.props.width + 'px'}
>
...
FooComponent.scss
.foo-component {
...
width: attr(data-width length);
...
But it always gives me the following error when running the application (chrome):
... Please consider that I need a "number" as property because I am doing some calculations based on that number for some of the inner components so everything fits together.
EDIT:
Using "style" is not working for me because I have some ::before ::after features in my scss which are broken when using style because they occasionally modify "right:" based on the width.
For better understanding, this is my base:
https://www.sitepoint.com/react-toggle-switch-reusable-component/
To answer your question
Please find a solution with attribute selector or tell me that it is not possible because of X reasons (link to docs in best-case).
No, although it would be super useful, according to my research it's currently not possible:
MDN about CSS attr():
Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.
According to caniuse.com about css3-attr, the ability to use attr() on any CSS property (besides content, and to use it for non-string values (e.g. numbers, colors) via <type_or_unit> as defined per "CSS Values and Units Level 3" is currently unsupported by all browsers.
See also the statement on the current draft for "CSS Values and Units Module Level 4":
The following features are at-risk, and may be dropped during the CR period: toggle(), attr() [...]
(Source: https://drafts.csswg.org/css-values/#status)
In the Chromium issue, I found a link to an interesting resource I wasn't aware of: web-platform-tests dashboard for css-values. Take a look at the (failing) tests prefixed with attr-, especially attr-length-valid.html and attr-px-valid.html.
But there is hope: the Chromium team recently (05/15/2020) posted an Intent to Implement and Ship: CSS advanced attr() function
Implement the augmentation to attr() specified in CSS Level 4, namely, allowing various types (besides ) and usage in all CSS properties (besides pseudo-element 'content').
Note: CSS Level 4 has made substantial revisions to attr() compared to Level 3 to ease the implementation. We'll follow CSS4. [...]
Motivation: This is a highly requested feature, with 77 stars at crbug.com/246571. [...]
Chromium tracking Issue 246571: Implement CSS3 attribute / attr references
)
Firefox also show recent activity, see Firefox tracking Bug 435426 [meta] Implement CSS Values 3 extensions to attr(), there they at least are referring to Chromiums current efforts.
(WebKit Bug 26609 - Support CSS3 attr() function shows no activity, which could be a deal-breaker)
As suggested from G-Cyrillus I have found a possible solution using CSS custom properties. Unfortunetly I did not find a solution using attribute selector so I could stick to one solution type.
Add your custom properties in the scss file "parent" class like:
.foo-component {
--customwidth: 150px;
--custommargin: 5px;
width: var(--customwidth, 150px);
...
&-inner {
margin-left: var(--custommargin, 5px);
}
...
}
After you declared the customproperty it's possible to use it with var(<propertyname>, <initialvalue>).
In React you slightly can modify the render() like:
render(): ReactElement {
//set the custom properties for width, margin and slider position
let cssProperties = {};
cssProperties['--customwidth'] = this.props.width == null ? '150px' : this.props.width + 'px';
cssProperties['--custommargin'] = this.props.margin == null ? '150px' : this.props.margin + 'px';
cssProperties['--switchposition'] = (this.props.width == null ? 115 : this.props.width - 35) + 'px';
return (
<div className="foo-component" style={cssProperties}>
...
}
Which will work for every component seperatly.
An easier way would be using inline style:
return (
<div className="foo-component"
style=`width:${this.props.width};`
>
With attr you need to specify the attribute by providing the selector in your scss styles
.foo-component[data-width] {
...
width: attr(data-width length);
...
If you have multiple such attribute you can write them like
.foo-component[data-width][data-margin] {
...
width: attr(data-width length);
margin: attr(data-margin number);
...
Please check the MDN docs for more details
I was wondering if CSS changes the DOM.
The reason I am asking, is that whenever I change an Element with CSS, I don't see it's value changed in the "element".style properties.
No, CSS does not change the DOM.
No. CSS does not change the DOM.
Nor content injected using :after or :before alter the DOM.
Actually... there are a few cases where CSS can change the DOM, but it's a bit far-stretched, as it won't change the DOM-tree structure, except in one yet even more far stretched case...
There is a being rendered definition in the HTML specs that does impact the behavior of the DOM in some cases, based on CSS computed styles.
For instance,
an HTMLImageElement can have its width and height IDL attributes value change whether it is being rendered or not:
onload = (evt) => {
console.log( 'rendered', document.getElementById( 'disp' ).width );
console.log( 'not rendered', document.getElementById( 'no-disp' ).width );
}
img { width: 100px; }
#no-disp { display: none; }
<img id="disp" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">
<img id="no-disp" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">
Elements that are not being rendered can not be focusable elements:
document.getElementById( 'rendered' ).focus();
console.log( document.activeElement ); // <input id="rendered">
document.getElementById( 'rendered' ).blur();
document.getElementById( 'not-rendered' ).focus();
console.log( document.activeElement ); // <body>
#not-rendered {
display: none;
}
<input id="rendered">
<input id="not-rendered">
And the one case where the DOM tree is modified, concerns the DOM tree of an inner Document: When an <object> or an <embed> element has its style set to display:none, per specs, its inner Document should be reloaded:
Whenever one of the following conditions occur
[...]
the element changes from being rendered to not being rendered, or vice versa,
...the user agent must queue an element task on the DOM manipulation task source given the object element to run the following steps to (re)determine what the object element represents.
So this means that simply switching the being rendered state of such an <object> or <embed> element is supposed to reload entirely its inner Document, which means also its DOM tree.
Now, only Safari behaves like that, Firefox never implemented that behavior, and Chrome did recently change their to match FF's one, against the specs.
For Safari users, here is a fiddle demonstrating it.
Below is the dom structure of the page :
I have tried
button:contains("srave")
I also tried
button[innerText="srave"]
button[text="srave"]`
button[innerHtml="srave"]`
none of them work.
Need way to get elements when element attribute is not defined.
PS: textContent() return srave as outcome.
Edit:
I have many such button elements on the page. I know I can iterate through all of them and check text. But I want to get web element directly based on the text it contains to reduce the execution time
Did you try: button[class='k-button k-button-icontext'] or button[dir='ltr'] I don't think the cssSelectors you were attempting in your example are correct because you pluralized button. If neither of these work, it may be that there are more than one button on the page with the same selector. In which case it might be better to use xpath or you could get a list of all the elements with the same selector and then get whichever one from that list you created and click it.
No, you can't use CSS Selector. You can use XPath.
//button[text()='srave']
Or
//button[contains(text(),'srave')]
You can use jquery for get the same because css is not select the text.
Working fiddle
fiddle link
Try this
alert($('button').find('span').html());
You can use following css to get the button name with "srave".
HTML
<button data-name="srave">
<span>Brave</span>
</button>
css
button[data-name="srave"] {
background:tomato;
}
To add to danidangerbear here is a java method that will do what you want:
public String getElementText(String elementText){
List<WebElement> elements = driver.findElements(By.cssSelector("button"));
String elementText = null;
for(WebElement element : elements)
if(element.getText().equals(actualValue)){
elementText = element.getText();
break;
} else {
elementText = "element text does not exist";
continue;
}
return elementText;
}
The intent is to target all the other elements of the same type & same level whenever one is hovered. Tried
a:hover ~ a
Only to notice that this doesn't target the elements before the hovered one... Is there a solution with css? Or should I just somehow js my way out of this
This is a variation on the parent or < selector question (of which there are many). I know it's not quite the same, but I'm sure you can imagine how a sibling selector would be derived from a parent selector.
Jonathan Snook has an excellent blog post on why this doesn't exist, and I don't think I can do any better, so I'll leave you to read that if it interests you. Basically, it's a technically difficult job because of the way elements are selected, and it would lead to a whole world of mess in terms of code structure.
So the short answer is, this doesn't exist and you'll need to resort to JS to fix it, I'm afraid.
Edit: Just a couple of examples of fixes. Using jQuery:
$(selector).siblings().css({...});
or if you want to include the element:
$(selector).parent().children().css({...});
Or in vanilla JS:
var element = document.querySelectorAll(selector); // or getElementById or whatever
var siblings = element.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
if (siblings[i] !== element) { // optional
siblings[i].style.color = 'red';
}
}
You can do this by using jQuery to toggle the hover states instead of CSS:
HTML:
<div>
Link 1
Link 2
Link 3
</div>
CSS:
div a {color: #000;}
div a.hover {color: #00f;}
jQuery:
$("div a").hover(
function(){
$("div a").addClass("hover");
},
function(){
$("div a").removeClass("hover");
}
);
Fiddle
Theres a mistake in my rather large demo where i assume all the divs under the class special will be used to align something. Now i realize i need to add an extra div outside of the part i want to align but inside of .special.
How do i write .special div[NOT someclass] ? or is there no way to do this and i need to rewrite a lot of html?
CSS3 includes the not() selector. The only problem is (you guessed it) no IE compatibility. If you're willing to require Javascript from IE <9 users, you can get IE compatibility with IE9.js.
+1 to both answers above.
I'll add i was able to get away with some things but writing this in the css block to undo the effect
some-type: inherit;
I would go with jQuery or some other Javascript Framework, the selectors just rock and NOT class XY is rather easy to achieve.
As Pekka pointed out I am not sure what brothers you want to target. getElementsByClassName() is implemented by almost all browsers (you know which one doesn't work, don't you?).
I found a rather nifty solution on devshed to also make it work in IE:
onload=function(){
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className)
{
var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);
}
return results;
}
}
}
All you need to do now is to iterate through all your div classes and negate the one you DON'T want.