How to store -webkit-fill-available in a variable and use it in a calc function in css like this:
:root {
--fullheight: -webkit-fill-available;
}
div {
height: calc(var(--fullheight) - 50px);
}
I have tried this but it's not working for me
You should use 100dvh instead. Here is a good explanation why, if you want to know the details.
https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/
Related
I'm trying to select input elements of all types except radio and checkbox.
Many people have shown that you can put multiple arguments in :not, but using type doesn't seem to work anyway I try it.
form input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Any ideas?
Why :not just use two :not:
input:not([type="radio"]):not([type="checkbox"])
Yes, it is intentional
If you're using SASS in your project, I've built this mixin to make it work the way we all want it to:
#mixin not($ignorList...) {
//if only a single value given
#if (length($ignorList) == 1){
//it is probably a list variable so set ignore list to the variable
$ignorList: nth($ignorList,1);
}
//set up an empty $notOutput variable
$notOutput: '';
//for each item in the list
#each $not in $ignorList {
//generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
$notOutput: $notOutput + ':not(#{$not})';
}
//output the full :not() rule including all ignored items
&#{$notOutput} {
#content;
}
}
it can be used in 2 ways:
Option 1: list the ignored items inline
input {
/*non-ignored styling goes here*/
#include not('[type="radio"]','[type="checkbox"]'){
/*ignored styling goes here*/
}
}
Option 2: list the ignored items in a variable first
$ignoredItems:
'[type="radio"]',
'[type="checkbox"]'
;
input {
/*non-ignored styling goes here*/
#include not($ignoredItems){
/*ignored styling goes here*/
}
}
Outputted CSS for either option
input {
/*non-ignored styling goes here*/
}
input:not([type="radio"]):not([type="checkbox"]) {
/*ignored styling goes here*/
}
Starting from CSS Selectors 4 using multiple arguments in the :not selector becomes possible (see here).
In CSS3, the :not selector only allows 1 selector as an argument. In level 4 selectors, it can take a selector list as an argument.
Example:
/* In this example, all p elements will be red, except for
the first child and the ones with the class special. */
p:not(:first-child, .special) {
color: red;
}
Unfortunately, browser support is somewhat new.
I was having some trouble with this, and the "X:not():not()" method wasn't working for me.
I ended up resorting to this strategy:
INPUT {
/* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
/* styles that reset previous styles */
}
It's not nearly as fun, but it worked for me when :not() was being pugnacious. It's not ideal, but it's solid.
If you install the "cssnext" Post CSS plugin, then you can safely start using the syntax that you want to use right now.
Using cssnext will turn this:
input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Into this:
input:not([type="radio"]):not([type="checkbox"]) {
/* css here */
}
https://cssnext.github.io/features/#not-pseudo-class
This question already has answers here:
CSS3's attr() doesn't work in major browsers
(5 answers)
Closed 5 years ago.
width: attr(data-width);
I want to know if there's any way it's possible to set a css value using HTML5's data- attribute the same way that you can set css content. Currently it doesn't work.
HTML
<div data-width="600px"></div>
CSS
div { width: attr(data-width) }
There is, indeed, prevision for such feature, look http://www.w3.org/TR/css3-values/#attr-notation
This fiddle should work like what you need, but will not for now.
Unfortunately, it's still a draft, and isn't fully implemented on major browsers.
It does work for content on pseudo-elements, though.
You can create with javascript some css-rules, which you can later use in your styles: http://jsfiddle.net/ARTsinn/vKbda/
var addRule = (function (sheet) {
if(!sheet) return;
return function (selector, styles) {
if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
if (sheet.addRule) return sheet.addRule(selector, styles);
}
}(document.styleSheets[document.styleSheets.length - 1]));
var i = 101;
while (i--) {
addRule("[data-width='" + i + "%']", "width:" + i + "%");
}
This creates 100 pseudo-selectors like this:
[data-width='1%'] { width: 1%; }
[data-width='2%'] { width: 2%; }
[data-width='3%'] { width: 3%; }
...
[data-width='100%'] { width: 100%; }
Note: This is a bit offtopic, and not really what you (or someone) wants, but maybe helpful.
As of today, you can read some values from HTML5 data attributes in CSS3 declarations. In CaioToOn's fiddle the CSS code can use the data properties for setting the content.
Unfortunately it is not working for the width and height (tested in Google Chrome 35, Mozilla Firefox 30 & Internet Explorer 11).
But there is a CSS3 attr() Polyfill from Fabrice Weinberg which provides support for data-width and data-height. You can find the GitHub repo to it here: cssattr.js.
I am trying to put font family for a div if the variable is not equal to null.
my less code is
div.content {
& when (isstring(#contentFont)) {
font-family: #contentFont;
}
}
the output that I get from css is
div.content when (isstring(#contentFont)) {
font-family: Abel;
}
my problem is, the style is not applying for the div.content, not sure what i am doing wrong. Any help would be greatly appreciated.
As discussed in the comments, you're using version 0.4.0 of lessphp – which doesn't seem to support the shorthand guard (when) syntax that you're trying to use.
It looks like it does support guards on mixins, however.
Try splitting your code into a mixin and a usage of this mixin, like this:
/* the mixin */
.fontIfString(#font) when (isstring(#font)) {
font-family: #font;
}
/* usage */
#contentFont: "hello";
div.content {
.fontIfString(#contentFont);
}
Is there a way to style an ID based on a specific word in the ID name?
If I have something like this:
<div id="name-of-id.1234">Something</div>
<div id="name-of-id.5678">Something</div>
<div id="name-of-id.4321">Something</div>
Normally I'd style it like this:
div#name-of-id\.1234,
div#name-of-id\.5678,
div#name-of-id\.4321 {
color: #F0F;
}
But I'd MUCH RATHER do something like this:
div[# contains the word "name-of-id"] {
color: #F0F;
}
Is there a way to target a specific word in an ID like that?
I have very limited access to the html - I can add scripts/styles to the layout, but that's about it.
Use the CSS3 prefix substring matching attribute selector:
div[id^="name-of-id"] {
color: #F0F;
}
It is supported by all current browsers. For support in older version of IE, use the Selectivizr polyfill. There is also a selector for suffixes ([id$="..."]) and for general substrings ([id*="..."]).
If you can add javascript (and you use jQuery), you could add something like this:
$('div').each(function(){
if(this.id.match('name-of-id')) {
$(this).addClass('someClass');
}
});
Without jQuery, you could do:
var elems = document.getElementsByTagName('div');
for(var i=0; i<elems.length; i++) {
if(this.id.match('name-of-id')) {
this.className = this.className + 'someClass';
}
}
And then style them with a class:
.someClass {
/* your CSS styles */
}
Granted, running $('div') would be slow (as far as javascript is concerned) if your page contains a lot of them, so if you could narrow that selector down, this might be a more viable solution.
More to the point, there isn't a method I'm aware of to match partial ID names in CSS alone.
Please dont mind for adding a vulnarable content as below.
jffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
I have a multiline html text editor(tiny mce). When a user enters unappropriate words, as i entered above!. It will be saved properly in database. When i am trying to display the same data using a label. The displayed data disturbs the page design.
How can i fix this issue?
Please provide me a solution for this.
Thanks in advance
Regards,
Madhu BN
If it's about disturbing the page design when redisplaying the user's input and if the input is "inappropriate" then apply a CSS style to cut it off by using overflow:hidden.
<style>
.fixed { overflow:hidden; }
</style>
Then apply it to the div or container:
<div class="fixed" style="width:100px">The following input is really long and invalid.
fffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</div>
This ensures the page layout is not disturbed. In the above example 100px is adhered to no matter the unbreaking length of the invalid text.
Edits:
If you want the wrapping behaviour try using CSS word-wrap: break-word;
<style>
.fixed {
word-wrap: break-word;
}
</style>
Or even put them both together to be really safe across browsers.
<style>
.fixed {
overflow:hidden;
word-wrap: break-word;
}
</style>
If you use PHP to print out the text, check out the wordwrap function.
Try inserting into the string. It's the HTML element for the "soft hyphen".
If using PHP, print(wordwrap($string, 75, ''));
More info on SO: Soft hyphen in HTML (<wbr> vs. )
This is a crossbrowser solution that I was looking at a little while ago that runs on the client and using jQuery:
(function($) {
$.fn.breakWords = function() {
this.each(function() {
if(this.nodeType !== 1) { return; }
if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') {
//Lazy Function Definition Pattern, Peter's Blog
//From http://peter.michaux.ca/article/3556
this.runtimeStyle.wordBreak = 'break-all';
}
else if(document.createTreeWalker) {
//Faster Trim in Javascript, Flagrant Badassery
//http://blog.stevenlevithan.com/archives/faster-trim-javascript
var trim = function(str) {
str = str.replace(/^\s\s*/, '');
var ws = /\s/,
i = str.length;
while (ws.test(str.charAt(--i)));
return str.slice(0, i + 1);
};
//Lazy Function Definition Pattern, Peter's Blog
//From http://peter.michaux.ca/article/3556
//For Opera, Safari, and Firefox
var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false);
var node,s,c = String.fromCharCode('8203');
while (dWalker.nextNode()) {
node = dWalker.currentNode;
//we need to trim String otherwise Firefox will display
//incorect text-indent with space characters
s = trim( node.nodeValue ).split('').join(c);
node.nodeValue = s;
}
}
});
return this;
};
})(jQuery);
In javascript, add \u200b - Zero Width Space before displaying it
YOURTEXT=YOURTEXT.replace(/(.)/g,"\u200b$1");
You could use InsertAt repeatedly to achieve #Ryan's solution, or you could perform validation to prevent such malformed data from reaching the database.
Regular expressions would also make this available to put the soft-hyphen in.
It can be fixed with a little CSS using overflow-x (lots of cool examples after link).
Just make sure you specify a width, otherwise overflow-x won't do you any good.
Try it here
<style>
div{
width: 105px;
overflow-x: hidden;
float: left;
margin: 10px;
padding: 4px;
background: orange;
}
</style>
<div>WAYTOOLONGTOBESHOWN</div>
<div>WAYTOOLONGTOBESHOWN</div>