CSS

Yes it works and no, we can't

Before you, like me, fire up Safari and start editing some CSS, I have bad news: no, it doesn't work on the web. As well it shouldn't. But it also doesn't work by default in an app using WKWebView, you have to toggle a setting in WKPreferences called useSystemAppearance... and it's private. So if you use it, say goodbye to App Store approval.

Who cares?

It's an interesting piece of trivia but no-one outside of Apple can use it.

… ffs 🤦

Hello everyone good to see there's a CSS community so it's time to start trying to break stuff.

Basically I am a Grid novice who has the classic HTML grid example:

<div class="grid">

  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  ...
</div>

For which I've posted a codepen.

My problem is, I want to make it so that the number of columns adjusts as multiples of a given basis I want. Basically I'd expect this part to have worked:

div.grid.notworks {
  grid-template-columns: repeat(3n, 90px); /* :( */
}

(note the 3n, not 3; like in eg.: nth-child)

Such that the container will reflow itself to host 3, 6, 9, 12, ... columns rather than 1, 2, 3, ... (as it would be on flex) or only specifically 3, as it would be with (what I understand is) the normal repeat expression in div.grid.works.

Is this possible in CSS? If yes: teach me your CSS and Firefox secrets senpai. If not: is this planned / requested?

Tags in case this helps? I hear this is the trend in the fediverse. #css #grid-layout

cross-posted from: https://lemmy.world/post/31789585

CSS for Inverting Only Bright Images in Obsidian

Hello, I'm looking for CSS code that can invert only bright images in Obsidian. Could you provide me with a script or guidance on how to achieve this? I'm not familiar with CSS, but I'd appreciate any help or clarification on the process

Thanks in advance

cross-posted from: https://lemmy.world/post/31789585 Please see the cross-post as it is updated.

Hey guys!

I’ve got something awesome for you—Tailwind Animations Examples, a brand-new collection of cool, ready-to-use animations built with Tailwind CSS.

🌟 Features

• Complex animations made simple.
• Copy & paste ready code.
• Regularly updated with fresh animations.

🎯 Perfect for developers and designers who want to save time and create stunning UIs!

Check it out now!👇

https://github.com/canopas/tailwind-animations-examples

Making a site JavaScript-less with bootstrap but the CSS is kicking my ass- I do the code directly as it is meant to be, then I try to add one thing and it breaks. I'm gripping on w3schools for dear life and I just can't seem to wrap my head around anything other than the basics. CSS is pain ESPECIALLY when I'm doing it on an external sheet. (I don't want to do internal because all the text gets overwhelming.) Anyone have some ideas to help with this?

Edit: So I realized the browser tool thing is really easy for visuals + that BOOTSTRAP IS INSANELY VAST. For just about every CSS element theirs another 1.5k sub rules which is great for getting specific but not great when you are basically creating a rule for a already ruled element that you have no way of finding easily. Bootstrap is just a functionality CSS sheet I think and not the equivalent to a HTML DLC

(Image is my CSS sheet compared to the crazy amount of CSS sub sheets that exist in bootstrap. My measly little 16 rules look pathetic)

Hi everyone,

I have something like this

<div id="container">

    <div>
        <div class="foobar"></div>
    </div>

    <div>
        <div class="foobar"></div>
    </div>

    <div>
        <div class="foobar"></div>
        <div class="barfoo"></div>
    </div>

    <div>
        <div class="foobar"></div>
    </div>

    <div>
        <div class="foobar"></div>
    </div>

<div>

I would like to select all the #container > div (the childs of container)

that do not have a div.barfoo in their childs.

is it possible with CSS ?

I'm at

#container> div :not(div.barfoo) {} 

but this is not working, and will select anyway #container > div > div

Any ideas ?

Hi everyone,

I would like one of my div to have an background-attachment: fixed

But the background still scroll 😤

This div is under html body div div div div div

and it CSS properties are

#TheDiv {
    min-height: 100vh;
    min-width: 100vw;
    background-image: url('/anImage.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    left: 0;
    padding: 40px;
    box-sizing: border-box }

Any Ideas, what could cause the background to scroll anyway ?

Thanks

Hi,

No matter what I try

<style>
.FlexColumn {display: flex;flex-flow: column nowrap }
</style>

<div class="FlexColumn">
	<div>X</div>
	<div>X</div>
	<div>X</div>
	<div>X</div>
	<div>X</div>
</div>

<!-- I tried many CSS trick here... -->
<div>
   <span>X</span><br><span>X</span><br><span>X</span><br><span>X</span>
</div>

I always get a vertical gap between the characters !

Any ideas ?

Thanks.

When I use the --sourcemap argument in the CLI to generate the CSS builds with sourcemaps, when the CSS uses @include, it does not update the path and therefore will not work.

In the code below, the builds are stored in the dist directory, while the CSS source code is stored in the src directory.

This is my simple code to reproduce this...

- src/
   - stylesheet.css
- dist
   - my-package.css
   - my-package.css.map
- demo.html
- bundle.css
- package.json

bundle.css

@import 'src/stylesheet.css';

demo.html

<link rel="stylesheet" href="dist/my-package.css">

package.json

{
  "name": "my-package",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
   "build": "lightningcss --sourcemap bundle.css -o dist/my-package.css"
  },
  "devDependencies": {
    "lightningcss-cli": "^1.25.1"
  }
}

src/stylesheet.css

body {
	background-color: red;
}

dist/my-package.css output

@import "src/stylesheet.css";

/*# sourceMappingURL=dist/my-package.css.map */

What I expected from the dist/my-package.css output

@import "../src/stylesheet.css";

/*# sourceMappingURL=dist/my-package.css.map */

Does anyone know why this is the outcome? Any help will be most appreciated.