ExLisper Site
  • Communities
  • Create Post
  • Create Community
  • heart
    Support Lemmy
  • search
    Search
  • Login
  • Sign Up
Pro@programming.dev to Technology@lemmy.worldEnglish · 9 days ago

You no longer need JavaScript: an overview of what makes modern CSS so awesome

lyra.horse

external-link
message-square
20
link
fedilink
  • cross-posted to:
  • Technology@programming.dev
158
external-link

You no longer need JavaScript: an overview of what makes modern CSS so awesome

lyra.horse

Pro@programming.dev to Technology@lemmy.worldEnglish · 9 days ago
message-square
20
link
fedilink
  • cross-posted to:
  • Technology@programming.dev
You no longer need JavaScript
lyra.horse
external-link
An overview of what makes modern CSS so awesome.

cross-posted from: https://programming.dev/post/36492805

Comments
  • Lobsters.
alert-triangle
You must log in or # to comment.
  • Clay_pidgin@sh.itjust.works
    link
    fedilink
    English
    arrow-up
    41
    ·
    9 days ago

    Is it finally possible to align things on the first try with CSS?

    • dreadbeef@lemmy.dbzer0.com
      link
      fedilink
      English
      arrow-up
      9
      ·
      9 days ago

      https://build-your-own.org/blog/20240813_css_vertical_center/

      • Clay_pidgin@sh.itjust.works
        link
        fedilink
        English
        arrow-up
        1
        ·
        edit-2
        9 days ago

        Lol, I am on chromium 138 and it still doesn’t work!

        Nevermind, it was vertical centering. I see. Progress!

        • dreadbeef@lemmy.dbzer0.com
          link
          fedilink
          English
          arrow-up
          3
          ·
          9 days ago

          horizontal centering is justify-content: center

          • tensor_nightly69@lemmy.world
            link
            fedilink
            English
            arrow-up
            9
            ·
            9 days ago

            If display is flex.

            • Victor@lemmy.world
              link
              fedilink
              English
              arrow-up
              2
              ·
              8 days ago

              Goes without saying.

    • Victor@lemmy.world
      link
      fedilink
      English
      arrow-up
      2
      ·
      8 days ago

      Depends on your knowledge, of course. 👍

  • technocrit@lemmy.dbzer0.com
    link
    fedilink
    English
    arrow-up
    14
    ·
    8 days ago

    Clickbait. Actual less sensational point is in the text:

    Not every site needs JavaScript.

    • sugar_in_your_tea@sh.itjust.works
      link
      fedilink
      English
      arrow-up
      3
      ·
      7 days ago

      Exactly!

      The one I build for work definitely does since we do things like manipulate 3D models. The majority of sites just present information and costs would go down significantly if they used a static site generator.

  • CookieOfFortune@lemmy.world
    link
    fedilink
    English
    arrow-up
    11
    ·
    9 days ago

    The problem with CSS is that it’s not very intuitive and too flexible. You need to know how display and position works to understand the basic centering a div example. If you forget to change the display to flex you don’t get an error, it’s still valid CSS. You can examine the element in the browser but you’ll need to know to look for the issue there.

    Then you’ll need to inline and block elements, etc.

    And it’s a pretty unique system in general.

  • addie@feddit.uk
    link
    fedilink
    English
    arrow-up
    11
    ·
    9 days ago

    The ability to do some basic calculations is what was missing in CSS from the start, IMHO. You don’t want paragraph text to be too narrow or too wide as it would become unreadable, so a rule like “at least 20 ems, and then whichever is smaller of 100% or 80 ems centered on the page”. But that required either really convoluted layout and rules, or just to work it out with JS after the page is loaded.

    Would have been even better if we’d got Donald Knuth involved in the early CSS efforts, with some LaTeX-like attention to the details. There’s no reason that computers can’t render beautiful text, but it’s rare for one person to be an expert typesetter and an expert programmer.

  • Octavio@lemmy.world
    link
    fedilink
    English
    arrow-up
    8
    ·
    8 days ago

    Yeah, of course you can add front end interactivity with css, but you still need JavaScript to run your server-side.

    If I told this to 2005 me he’d think I flipped my lid. 😜

    • clif@lemmy.world
      link
      fedilink
      English
      arrow-up
      3
      ·
      8 days ago

      2005: Because server side is PHP… Obviously.

    • sugar_in_your_tea@sh.itjust.works
      link
      fedilink
      English
      arrow-up
      1
      ·
      7 days ago

      Ew, I used node.js for years and I am very glad I stopped. There are much better options…

  • madcaesar@lemmy.world
    link
    fedilink
    English
    arrow-up
    5
    ·
    7 days ago

    The only language worse than JS is CSS…

  • sem@lemmy.blahaj.zone
    link
    fedilink
    English
    arrow-up
    4
    ·
    9 days ago

    I have always been intimidated by CSS. Is a random background color possible without JavaScript? Like https://notpurple.com/ ?

    • dreadbeef@lemmy.dbzer0.com
      link
      fedilink
      English
      arrow-up
      7
      ·
      edit-2
      9 days ago

      How timely a question: https://webkit.org/blog/17285/rolling-the-dice-with-css-random/

      tl;dr: CSS is getting genuine random for exactly that soon

    • feef@lemmy.world
      link
      fedilink
      English
      arrow-up
      2
      ·
      edit-2
      9 days ago

      (Not my code)

      https://codepen.io/beben-koben/pen/eYPNew

      You might be able to use this idea and set the animation to 0 seconds.

      On second thought I don’t think it’ll work.

  • zod000@lemmy.dbzer0.com
    link
    fedilink
    English
    arrow-up
    2
    ·
    9 days ago

    Nice to see posts from lobsters making it over here

  • Washedupcynic@lemmy.ca
    link
    fedilink
    English
    arrow-up
    1
    ·
    9 days ago

    I learned to code CSS 25 years ago customizing pages in Neopets. It isn’t hard to learn at all. I was 20 at the time with no coding experience.

Technology@lemmy.world

technology@lemmy.world

Subscribe from Remote Instance

Create a post
You are not logged in. However you can subscribe from another Fediverse account, for example Lemmy or Mastodon. To do this, paste the following into the search field of your instance: !technology@lemmy.world

This is a most excellent place for technology news and articles.


Our Rules


  1. Follow the lemmy.world rules.
  2. Only tech related news or articles.
  3. Be excellent to each other!
  4. Mod approved content bots can post up to 10 articles per day.
  5. Threads asking for personal tech support may be deleted.
  6. Politics threads may be removed.
  7. No memes allowed as posts, OK to post as comments.
  8. Only approved bots from the list below, this includes using AI responses and summaries. To ask if your bot can be added please contact a mod.
  9. Check for duplicates before posting, duplicates may be removed
  10. Accounts 7 days and younger will have their posts automatically removed.

Approved Bots


  • @L4s@lemmy.world
  • @autotldr@lemmings.world
  • @PipedLinkBot@feddit.rocks
  • @wikibot@lemmy.world
Visibility: Public
globe

This community can be federated to other instances and be posted/commented in by their users.

  • 1.01K users / day
  • 4.45K users / week
  • 9.78K users / month
  • 18.3K users / 6 months
  • 1 local subscriber
  • 74.9K subscribers
  • 2.87K Posts
  • 25.2K Comments
  • Modlog
  • mods:
  • L3s@lemmy.world
  • enu@lemmy.world
  • Technopagan@lemmy.world
  • L4sBot@lemmy.world
  • BE: 0.19.12
  • Modlog
  • Legal
  • Instances
  • Docs
  • Code
  • join-lemmy.org