Coffeehouse Thread

14 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

CSS Boxing/Content Editor?

Back to Forum: Coffeehouse
  • User profile image
    ManipUni

    I would really like to have a CSS editor that can handle content location etc using simple DIV elements etc. I currently have a handful of HTML editors that work just fine when using tables etc but if I want to do it with CSS I often have to do it entirely by hand (or in Visual Studio which is just as bad).

  • User profile image
    W3bbo

    Maybe learn CSS and do it by hand anyway?

     

    I know CSS inside out and I'd never use a visual editor for this kind of thing.

  • User profile image
    figuerres

    W3bbo said:

    Maybe learn CSS and do it by hand anyway?

     

    I know CSS inside out and I'd never use a visual editor for this kind of thing.

    SAD...  makes me wonder if the problem is the tools or the css/html definitions and rules...

     

    seems like it should be possible to have a visual tool that works and generates reasonable markup.

    possibly a good project for someone who is all for using CSS to help the less skilled get it right.

    perhaps a good thing for a person working on a degree to study and get credit for also....

     

  • User profile image
    W3bbo

    figuerres said:
    W3bbo said:
    *snip*

    SAD...  makes me wonder if the problem is the tools or the css/html definitions and rules...

     

    seems like it should be possible to have a visual tool that works and generates reasonable markup.

    possibly a good project for someone who is all for using CSS to help the less skilled get it right.

    perhaps a good thing for a person working on a degree to study and get credit for also....

     

    You can, but it's because you can't have an effective UI for the task.

     

    Making a visual XHTML+CSS editor that produces short, meaningful code, would require an excessively verbose UI that holds the user's hand in everything they do: as a learning tool it would be useful, but as you gain competence it really is easier just to write it by hand.

     

    One reason for this is because an element's appearance changes depending on its context in the document this is because of the power of CSS selectors.

     

    There already exis tools like this (like TopStyle Pro) but they're overpriced for what they do, imo.

  • User profile image
    ManipUni

    W3bbo said:

    Maybe learn CSS and do it by hand anyway?

     

    I know CSS inside out and I'd never use a visual editor for this kind of thing.

    Frankly it is taking too long.

     - Change single % value

     - Save

     - Check in browser

     - Repeat #50 more times...

  • User profile image
    W3bbo

    ManipUni said:
    W3bbo said:
    *snip*

    Frankly it is taking too long.

     - Change single % value

     - Save

     - Check in browser

     - Repeat #50 more times...

    Put your windows side-by-side. Memorising "Ctrl+S, Alt-Tab, F5" isn't too hard Tongue Out

  • User profile image
    ZippyV

    W3bbo said:
    ManipUni said:
    *snip*

    Put your windows side-by-side. Memorising "Ctrl+S, Alt-Tab, F5" isn't too hard Tongue Out

    I use Opera as the browser because it has the auto-refresh feature so I only have to do CTRL+S in my editor.

  • User profile image
    ManipUni

    Wow, I just re-read my OP, that is complete trash. Could I use "etc" more?

  • User profile image
    elmer

    figuerres said:
    W3bbo said:
    *snip*

    SAD...  makes me wonder if the problem is the tools or the css/html definitions and rules...

     

    seems like it should be possible to have a visual tool that works and generates reasonable markup.

    possibly a good project for someone who is all for using CSS to help the less skilled get it right.

    perhaps a good thing for a person working on a degree to study and get credit for also....

     

    Why do developers want to make it easier for non-developers ?

     

    I say, let's keep it arcane and a black-art... let's make it as difficult as possible, and make noobs pay for our expertise.

  • User profile image
    figuerres

    elmer said:
    figuerres said:
    *snip*

    Why do developers want to make it easier for non-developers ?

     

    I say, let's keep it arcane and a black-art... let's make it as difficult as possible, and make noobs pay for our expertise.

    Heck i want to make it easier *FOR ME*

     

    IMHO the CSS and HTML layout should be manageable with a visual tool as it is inherently visual in how we use it.

    there should be a NATURAL and SIMPLE way to interactivly layout a web page.

    if we can't build a tool that does that then it's IMHO a sign that HTML and CSS have flaws that should be fixed.

     

  • User profile image
    W3bbo

    figuerres said:
    elmer said:
    *snip*

    Heck i want to make it easier *FOR ME*

     

    IMHO the CSS and HTML layout should be manageable with a visual tool as it is inherently visual in how we use it.

    there should be a NATURAL and SIMPLE way to interactivly layout a web page.

    if we can't build a tool that does that then it's IMHO a sign that HTML and CSS have flaws that should be fixed.

     

    HTML+CSS is comparable to LaTeX in that it's a WYSIWYM system, so it's impossible to create a visual editor for it because it's entirely context-dependent.

     

    HTML3 was originally (unintentionally) WYSWIYG what with tables and images and all that, but we ended up with a complete mess of a platform, that's why they went for separation.

     

    I've already explained that a newb-friendly tool is possible, but it would be impractical for production use because it's more efficient and effective to write it by hand, and there already exist tools like this, Dreamweaver for example, or TopStyle.

  • User profile image
    elmer

    W3bbo said:
    figuerres said:
    *snip*

    HTML+CSS is comparable to LaTeX in that it's a WYSIWYM system, so it's impossible to create a visual editor for it because it's entirely context-dependent.

     

    HTML3 was originally (unintentionally) WYSWIYG what with tables and images and all that, but we ended up with a complete mess of a platform, that's why they went for separation.

     

    I've already explained that a newb-friendly tool is possible, but it would be impractical for production use because it's more efficient and effective to write it by hand, and there already exist tools like this, Dreamweaver for example, or TopStyle.

    Of course I was kidding about the arcane thing... well, mostly kidding.

     

    I agree that an editor is awkward, but perhaps something along the lines of a more interactive version of firebug ?

     

    At the moment, you can use firebug to manipulate CSS and immediately see the effects for the loaded page... taking that concept further, with a point and click interface for a displayed page, and writing back the cascaded changes to a specified file might be a way forward.

  • User profile image
    W3bbo

    elmer said:
    W3bbo said:
    *snip*

    Of course I was kidding about the arcane thing... well, mostly kidding.

     

    I agree that an editor is awkward, but perhaps something along the lines of a more interactive version of firebug ?

     

    At the moment, you can use firebug to manipulate CSS and immediately see the effects for the loaded page... taking that concept further, with a point and click interface for a displayed page, and writing back the cascaded changes to a specified file might be a way forward.

    In Firebug (or the DOM Inspector), when you alter a CSS property on an individual element you're only altering it in the DOM. The problem is "how do you want to express this single exception in your CSS file?" or "do you want to apply this exception to every similar element? and if so, what makes an element similar? similar class names? what if it's a composite class name or some complicated selector?"

     

    This is a nontrivial problem.

  • User profile image
    elmer

    W3bbo said:
    elmer said:
    *snip*

    In Firebug (or the DOM Inspector), when you alter a CSS property on an individual element you're only altering it in the DOM. The problem is "how do you want to express this single exception in your CSS file?" or "do you want to apply this exception to every similar element? and if so, what makes an element similar? similar class names? what if it's a composite class name or some complicated selector?"

     

    This is a nontrivial problem.

    Yes, I'm not suggesting it's an all-ecompassing magic solution, but my experience is that being able to see the stack of styles/rules being applied to a specific element, make changes, get immediate visual feedback, and then save the changes somewhere, gives most devs the information and hints they need, to work out the required solution in their CSS file(s)... for most issues.

     

    I do this with Firebug now... manipulate the CSS, immediately see the changes, and get my required "ah-hah" moment, and then go adjust my CSS files to make them do what is required. It's just that the Firebug interface for this, is a bit on the awkward side.

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.