Member Avatar for otengkwaku

Hi Guys well in my course to design websites that are as graphical as posiblem. i normaly prefere designing the graphical element with photoshop and then sending them over to the web page.

Ontill i met CSS, i relised that day in and they out new standareds were evolving to the extent that most of the graphical effect to texts and others can be applied by css example shadow. my only problem is that this new standared are mostly enforced or use or implimented by firefox and may be safare. But the fact remains, if you want your site to look the same in every borwser using these new standarad of CSS will generate a problem. And to all my firends out there try not to use absolute value in your CSS since screen resolutions change by the day. try using percentages instead.

so i ask what do we do since not all the browsers uphold these new standarads

  • 3 Contributors
  • 2 Replies
  • 260 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

Short summary and practical path forward based on the thread (especially , and ): move from pixel-heavy Photoshop assets toward a "fallback-first" workflow where CSS and scalable web assets handle most UI decoration, and advanced styles are layered on only where the browser supports them. That keeps one codebase instead of branching into many browser-specific files, reduces fragile UA hacks, and preserves appearance across old and new browsers.

Use CSS feature queries to gate enhancements and keep sensible fallbacks. The pattern is: write a simple, functional baseline, then add enhanced rules inside @supports so modern browsers get the richer layout without breaking older ones.

/* baseline */
.layout { display: block; }

/* enhanced where Grid is supported */
@supports (display: grid) {
  .layout { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; }
}

Feature queries are documented and intended for progressive enhancement. (developer.mozilla.org)

Automate vendor-prefix and compatibility work with build tools instead of hand-written hacks. Use PostCSS + Autoprefixer in your pipeline so you author clean CSS and let the tool add prefixes and optional Grid fallbacks for legacy engines:

npm install --save-dev postcss-cli autoprefixer
npx postcss src/styles.css --use autoprefixer -o dist/styles.css

Autoprefixer uses real support data and keeps your source readable. (github.com)

Decide what to support by checking live compatibility data and your own analytics. Use Can I Use to understand global and per-feature support, then set Browserslist targets so your build tools (Autoprefixer, Babel, etc.) align with real users. If you must detect features at runtime for JS-driven fallbacks, use a feature-detection approach (Modernizr or small, focused tests) rather than user-agent sniffing. (caniuse.com)

Quick checklist

  • Export vectors (SVG) for UI art and icons; avoid rasterizing where possible.
  • Keep a single stylesheet, use @supports for enhancements, and add build-time polyfills only when needed.
  • Test targeted browsers (use caniuse + your analytics) and iterate on graceful fallbacks.

This approach reduces maintenance, improves consistency across browsers, and scales better than per-browser hacks.

Recommended Answers

All 2 Replies

Member Avatar for lps

Basically, CSS3 is really helping us out by providing more functions and effects such as border-radius and box-shadow.
But still, there have been people still using old browser such as Internet Explorer 7 which do not have their support in CSS3. Thus, it not the only way to style the whole document. We need multiple css file based on browser usage and more css hack such as * used for IE7 css hack etc.
Usage of different css file for different media resolution should also be include.

Member Avatar for drjohn

Use some browser specific code, and then to get your css3 to work in earlier versions of IE, use http://css3pie.com/.

google on cross-browser css shadows / corners, whatever other effect you want for the browser specific code to use.

for example

-webkit-box-shadow: 4px 4px 4px #ccc;
   -moz-box-shadow: 4px 4px 4px #ccc;
        box-shadow: 4px 4px 4px #ccc;

-webkit-border-radius: 10px;
   -moz-border-radius: 10px;
        border-radius: 10px;


behavior: url(PIE.htc);
Edited by drjohn because: added sample code
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.